/* Atlas — Schiffe und Skills in EVE Online — Gestaltung
 * ============================================================================
 *
 * Plan (frontend-design, 9.10.2026)
 *
 * Gegenstand: Schiffsklassen und die Skill-Warteschlange. Leser: Spieler, oft
 * mit dem Client daneben oder am Handy. Aufgabe: ein Schiff finden und sehen,
 * was zu lernen ist und wie lange es dauert.
 *
 * Das eine Erkennungszeichen sind die fünf Stufenkästchen, wie sie der Client
 * an jedem Skill zeigt. Sie stehen an jeder Skill-Zeile, an den Mastery-
 * Reitern (I–V als große Kästchen) und in der Stufentabelle. Alles andere
 * bleibt ruhig: Systemschrift, Monospace nur für Zahlen, ein Rundungsmaß
 * (4px), keine Schatten außer am schwebenden Skill-Fenster.
 *
 * Farbe: kalte Neutrale wie beim Almanach (eine Familie unter tonicdock), das
 * Blau der Kästchen als einzige feste Akzentfarbe. Die Fraktion bringt ihre
 * eigene Farbe als --f mit; sie färbt nur Kanten und Balken, nie Text — so
 * bleibt der Kontrast in allen 17 Farben gleich.
 *
 * Palette (Planprüfung 9.10.2026): Hangar #121820 (Grund), Deck #171E27
 * (Flächen), Naht #2A3441 (Linien), Anzeige #E5E9EE (Text), Skillblau #8CC4EE
 * (volle Kästchen), dazu --f je Fraktion. Gegen die Liste typischer KI-Muster
 * gehalten: „dunkler Grund mit einer hellen Akzentfarbe“ trifft zu. Bleibt,
 * weil beides aus dem Gegenstand kommt (der Client ist dunkel, die
 * Skill-Warteschlange blau) — aber das Blau trägt nur Bedeutung (Stufen),
 * nie Zierde, und die Fraktionsfarbe färbt den Kopf jeder Schiffs- und
 * Fraktionsseite, damit man sieht, wo man ist. Hell nach Systemeinstellung.
 *
 * Verworfen: ein Liniengraph wie im Client. evechievements zeigt, was daraus
 * am Handy wird (644 px Breite bei 390 px Schirm). Hier ist der Baum eine
 * Reihe je Rumpfgröße, die Klassen darin umbrechend; die Linie zwischen
 * Grundklasse und Spezialisierung trägt die Freischaltung („Caldari Frigate V,
 * Interceptors I“), nicht ein Strich.
 */

:root {
  color-scheme: dark light;
  --fs-xs: 0.75rem;
  --fs-s: 0.875rem;
  --fs-base: 1rem;
  --fs-l: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-xxl: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --r: 4px;
  --gut: clamp(16px, 4vw, 40px);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --bg: #121820;
  --bg-1: #171E27;
  --bg-2: #1E2631;
  --line: #2A3441;
  --line-2: #3B4757;
  --ink: #E5E9EE;
  --ink-2: #AEB8C3;
  --ink-3: #8D98A5;
  --pip: #8CC4EE;
  --pip-off: #607086;   /* leeres Kästchen: 3,5:1 zum Grund (WCAG 1.4.11) */
  --pip-had: #5D7E9C;   /* Stufe, die eine frühere Mastery schon verlangt */
  --link: #93C6EC;
  --on-pip: #0F1A24;
  --f: #8CC4EE;

  --d-em: #4E8DDA;
  --d-thermal: #CF5A45;
  --d-kinetic: #A096BF;
  --d-explosive: #D19B3C;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #F2F4F7;
    --bg-1: #FFFFFF;
    --bg-2: #E8ECF1;
    --line: #D3DAE2;
    --line-2: #B4BFCB;
    --ink: #16202A;
    --ink-2: #44505D;
    --ink-3: #56616E;
    --pip: #1D6AAE;
    --pip-off: #7F8C9B;
    --pip-had: #93B4D2;
    --link: #135A99;
    --on-pip: #FFFFFF;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-base)/1.5 var(--sans);
}
img { max-width: 100%; }
a { color: var(--link); text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--pip); color: var(--on-pip); }
html { accent-color: var(--pip); caret-color: var(--pip); scrollbar-color: var(--line-2) var(--bg); }
:focus-visible { outline: 2px solid var(--pip); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0; font-weight: 650; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.94em; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--bg-1); padding: 0.5rem 1rem; z-index: 10; }
.skip:focus { left: var(--gut); }
[hidden] { display: none !important; }

/* ---- Kopf --------------------------------------------------------------- */
.top {
  display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap;
  padding: 0.75rem var(--gut);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.mark {
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: var(--fs-l);
  letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 0.5rem;
}
.mark::before {
  content: ""; width: 0.9rem; height: 0.9rem; border-radius: 2px;
  background: linear-gradient(90deg, var(--pip) 0 60%, var(--pip-off) 60%);
}
.nav { display: flex; gap: 1.25rem; margin-left: auto; font-size: var(--fs-s); }
.nav a { color: var(--ink-2); text-decoration: none; display: inline-block; padding-block: 0.3rem; }
.nav a:hover { color: var(--ink); text-decoration: underline; }
.find { position: relative; flex: 1 1 16rem; max-width: 28rem; }
.find input {
  width: 100%; font: inherit; font-size: var(--fs-s); color: var(--ink);
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 0.45rem 0.7rem;
}
.find input::placeholder { color: var(--ink-3); }
.find .key {
  position: absolute; right: 0.5rem; top: 50%; translate: 0 -50%; pointer-events: none;
  font: var(--fs-xs) var(--mono); color: var(--ink-3); border: 1px solid var(--line-2);
  border-radius: 3px; padding: 0 0.35rem;
}
.find input:focus ~ .key, .find input:not(:placeholder-shown) ~ .key { display: none; }
@media (hover: none) { .find .key { display: none; } }
.find.big { max-width: 36rem; margin-top: 1.75rem; }
.find.big input { font-size: var(--fs-l); padding: 0.75rem 1rem; }
#q-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r);
  max-height: 70vh; overflow: auto; box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
}
#q-list li { padding: 0.45rem 0.7rem; cursor: pointer; display: flex; gap: 0.6rem; align-items: center; }
#q-list li[aria-selected="true"] { background: var(--bg-2); }
#q-list img { width: 28px; height: 28px; flex: none; }
#q-list .k { width: 28px; flex: none; text-align: center; }
#q-list small { display: block; color: var(--ink-3); font-size: var(--fs-xs); }

main { padding: 0 var(--gut) 3rem; max-width: 1280px; margin: 0 auto; }

/* ---- Fuß ---------------------------------------------------------------- */
.foot {
  border-top: 1px solid var(--line); padding: 1.5rem var(--gut) 2rem;
  color: var(--ink-3); font-size: var(--fs-xs); display: grid; gap: 0.5rem;
}
.foot p { max-width: 80ch; }
.foot a { color: var(--ink-2); margin-right: 1rem; display: inline-block; padding-block: 0.25rem; }

/* ---- Stufenkästchen (das Erkennungszeichen) ----------------------------- */
.pips { display: inline-flex; gap: 2px; vertical-align: -1px; flex: none; }
.pips i {
  width: 9px; height: 9px; border-radius: 1px;
  border: 1px solid var(--pip-off);
}
.pips i.on { background: var(--pip); border-color: var(--pip); }
.pips i.had { background: var(--pip-had); border-color: var(--pip-had); }

/* ---- Startseite --------------------------------------------------------- */
.hero { padding: clamp(2rem, 6vw, 4.5rem) 0 2rem; max-width: 46rem; }
.hero h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); letter-spacing: -0.01em; max-width: 24ch; text-wrap: balance; }
.lede { color: var(--ink-2); font-size: var(--fs-l); margin-top: 0.75rem; max-width: 62ch; }
.facs h2 { font-size: var(--fs-s); color: var(--ink-2); font-weight: 600; margin: 2rem 0 0.75rem; }
.fac-list { display: grid; gap: 0 2rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.fac-list.big { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 3rem; max-width: 60rem; }
@media (max-width: 700px) { .fac-list.big { grid-template-columns: 1fr; } }
.fac { padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.fac .fn::before {
  content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 1px;
  background: var(--f); margin-right: 0.6rem; flex: none; translate: 0 -0.05em;
}
.fac .fn { display: flex; align-items: baseline; }
.fac a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; text-decoration: none; color: var(--ink); }
.fac a:hover .fn { text-decoration: underline; }
.fn { font-weight: 600; }
.fac.big .fn { font-size: var(--fs-xl); }
.fac.big { padding-block: 0.9rem; }
.fc { color: var(--ink-3); font-size: var(--fs-s); white-space: nowrap; }
.fac p { color: var(--ink-2); margin-top: 0.35rem; max-width: 50ch; padding-left: 1.2rem; }
.fac .traits { padding-left: 1.2rem; }
.traits { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin-top: 0.35rem; font-size: var(--fs-xs); color: var(--ink-3); }
.fac:not(.big) .traits { display: none; }

/* ---- Fraktion: Schiffsbaum ---------------------------------------------- */
.fac-tabs { margin: 1rem calc(-1 * var(--gut)) 0; padding: 0 var(--gut); overflow-x: auto; }
.fac-tabs ul { display: flex; flex-wrap: wrap; gap: 0 0.25rem; }
@media (max-width: 860px) { .fac-tabs ul { flex-wrap: nowrap; width: max-content; } }
.fac-tabs a {
  display: block; padding: 0.35rem 0.7rem; font-size: var(--fs-s); color: var(--ink-2);
  text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap;
}
.fac-tabs a:hover { color: var(--ink); border-bottom-color: var(--f); }
.fac-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--f); font-weight: 600; }
/* Fraktionsfarbe als Band über die ganze Breite; der Schatten verbreitert
   die Fläche, clip-path schneidet ihn oben und unten ab (kein Querscrollen). */
.fac-head, .ship-head {
  --tint: color-mix(in srgb, var(--f) 11%, var(--bg));
  background: var(--tint);
  box-shadow: 0 0 0 100vmax var(--tint);
  clip-path: inset(0 -100vmax);
}
.fac-head { padding-block: 2rem 1.5rem; border-bottom: 3px solid var(--f); margin-bottom: 0.5rem; }
.fac-head .traits { font-size: var(--fs-s); }
.fac-head h1 { font-size: var(--fs-xxl); }
.fac-head .count { color: var(--ink-2); font-size: var(--fs-s); margin-top: 0.5rem; }

.row {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0 1.5rem;
  padding: 1.25rem 0; border-bottom: 1px solid var(--line);
}
.row-name { font-size: var(--fs-l); color: var(--ink-2); font-weight: 600; hyphens: auto; overflow-wrap: break-word; }
.row-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: 1.25rem 1.5rem; }
.cls h3 { font-size: var(--fs-base); }
.unlock { display: flex; flex-wrap: wrap; gap: 0 0.75rem; font-size: var(--fs-xs); color: var(--ink-3); margin-top: 0.3rem; }
.unlock a { color: var(--ink-2); }
.unlock .lv { font-family: var(--mono); }
.ships { margin-top: 0.6rem; display: grid; gap: 2px; }
.ships a {
  display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 0.6rem;
  align-items: center; padding: 3px; border-radius: var(--r); text-decoration: none; color: var(--ink);
}
.ships a:hover { background: var(--bg-2); }
.ships a:hover .sn { text-decoration: underline; }
.ships img { width: 40px; height: 40px; grid-row: 1 / span 2; border-radius: 2px; background: var(--bg-1); }
.ships .sn { font-size: var(--fs-s); align-self: end; }
.ships .meta { align-self: start; }
.ships a:not(:has(.meta)) .sn { grid-row: 1 / span 2; align-self: center; }
.meta { font-size: var(--fs-xs); color: var(--ink-3); }

/* ---- Schiff ------------------------------------------------------------- */
.ship-head {
  display: grid; grid-template-columns: minmax(8rem, 16rem) 1fr; gap: 1rem 2rem; align-items: end;
  padding-block: 2rem 1.25rem; border-bottom: 3px solid var(--f);
}
.render { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r); background: #0B0F14; display: block; }
.crumb { font-size: var(--fs-s); color: var(--ink-3); }
.crumb a { color: var(--ink-2); display: inline-block; padding-block: 0.2rem; }
.ship-head h1, .skill-head h1 { font-size: var(--fs-xxl); margin-top: 0.35rem; }
.kind { color: var(--ink-2); margin-top: 0.3rem; }
.kind .meta { margin-left: 0.5rem; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 0.35rem; }
.jump { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin-top: 1rem; font-size: var(--fs-s); }
.jump a { display: inline-block; padding-block: 0.3rem; }

.cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2.5rem 3.5rem; margin-top: 2rem; }
.block + .block { margin-top: 2.75rem; }
.block h2, .side > h2 { font-size: var(--fs-xl); margin-bottom: 0.9rem; }
.side > h2 { margin-bottom: 0.5rem; }
.answer { font-size: var(--fs-l); max-width: 60ch; margin-bottom: 1rem; }
.answer .big { font-size: var(--fs-xl); font-weight: 600; color: var(--ink); }
.sub { color: var(--ink-2); font-size: var(--fs-s); margin-top: 0.6rem; }

.skills { display: grid; gap: 1px; }
.skills li {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.3rem 0; border-bottom: 1px solid var(--line);
}
.skills li a { color: var(--ink); text-decoration-color: var(--line-2); }
.skills li a:hover { text-decoration-color: currentColor; }
.cert { margin-top: 1.1rem; }
.cert h3 { font-size: var(--fs-s); color: var(--ink-2); font-weight: 600; margin-bottom: 0.25rem; }
.certs { columns: 2 17rem; column-gap: 2rem; }
.cert { break-inside: avoid; }
.skills li.old a { color: var(--ink-2); }
.skills li.new a { font-weight: 500; }

.mtabs { display: flex; gap: 0.35rem; margin-bottom: 1.1rem; }
.mtabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 36rem; }
.mtabs button {
  font: inherit; color: var(--ink-2); cursor: pointer; min-height: 2.75rem;
  display: grid; justify-items: start; gap: 0.1rem; padding: 0.35rem 0.6rem; text-align: left;
  border-radius: 3px; background: transparent; border: 1px solid var(--pip-off);
}
.mtabs b { font: 600 var(--fs-s)/1 var(--mono); }
.mtabs small { font-size: var(--fs-xs); line-height: 1.25; }
.mtabs button:hover { border-color: var(--pip); color: var(--ink); }
.mtabs button[aria-selected="true"] { background: var(--pip); border-color: var(--pip); color: var(--on-pip); }
.mtabs button.reached { border-color: var(--pip); }

.plan { margin-top: 1rem; font-size: var(--fs-s); }
.plan summary { cursor: pointer; color: var(--ink-2); }
.plan summary:hover { color: var(--ink); }
.plan pre {
  font: var(--fs-xs)/1.6 var(--mono); background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r); padding: 0.75rem 1rem; max-height: 20rem; overflow: auto; margin: 0.6rem 0 0.4rem;
}
.plan .hint { color: var(--ink-3); font-size: var(--fs-xs); }
.copy {
  font: inherit; font-size: var(--fs-s); margin-top: 0.6rem; cursor: pointer;
  color: var(--ink); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 0.35rem 0.8rem;
}
.copy:hover { border-color: var(--pip); }

.bgroup + .bgroup { margin-top: 1.25rem; }
.bgroup h3 { font-size: var(--fs-base); margin-bottom: 0.4rem; }
.bgroup h3 a { color: var(--ink); }
.per { font-weight: 400; color: var(--ink-3); font-size: var(--fs-s); }
.bonus li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.75rem; padding: 0.25rem 0; }
.bv { text-align: right; color: var(--ink); }
.bonus a { color: var(--link); }

.prose p { max-width: 62ch; color: var(--ink-2); }
.prose p + p { margin-top: 0.75rem; }

.side .attrs + .attrs { margin-top: 1.5rem; }
.attrs h3 { font-size: var(--fs-s); color: var(--ink-2); font-weight: 600; margin-bottom: 0.35rem; }
.attrs dl { margin: 0; }
.attrs dl div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.22rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-s); }
.attrs dt { color: var(--ink-2); }
.attrs dd { margin: 0; text-align: right; white-space: nowrap; }
.calc { color: var(--ink-3); font-size: var(--fs-xs); }
.scroll { overflow-x: auto; }
.res table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.res th, .res td { padding: 0.35rem 0.3rem; text-align: right; border-bottom: 1px solid var(--line); }
.res thead th { font-weight: 600; font-size: var(--fs-xs); color: var(--ink-2); }
.res tbody th { text-align: left; font-weight: 500; }
.res tbody th small { display: block; color: var(--ink-3); font-weight: 400; font-size: var(--fs-xs); }
.res td { position: relative; min-width: 3.4rem; }
.res td .bar { position: absolute; left: 0.3rem; right: 0.3rem; bottom: 3px; height: 3px; background: var(--line); }
.res td .bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--dc); }
.d-em { --dc: var(--d-em); }
.d-thermal { --dc: var(--d-thermal); }
.d-kinetic { --dc: var(--d-kinetic); }
.d-explosive { --dc: var(--d-explosive); }
.res thead th::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--dc); margin-right: 4px; border-radius: 1px; }

.block h2.h-s { font-size: var(--fs-l); }
.sibs { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.sibs .ships { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }

/* ---- Skill -------------------------------------------------------------- */
.skill-head { padding: 2rem 0 1.25rem; border-bottom: 1px solid var(--line); }
.facts { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; margin: 1rem 0 0; }
.facts dt { font-size: var(--fs-xs); color: var(--ink-3); }
.facts dd { margin: 0; }
.levels { border-collapse: collapse; width: 100%; font-size: var(--fs-s); }
.levels th, .levels td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.levels thead th { font-size: var(--fs-xs); color: var(--ink-2); font-weight: 600; }
.levels tbody th { text-align: left; font-weight: 500; }
.levels tbody th .lv { font-family: var(--mono); margin-left: 0.5rem; }
.levels th:first-child { padding-left: 0; }
.levels thead th:first-child { text-align: left; }
.side .block h2 { font-size: var(--fs-l); }

.toc { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin-top: 1rem; font-size: var(--fs-s); }
.sgroups { columns: 3 18rem; column-gap: 2.5rem; margin-top: 1.5rem; }
.sgroup { break-inside: avoid; margin-bottom: 2rem; }
.sgroup h2 { font-size: var(--fs-l); margin-bottom: 0.4rem; }
.sgroup h2 .n { color: var(--ink-3); font-weight: 400; font-size: var(--fs-s); }
.sgroup li { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.15rem 0; font-size: var(--fs-s); }
.sgroup li a { color: var(--ink); }
.rk { color: var(--ink-3); font-size: var(--fs-xs); }
.omega-tag { font-size: var(--fs-xs); color: var(--ink-3); margin-left: auto; }

/* ---- Rechtliches -------------------------------------------------------- */
.legal { padding: 2rem 0; max-width: 72ch; }
.legal h1 { font-size: var(--fs-xxl); margin-bottom: 0.5rem; }
.legal h2 { font-size: var(--fs-xl); margin: 2rem 0 0.75rem; }
.legal h3 { font-size: var(--fs-base); margin: 1.25rem 0 0.4rem; }
.legal p { margin-top: 0.6rem; }

/* ---- Skill-Fenster ------------------------------------------------------ */
.pop {
  position: absolute; z-index: 30; width: min(23rem, calc(100vw - 2 * var(--gut)));
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.4); padding: 0.85rem 1rem; font-size: var(--fs-s);
}
.pop h3 { font-size: var(--fs-base); }
.pop .meta { margin-top: 0.15rem; display: block; }
.pop table { width: 100%; border-collapse: collapse; margin-top: 0.6rem; }
.pop th { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; text-align: right; padding-bottom: 0.2rem; }
.pop th:first-child { text-align: left; }
.pop td { padding: 0.15rem 0 0.15rem 0.75rem; text-align: right; white-space: nowrap; }
.pop td:first-child { text-align: left; }
.pop tr.want td { color: var(--ink); font-weight: 600; }
.pop tr td { color: var(--ink-2); }
.pop .req { margin-top: 0.6rem; color: var(--ink-3); font-size: var(--fs-xs); }

/* ---- Schmal ------------------------------------------------------------- */
@media (max-width: 860px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .row { grid-template-columns: minmax(0, 1fr); }
  .row-name { margin-bottom: 0.75rem; }
}
@media (max-width: 560px) {
  .ship-head { grid-template-columns: 7.5rem 1fr; align-items: center; gap: 1rem; }
  .ship-head .jump { grid-column: 1 / -1; }
  .nav { margin-left: 0; }
  .find { order: 3; flex-basis: 100%; max-width: none; }
  .bonus li { grid-template-columns: 3.75rem 1fr; }
  .levels th, .levels td { padding-inline: 0.3rem; }
  .levels tr > :nth-child(4) { display: none; }   /* SP gesamt: steht im Skill-Fenster */
  .levels .pips { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .ships a, .copy, .mtabs button { transition: background-color 120ms, border-color 120ms; }
}