/* =========================================================
   1) Design-Variablen & Basis
   ========================================================= */
:root{
  --bg:#0b1220;
  --panel:#121826;
  --text:#ffffff;
  --muted:#9aa4b2;
  --accent:#abffaa;
  --ok:#abffaa;
  --bad:#ef6666;
}
*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100% }
@supports(-webkit-touch-callout:none){ html{ -webkit-text-size-adjust:none } }
html,body{ margin:0; padding:0; overflow-x:hidden }
body{
  background-color:#0b1220;
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  min-height:100vh;
}
body.is-day{
  background-image:url('../images/station_day.png');
  background-position:bottom right;
  background-size:cover;
  background-repeat:no-repeat;
}
body.is-night{
  background-image:url('../images/station_night.png');
  background-position:bottom right;
  background-size:cover;
  background-repeat:no-repeat;
}
.wrap{ max-width:1200px; margin:0 auto; padding:16px }

/* Typografie */
h1,h2{ color:var(--accent); margin:0 0 12px; font-family:'Orbitron'!important }
h1{ font-size:22px }
h2{ font-size:18px }

/* Karten / Panels / Buttons */
.card{
  background:rgba(18,24,38,.9);
  border:1px solid #2a3446;
  border-radius:3px;
  padding:12px;
  backdrop-filter:blur(2px);
}
.row{ display:flex; gap:10px; align-items:center }
.gridlist{ display:grid; gap:8px }
.item{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  background:#121826; border:1px solid #2a3446; border-radius:3px; padding:8px;
}
.muted{ color:var(--muted) }
.btn{
  background:var(--accent); color:#0b1220; border:0; padding:8px 12px; border-radius:3px;
  font-weight:700; cursor:pointer;
}
.btn:disabled{ opacity:.5; cursor:not-allowed }

button#karteStart {
  margin-top: 16px;
}

/* =========================================================
   Toasts (Fehler/Info/OK Popups)
   ========================================================= */
   .toastbox{
     position:fixed;

     /* Fallback */
     right:16px;
     bottom:16px;

     /* Safe-Area (Notch / Home-Bar) */
     right:calc(16px + env(safe-area-inset-right));
     bottom:calc(16px + env(safe-area-inset-bottom));

     display:flex;
     flex-direction:column;
     gap:10px;

     /* ueber wirklich allem */
     z-index:2147483647;

     max-width:min(420px, calc(100vw - 32px));
     pointer-events:none; /* nur Toast selbst klickbar */

     /* iOS/Browser-Zickereien: eigenes Layer hilft oft */
     will-change: transform;
transform: translate(var(--toast-shift-x, 0px), var(--toast-shift-y, 0px)) translateZ(0);
   }

.toast{
  pointer-events:auto;
  display:grid;
  grid-template-columns: 22px 1fr 26px;
  gap:10px;
  padding:10px 12px;
  background:rgba(18,24,38,.98);
  border:1px solid #2a3446;
  border-left:4px solid var(--accent);
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);

  opacity:0;
  transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease;
}

.toast.show{ opacity:1; transform:translateY(0); }
.toast.hide{ opacity:0; transform:translateY(8px); }

.toast.ok{ border-left-color:var(--ok); }
.toast.bad{ border-left-color:var(--bad); }
.toast.info{ border-left-color:var(--accent); }

.toast-ico{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:2px;
}

.toast.ok .toast-ico i{ color:var(--ok); }
.toast.bad .toast-ico i{ color:var(--bad); }
.toast.info .toast-ico i{ color:var(--accent); }

.toast-title{
  font-weight:800;
  line-height:1.1;
  margin-bottom:2px;
}

.toast-msg{
  opacity:.92;
  line-height:1.25;
  white-space:pre-wrap;
  word-break:break-word;
}

.toast-x{
  background:transparent;
  border:0;
  color:var(--muted);
  cursor:pointer;
  font-size:16px;
  line-height:1;
  width:26px;
  height:26px;
  border-radius:6px;
}

.toast-x:hover{
  background:rgba(255,255,255,.06);
  color:var(--text);
}

@media (prefers-reduced-motion: reduce){
  .toast{ transition:none; }
}


/* =========================================================
   2) Ressourcen-Leiste oben (volle Breite)
   ========================================================= */
.resbar-wide.card{ padding:10px 12px }
.resbar-wide .resgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:8px }
.resbar-wide .resitem{
  display:flex; align-items:center; gap:8px;
  background:#0c1524; border:1px solid #2a3446; border-radius:3px; padding:8px;
}
.resbar-wide .resitem .resource-icon{ color:var(--accent) }

/* =========================================================
   3) Seitenlayout 2/3 – 1/3
   ========================================================= */
.maingrid{ display:grid; grid-template-columns:2fr 1fr; gap:14px !important; margin-top:10px }
.leftcol,.rightcol{ display:grid; gap:0px; align-content:start }
.leftcol{ min-width:0 }

/* =========================================================
   4) Tabstrip (Chrome-like)
   ========================================================= */
.tabstrip{ margin-top:0 }
.tabstrip .strip{
  display:flex; gap:6px; align-items:flex-end; overflow:auto; padding:6px 6px 0 6px;
}
.tabstrip .tab{
  position:relative; border:1px solid #2a3446; border-bottom:0;
  background:#0f1726; color:#d7dee9; padding:8px 12px;
  border-top-left-radius:10px; border-top-right-radius:10px;
  cursor:pointer; user-select:none; white-space:nowrap; opacity:.85;
}
.tabstrip .tab.on{ background:var(--panel); color:#fff; opacity:1; box-shadow:0 -2px 0 0 var(--accent) inset }
.tabstrip .bar{ height:8px; background:#0f1726; border:1px solid #2a3446; border-top:0; border-bottom-left-radius:10px; border-bottom-right-radius:10px }
.tab i{ margin-right:8px; color:var(--accent) }

/* =========================================================
   5) Content-Fläche (linke Spalte)
   ========================================================= */
.content-surface .surface{
  background:rgba(18,24,38,.9);
  border:1px solid #2a3446;
  border-radius:3px;
  padding:12px;
}
.view{ display:none }
.view.on{ display:block }

/* 2 Spalten innerhalb Dashboard-View */
.two{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.subcard{ background:transparent; border:0; padding:0 }
.subcard h2{ margin-bottom:6px }
.label{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap }
.ico,.resource-icon{ color:var(--accent); margin-right:8px; font-size:1em; vertical-align:baseline }

/* =========================================================
   6) Portrait / Stimmung
   ========================================================= */
.mood{ display:grid; grid-template-columns:repeat(5,1fr); gap:4px }
.mood .step{ height:8px; border-radius:4px; background:#243047 }
.mood .step.on{ background:var(--ok)!important }
.portrait{ width:100%; height:auto; display:block; border-radius:12px; border:1px solid #2a3446 }

/* Progressbar */
progress{ width:100%; height:14px; border:1px solid var(--accent); border-radius:6px; background:#0c1524 }
progress::-webkit-progress-bar{ background:#0c1524 }
progress::-webkit-progress-value{ background:var(--accent) }
progress::-moz-progress-bar{ background:var(--accent) }

/* Untertitel */
.subhead{ color:var(--accent); font-style:italic; font-weight:600; font-size:14px; padding:4px 0 2px }

/* Footer */
.footer{ max-width:1200px; margin:12px auto 20px auto; padding:0 16px; color:var(--muted); font-size:12px }

/* =========================================================
   7) Tiles (Allgemein)
   ========================================================= */
.tile{
  /*border:1px solid #2a3446;*/
  border-radius: 0px;
  cursor:pointer;
  background-color:#121826;
  background-position:center;
  background-repeat:no-repeat;
  background-size:64px 64px;
}

#karteGrid .tile{
  aspect-ratio:1/1;
  background-color:#121826;
  background-position:center;
  background-repeat:no-repeat;
  background-size:100% 100%;
  outline: 1px solid #6d6e72;
  outline-offset: -1px;
}

.tile.selected, .tile.unknown.selected {
    outline: 2px solid #abffaa !important;
    outline-offset: -2px !important;
}

/* Tile-Grafiken */
.tile.empty{        background-image:url('../images/tile_empty.png') }
.tile.crate{        background-image:url('../images/tile_crate.png') }
.tile.crack{        background-image:url('../images/tile_crack.png') }
.tile.orionfighter{ background-image:url('../images/tile_orionfighter.png') }
.tile.station{      background-image:url('../images/tile_station.png') }
.tile.radio{        background-image:url('../images/tile_radio.png') }
.tile.crash{        background-image:url('../images/tile_crash.png') }


/* =========================================================
   8) Materialize-Farben für Ressource-Icons
   ========================================================= */
#water   { color:#2196F3 }
#food    { color:#FFC107 }
#herbs   { color:#8BC34A }
#absinthe{ color:#00E676 }
#energy  { color:#FFEB3B }
#coins   { color:#FF9800 }
#tape    { color:#f5f5f5 }
#chips   { color:#9C27B0 }
#tritium { color:#00BCD4 }
#scrap   { color:#cfd8dc }

/* =========================================================
   9a) Log-Modal – besser lesbar
   ========================================================= */
#logModal{
  position:fixed;
  inset:0;
  display:none;
  background:rgba(0,0,0,.55);
  z-index:9999;
  overscroll-behavior:contain;
}

#logModal .modal{
  width:calc(100% - 16px);
  max-width:980px;            /* breiter als vorher 700px */
  margin:5vh auto;
  background:#0c1524;
  border:1px solid #2a3446;
  border-radius:12px;
  padding:12px;

  display:flex;
  flex-direction:column;
  max-height:90vh;
}

#logModal .modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

#logList.log-list{
  margin-top:10px;
  overflow:auto;
  max-height:70vh;
  display:grid;
  gap:8px;
}

/* Einzelner Log-Eintrag: Icon links, Text linksbuendig */
.log-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:#121826;
  border:1px solid #2a3446;
  border-radius:10px;
  padding:10px;
  text-align:left;
}

.log-ico{
  flex:0 0 26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:2px;
  color:var(--accent);
  opacity:.95;
}

.log-main{ flex:1; min-width:0; }

.log-head{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.log-date{
  color:var(--muted);
  white-space:nowrap;              /* Datum immer einzeilig */
  font-variant-numeric:tabular-nums;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:260px;                 /* damit es auf kleineren Screens nicht alles sprengt */
}

.log-type{
  color:var(--muted);
  border:1px solid #2a3446;
  border-radius:999px;
  padding:1px 8px;
  font-size:12px;
  white-space:nowrap;
  opacity:.9;
  display: none;
}

.log-msg{
  margin-top:3px;
  white-space:pre-wrap;
  word-break:break-word;
}

/* dezente Farbhilfe ueber Icon (optional, aber praktisch) */
.log-row.ok   .log-ico{ color:var(--ok); }
.log-row.bad  .log-ico{ color:var(--bad); }
.log-row.warn .log-ico{ color:var(--col-primary); }


/* =========================================================
   9) Expedition-Modal – responsive & scroll
   ========================================================= */
#expModal{ overscroll-behavior:contain }
#expModal .modal{
  max-width:1200px; margin:5vh auto; background:#0c1524;
  border:1px solid #2a3446; border-radius:10px; padding:10px;
  display:flex; flex-direction:column; max-height:90vh;
}
#expModal .modal-head{ display:flex; justify-content:space-between; align-items:center; gap:12px }
#expModal .modal-body{ display:flex; gap:16px; align-items:flex-start; overflow:auto; padding-top:8px }

/* Grid im Modal – fester Kachelraster */
#grid9{ display:grid; grid-template-columns:repeat(9,64px); grid-auto-rows:64px; gap:0px }

/* Info-Spalte im Modal */
#expModal .side{ flex:1; min-width:360px }
#expInfo{ text-align:left; line-height:1.35 }
#expModal .sticky-cta{ position:sticky; bottom:0; background:#0c1524; padding-top:8px }

/* Body-Scroll sperren, wenn Modal offen */
body.modal-open{ overflow:hidden }

/* Mobile-Anpassungen Modal */
/*@media (max-width:960px){
  #expModal .modal{ width:calc(100% - 16px); max-height:92vh }
  #expModal .modal-body{ flex-direction:column }
  #grid9{ grid-template-columns:repeat(6,56px); grid-auto-rows:56px; justify-content:center }
  #expModal .side{ min-width:0; width:100% }
}
@media (max-width:420px){
  #grid9{ grid-template-columns:repeat(5,48px); grid-auto-rows:48px }
}*/

/* =========================================================
   10) Eingebettete Karte
   ========================================================= */
.karte-wrap{
  display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start; width:100%;
}
#karteGrid{
  display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:0px; width:100%; max-width:100%;
}

.karte-info{ min-width:0 }

/*@media (max-width:960px){
  .karte-wrap{ grid-template-columns:1fr }
  #karteGrid{ grid-template-columns:repeat(6,minmax(0,1fr)); justify-content:center }
  .karte-info{ width:100% }
}
@media (max-width:420px){
  #karteGrid{ grid-template-columns:repeat(5,minmax(0,1fr)) }
}*/

/* Karte: Info-Seite neu */
.karte-info .target-title{ font-weight:700; margin-bottom:4px; }
.karte-info .target-distance{ font-style:italic; margin-bottom:10px; }

.karte-info .tile-preview{
  width:100%;
  aspect-ratio:1 / 1;
  border:1px solid #2a3446;
  border-radius:8px;
  background-color:#121826;
  background-position:center;
  background-repeat:no-repeat;
  background-size:100%;
  margin:8px 0 12px;
}

.karte-info .section-title{ font-weight:700; margin:8px 0 6px; }
.karte-info .kv{ display:grid; grid-template-columns:1fr auto; gap:4px 12px; }


/* =========================================================
   11) Mobile-Global
   ========================================================= */
/*@media(max-width:960px){
  h1{ font-size:20px }
  h2{ font-size:16px }
  .maingrid{ grid-template-columns:1fr }
  .two{ grid-template-columns:1fr }
  .card,.item,.btn,.resbar-wide,.pill,#moodTxt,#drunkTxt,#quote,.muted{
    font-size:14px!important; line-height:1.3;
  }
}*/

/* Stelle sicher, dass Grid + Gap wirklich aktiv ist */
.maingrid{
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  column-gap: 14px !important;
  row-gap: 14px !important;
}

/* Padding-Fixes */
.leftcol{  padding-right: 0 !important; }
.rightcol{ padding-left:  0 !important; }
.leftcol, .rightcol{ flex: initial !important; min-width: 0; }

/* Rechts im „Aktuelle Aufgabe“-Card etwas mehr Luft */
.leftcol > section.card:first-of-type{ padding-right: 16px; }

.card,
.content-surface .surface{ max-width: 100%; }

/* Final Layout Override */
:root { --col-gap: 16px; }
.maingrid{
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  gap: var(--col-gap) !important;
  margin-top: 10px;
}
.leftcol{  grid-column: 1 !important; min-width: 0; }
.rightcol{ grid-column: 2 !important; min-width: 0; }
:root { --gutter: initial; }
.leftcol, .rightcol{
  padding: 0 !important;
  margin: 0 !important;
}

input.qty-sell, input.qty-buy {
    background-color: #0c1524;
    border: 1px solid #abffaa;
    padding: 4px 5px;
    color: white;
    border-radius: 5px;
    text-align: right;
}

tfoot > tr > td {
  text-align: right;
  padding-right: 20px !important;
  font-weight: bold;
}

tfoot > tr > td:first-child,
tfoot > tr > td:nth-child(3) {
  text-align: left; /* oder center */
}

#marketBooksTotal, #gesamtpreis {
    margin-right: 20px;
}

button#btnMarketTrip {
    margin-right: 20px;
}

#marketTable > tfoot > tr > td {
    padding-top: 10px !important;
}

.more-toggle {
    margin-top: 20px;
}

/* =========================================================
   Handel (Markt): Tabelle / Inputs / Stepper
   ========================================================= */

/* Header: erste Spalte links */
#marketTable thead th{ text-align:center; }
#marketTable thead th.left-align,
#marketTable thead th:first-child{ text-align:left; }

/* Gruppen-Header (Käufer / Händler) */
#marketTable thead tr.market-group th{
  background:#0c1524;
  color:var(--muted);
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  border-bottom:0;
  padding-top:10px;
  padding-bottom:6px;
}

/* Mengenfelder: gleiche Breite + eigener Stepper rechts */
#marketTable .qty-wrap{
  position:relative;
  display:inline-block;
  width:92px; /* alle Inputs exakt gleich breit */
}

#marketTable .qty-wrap input.qty-sell,
#marketTable .qty-wrap input.qty-buy{
  width:100%;
  background-color:#0c1524;
  border:1px solid #abffaa;
  padding:4px 28px 4px 6px; /* Platz rechts für Stepper */
  height:30px;
  color:white;
  border-radius:6px;
  text-align:right;
  outline:none;
}

#marketTable .qty-wrap input.qty-sell:disabled,
#marketTable .qty-wrap input.qty-buy:disabled{
  opacity:.45;
  border-color:#2a3446;
}

/* native Spinner killen (Chrome/Safari/Edge) */
#marketTable .qty-wrap input::-webkit-outer-spin-button,
#marketTable .qty-wrap input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* native Spinner killen (Firefox) */
#marketTable .qty-wrap input[type=number]{
  -moz-appearance:textfield;
  appearance:textfield;
}

#marketTable .qty-step{
  position:absolute;
  top:1px;
  right:1px;
  bottom:1px;
  width:22px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-left:1px solid rgba(171,255,170,.35);
  border-radius:0 6px 6px 0;
}

#marketTable .qty-step button{
  flex:1;
  width:100%;
  border:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(31,42,59,.85);
  color:var(--accent);
  cursor:pointer;
  line-height:1;
  font-size:12px;
}

#marketTable .qty-step button + button{
  border-top:1px solid rgba(171,255,170,.25);
}

#marketTable .qty-step button:hover{ filter:brightness(1.08); }
#marketTable .qty-step button:active{ filter:brightness(.92); }
#marketTable .qty-step button:disabled{ opacity:.35; cursor:default; }

/* Footer nur für Markt-Table */
#marketTable tfoot > tr > td{
  text-align:right;
  padding-right:20px !important;
  font-weight:bold;
}

span#marketTotalBuy {
    margin-right: 26px !important;
}

span#marketTotalSell {
    margin-right: 26px !important;
}

th.market-grouphead {
    text-align: left !important;
    color: white !important;
    border-bottom: 1px solid white !important;
    background: none !important;
}

th.left-align {
    background: none !important;
}

td, th {
    padding-right: 18px;
}

#marketTable thead tr.market-cols th {
    text-align: center;
    color: var(--muted) !important;
    font-size: 11px !important;
}

tfoot {
    font-size: 13px !important;
}

/* =========================================================
   12) Systeme (Akkordeons im Tab "Systeme")
   ========================================================= */

/* Zusatz-Variablen für Kategorien */
:root{
  --col-primary:  #ffb86c;  /* Primärmodule – Lebenserhaltung */
  --col-secondary:#89ddff;  /* Sekundärmodule – Betriebssysteme */
  --col-tertiary: #c792ea;  /* Tertiärmodule – Zusatzsysteme */
}

/* Container-Grids der drei Gruppen (nutzt bereits .gridlist) */
#view-systeme .gridlist{
  grid-template-columns: 1fr; /* einspaltig; kann später responsiv werden */
}

/* Grundbox für ein System */
details.sys{
  border:1px solid #2a3446;
  border-radius: 8px;
  background: #0c1524;
  overflow: clip; /* verhindert Border-Überlauf bei Animation */
  transition: border-color .2s ease, background .2s ease;
}

/* Header */
details.sys > summary{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  cursor:pointer;
  user-select:none;
  list-style:none; /* Firefox */
  outline:none;
  color: white;
font-weight: 800;
}

/* Default-Marker killen (Chromium/WebKit) */
details.sys > summary::-webkit-details-marker{ display:none }

/* Pfeil rechts (ohne Icon-Font) */
details.sys > summary::after{
  content:"▸";
  margin-left:auto;
  transform: translateY(-1px);
  transition: transform .15s ease;
  opacity:.85;
}
details.sys[open] > summary::after{
  transform: rotate(90deg);
}

/* Icon links leicht betonen */
details.sys > summary i{ color: var(--accent); }

/* Unterzeile im Summary (deine .muted) leicht abdunkeln */
details.sys > summary .muted{ color: #8a93a3; }

/* Hover/Fokus-Feedback */
details.sys:hover{ border-color:#3a455a; background:#0e1728; }
details.sys > summary:focus-visible{
  box-shadow: 0 0 0 2px rgba(171,255,170,.25), 0 0 0 4px rgba(171,255,170,.15);
  border-radius:8px;
}

/* Body (ausklappbarer Inhalt) mit weicher Animation */
details.sys .sys-body{
  border-top:1px solid #2a3446;
  padding: 0 12px;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition: max-height .25s ease, opacity .2s ease, padding .2s ease;
}
details.sys[open] .sys-body{
  padding:10px 12px 12px;
  max-height: 500px; /* ausreichend groß für Fließtext */
  opacity:1;
}

/* Kategorie-Farbstreifen am linken Rand */
#sys-primary   details.sys > summary{ border-left:4px solid var(--col-primary);   padding-left: 8px; }
#sys-secondary details.sys > summary{ border-left:4px solid var(--col-secondary); padding-left: 8px; }
#sys-tertiary  details.sys > summary{ border-left:4px solid var(--col-tertiary);  padding-left: 8px; }

/* Offener Zustand: Streifen etwas heller */
#sys-primary   details.sys[open] > summary{ border-left-color: color-mix(in srgb, var(--col-primary) 80%, white); }
#sys-secondary details.sys[open] > summary{ border-left-color: color-mix(in srgb, var(--col-secondary) 80%, white); }
#sys-tertiary  details.sys[open] > summary{ border-left-color: color-mix(in srgb, var(--col-tertiary) 80%, white); }

/* Abstand zwischen Boxen */
details.sys + details.sys{ margin-top:8px; }

/* Typo im Body */
details.sys .sys-body p{
  margin: 8px 0;
  line-height:1.5;
}
details.sys .sys-body strong{ color:#dbe5f5 }

/* Mobile: kompaktere Paddings */
/*@media (max-width: 960px){
  details.sys > summary{ padding:8px 10px }
  details.sys[open] .sys-body{ padding:8px 10px 10px }
}*/

/* (Optional) Pill-Badge – falls an anderen Stellen benötigt/benutzt */
/*.pill{
  display:inline-block;
  padding:4px 10px;
  border:1px solid #2a3446;
  background:#0c1524;
  border-radius:999px;
  color:#d7dee9;
  font-weight:600;
  line-height:1;
}*/

.subcard {
    padding: 20px 0px;
}

.tile.unknown {
      outline: 1px solid #171f23 !important;
      outline-offset: -1px !important;
}

summary > span.muted {
    font-weight: 400;
}

#marketBody td {
    text-align: center;
}

progress {
  border-radius: 3px !important;
}


/* --- Nachtkulisse: Sterne hinten, Station vorne --- */
:root{
  /* Geschwindigkeit & (optional) Kachelbreite deiner Stern-Grafik anpassen */
  --sky-speed: 900s;          /* je größer, desto langsamer */
  --sky-tile-w: 4096px;       /* Breite deiner station_night_onlystars.png in px (für nahtlosen Loop) */
  --station-width: 100vw;     /* Höhe der Station im Vordergrund */
}

body.is-night{
  background: #070c16;        /* dunkler Basiston */
  overflow-x: hidden;         /* falls mal was subpixelig schiebt */
}

/* Sterne-Hintergrund (scrollt gaaanz langsam von links nach rechts) */
body.is-night::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background-image: url("images/station_night_onlystars.jpeg");
  background-repeat: repeat-x;          /* endlos kacheln */
  background-position: 0 50%;           /* Start (x,y) */
  background-size: auto 100%;           /* Bildhöhe = Viewporthöhe; Breite automatisch */
  image-rendering: auto;

  animation: sky-pan var(--sky-speed) linear infinite;
  will-change: background-position;
}

/* Station/Asteroid im Vordergrund, unten angedockt */
body.is-night::after{
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--station-height);
  z-index: -1;
  pointer-events: none;

  background: url("images/station_night_onlystation.png") no-repeat center bottom;
  background-size: cover;             /* skaliert proportional */
  height: 100vh;
}

/* Keyframes: bewege die Stern-Textur horizontal.
   WICHTIG: 'to' muss die exakte Kachelbreite sein, damit der Loop nahtlos ist. */
@keyframes sky-pan{
  from { background-position: 0 50%; }
  to   { background-position: var(--sky-tile-w) 50%; }
}

/* Barrierefreiheit: Animation bei „reduzierter Bewegung“ pausieren */
/*@media (prefers-reduced-motion: reduce){
  body.is-night::before{ animation: none; }
}*/


body.is-day{
  background: #070c16;        /* dunkler Basiston */
  overflow-x: hidden;         /* falls mal was subpixelig schiebt */
}

/* Sterne-Hintergrund (scrollt gaaanz langsam von links nach rechts) */
body.is-day::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background-image: url("images/station_day_onlysky.jpeg");
  background-repeat: repeat-x;          /* endlos kacheln */
  background-position: 0 50%;           /* Start (x,y) */
  background-size: auto 100%;           /* Bildhöhe = Viewporthöhe; Breite automatisch */
  image-rendering: auto;

  animation: sky-pan var(--sky-speed) linear infinite;
  will-change: background-position;
}

/* Station/Asteroid im Vordergrund, unten angedockt */
body.is-day::after{
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--station-height);
  z-index: -1;
  pointer-events: none;

  background: url("images/station_day_onlystation.png") no-repeat center bottom;
  background-size: cover;             /* skaliert proportional */
  height: 100vh;
}

/* Keyframes: bewege die Stern-Textur horizontal.
   WICHTIG: 'to' muss die exakte Kachelbreite sein, damit der Loop nahtlos ist. */
@keyframes sky-pan{
  from { background-position: 0 50%; }
  to   { background-position: var(--sky-tile-w) 50%; }
}

/* Barrierefreiheit: Animation bei „reduzierter Bewegung“ pausieren */
/*@media (prefers-reduced-motion: reduce){
  body.is-day::before{ animation: none; }
}*/


section#view-wetter li {
    list-style-type: none;
}

section#view-wetter ul {
    margin-left: 10px;
    padding-left: 0px !important;
}

.item.research-item.research-unavailable.research-missing-book, .item.research-item.research-unavailable.research-missing-book .ico, .item.research-item.research-unavailable.research-missing-book .resource-icon {
    /* background-color: #545454; */
    color: gray !important;
}

.item.research-item.research-unavailable.research-missing-resources .btn:disabled {
    background-color: #7e1414;
    color: white;
}

.research-unavailable .research-main > div {
    /* color: #cf7070; */
    filter: opacity(0.5);
}

.left-align {
  text-align: left !important;
}

div#raidsGrid {
    background-image: url(../images/galaxy/space_bg.png);
    background-size: cover;
}

.raidcell{
  width:18px;height:18px;border:0px solid var(--line);border-radius:0px;
  display:flex;align-items:center;justify-content:center;font-size:11px;cursor:pointer;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#raidsGrid{display:grid;gap:1px;user-select:none}

#raidsGrid{
  display:grid;
  gap:2px;
  width:100%;
}

.raidcell{
  width:100%;
  height:auto;
  aspect-ratio: 1 / 1;
  border:1px solid var(--line);
  border-radius:4px;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  cursor:pointer;
}

.wrap {
    min-width: 1200px !important;
}
body {
  min-width: 1240px !important;
}

/* =========================================================
   Top-Left Dock (Kontakt / Konto)
   ========================================================= */
.topLeftDock{
  position:fixed;
  top:12px;
  right:12px;
  z-index:9999;
  display:inline-flex;
flex-direction:column;
align-items:flex-end;
}

.dockBtn{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(18,24,38,.92);
  border:1px solid #2a3446;
  border-radius:10px;
  color:var(--accent);
  cursor:pointer;
  backdrop-filter:blur(2px);
}
.dockBtn:hover{
  border-color:var(--accent);
}

.dockMenu{
  display:none;
  position:absolute;
  right:0;
  top:calc(38px + 8px);  /* 38px Button-Höhe + 8px Abstand */
  margin-top:0;
  margin-top:8px;
  min-width:180px;
  background:rgba(18,24,38,.96);
  border:1px solid #2a3446;
  border-radius:10px;
  padding:6px;
  box-shadow:0 10px 25px rgba(0,0,0,.35);
}
.dockMenu.open{ display:block; }

.dockItem{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border:0;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  border-radius:8px;
  text-align:left;
}
.dockItem i{ color:var(--accent); }
.dockItem:hover{ background:#0c1524; }

.dockItem.danger{ color:#ffb3b3; }
.dockItem.danger i{ color:#ffb3b3; }

.dockSep{
  height:1px;
  background:#2a3446;
  margin:6px 4px;
}

/* =========================================================
   Hilfe-Modal
   ========================================================= */
.helpModal{
  position:fixed;
  inset:0;
  z-index:10000; /* ueber Dock (9999) */
}

.helpBackdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
}

.helpPanel{
  position:absolute;
  left:50%;
  top:5vh;
  transform:translateX(-50%);
  width:min(1100px, 92vw);
  height:min(80vh, 820px);
  background:rgba(18,24,38,.98);
  border:1px solid #2a3446;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.helpHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid #2a3446;
}

.helpTitle{
  color:var(--accent);
  font-weight:800;
  font-family:'Orbitron'!important;
  display:flex;
  align-items:center;
  gap:10px;
}

.helpMenuBtn{
  display:none;               /* Desktop: versteckt */
  width:38px;
  height:34px;
  border-radius:8px;
  border:1px solid #2a3446;
  background:#0c1524;
  color:var(--text);
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.helpMenuBtn i{ color:var(--accent); }
.helpMenuBtn:hover{ background:#0b1220; }


.helpClose{
  background:transparent;
  border:0;
  color:var(--text);
  font-size:18px;
  cursor:pointer;
  padding:6px 10px;
  border-radius:8px;
}
.helpClose:hover{ background:#0c1524; }

.helpBody{
  display:flex;
  flex:1;
  min-height:0;
}

.helpNav{
  width:240px;
  border-right:1px solid #2a3446;
  padding:8px;
  overflow:auto;
  background:rgba(12,21,36,.6);
}

.helpNav button{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  text-align:left;
}
.helpNav button i{ color:var(--accent); }
.helpNav button:hover{ background:#0c1524; }
.helpNav button.on{
  background:var(--accent);
  color:#0b1220;
}
.helpNav button.on i{ color:#0b1220; }

.helpContent{
  flex:1;
  padding:12px 14px;
  overflow:auto;
}
.helpContent h3{
  margin:0 0 10px;
  color:var(--accent);
  font-family:'Orbitron'!important;
}
.helpContent code{
  background:#0c1524;
  border:1px solid #2a3446;
  padding:2px 6px;
  border-radius:6px;
}

#helpContent h4 {
    color: #abffaa;
    font-style: italic;
    letter-spacing: 2px;
  }

    a.mail {
        color: #abffaa;
    }

    .helpNavScrim{ display:none; }

    /* Mobile: Nav als Drawer, Content volle Breite */
    @media (max-width: 860px){
      .helpMenuBtn{ display:inline-flex; }

      .helpBody{ position:relative; }

      .helpNav{
        position:absolute;
        top:0; bottom:0; left:0;
        width:min(86vw, 320px);
        transform:translateX(-110%);
        transition:transform .2s ease;
        z-index:3;
        border-right:1px solid #2a3446;
        background:rgba(12,21,36,.98);
      }

      #helpModal.nav-open .helpNav{
        transform:translateX(0);
      }

      .helpNavScrim{
        position:absolute;
        inset:0;
        background:rgba(0,0,0,.35);
        display:block;
        opacity:0;
        pointer-events:none;
        transition:opacity .2s ease;
        z-index:2;
      }

      #helpModal.nav-open .helpNavScrim{
        opacity:1;
        pointer-events:auto;
      }

      .helpContent{
        padding:12px 12px; /* bisschen enger, aber nicht gequetscht */
      }
    }

.link {
  color: #abffaa;
}

    /* =========================================================
       Profil-Modal
       ========================================================= */

    .profilePanel{
      width:min(760px, 92vw);
      height:auto;
      max-height:min(80vh, 820px);
    }

    .profileContent{
      overflow:auto;
    }

    .pf-grid{
      display:grid;
      grid-template-columns:1fr;
      gap:10px;
    }

    @media (min-width: 860px){
      .pf-grid{
        grid-template-columns:1fr 1fr;
      }
    }

    .pf-field{
      display:grid;
      gap:6px;
    }

    .pf-field label{
      color:var(--muted);
      font-size:13px;
    }

    .pf-field input{
      width:100%;
      background:#0c1524;
      border:1px solid #2a3446;
      color:var(--text);
      padding:10px;
      border-radius:8px;
      outline:none;
    }

    .pf-field input:focus{
      border-color:var(--accent);
    }

    .pf-field input[readonly]{
      opacity:.9;
    }

    .pf-actions{
      margin-top:10px;
      display:flex;
      gap:10px;
      justify-content:flex-end;
    }

    .pf-sep{
      border:0;
      border-top:1px solid #2a3446;
      margin:14px 0;
    }

    .pf-danger-title{
      color:var(--bad);
    }

    .pf-dangerbox{
      border:1px solid #2a3446;
      border-radius:10px;
      padding:12px;
      background:rgba(12,21,36,.5);
    }

    .btn.pf-danger-btn{
      background:var(--bad);
      color:#0b1220;
    }