:root{
  --bg:#13161b; --bg2:#1b222c;
  --cyan:#5a92c4; --green:#39ff9e; --amber:#ffcf4d; --red:#ff5c6c;
  --ink:#dbe4ee; --muted:#bac7d5; --line:rgba(90,146,196,.2);
  --glass:rgba(13,18,26,.48);
  --accent-dim:#2a5075; --accent-bright:#8fc2ec;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(1200px 700px at 70% -10%, #18202f 0%, var(--bg) 55%) fixed;
  color:var(--ink); font-family:'Rajdhani',system-ui,sans-serif; font-size:19.5px;
  overflow-x:hidden;
}
h1,h2,h3,.brand-mark,.stat-num{font-family:'Orbitron',sans-serif;letter-spacing:.06em}
.hidden{display:none !important}

.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(circle at 60% 0%,#000 0%,transparent 75%);opacity:.5}
.bg-scan{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(90,146,196,.035) 0 2px,transparent 2px 4px)}

/* Gleiche Glas-Sprache wie die Seitenleiste (2026-07-12): Lichtkante oben,
   Tiefenschatten. Der harte Chamfer-Zuschnitt (clip-path) bleibt bewusst
   NUR fuer .chamfer-Flaechen ohne ueberlaufende Kindelemente (Kopfleiste,
   Login-Karte) - auf den Steuerungs-Panels wuerde clip-path die Dropdown-
   Listen abschneiden, die sich unterhalb des Panel-Randes oeffnen. */
.glass{background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 45%),
    var(--glass);
  border-top:4px solid rgba(190,220,250,.65);
  border-left:2px solid rgba(160,190,220,.32);border-right:2px solid rgba(0,0,0,.75);
  border-bottom:4px solid rgba(0,0,0,.75);border-radius:14px;
  backdrop-filter:blur(44px) saturate(220%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.5),inset 0 0 0 1px rgba(90,146,196,.08),
    0 6px 0 -2px rgba(0,0,0,.8),0 100px 140px -30px rgba(0,0,0,1),0 44px 70px -20px rgba(0,0,0,.92),0 16px 28px -10px rgba(0,0,0,.7)}
.glass.chamfer{border-radius:0;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px))}

/* ---- Auth ---- */
.auth{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.auth-card{width:100%;max-width:420px;padding:2rem 1.8rem}
.brand{text-align:center;margin-bottom:1.4rem}
/* STARCOM-Logo (2026-07-13, Andreas' eigenes Artwork "Logo neu 3.png") -
   3D-Schriftzug mit Community-Badge im O, transparenter Hintergrund. Das
   Original ist fast komplett schwarz und ging auf dem dunklen Theme-
   Hintergrund unter (Andreas-Fund nach dem ersten rohen Einbau) - deshalb
   wird hier logo-light.png verwendet: eine reine RGB-Invertierung des
   Originals (Alpha unveraendert), erzeugt aus "Logo neu 3.png". Das
   Original bleibt die eigentliche Quelle/unveraendert. Dezenter Cyan-Glow
   passend zum Rest des Holo-Designs (gleiche Farbe wie .brand-mark vorher). */
.brand-logo{max-width:100%;height:auto;margin:0 auto .4rem;
  filter:drop-shadow(0 0 10px rgba(90,146,196,.45))}
/* Normaler Fluss statt Bleed-Ueberstand ueber den Kopfleisten-Rand (Andreas-
   Wunsch 2026-07-13: soll sauber IN die Kopfleiste passen, nicht darueber
   hinausragen). Etwas groesser (60px statt 46px) OHNE dass die Kopfleiste
   dadurch waechst: negativer Aussenabstand oben/unten gleicht den Hoehen-
   zuwachs im Flex-Zeilen-Layout (align-items:center) wieder aus - die
   Kopfleiste rechnet mit der (kleineren) Randbox, das Bild selbst darf
   optisch trotzdem etwas ueber die eigene Box hinausragen. */
.brand-logo-inline{height:60px;width:257px;vertical-align:middle;
  margin:-7px 0;
  position:relative;left:19px;top:8px;
  filter:brightness(1.18) drop-shadow(0 0 6px rgba(90,146,196,.45))}
.brand-sub{margin:0;color:var(--muted);font-size:15px;letter-spacing:.14em;text-transform:uppercase}
.tabs{display:flex;gap:8px;margin-bottom:1rem}
.tab{flex:1;padding:9px;background:transparent;border:1px solid var(--line);color:var(--muted);
  border-radius:10px;font-family:'Rajdhani';font-weight:600;letter-spacing:.05em;cursor:pointer;transition:.25s ease}
.tab.active{color:var(--bg);background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 18px rgba(90,146,196,.5)}
.form{display:flex;flex-direction:column;gap:.85rem}
.form label{display:flex;flex-direction:column;gap:5px;font-size:15px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.form input{background:rgba(3,7,15,.8);border:1px solid var(--line);border-radius:9px;color:var(--ink);
  padding:11px 12px;font-family:'Rajdhani';font-size:18px;outline:none;
  transition:border-color .42s ease,box-shadow .42s ease}
.form input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(90,146,196,.15);
  transition:border-color .3s ease,box-shadow .3s ease}
.btn-primary{margin-top:.3rem;padding:12px;
  background:linear-gradient(135deg, rgba(120,175,225,.4), rgba(30,60,90,.5));
  color:#eef4fb;border:0;border-top:3px solid rgba(205,230,252,.7);border-bottom:3px solid rgba(0,0,0,.55);
  border-radius:10px;font-family:'Orbitron';font-weight:700;font-size:16px;
  letter-spacing:.08em;cursor:pointer;backdrop-filter:blur(28px) saturate(240%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.35),
    0 0 34px rgba(90,146,196,.5),0 34px 54px -18px rgba(0,0,0,.85),0 12px 22px -10px rgba(0,0,0,.7);
  transition:filter .42s ease,box-shadow .42s ease}
.btn-primary:hover{filter:brightness(1.18);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.4),
    0 0 48px rgba(90,146,196,.7),0 40px 64px -18px rgba(0,0,0,.9),0 16px 28px -10px rgba(0,0,0,.75);
  transition:filter .3s ease,box-shadow .3s ease}
.msg{min-height:18px;margin:.9rem 0 0;text-align:center;font-size:15px;color:var(--amber)}
.msg.ok{color:var(--green)} .msg.err{color:var(--red)}

/* ---- App ---- */
.app{position:relative;z-index:1;width:100%;padding:1.1rem 1.8rem 3rem}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.1rem;margin-bottom:1rem;
  position:relative;z-index:5}
.brand-inline{font-family:'Orbitron';font-weight:700;color:#fff;letter-spacing:.06em}
.topbar-right{display:flex;align-items:center;gap:12px}
.who{color:var(--cyan);font-weight:600;font-size:16px}
/* Name oben rechts klickbar mit Dropdown (Andreas-Wunsch 2026-07-13: "auf
   seinen Namen klicken, dann Passwort-Reset und Abmelden darunter") - loest
   die vorherigen zwei einzelnen Buttons in der Kopfleiste ab. */
.user-menu-wrap{position:relative}
.user-menu-trigger{background:none;border:0;cursor:pointer;padding:2px 4px;border-radius:6px;
  transition:background .2s ease}
.user-menu-trigger:hover{background:rgba(90,146,196,.14)}
.user-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:30;min-width:170px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), transparent 45%),var(--glass);
  backdrop-filter:blur(28px) saturate(200%);border:1px solid var(--line);border-radius:10px;
  padding:6px;box-shadow:0 18px 40px -16px rgba(0,0,0,.8);display:flex;flex-direction:column;gap:2px}
.user-menu-item{background:none;border:0;color:var(--ink);text-align:left;padding:8px 10px;
  border-radius:7px;cursor:pointer;font-size:16px;transition:background .2s ease,color .2s ease}
.user-menu-item:hover{background:rgba(90,146,196,.18);color:#fff}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--muted);padding:7px 12px;
  border-radius:9px;cursor:pointer;font-family:'Rajdhani';font-weight:600;font-size:15px;
  transition:color .42s ease,border-color .42s ease}
.btn-ghost:hover{color:var(--ink);border-color:var(--cyan);transition:color .3s ease,border-color .3s ease}

/* ---- Seitliche Overlay-Leiste (2026-07-12 Redesign) ----
   Trigger-Steg liegt fest am linken Rand, kostet dauerhaft nur ~16px Breite.
   Die eigentliche Leiste ist ein Overlay (position:fixed, eigener Layer),
   verschiebt also nie den Seiteninhalt (Holoviewer etc. behalten volle Breite).
   Oeffnet bei Hover, schliesst wenn die Maus weg ist; Klick auf den Trigger
   toggelt zusaetzlich fuer Touch-Geraete (siehe app.js). */
.side-nav-wrap{position:fixed;left:0;top:var(--topbar-h,72px);bottom:0;z-index:60;
  display:flex;align-items:center;pointer-events:none}
.side-trigger{position:relative;width:34px;height:100%;pointer-events:auto;cursor:pointer;
  background:rgba(13,18,26,.4);border-right:1px solid rgba(90,146,196,.14);overflow:hidden;
  transition:background .3s ease}
.side-trigger:hover{background:linear-gradient(90deg, rgba(90,146,196,.12), transparent)}
.side-trigger-arrow{position:absolute;left:4px;top:50%;transform:translateY(-50%);width:26px;height:520px;
  clip-path:polygon(100% 0%, 100% 100%, 0% 50%);overflow:hidden;background:rgba(74,122,168,.12);
  filter:brightness(.5)}
.side-trigger-arrow .glow{position:absolute;top:-8px;left:-14px;width:54px;height:536px;border-radius:50%;
  background:radial-gradient(ellipse, rgba(150,205,245,.95), rgba(120,180,230,.4) 55%, transparent 75%);
  filter:blur(3px);animation:sideTriggerSweep 4.4s ease-in-out infinite}
@keyframes sideTriggerSweep{
  0%{transform:translateX(16px);opacity:0}
  22%{opacity:1}
  76%{opacity:1}
  100%{transform:translateX(-16px);opacity:0}
}
.side-nav-wrap:hover .glow,.side-nav-wrap.open .glow{animation:none !important;opacity:0 !important}

.tool-nav{position:absolute;left:34px;top:50%;transform:translate(-46px,-50%);
  width:max-content;max-height:88vh;overflow-y:auto;pointer-events:none;opacity:0;
  display:flex;flex-direction:column;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 45%),
    rgba(13,18,26,.7);
  backdrop-filter:blur(26px) saturate(200%);
  border-top:1px solid rgba(160,190,220,.32);
  border-left:1px solid rgba(160,190,220,.18);
  border-right:1px solid rgba(0,0,0,.4);
  border-bottom:1px solid rgba(0,0,0,.4);
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  box-shadow:0 60px 90px -20px rgba(0,0,0,.95), 0 20px 34px -14px rgba(0,0,0,.8), 0 2px 0 rgba(0,0,0,.5);
  transition:opacity .38s ease, transform .38s ease}
.tool-nav::-webkit-scrollbar{width:6px}
.tool-nav::-webkit-scrollbar-thumb{background:rgba(90,146,196,.3);border-radius:4px}
.tool-nav::-webkit-scrollbar-track{background:transparent}
.side-nav-wrap:hover .tool-nav,.side-nav-wrap.open .tool-nav{
  opacity:1;transform:translate(0,-50%);pointer-events:auto}

.tool-nav-cut{height:1px;margin:6px 14px;background:rgba(120,150,180,.22);flex-shrink:0}

.tool-btn{position:relative;overflow:hidden;background:transparent;border:0;
  border-bottom:1px solid rgba(120,150,180,.14);color:var(--muted);
  padding:9px 38px;cursor:pointer;font-family:'Space Grotesk',sans-serif;font-weight:400;
  font-size:15px;text-align:center;white-space:nowrap;flex-shrink:0}
.tool-nav .tool-btn:last-child{border-bottom:0}
.tool-btn .tb-glow{position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(90,146,196,.16), rgba(90,146,196,.02));
  opacity:0;transition:opacity .24s ease .04s;pointer-events:none}
.tool-btn:hover .tb-glow{opacity:1}
.tool-btn .tb-led{position:absolute;left:0;top:7px;bottom:7px;width:1.5px;border-radius:2px;
  background:linear-gradient(180deg, transparent, var(--accent-bright) 15%, var(--accent-bright) 85%, transparent);
  opacity:0;box-shadow:0 0 8px 1px rgba(90,170,230,.7),0 0 2px rgba(200,230,255,.9);
  transition:opacity .14s ease}
.tool-btn:hover .tb-led{opacity:1;animation:tbLedBreathe 1.4s ease-in-out infinite}
.tool-btn .tb-label{position:relative;display:block;transition:color .24s ease .04s}
.tool-btn:hover .tb-label{color:var(--ink)}
.tool-btn.active{background:linear-gradient(90deg, rgba(90,146,196,.16), rgba(90,146,196,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.3)}
.tool-btn.active .tb-led{opacity:1}
.tool-btn.active .tb-label{color:#eef4fb}
@keyframes tbLedBreathe{0%,100%{opacity:.55}50%{opacity:1}}

.layout{display:grid;grid-template-columns:320px 1fr;gap:1rem;align-items:start}
.app-footer{position:fixed;left:0;right:0;bottom:8px;z-index:50;text-align:center;
  padding:0 100px;font-size:12px;color:var(--muted);opacity:.7;pointer-events:none}

.community-badge{position:fixed;right:14px;bottom:6px;z-index:51;width:76px;height:76px;
  pointer-events:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.4))}
@media(max-width:760px){.community-badge{width:60px;height:60px}}
.panel{padding:1.1rem 1.2rem;min-height:120px}
#result{min-width:0}
#controls h2{font-size:17px;margin:0 0 .5rem;color:var(--cyan);letter-spacing:.1em;text-transform:uppercase}
.tool-desc{color:var(--muted);font-size:16.5px;line-height:1.6;margin:0 0 1.1rem;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.tool-desc p{margin:0 0 .65rem}
.tool-desc p:last-child{margin-bottom:0}
.tool-desc b{color:var(--ink);font-weight:600}
#controls label{display:flex;flex-direction:column;gap:5px;font-size:13.5px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:.7rem}
#controls input,#controls select{background:rgba(3,7,15,.8);border:1px solid var(--line);border-radius:8px;
  color:var(--ink);padding:9px 10px;font-family:'Rajdhani';font-size:17px;outline:none;
  transition:border-color .42s ease,box-shadow .42s ease}
#controls input:focus,#controls select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(90,146,196,.15);
  transition:border-color .3s ease,box-shadow .3s ease}
.run-btn{width:100%;margin-top:.4rem;padding:11px;
  background:linear-gradient(135deg, rgba(120,175,225,.4), rgba(30,60,90,.5));
  color:#eef4fb;border:0;border-top:3px solid rgba(205,230,252,.7);border-bottom:3px solid rgba(0,0,0,.55);
  border-radius:9px;font-family:'Orbitron';font-weight:700;letter-spacing:.06em;
  cursor:pointer;backdrop-filter:blur(28px) saturate(240%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.35),
    0 0 30px rgba(90,146,196,.45),0 30px 48px -16px rgba(0,0,0,.85),0 10px 20px -10px rgba(0,0,0,.7);
  transition:filter .42s ease,box-shadow .42s ease}
.run-btn:hover{filter:brightness(1.18);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.4),
    0 0 42px rgba(90,146,196,.65),0 36px 58px -16px rgba(0,0,0,.9),0 14px 24px -10px rgba(0,0,0,.75);
  transition:filter .3s ease,box-shadow .3s ease}

.placeholder{color:var(--muted);text-align:center;padding:2.5rem 1rem}
.result-head{font-family:'Orbitron';color:#fff;font-size:19.5px;margin:0 0 .3rem;letter-spacing:.04em}
.result-sub{color:#fff;font-size:17px;font-weight:700;margin:0 0 1rem;letter-spacing:.04em}

/* Auffaellige Extra-Hervorhebung fuer die "Beste Marge pro SCU"-Sektion
   (Andreas-Wunsch 2026-07-12: "3x hinschauen muessen, um das zu sehen") -
   deutlich groesser als normale result-sub-Ueberschriften plus ein
   langsames Cyan/Gold-Farbatmen, damit der Blick automatisch dorthin faellt. */
.margin-glow{font-size:20px !important;letter-spacing:.04em;
  text-transform:uppercase;margin:0 0 1rem;animation:margin-breathe 3.2s ease-in-out infinite}
@keyframes margin-breathe{
  0%,100%{color:var(--cyan);text-shadow:0 0 10px rgba(90,146,196,.55)}
  50%{color:var(--amber);text-shadow:0 0 14px rgba(255,207,77,.65)}
}
@media(prefers-reduced-motion:reduce){.margin-glow{animation:none;color:var(--cyan);text-shadow:0 0 10px rgba(90,146,196,.5)}}

/* Nur die Farbanimation von margin-breathe, ohne dessen Groesse/Grossschrift/
   Aussenabstand - fuer Stellen ausserhalb von Ueberschriften wie den
   Beta-Tester-Button in der Kopfleiste (Andreas-Wunsch 2026-07-12: soll
   "genau so die Farbe wechseln" wie die Beta-Tester-Ueberschrift). */
.color-breathe{animation:margin-breathe 3.2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.color-breathe{animation:none;color:var(--cyan);text-shadow:0 0 10px rgba(90,146,196,.5)}}
.loading{color:var(--cyan);text-align:center;padding:2rem 1rem 0;letter-spacing:.1em;animation:pulse 1s infinite}
.loading-note{color:var(--muted);text-align:center;padding:.5rem 1rem 2rem;font-size:15.5px}
@keyframes pulse{50%{opacity:.4}}
.err-box{color:var(--red);border:1px solid rgba(255,92,108,.4);border-radius:10px;padding:1rem;background:rgba(255,92,108,.06)}

.stat-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:1rem}
.stat{flex:1;min-width:120px;background:linear-gradient(180deg, rgba(255,255,255,.1), transparent 50%),rgba(3,7,15,.55);
  border-top:4px solid rgba(190,220,250,.55);border-left:2px solid rgba(160,190,220,.28);
  border-right:2px solid rgba(0,0,0,.65);border-bottom:4px solid rgba(0,0,0,.65);
  border-radius:10px;padding:.7rem .8rem;backdrop-filter:blur(24px) saturate(220%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(0,0,0,.45),0 46px 66px -20px rgba(0,0,0,.92),0 16px 26px -12px rgba(0,0,0,.75)}
.stat-label{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.stat-num{font-size:21px;color:var(--green);margin-top:2px;text-shadow:0 0 12px rgba(57,255,158,.4)}

.card{border-top:4px solid rgba(190,220,250,.5);border-left:2px solid rgba(160,190,220,.26);
  border-right:2px solid rgba(0,0,0,.65);border-bottom:4px solid rgba(0,0,0,.65);
  border-radius:11px;padding:.85rem 1rem;margin-bottom:.7rem;
  background:linear-gradient(180deg, rgba(255,255,255,.08), transparent 50%),rgba(6,11,20,.5);
  backdrop-filter:blur(24px) saturate(220%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.1),inset 0 -2px 0 rgba(0,0,0,.45),0 50px 74px -22px rgba(0,0,0,.95),0 18px 30px -14px rgba(0,0,0,.8);
  transition:border-color .42s ease,box-shadow .42s ease}
.card.rank{border-left:3px solid var(--cyan)}
.card-title{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.card-title b{color:#fff;font-weight:600;font-size:18px}
.card-title .val{color:var(--green);font-family:'Orbitron';font-weight:500;font-size:17px;white-space:nowrap}
.card-title .val.muted{color:var(--muted);font-size:17px}
.card-detail{color:var(--muted);font-size:16.5px;font-weight:500;margin-top:4px;line-height:1.6}
.card-detail.loot-only{color:var(--red);text-shadow:0 0 8px rgba(255,92,108,.55)}
.tag{display:inline-block;font-size:12.5px;padding:2px 9px;border-radius:12px;letter-spacing:.05em;
  border:1px solid var(--line);color:var(--cyan);margin-left:6px}
.tag.pledge{color:var(--amber);border-color:rgba(255,207,77,.4)}

/* ---- Fraktions-Farbcodierung (2026-07-12) ---- */
.fac-piracy{color:var(--red);font-weight:600;cursor:help}
.fac-bounty{color:var(--amber);font-weight:600;cursor:help}
.fac-friendly{color:var(--green);font-weight:600;cursor:help}
/* Orts-/Terminalname etwas heller als der umgebende Fliesstext (Andreas-
   Wunsch 2026-07-12) - nur der Name selbst, nicht Klammer-Kontext oder
   Fraktionsteil. */
.loc-name{color:var(--ink)}
.ship-badge{display:inline-flex;align-items:center;gap:5px;font-size:15px;font-weight:600;letter-spacing:.03em;
  padding:3px 10px;border-radius:10px;border:1px solid rgba(90,146,196,.5);color:var(--cyan);
  background:rgba(90,146,196,.08);margin-left:6px;white-space:nowrap}
.load-badge{display:inline-flex;align-items:center;gap:5px;font-family:'Orbitron';font-weight:600;
  font-size:15px;color:var(--amber);text-shadow:0 0 10px rgba(255,207,77,.55);
  border:1px solid rgba(255,207,77,.4);border-radius:12px;padding:3px 11px;margin-left:6px;white-space:nowrap}

.card.podium-1{border-color:var(--amber);box-shadow:0 0 16px rgba(255,207,77,.4);background:rgba(255,207,77,.06)}
.card.podium-2{border-color:rgba(255,207,77,.6)}
.card.podium-3{border-color:rgba(255,207,77,.35)}
.crown{margin-right:7px;font-size:18px}

.badge-grid{display:flex;flex-wrap:nowrap;gap:6px;margin-bottom:1.1rem}
.badge{flex:1 1 0;min-width:0;border-top:4px solid rgba(190,220,250,.5);border-left:2px solid rgba(160,190,220,.26);
  border-right:2px solid rgba(0,0,0,.65);border-bottom:4px solid rgba(0,0,0,.65);
  border-radius:9px;padding:.4rem .3rem;
  background:linear-gradient(180deg, rgba(255,255,255,.08), transparent 50%),rgba(6,11,20,.5);
  backdrop-filter:blur(20px) saturate(220%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.09),0 30px 44px -18px rgba(0,0,0,.92);text-align:center}
.badge-icon{font-size:16px;margin-bottom:2px}
.badge-title{font-weight:600;font-size:11px;color:var(--ink);white-space:normal;line-height:1.25;word-break:break-word}
.badge-desc{display:none}
.badge-progress{font-family:'Orbitron';font-size:10px;margin-top:3px;color:var(--muted)}
.badge.locked{opacity:.45;filter:grayscale(.6)}
.badge.unlocked{border-color:var(--amber);box-shadow:0 0 14px rgba(255,207,77,.3);background:rgba(255,207,77,.06)}
.badge.unlocked .badge-progress{color:var(--green)}
.leg{display:flex;justify-content:space-between;padding:6px 0;border-top:1px solid var(--line);font-size:16.5px}
.leg .who2{color:var(--muted);min-width:60px}
.leg-de{color:var(--muted);font-size:15px;font-style:italic;padding:0 0 4px}
.total{display:flex;justify-content:space-between;padding-top:9px;margin-top:4px;border-top:1px solid rgba(90,146,196,.4);
  font-family:'Orbitron';color:#fff}
.total-complete{border-left-color:var(--green) !important}
.total-complete .total span:last-child{color:var(--green)}
.total-incomplete{border-left-color:var(--amber) !important}
.total-incomplete .total span:last-child{color:var(--amber)}

.svc-grid{display:flex;flex-wrap:wrap;gap:7px;margin:.4rem 0 1rem}

/* ---- Fraktionen ---- */
.faction-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.8rem}
.faction-card{display:flex;flex-direction:column;gap:6px}
.faction-card .btn-ghost{align-self:flex-start;margin-top:4px}
.svc{font-size:15px;padding:4px 10px;border:1px solid var(--line);border-radius:8px;color:var(--cyan);background:rgba(90,146,196,.05)}
.ship-row{display:flex;justify-content:space-between;align-items:center;padding:.6rem .5rem;border-bottom:1px solid var(--line);border-radius:8px}
.ship-row.active{background:rgba(90,146,196,.1);border:1px solid rgba(90,146,196,.35)}
.ship-btns{display:flex;gap:8px;flex-shrink:0}
.ship-row .rm{background:transparent;border:1px solid rgba(255,92,108,.4);color:var(--red);border-radius:7px;
  padding:4px 9px;cursor:pointer;font-family:'Rajdhani'}
.ship-row .activate{background:transparent;border:1px solid var(--line);color:var(--cyan);border-radius:7px;
  padding:4px 9px;cursor:pointer;font-family:'Rajdhani';white-space:nowrap;transition:border-color .42s ease}
.ship-row .activate:hover{border-color:var(--cyan);transition:border-color .3s ease}
.ship-card{margin-bottom:.3rem}
.ship-note-row{padding:.3rem .5rem .6rem}
.ship-note-input{width:100%;background:rgba(3,7,15,.6);border:1px solid var(--line);border-radius:7px;
  padding:6px 10px;color:var(--ink);font-family:'Rajdhani';font-size:15px}
.ship-note-input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(90,146,196,.12)}
.ship-note-input::placeholder{color:var(--muted)}
.tag.active{color:var(--accent-bright);border-color:rgba(90,146,196,.4)}
@media(max-width:760px){.layout{grid-template-columns:1fr}}

/* ---- Eigenes Dropdown ---- */
.cx-select{position:relative;font-family:'Rajdhani';font-size:15px;outline:none}
.cx-select-display{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:rgba(3,7,15,.8);border:1px solid var(--line);border-radius:8px;color:var(--ink);
  padding:9px 10px;cursor:pointer;transition:border-color .42s ease;user-select:none}
.cx-select-display:hover{border-color:rgba(90,146,196,.5);transition:border-color .3s ease}
.cx-select:focus .cx-select-display{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(90,146,196,.15)}
.cx-select-arrow{color:var(--cyan);font-size:11px;flex-shrink:0}
.cx-select-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;
  background:linear-gradient(180deg, rgba(255,255,255,.12), transparent 45%),rgba(8,14,26,.9);
  border-top:4px solid rgba(190,220,250,.65);border-left:2px solid rgba(160,190,220,.3);
  border-right:2px solid rgba(0,0,0,.75);border-bottom:4px solid rgba(0,0,0,.75);border-radius:10px;
  backdrop-filter:blur(42px) saturate(220%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.14),0 80px 110px -24px rgba(0,0,0,1),0 26px 40px -16px rgba(0,0,0,.85),0 0 0 1px rgba(90,146,196,.08);
  max-height:280px;overflow:hidden;display:flex;flex-direction:column}
.cx-select-panel.hidden{display:none}
.cx-select-filter{margin:8px;padding:7px 9px;background:rgba(3,7,15,.8);border:1px solid var(--line);
  border-radius:7px;color:var(--ink);font-family:'Rajdhani';font-size:14px;outline:none;
  transition:border-color .42s ease}
.cx-select-filter:focus{border-color:var(--cyan);transition:border-color .3s ease}
.cx-select-list{overflow-y:auto;padding:4px}
.cx-select-option{padding:8px 10px;border-radius:6px;cursor:pointer;font-size:14px;color:var(--ink);
  transition:background .7s ease,color .7s ease}
.cx-select-option:hover{background:rgba(90,146,196,.12);color:#fff;transition:background .3s ease,color .3s ease}
.cx-select-option.sel{color:var(--accent-bright);background:rgba(90,146,196,.14)}
.cx-select-empty{padding:10px;color:var(--muted);font-size:13px;text-align:center}
.cx-select-list::-webkit-scrollbar{width:8px}
.cx-select-list::-webkit-scrollbar-thumb{background:rgba(90,146,196,.25);border-radius:4px}
.cx-select-list::-webkit-scrollbar-track{background:transparent}

/* ---- Konfigurator ---- */
.holo-panel{position:relative;margin-bottom:1.2rem;background:radial-gradient(circle at 50% 40%,rgba(90,146,196,.07),rgba(6,11,20,.4) 70%);
  border:1px solid var(--line);border-radius:14px;padding:.5rem;overflow:hidden}
.holo-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(90,146,196,.05) 0 2px,transparent 2px 4px);mix-blend-mode:screen}
.holo-frame{position:relative}
.holo-wrap{width:100%;aspect-ratio:16/9;max-height:max(70vh - 265px, 220px);display:flex;align-items:center;justify-content:center;
  cursor:grab;touch-action:none;outline:none}
.holo-wrap.grabbing{cursor:grabbing}
.holo-wrap:focus-visible{box-shadow:0 0 0 2px var(--cyan) inset;border-radius:10px}
.holo-svg,.holo-wrap canvas{width:100%;height:100%;display:block;filter:drop-shadow(0 0 6px rgba(90,146,196,.55))}
.holo-hint{text-align:center;font-size:13.5px;color:var(--muted);letter-spacing:.03em;padding:.4rem 0 .2rem}
.holo-scroll-hint{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);z-index:2;
  font-size:12.5px;color:var(--cyan);letter-spacing:.05em;padding:3px 12px;border-radius:12px;
  background:rgba(5,7,13,.55);pointer-events:none;animation:scrollHintPulse 2.2s ease-in-out infinite}
@keyframes scrollHintPulse{0%,100%{opacity:.4;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,4px)}}
.zone-section-title{font-family:'Orbitron';font-size:13.5px;color:var(--cyan);letter-spacing:.12em;
  margin:1rem 0 .5rem;opacity:.85}
.zone-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:.2rem}
.dash-link-row{margin:-.3rem 0 1rem}
.dash-news-link{display:block;text-decoration:none;color:inherit}
.dash-news-link:hover .card{border-color:rgba(90,146,196,.5);box-shadow:0 0 20px rgba(90,146,196,.18) inset;
  transition:border-color .3s ease,box-shadow .3s ease}

.news-ticker{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:10px;
  background:rgba(6,11,20,.6);padding:.5rem 0;margin-bottom:1.2rem;white-space:nowrap}
.news-ticker-track{display:inline-flex;align-items:center;animation:newsTickerScroll 55s linear infinite}
.news-ticker:hover .news-ticker-track{animation-play-state:paused}
.news-ticker-item{color:var(--ink);text-decoration:none;font-size:15.5px;letter-spacing:.02em;
  padding:0 .3rem;transition:color .42s ease,text-shadow .42s ease}
.news-ticker-item:hover{color:var(--cyan);text-shadow:0 0 8px rgba(90,146,196,.5);
  transition:color .3s ease,text-shadow .3s ease}
.news-ticker-sep{color:var(--cyan);opacity:.5;padding:0 1.1rem}
@keyframes newsTickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.slot-card{border-top:4px solid rgba(190,220,250,.55);border-left:2px solid rgba(160,190,220,.3);
  border-right:2px solid rgba(0,0,0,.65);border-bottom:4px solid rgba(0,0,0,.65);
  border-radius:12px;padding:.8rem;
  background:linear-gradient(180deg, rgba(255,255,255,.1), transparent 45%),rgba(8,14,26,.85);
  backdrop-filter:blur(24px) saturate(220%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.11),inset 0 0 24px rgba(90,146,196,.12),0 48px 68px -22px rgba(0,0,0,.92),0 16px 26px -12px rgba(0,0,0,.75);
  width:220px;flex:1 1 220px;max-width:260px;
  transition:border-color .42s ease,box-shadow .42s ease}
.slot-card:hover{border-color:rgba(90,146,196,.5);box-shadow:0 0 20px rgba(90,146,196,.18) inset;
  transition:border-color .3s ease,box-shadow .3s ease}
.slot-card.unsupported{opacity:.5;border-style:dashed}
.slot-card.filled{border-color:var(--amber);animation:slotFilledPulse 2.4s ease-in-out infinite}
@keyframes slotFilledPulse{
  0%,100%{box-shadow:0 0 10px rgba(255,207,77,.25) inset,0 0 6px rgba(255,207,77,.15)}
  50%{box-shadow:0 0 20px rgba(255,207,77,.5) inset,0 0 16px rgba(255,207,77,.4)}
}
.slot-label{font-family:'Orbitron';font-size:14px;color:var(--cyan);letter-spacing:.03em;margin-bottom:2px;
  text-shadow:0 0 10px rgba(90,146,196,.35)}
.slot-size{font-size:13px;color:var(--muted);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.06em}
.slot-note{font-size:14px;color:var(--muted);font-style:italic;line-height:1.4}
.mining-gadget-box{margin-top:.6rem;padding-top:.6rem;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:.5rem}
.mining-gadget-slot .slot-label{font-size:12.5px;opacity:.85}
.mining-gadget-note{font-size:11px;color:var(--amber);font-style:italic;line-height:1.35;margin-bottom:.1rem}
.mining-compare-panel{position:relative;width:100%;margin-bottom:1.2rem;
  background:radial-gradient(circle at 50% 30%,rgba(90,146,196,.07),rgba(6,11,20,.4) 70%);
  border:1px solid var(--line);border-radius:14px;padding:.65rem 1.2rem;box-shadow:0 0 0 1px rgba(90,146,196,.05),0 18px 50px -20px rgba(0,0,0,.8)}
.mining-compare-panel::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:14px;
  background:repeating-linear-gradient(0deg,rgba(90,146,196,.05) 0 2px,transparent 2px 4px);mix-blend-mode:screen}
.mining-compare-block{position:relative}
.mining-compare-block + .mining-compare-block{margin-top:.6rem;padding-top:.6rem;border-top:1px dashed var(--line)}
.mining-compare-title{font-size:12.5px;color:var(--ink);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.3rem}
.mining-compare-chart{width:100%;display:block;filter:drop-shadow(0 0 5px rgba(90,146,196,.35))}
.mining-compare-label{fill:var(--ink);font-size:13.5px;font-family:'Rajdhani';font-weight:600}
.mining-compare-lane-label{fill:#fff;font-size:11px;font-family:'Rajdhani';letter-spacing:.03em;opacity:.75;
  stroke:#000;stroke-width:2px;paint-order:stroke fill}
.mining-compare-sep{stroke:var(--line);stroke-width:1}
.mining-compare-value{fill:#fff;font-size:11px;font-family:'Rajdhani';
  stroke:#000;stroke-width:2px;paint-order:stroke fill;
  transition:x .56s cubic-bezier(.22,1,.36,1)}
.mining-compare-baseline{stroke:#fff;stroke-width:1.5;opacity:.85}
.mining-compare-bar-up,.mining-compare-bar-down,.mining-compare-bar-flat{
  transition:x .56s cubic-bezier(.22,1,.36,1),width .56s cubic-bezier(.22,1,.36,1),fill .44s ease,filter .44s ease}
.mining-compare-bar-up{fill:var(--green);filter:drop-shadow(0 0 3px rgba(57,255,158,.5))}
.mining-compare-bar-down{fill:var(--red);filter:drop-shadow(0 0 3px rgba(255,92,108,.5))}
.mining-compare-bar-flat{fill:var(--muted);filter:none}

.mining-material-section{margin-bottom:.6rem;padding-bottom:.6rem;border-bottom:1px dashed var(--line)}
.mining-material-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:.4rem}
.mining-material-title{font-size:12.5px;color:var(--ink);text-transform:uppercase;letter-spacing:.04em}
.mining-material-select{min-width:200px}
.mining-material-disclaimer{font-size:11px;color:var(--amber);font-style:italic;line-height:1.35;margin-bottom:.5rem}
.mining-material-rows{display:flex;flex-direction:column;gap:4px}
.mining-material-row{display:flex;align-items:baseline;gap:8px;font-size:14px;font-family:'Rajdhani'}
.mining-material-row .mm-label{color:var(--muted);min-width:110px}
.mining-material-row .mm-val{color:var(--ink)}
.mining-material-row .mm-delta-up{color:var(--green)}
.mining-material-row .mm-delta-down{color:var(--red)}
.mining-material-info{font-size:12.5px;color:var(--muted);margin-top:.3rem;line-height:1.4}
@media(max-width:900px){.holo-wrap{max-height:50vh}}

.holo-progress{display:flex;align-items:center;gap:.6rem;padding:.5rem 1rem 0}
.holo-progress-track{flex:1;height:6px;border-radius:4px;background:rgba(90,146,196,.12);overflow:hidden}
.holo-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--cyan),var(--green));
  transition:width .15s linear;box-shadow:0 0 8px rgba(90,146,196,.6)}
.holo-progress-pct{font-family:'Orbitron';font-size:12.5px;color:var(--cyan);min-width:34px;text-align:right}

.holo-term{font-family:monospace;font-size:16px;color:var(--green);text-align:center;
  background:rgba(3,7,15,.75);border:1px solid rgba(255,92,108,.4);border-radius:10px;
  padding:1.4rem 2rem;line-height:1.9;max-width:80%;
  box-shadow:0 0 30px rgba(255,92,108,.15);animation:holoTermFlicker 3.2s infinite}
.holo-term-big{position:relative;display:inline-block;font-family:'Orbitron';font-size:29.5px;font-weight:700;
  color:var(--red);letter-spacing:.08em;margin-bottom:.6rem;text-shadow:0 0 16px rgba(255,92,108,.7)}
.holo-term-big::before,.holo-term-big::after{content:attr(data-text);position:absolute;top:0;left:0;
  width:100%;background:transparent}
.holo-term-big::before{color:var(--cyan);clip-path:inset(0 0 55% 0);animation:glitchTop 3.6s infinite linear}
.holo-term-big::after{color:#0a0f1c;-webkit-text-stroke:1px var(--red);clip-path:inset(55% 0 0 0);
  animation:glitchBottom 3.6s infinite linear}
@keyframes glitchTop{
  0%,89%,100%{transform:translate(0,0)}
  90%{transform:translate(-4px,-2px)}
  91%{transform:translate(3px,1px)}
  92%{transform:translate(-3px,2px)}
  93%{transform:translate(2px,-1px)}
  94%{transform:translate(0,0)}
}
@keyframes glitchBottom{
  0%,89%,100%{transform:translate(0,0)}
  90%{transform:translate(4px,2px)}
  91%{transform:translate(-3px,-1px)}
  92%{transform:translate(3px,-2px)}
  93%{transform:translate(-2px,1px)}
  94%{transform:translate(0,0)}
}
.holo-term-err{color:var(--red)}
.holo-term-cursor{animation:holoTermBlink 1s step-end infinite}
@keyframes holoTermBlink{50%{opacity:0}}
@keyframes holoTermFlicker{
  0%,93%,100%{opacity:1;border-color:rgba(255,92,108,.4)}
  94%{opacity:.55;border-color:rgba(255,92,108,.8)}
  96%{opacity:1}
  97%{opacity:.7}
}

.price-stability-list{display:flex;flex-direction:column;gap:2px}
.price-stability-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:6px 2px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.price-stability-row:last-child{border-bottom:none}
.price-stability-name{color:var(--ink);font-size:16px}
.price-stability-detail{color:var(--ink);font-size:14px;white-space:nowrap}
.price-stability-swing{color:var(--cyan);font-family:'Orbitron';font-size:17px;font-weight:600}

/* ---- Beta-Tester-Danksagung (2026-07-12) ---- */
.betatester-head{font-size:34px !important;font-weight:700;text-align:center;letter-spacing:.05em;
  text-transform:uppercase;margin:0 0 .5rem;animation:margin-breathe 3.2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.betatester-head{animation:none;color:var(--cyan);text-shadow:0 0 10px rgba(90,146,196,.5)}}
.betatester-sub{color:var(--muted);font-size:17px;text-align:center;max-width:560px;margin:0 auto 1rem;line-height:1.6}
.betatester-list{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:.6rem}
.betatester-row{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0;
  border-bottom:1px solid var(--line);width:100%;max-width:360px}
.betatester-row:last-child{border-bottom:none}
.betatester-name{color:var(--ink);font-family:'Orbitron';font-size:21.5px;letter-spacing:.03em;text-align:center}

.salvage-checkbox-row{flex-direction:row!important;align-items:center;gap:8px!important}
.salvage-checkbox-row input[type="checkbox"]{accent-color:var(--cyan);width:16px;height:16px}

.loadout-save-row{display:flex;gap:8px;margin-bottom:.8rem}
.loadout-name-input{flex:1;min-width:0;background:rgba(3,7,15,.8);border:1px solid var(--line);border-radius:8px;
  padding:9px 12px;color:var(--ink);font-family:'Rajdhani';font-size:16px;
  transition:border-color .42s ease,box-shadow .42s ease}
.loadout-name-input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(90,146,196,.15);
  transition:border-color .3s ease,box-shadow .3s ease}
.loadout-save-btn{width:auto;padding:9px 18px}
.loadout-card .card-title{margin-bottom:2px}

.result-head-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:-9px;margin-bottom:9px}
.result-head-row .result-head,.result-head-row .result-sub{margin:0}
.loadout-search-input{min-width:220px;background:rgba(3,7,15,.8);border:1px solid var(--cyan);border-radius:8px;
  padding:13px 12px;color:var(--ink);font-family:'Rajdhani';font-size:16px}
.loadout-search-input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(90,146,196,.15)}
.loadout-search-input::placeholder{color:var(--muted)}
.loadout-actions{display:flex;gap:8px;margin-top:.5rem}
.loadout-actions .btn-ghost{padding:6px 14px;font-size:15px}
.loadout-del:hover{color:var(--red);border-color:rgba(255,92,108,.5)}

.price-chart-wrap{width:100%}
/* Hologramm-Look wie beim Schiffs-Viewer: radialer Cyan-Schimmer + feine
   Scanlines (Andreas-Wunsch 2026-07-09, "wie die Schiffe"). */
.price-holo-panel{position:relative;background:radial-gradient(circle at 50% 40%,rgba(90,146,196,.08),rgba(6,11,20,.4) 75%);
  border:1px solid var(--line);border-radius:12px;padding:.6rem;overflow:hidden}
.price-holo-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(90,146,196,.05) 0 2px,transparent 2px 4px);mix-blend-mode:screen}
.price-chart{width:100%;height:170px;display:block;position:relative;filter:drop-shadow(0 0 5px rgba(90,146,196,.5))}
.price-line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.price-line-sell{stroke:var(--green)}
.price-line-buy{stroke:var(--cyan)}
.price-chart-legend{position:relative;color:var(--muted);font-size:15px;margin-top:6px}
.price-chart-legend .price-line-sell{color:var(--green);font-weight:600}
.price-chart-legend .price-line-buy{color:var(--cyan);font-weight:600}
.price-chart-legend .trend-up{color:var(--green)}
.price-chart-legend .trend-down{color:var(--red)}

.price-chart-slider{position:relative;width:100%;margin-top:8px;accent-color:var(--cyan);cursor:pointer}
.price-chart-slider-hint{position:relative;color:var(--muted);font-size:13.5px;margin-top:2px}

.price-weekend-band{fill:rgba(90,146,196,.06)}
.price-grid-line{stroke:rgba(90,146,196,.16);stroke-width:1}
.price-axis-label{fill:var(--muted);font-size:9px;font-family:'Rajdhani'}

/* ---- Ein-/Aus-Schalter (Vergleich, Nur-Unterschiede-Filter) ---- */
.cx-switch-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 1rem}
.cx-switch-label{font-size:15px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.cx-switch{position:relative;width:40px;height:22px;border-radius:20px;background:rgba(127,147,173,.35);
  cursor:pointer;flex-shrink:0;outline:none;transition:background .42s ease}
.cx-switch.on{background:linear-gradient(90deg,var(--accent-dim),var(--cyan))}
.cx-switch:focus-visible{box-shadow:0 0 0 3px rgba(90,146,196,.35)}
.cx-switch-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#e9f6ff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .42s ease}
.cx-switch.on .cx-switch-knob{transform:translateX(18px)}
.cx-switch:hover{transition:background .3s ease}
.cx-switch.on .cx-switch-knob,.cx-switch .cx-switch-knob{transition:transform .18s ease}

/* ---- Loadout-Vergleich ---- */
.cmp-vs{color:var(--cyan);font-weight:700;text-transform:uppercase;font-size:13.5px;letter-spacing:.08em}
.cmp-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.cmp-table thead th{text-align:left;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line)}
.cmp-table thead th.cmp-col{text-align:right;color:var(--ink)}
.cmp-table tbody td{padding:10px;font-size:16.5px;border-bottom:1px solid rgba(90,146,196,.12)}
.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table tbody tr.cmp-same{opacity:.5}
.cmp-table tbody tr.hidden{display:none}
.cmp-table .cmp-stat{color:var(--muted)}
.cmp-table .cmp-val{text-align:right;font-weight:600;color:var(--ink)}
.cmp-table .cmp-val.cmp-win{color:var(--green)}
.cmp-table .cmp-val.cmp-lose{color:var(--red)}
@media(max-width:520px){.cmp-table{font-size:15px}.cmp-table tbody td{padding:8px 6px}}

/* ---- In-Tool Vor/Zurueck (2026-07-12) ---- */
.nav-history-btns{display:flex;gap:6px;margin-left:.8rem}
.nav-history-btn{background:transparent;border:1px solid var(--line);color:var(--cyan);
  border-radius:8px;width:32px;height:32px;cursor:pointer;font-size:16px;
  transition:border-color .42s ease,background .42s ease}
.nav-history-btn:hover:not(:disabled){border-color:var(--cyan);background:rgba(90,146,196,.1);
  transition:border-color .3s ease,background .3s ease}
.nav-history-btn:disabled{color:var(--muted);border-color:var(--line);opacity:.4;cursor:default}

/* ---- Globale Suche (Kopfleiste) ---- */
.global-search-wrap{position:relative;flex:1;max-width:420px;margin:0 1.2rem}
.global-search-input{width:100%;background:rgba(3,7,15,.8);border:1px solid var(--line);border-radius:9px;
  color:var(--ink);padding:8px 12px;font-family:'Rajdhani';font-size:16.5px;outline:none;
  transition:border-color .42s ease,box-shadow .42s ease}
.global-search-input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(90,146,196,.15);
  transition:border-color .3s ease,box-shadow .3s ease}
.global-search-input::placeholder{color:var(--muted)}
.global-search-flyout{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;
  background:linear-gradient(180deg, rgba(255,255,255,.08), transparent 45%),var(--glass);
  backdrop-filter:blur(28px) saturate(200%);border:1px solid var(--line);border-radius:10px;
  padding:6px;max-height:340px;overflow-y:auto;box-shadow:0 18px 40px -16px rgba(0,0,0,.8)}
.global-search-group{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding:6px 8px 2px}
.global-search-hit{padding:7px 8px;border-radius:7px;cursor:pointer;font-size:16.5px;color:var(--ink);
  transition:background .42s ease,color .42s ease}
.global-search-hit:hover{background:rgba(90,146,196,.18);color:#fff;transition:background .3s ease,color .3s ease}
.global-search-empty{padding:10px 8px;color:var(--muted);font-size:15.5px}
@media(max-width:760px){.global-search-wrap{display:none}}

/* ---- Passwort aendern ---- */
.change-pw-panel{position:relative;z-index:4;max-width:340px;margin:0 1.8rem 1rem auto;
  background:linear-gradient(180deg, rgba(255,255,255,.12), transparent 45%),var(--glass);
  border-top:4px solid rgba(190,220,250,.6);border-left:2px solid rgba(160,190,220,.3);
  border-right:2px solid rgba(0,0,0,.65);border-bottom:4px solid rgba(0,0,0,.65);
  border-radius:12px;padding:1rem 1.2rem;
  backdrop-filter:blur(48px) saturate(220%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.16),0 90px 120px -24px rgba(0,0,0,1),0 30px 44px -16px rgba(0,0,0,.85)}
.change-pw-panel .form{gap:.6rem}
.change-pw-panel .msg{margin:.4rem 0 0}

/* ---- Wiki (DE) ---- */
.wiki-search-input{width:100%;background:rgba(3,7,15,.8);border:1px solid var(--line);border-radius:9px;
  color:var(--ink);padding:9px 10px;font-family:'Rajdhani';font-size:17px;outline:none;
  transition:border-color .42s ease,box-shadow .42s ease}
.wiki-search-input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(90,146,196,.15);
  transition:border-color .3s ease,box-shadow .3s ease}
.wiki-hit-card{display:flex;gap:12px;cursor:pointer;align-items:flex-start;
  transition:border-color .42s ease,box-shadow .42s ease}
.wiki-hit-card:hover{border-color:rgba(90,146,196,.5);box-shadow:0 0 16px rgba(90,146,196,.15);
  transition:border-color .3s ease,box-shadow .3s ease}
.wiki-hit-thumb{width:64px;height:64px;object-fit:cover;border-radius:8px;flex-shrink:0;border:1px solid var(--line)}
.wiki-hit-body{min-width:0;flex:1}
.wiki-article-thumb{width:100%;max-height:320px;object-fit:cover;border-radius:12px;margin-bottom:1rem;
  border:1px solid var(--line)}
.wiki-article-body{font-size:17px;line-height:1.7;color:var(--ink)}
.wiki-article-body p{margin:0 0 .9rem}
.wiki-article-body p:last-child{margin-bottom:0}
.wiki-article-body a{color:var(--cyan);text-decoration:underline}
.wiki-attribution{margin-top:1rem;color:var(--muted);font-size:14px}
.wiki-attribution a{color:var(--cyan)}

/* ---- Raffinerie-Verarbeitungsmethoden ---- */
.refining-methods-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.7rem}
.refining-method-card .card-title{margin-bottom:6px}
.rm-row{display:flex;justify-content:space-between;align-items:center;font-size:15.5px;color:var(--muted);padding:2px 0}
.rm-dots{display:inline-flex;gap:4px}
.rm-dot{width:9px;height:9px;border-radius:50%;background:rgba(127,147,173,.3);border:1px solid var(--line)}
.rm-dot.filled{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 6px rgba(90,146,196,.5)}

/* ================= IRIS - Onboarding-Guide (2026-07-13) =================
   Uebertragen aus dem abgenommenen Artifact-Entwurf, angepasst fuer den
   echten Seiten-Kontext: .iris-widget ist ihr FESTER Andock-Platz (nach
   Tour-Ende fliegt sie dorthin und bleibt dort klickbar sichtbar - Klick
   startet die Tour erneut). PLATZ NOCH VORLAEUFIG (Andreas-Wunsch
   2026-07-13: unten rechts kollidierte mit dem Community-Badge im Footer -
   erstmal oben in die Kopfleiste, Andreas waehlt die finale Stelle selbst,
   sobald er das Tool vor sich hat - einfach top/right unten anpassen).
   Ring-/Stern-/Glow-Keyframes sind 1:1 aus dem Entwurf uebernommen (dort
   mehrfach mit Andreas abgestimmt: langsame Gegenrotation, sanftes
   Atmen/Pulsieren, kein ruckartiges Wackeln). */
/* Sechster Anlauf (Andreas-Wunsch 2026-07-13: "ausserhalb der Tour soll sie
   an ihrem Platz bleiben und einfach bissl 3D bewegen, bissl pulsen, dem
   Mauszeiger hinterherschauen - waehrend der Tour komplett frei ueber die
   Site wandern"). Das bisherige Wander-Drift (offset-path + irisFlowDrift/
   irisAmbientBank) ist raus - das freie Wandern passiert jetzt ausschliess-
   lich waehrend der Tour per JS (siehe irisWanderStep() in app.js, echte
   Flugbahn ueber flyIrisTo). Im geparkten Zustand bewegt sich nur noch
   dieser Ort selbst nicht mehr: eine ruhige, stationaere 3D-Wobble-Animation
   (kein offset-path, keine Translation) haelt sie lebendig, ohne vom Platz
   zu weichen. Das Mauszeiger-Hinterherschauen laeuft unveraendert separat
   auf .iris-orb-svg (irisGazeLoop in app.js) und komponiert sich mit dem
   Wobble hier, weil es auf einem anderen (Kind-)Element liegt. */
/* position:absolute im Normalzustand (Andreas-Wunsch 2026-07-13: "soll nicht
   im Bild bleiben, wenn der User runter scrollt, sie soll an ihrem Platz
   bleiben") - .topbar ist nur position:relative (scrollt normal mit), also
   scrollt sie im Dokumentfluss mit weg statt wie ein Fixed-Overlay staendig
   sichtbar zu bleiben. Waehrend der Tour (.tour-active) MUSS sie dagegen
   sichtbar bleiben, egal wo gescrollt wird, deshalb dort position:fixed
   (siehe Regel weiter unten). top/left werden per JS in positionIrisDock()
   (app.js) gesetzt - die Werte hier sind nur ein Fallback bis dahin. */
.iris-widget{position:absolute;top:10px;right:340px;width:51px;height:51px;
  z-index:910;cursor:pointer;-webkit-tap-highlight-color:transparent;
  perspective:420px;transform-style:preserve-3d}
.iris-widget.tour-active{position:fixed}
/* z-index ueber .iris-tour-caption (900) - Andreas-Fund 2026-07-13: "nicht
   hinter die Caption-Box fliegen" - bei z-index:850 verschwand sie beim
   Kreuzen der Box optisch dahinter. Als Sicherheitsnetz zusaetzlich zur
   Ausweich-Steuerung in app.js (irisWanderFrame), die den Bereich der Box
   jetzt aktiv umfliegt statt zu durchqueren. */
/* Siebter Anlauf (Andreas-Fund 2026-07-13: "sie schwebt nicht mehr" - reine
   Rotation/Skalierung ohne echte Ortsbewegung liest sich als Zittern, nicht
   als Schweben). Deshalb wieder eine echte kleine Positions-Bewegung, LOKAL
   um den Andock-Punkt statt der grossen Seiten-Bahn von vorher - sie bleibt
   "an ihrem Platz" (Andreas-Vorgabe), schwebt dort aber wirklich. Gleiche
   Technik wie beim bereits bestaetigten Fix aus Uebergabe #552: viele
   ungleich grosse LINEARE Zeitschritte statt einer einzigen ease-in-out
   (die haette an jedem Wegpunkt Tempo=0 und wieder Stop-and-go). Bank-
   Rotation+Puls laufen als eigenstaendige zweite Animation auf derselben
   transform-Eigenschaft, komponiert sich mit dem offset-path-Versatz.
   Nur im geparkten Zustand aktiv (nicht .tour-active, nicht .flying) - sonst
   wuerde das mit dem per JS gesetzten inline-transform (flyIrisTo/Wander)
   um die transform-Eigenschaft konkurrieren.
   Achter Anlauf (Andreas-Fund 2026-07-13: "haelt sich halbe Zeit ausserhalb
   der Seite auf") - die Schlaufe reichte bis zu 37px nach OBEN, aber der
   Andock-Punkt sitzt mit top:10px direkt am oberen Rand: 10-37 = deutlich
   im Minus, also ausserhalb des sichtbaren Bereichs. Neuer Pfad bleibt fast
   komplett im Plus (y zwischen -3 und +19px) - reicht bei top:10px nie unter
   top:7px, bleibt also immer sichtbar. */
.iris-widget:not(.tour-active):not(.flying){
  offset-path:path("M0,0 C 5,5 10,12 6,16 C 3,19 -7,18 -11,11 C -14,6 -10,0 -5,-2 C -2,-3 2,-2 0,0 Z");
  offset-rotate:0deg;offset-distance:0%;
  animation:irisIdleFloat 9s linear infinite, irisIdleBank 12s linear infinite}
@keyframes irisIdleFloat{
  0%{offset-distance:0%}
  11%{offset-distance:9%}
  23%{offset-distance:22%}
  34%{offset-distance:27%}
  47%{offset-distance:45%}
  58%{offset-distance:52%}
  71%{offset-distance:71%}
  83%{offset-distance:80%}
  100%{offset-distance:100%}
}
@keyframes irisIdleBank{
  0%{transform:rotateY(0deg) rotateZ(0deg) scale(1)}
  20%{transform:rotateY(12deg) rotateZ(-3deg) scale(1.04)}
  38%{transform:rotateY(-8deg) rotateZ(4deg) scale(.97)}
  55%{transform:rotateY(6deg) rotateZ(-2deg) scale(1.02)}
  74%{transform:rotateY(-14deg) rotateZ(3deg) scale(.99)}
  100%{transform:rotateY(0deg) rotateZ(0deg) scale(1)}
}
@media(prefers-reduced-motion:reduce){.iris-widget{animation:none;transform:none;offset-distance:0%}}
.iris-widget:focus-visible{outline:2px solid var(--accent-bright);outline-offset:4px;border-radius:50%}
/* Deutlich kraeftiger (Andreas-Fund 2026-07-13: "glow, Pulse etc sehe ich
   weiter bisher nicht" / "animierte Kreise eher schlecht als recht sichtbar")
   - vorher zu subtil UND die Ring-Rotation war mit 46s/30s pro Umdrehung so
   langsam, dass sie beim kurzen Hinschauen praktisch stillstand. */
.iris-orb-glow{position:absolute;left:50%;top:50%;width:72px;height:72px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle, rgba(120,180,235,.75) 0%, rgba(90,146,196,.28) 45%, transparent 70%);
  filter:blur(5px);transition:opacity .4s ease, transform .4s ease;
  animation:irisGlowPulse 4.2s ease-in-out infinite}
@keyframes irisGlowPulse{
  0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.16)}
}
@media(prefers-reduced-motion:reduce){.iris-orb-glow{animation:none;opacity:.7}}
.iris-orb-svg{position:relative;width:51px;height:51px;transform-style:preserve-3d}
.iris-ring-outer{transform-origin:50% 50%;animation:irisSpinCW 14s linear infinite}
.iris-ring-mid{transform-origin:50% 50%;animation:irisSpinCCW 9s linear infinite}
.iris-core-star{transform-origin:50% 50%;animation:irisBreathe 3.6s ease-in-out infinite}
@keyframes irisSpinCW{to{transform:rotate(360deg)}}
@keyframes irisSpinCCW{to{transform:rotate(-360deg)}}
@keyframes irisBreathe{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.07);opacity:1}}
@media(prefers-reduced-motion:reduce){.iris-ring-outer,.iris-ring-mid,.iris-core-star{animation:none}}

/* Klick-Reaktion (Andreas-Fund 2026-07-13: "wir hatten da was, wenn man
   klickt... kurz Groessenaenderung, Puls/Glow, animierte Kreise drehen sich
   gegensaetzlich kurz andersrum") - .iris-clicked wird per JS kurz (siehe
   irisClickBurst() in app.js) auf .iris-widget gesetzt und wieder entfernt.
   animation-direction:reverse dreht die laufenden Ring-Animationen fuer die
   Dauer der Klasse um, ohne die eigentliche Dauerrotation zu unterbrechen. */
/* Andreas-Fund 2026-07-13: "seh sie immer noch kaum" - zwei Ursachen: (1)
   Skalierung/Dauer war zu knapp bemessen, (2) animation-direction:reverse
   auf der eh schon langsamen 14s/9s-Dauerrotation dreht in 650ms nur einen
   winzigen Bogen zurueck, praktisch unsichtbar. Jetzt eigene, SCHNELLE
   Einmal-Spin-Keyframes statt nur die Richtung der langsamen Animation
   umzudrehen, plus staerkere Skalierung/Dauer bei Glow und Pop, plus eine
   neue expandierende Schockwelle (.iris-shockwave) fuer zusaetzliche
   Sichtbarkeit. */
.iris-widget.iris-clicked .iris-orb-glow{animation:irisClickGlow .75s ease-out}
@keyframes irisClickGlow{
  0%{opacity:1;transform:translate(-50%,-50%) scale(2.2)}
  100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}
}
.iris-widget.iris-clicked .iris-orb-svg{animation:irisClickPop .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes irisClickPop{
  0%{transform:scale(1.65)}
  100%{transform:scale(1)}
}
.iris-widget.iris-clicked .iris-ring-outer{animation:irisClickSpinOuter .6s ease-out}
.iris-widget.iris-clicked .iris-ring-mid{animation:irisClickSpinMid .6s ease-out}
@keyframes irisClickSpinOuter{from{transform:rotate(0deg)}to{transform:rotate(-280deg)}}
@keyframes irisClickSpinMid{from{transform:rotate(0deg)}to{transform:rotate(300deg)}}
.iris-shockwave{position:absolute;left:50%;top:50%;width:51px;height:51px;
  transform:translate(-50%,-50%) scale(.6);border-radius:50%;
  border:2.5px solid var(--cyan);opacity:0;pointer-events:none}
.iris-widget.iris-clicked .iris-shockwave{animation:irisShockwave .65s ease-out}
@keyframes irisShockwave{
  0%{opacity:.95;transform:translate(-50%,-50%) scale(.6)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2.8)}
}

.iris-echo{position:fixed;z-index:9999;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle, rgba(255,207,77,.85) 0%, rgba(90,146,196,.55) 45%, transparent 75%);
  filter:blur(1px);opacity:.8;transition:opacity .38s ease-out, transform .38s ease-out}

/* Spotlight: eine kleine, unsichtbare Box wird per box-shadow-Trick zum
   "Loch" in einem riesigen dunklen Schleier - kein Kampf mit bestehenden
   z-index-Ebenen im Rest des Tools noetig, das Zielelement bleibt an Ort und
   Stelle im normalen Dokumentfluss. Position/Groesse werden per JS auf die
   echte BoundingClientRect des jeweils erklaerten Elements gesetzt, mit
   sanftem Uebergang zwischen den Schritten (kein Springen). Deckkraft
   deutlich reduziert (Andreas-Fund 2026-07-13: .82 machte den Rest des
   Tools komplett unsichtbar statt nur abzudunkeln - man soll das ganze Tool
   weiterhin erkennen, nur der erklaerte Punkt soll herausstechen). */
.iris-tour-highlight{position:fixed;z-index:820;border-radius:10px;
  box-shadow:0 0 0 9999px rgba(5,7,13,.42);
  border:2px solid var(--cyan);pointer-events:none;
  transition:top .5s cubic-bezier(.3,.8,.3,1),left .5s cubic-bezier(.3,.8,.3,1),
    width .5s cubic-bezier(.3,.8,.3,1),height .5s cubic-bezier(.3,.8,.3,1),opacity .3s ease}

/* Kompakter als vorher (520px -> 380px) und ziehbar (Andreas-Wunsch
   2026-07-13: "die jeweilige Seite soll sichtbar bleiben" + "Textbox
   verschieben koennen, damit der User ueberall schauen kann"). Der Kopf
   dient als Ziehgriff (siehe makeIrisCaptionDraggable() in app.js) - beim
   ersten Ziehen wechselt die Positionierung von zentriert/bottom auf feste
   left/top-Pixel, damit nichts springt. Die Klopf-Logik braucht dafuer
   KEINE Anpassung: sie liest die Button-Position beim Anklopfen ohnehin
   live per getBoundingClientRect(), trifft also auch nach dem Verschieben. */
.iris-tour-caption{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);
  z-index:900;width:min(380px,calc(100% - 2.4rem));padding:1.1rem 1.3rem}
.iris-tour-caption-head{display:flex;align-items:center;gap:.6rem;color:var(--cyan);
  font-family:'Orbitron';font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.6rem;
  cursor:grab;user-select:none}
.iris-tour-caption-head:active{cursor:grabbing}
.iris-tour-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);animation:irisDotPulse 1.6s ease-in-out infinite}
@keyframes irisDotPulse{0%,100%{opacity:.4}50%{opacity:1}}
.iris-tour-caption-body{font-size:18.5px;line-height:1.55;color:var(--ink)}
.iris-tour-caption-foot{display:flex;justify-content:space-between;align-items:center;
  gap:1rem;margin-top:1.1rem;flex-wrap:wrap}
.iris-fork-foot{justify-content:flex-end}
.iris-tour-caption .btn-primary{margin-top:0;padding:10px 20px;width:auto}
/* Kurzer Bump-Effekt am "Weiter"-Button, synchron zu IRIS' Klopf-Geraeusch
   (Andreas-Wunsch 2026-07-13: Klopfen bleibt, jetzt gezielt hierfuer). */
#iris-tour-next.iris-knocked{animation:irisKnockBump .46s ease-out}
@keyframes irisKnockBump{
  0%,100%{transform:translateY(0)}
  20%{transform:translateY(3px)}
  40%{transform:translateY(-2px)}
  60%{transform:translateY(2px)}
  80%{transform:translateY(-1px)}
}

@media(max-width:640px){
  .iris-tour-caption{bottom:90px}
  .iris-tour-caption-foot{flex-direction:column-reverse;align-items:stretch}
}
@media(max-width:520px){.refining-methods-grid{grid-template-columns:1fr 1fr}}