:root {
  color-scheme: dark;
  --bg: #11181c;
  --surface: #182126;
  --surface-raised: #202b31;
  --ink: #edf0e9;
  --muted: #a0acae;
  --line: #303d43;
  --accent: #eca96f;
  --green: #83c4a0;
  --lime: var(--accent);
  --red: #e99b91;
  --nav: #10171b;
  --white: var(--surface);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font:
    14px/1.5 Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    sans-serif;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  padding: 11px 17px;
  background: var(--green);
  color: white;
  font-weight: 650;
  transition:
    background 0.15s,
    transform 0.15s;
}
button:hover:not(:disabled) {
  filter: brightness(0.96);
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
input,
select {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  min-width: 0;
}
input:focus,
select:focus {
  border-color: var(--green);
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
h1 {
  font-size: 36px;
  font-weight: 650;
  letter-spacing: -1.3px;
}
h1 span {
  color: var(--green);
}
h2 {
  font-size: 19px;
  letter-spacing: -0.3px;
}
h3 {
  font-size: 16px;
}
h4 {
  font-size: 13px;
}
p {
  color: var(--muted);
}
small {
  font-size: 11px;
  color: var(--muted);
}
[hidden] {
  display: none !important;
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 218px;
  background: var(--nav);
  color: #f7fafc;
  padding: 32px 22px;
  display: flex;
  flex-direction: column;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand > b {
  background: var(--lime);
  color: var(--nav);
  font-size: 30px;
  line-height: 44px;
  width: 44px;
  text-align: center;
  border-radius: 12px;
}
.brand > span {
  font-size: 22px;
  font-weight: 750;
  letter-spacing: 1px;
}
.brand small {
  display: block;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--muted);
  font-weight: 500;
}
.navlabel {
  font-size: 9px;
  letter-spacing: 1.5px;
  margin: 51px 10px 16px;
  color: var(--muted);
}
/* Die Spalte ist in Gruppen eingeteilt. Ueberschriften kosten selbst Hoehe, deshalb sind die
   Eintraege enger gesetzt als vorher und die Gruppen lassen sich zuklappen; der Zustand liegt
   je Gruppe im Browserspeicher (siehe web/app.js). */
nav {
  display: grid;
  gap: 10px;
  overflow-y: auto;
}
.navliste {
  display: grid;
  gap: 4px;
}
nav button[data-page] {
  display: flex;
  gap: 11px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-size: 13px;
  padding: 9px 12px;
}
nav button[data-page] span {
  width: 18px;
  font-size: 18px;
  line-height: 19px;
}
nav button[data-page].active {
  background: #2b3c48;
  color: var(--lime);
}
.navgruppenkopf {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  background: transparent;
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 12px 5px;
}
.navgruppenkopf:hover {
  color: var(--ink);
}
.navpfeil {
  font-size: 9px;
  line-height: 1;
  transition: transform 0.12s ease;
}
.navgruppe.ist-zu .navpfeil {
  transform: rotate(-90deg);
}
.navgruppe.ist-zu .navliste {
  display: none;
}
.sidebarfoot {
  margin-top: auto;
  padding: 22px 10px 0;
  border-top: 1px solid #304050;
}
.sidebarfoot p {
  font-size: 12px;
  margin: 14px 0;
  color: var(--muted);
}
.testbadge {
  font-size: 9px;
  letter-spacing: 1.5px;
  border: 1px solid #506154;
  border-radius: 5px;
  padding: 4px 6px;
  color: var(--lime);
}
.shell {
  margin-left: 218px;
}
/* --- Gemeinsamer Kopf ------------------------------------------------------------------- */
/* Ein Kopf fuer alle Seiten: links wo man ist, rechts Verbindung, Konto und Einstieg in den
   Markt, darunter die Kennzahlen. Die feste Mindesthoehe der beiden Zeilen haelt den Kopf beim
   An- und Abmelden ruhig - ohne sie springt die Seite, sobald Figur und Kacheln erscheinen. */
.kopf {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: 10px 36px 12px;
}
.kopfzeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 72px;
}
.kopfort {
  min-width: 0;
}
.kopfort h1 {
  font-size: 23px;
  letter-spacing: -0.6px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.kopfort #pageIntro {
  font-size: 12px;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60ch;
}
.kopfstatus {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
/* Verbindung: im Normalfall nur ein ruhiges Zeichen. Text erscheint erst bei einer Stoerung,
   dann aber deutlich. */
.verbindung {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  border-radius: 999px;
  padding: 4px 8px;
}
.verbindungspunkt {
  font-size: 11px;
  line-height: 1;
}
.verbindung .verbindungstext {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.verbindung.ist-laut .verbindungstext {
  position: static;
  width: auto;
  height: auto;
  clip-path: none;
  font-weight: 650;
}
.verbindung.live {
  color: var(--green);
}
.verbindung.wartet {
  color: var(--muted);
}
.verbindung.stale {
  color: var(--red);
  background: #352427;
  border: 1px solid #6c4245;
}
.kopfstatus .konto {
  position: relative;
}
.kontoknopf {
  display: flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  padding: 3px 9px 3px 4px;
  border: 1px solid transparent;
  border-radius: 11px;
}
.kontoknopf:hover,
.kontoknopf[aria-expanded="true"] {
  background: var(--surface-raised);
  border-color: var(--line);
}
.kontopfeil {
  font-size: 10px;
  color: var(--muted);
}
.kontomenue {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  min-width: 215px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 12px 28px #16263412;
  padding: 10px 12px;
  display: grid;
  gap: 8px;
  justify-items: start;
}
.kontomenue .currency-unit {
  margin: 0;
  white-space: normal;
}
.kontomenue #logout {
  font-size: 12px;
  font-weight: 650;
}
/* Kennzahlenzeile. Angemeldet stehen hier drei Kacheln, abgemeldet der Hinweis - beide in
   derselben Hoehe, damit die Anmeldung den Kopf nicht verschiebt. */
.kopfwerte {
  display: flex;
  align-items: stretch;
  min-height: 78px;
}
.kopfwerte .summarygrid {
  flex: 1;
}
.kopfhinweis {
  font-size: 12px;
  margin: 0;
  align-self: center;
}
.textbutton {
  padding: 0;
  background: transparent;
  color: var(--green);
  font-size: 11px;
}
.secondary {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}
main {
  max-width: 1550px;
  margin: auto;
  padding: 22px 36px 20px;
}
/* Die Kacheln stehen im Kopf und sind deshalb flach: eine Zeile Beschriftung, der Wert, eine
   Zeile Erlaeuterung. Keine Mindesthoehe mehr - die haelt jetzt die Kopfzeile. */
.summarygrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 13px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}
.summary > span {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.summary strong {
  font-size: clamp(16px, 1.5vw, 21px);
  letter-spacing: -0.5px;
  font-weight: 620;
  line-height: 1.25;
  margin: 2px 0;
  overflow-wrap: anywhere;
}
.summary small {
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.summary.hero {
  background: var(--nav);
  border-color: var(--nav);
  color: white;
  position: relative;
  overflow: hidden;
}
.summary.hero:after {
  content: "↗";
  position: absolute;
  right: 15px;
  top: 8px;
  font-size: 70px;
  font-weight: 200;
  color: #ffffff0b;
}
.summary.hero > span {
  color: var(--muted);
}
.summary.hero strong {
  color: var(--lime);
}
.summary.hero small {
  color: var(--muted);
}
.sectionhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 21px;
}
.sectionhead p {
  font-size: 12px;
  margin-top: 5px;
}
.count {
  font-size: 11px;
  background: var(--surface-raised);
  padding: 3px 7px;
  border-radius: 6px;
  margin-left: 6px;
  color: var(--muted);
  vertical-align: middle;
}
.searchbox {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  display: flex;
  align-items: center;
  padding-left: 12px;
  min-width: 260px;
}
.searchbox > span {
  font-size: 22px;
  color: var(--muted);
}
.searchbox input {
  border: 0;
  background: transparent;
  width: 100%;
  font-size: 12px;
}
.itemgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.itemcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  transition: box-shadow 0.15s;
}
.itemcard:hover {
  box-shadow: 0 8px 25px #2433450a;
  border-color: var(--line);
}
.itemtop {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 21px;
}
.itemicon {
  width: 50px;
  height: 50px;
  background: var(--surface-raised);
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.itemicon img {
  width: 44px;
  height: 44px;
  image-rendering: pixelated;
}
.fallback {
  font-size: 23px;
  color: var(--muted);
}
.itemname {
  font-size: 14px;
  font-weight: 650;
  background: transparent;
  color: var(--ink);
  padding: 0;
  text-align: left;
  line-height: 1.4;
}
.itemtop small {
  display: block;
  font-size: 10px;
  margin-top: 3px;
}
.variantlabel {
  color: var(--accent) !important;
}
.cardnumbers {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 15px 0;
}
.cardnumbers span {
  display: block;
  color: var(--muted);
  font-size: 10px;
}
.cardnumbers b {
  display: block;
  font-size: 17px;
  font-weight: 600;
  margin-top: 2px;
}
.cardnumbers > div:last-child {
  text-align: right;
}
.cardactions {
  display: flex;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.cardactions button {
  flex: 1;
  font-size: 12px;
  padding: 8px 10px;
}
.panel {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 26px;
  border-radius: 13px;
  margin-bottom: 20px;
}
.flowhint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 27px;
  padding: 30px 0 24px;
  margin-top: 25px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}
.flowhint b {
  font-weight: 500;
  margin-left: 8px;
  color: var(--muted);
}
.flowhint i {
  font-style: normal;
  color: var(--muted);
}
footer {
  font-size: 10px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 0;
}
.emptyhero {
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 35px;
  margin-top: 12px;
}
.emptyhero > span {
  font-size: 38px;
  color: var(--green);
}
.emptyhero p {
  max-width: 530px;
  margin: 13px auto 22px;
}
.hint {
  font-size: 11px;
  color: var(--muted);
}
.loginpanel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  padding: 18px 22px;
  background: #222c29;
  border: 1px solid #3c4b41;
  border-radius: 12px;
  margin-bottom: 28px;
}
.loginpanel p {
  font-size: 12px;
  margin-top: 5px;
}
.loginpanel form {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.loginpanel input {
  width: 160px;
}
.loginpanel summary {
  font-size: 12px;
  cursor: pointer;
}
.loginpanel button {
  font-size: 12px;
}
#message,
#detailNotice {
  padding: 13px 18px;
  background: #21322c;
  color: var(--green);
  border-radius: 9px;
  margin-bottom: 20px;
  border: 1px solid #3a5548;
}
#message.error,
#detailNotice.error {
  background: #352427;
  color: var(--red);
  border-color: #6c4245;
}
#retry {
  margin-bottom: 20px;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}
th {
  color: var(--muted);
  font-weight: 500;
  font-size: 10px;
  text-align: left;
  white-space: nowrap;
  padding: 11px 12px;
  background: var(--surface-raised);
}
td {
  border-bottom: 1px solid var(--line);
  padding: 13px 12px;
  font-variant-numeric: tabular-nums;
}
td button {
  padding: 6px 10px;
  font-size: 11px;
  background: var(--surface-raised);
  color: var(--ink);
}
td.empty {
  text-align: center;
  color: var(--muted);
  padding: 30px;
}
.scroll {
  overflow: auto;
  max-height: 400px;
}
.chestgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.chestgrid p {
  font-size: 12px;
  margin: 12px 0;
}
.chestglyph {
  font-size: 35px;
  color: var(--green);
}
.chestcontents {
  display: grid;
  gap: 6px;
  margin-top: 18px;
}
.chestrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  background: var(--surface-raised);
}
.chestrow small {
  margin-left: auto;
}
.chestrow .itemicon {
  width: 34px;
  height: 34px;
}
.chestrow img {
  width: 30px;
  height: 30px;
}
#chestStatus {
  margin-bottom: 10px;
}
#chestsPanel > .hint {
  margin-bottom: 25px;
}
dialog {
  border: 0;
  border-radius: 17px;
  padding: 28px;
  width: min(1120px, 94vw);
  max-height: 92vh;
  color: var(--ink);
  box-shadow: 0 25px 100px #07162640;
}
dialog::backdrop {
  background: #13202c80;
  backdrop-filter: blur(4px);
}
.dialoghead {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: flex-start;
}
.detailidentity {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.detailidentity > div:last-child {
  min-width: 0;
}
.detailidentity h2 {
  font-size: 24px;
}
.detailidentity small {
  overflow-wrap: anywhere;
}
.detailidentity .itemicon {
  width: 68px;
  height: 68px;
}
.detailidentity img {
  width: 60px;
  height: 60px;
}
.close {
  font-size: 27px;
  background: var(--surface-raised);
  color: var(--muted);
  padding: 0;
  width: 34px;
  height: 34px;
  line-height: 30px;
}
.detailmetrics {
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.detailmetrics span {
  display: block;
  font-size: 10px;
  color: var(--muted);
}
.detailmetrics strong {
  display: block;
  font-size: 18px;
  margin-top: 4px;
}
.badge {
  background: #21322c;
  padding: 5px 9px;
  border-radius: 5px;
  color: var(--green) !important;
  margin-left: auto;
  font-size: 10px !important;
}
.tradelayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 30px;
}
.bookpanel {
  min-width: 0;
}
.books {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.books > div {
  max-height: 420px;
  overflow: auto;
}
.books h4 {
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
}
.books td,
.books th {
  text-align: right;
  padding: 9px 10px;
}
.books td:first-child,
.books th:first-child {
  text-align: left;
}
.books td {
  font-size: 12px;
}
.books button {
  font: inherit;
  padding: 0;
  background: transparent;
  color: inherit;
}
.buytext,
#bids {
  color: var(--green);
}
.selltext,
#asks {
  color: var(--red);
}
.bookpanel > .hint {
  margin: 18px 0;
}
.recent {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.recent summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
}
.ticket {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 21px;
}
.ticket h3 {
  margin-bottom: 15px;
}
.ticket label {
  display: block;
  font-size: 11px;
  margin: 15px 0 6px;
  color: var(--muted);
}
.ticket input,
.ticket select {
  width: 100%;
  font-size: 13px;
}
.ticket form > button {
  width: 100%;
  margin-top: 8px;
}
.segmented {
  display: flex;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  border-radius: 8px;
  padding: 3px;
}
.segmented button {
  width: 50%;
  padding: 8px;
  font-size: 12px;
  background: transparent;
  color: var(--muted);
}
.segmented button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--green);
  box-shadow: 0 1px 4px #23384412;
}
.segmented #sellSide[aria-pressed="true"] {
  color: var(--red);
}
.labelrow {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 9px;
}
.labelrow button {
  font-size: 9px;
  margin-bottom: 8px;
  text-align: right;
}
.preview {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 18px 0 8px;
}
.preview > span {
  font-size: 10px;
  color: var(--muted);
}
.preview strong {
  display: block;
  font-size: 24px;
  margin: 3px 0;
  font-weight: 600;
}
.preview p {
  font-size: 11px;
  line-height: 1.6;
}
.ticket .hint {
  font-size: 10px;
  margin-top: 10px;
}
.withdrawarea {
  border-top: 1px solid var(--line);
  margin-top: 21px;
  padding-top: 17px;
}
#withdrawForm {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
#withdrawForm input {
  width: 80px;
}
#withdrawForm button {
  width: auto;
  flex: 1;
  margin: 0;
  padding: 8px;
  font-size: 11px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
code {
  background: var(--surface-raised);
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 12px;
}
.sidebar code {
  background: #304050;
  color: var(--ink);
}
@media (min-width: 1650px) {
  .itemgrid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1100px) {
  .sidebar {
    width: 180px;
    padding: 27px 14px;
  }
  .shell {
    margin-left: 180px;
  }
  main {
    padding: 20px 24px;
  }
  .kopf {
    padding: 9px 24px 11px;
  }
  .kopfstatus {
    gap: 10px;
  }
  .summary {
    padding: 7px 10px;
  }
  .summarygrid {
    gap: 8px;
  }
  .sectionhead {
    align-items: flex-start;
  }
  .tradelayout {
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 18px;
  }
  .detailmetrics {
    gap: 20px;
  }
  .summary > span {
    font-size: 11px;
  }
}
@media (max-width: 760px) {
  .sidebar {
    position: static;
    width: auto;
    padding: 12px 16px;
  }
  .brand > b {
    width: 32px;
    line-height: 32px;
    font-size: 24px;
  }
  .brand > span {
    font-size: 17px;
  }
  .brand small {
    font-size: 8px;
  }
  .navlabel,
  .sidebarfoot {
    display: none;
  }
  .sidebar .brand {
    margin-bottom: 0;
  }
  /* Schmal wird aus der Spalte wieder eine einzeilige Leiste. Ueberschriften wuerden dort nur
     Platz kosten: sie entfallen, und alle Gruppen geben ihre Eintraege frei - auch die, die
     breit gerade zugeklappt sind. */
  nav {
    display: flex;
    margin-top: 12px;
    gap: 4px;
    overflow: auto;
  }
  .navgruppe,
  .navliste,
  .navgruppe.ist-zu .navliste {
    display: contents;
  }
  .navgruppenkopf {
    display: none;
  }
  nav button[data-page] {
    white-space: nowrap;
    padding: 9px;
    font-size: 11px;
    gap: 6px;
  }
  nav button[data-page] span {
    font-size: 16px;
    width: 12px;
  }
  .shell {
    margin: 0;
  }
  .kopf {
    padding: 8px 16px 10px;
  }
  /* Schmales Fenster: Ort und Konto stehen untereinander, damit nichts waagerecht hinausragt. */
  .kopfzeile {
    flex-wrap: wrap;
    gap: 6px 10px;
    min-height: 0;
    padding-bottom: 8px;
  }
  .kopfort {
    flex: 1 1 100%;
    order: 2;
  }
  .kopfort #pageIntro {
    display: none;
  }
  .kopfstatus {
    flex: 1 1 100%;
    order: 1;
    justify-content: space-between;
    gap: 8px;
  }
  .kopfstatus #explore {
    font-size: 11px;
    padding: 8px 10px;
  }
  .kopfwerte {
    min-height: 60px;
  }
  main {
    padding: 16px 16px 20px;
  }
  h1 {
    font-size: 29px;
  }
  .kopfort h1 {
    font-size: 19px;
  }
  /* Drei Kacheln bleiben auch schmal nebeneinander: gestapelt waeren sie hoeher als der
     gesamte alte Kopf. Die Erlaeuterung entfaellt, der Wert bleibt. */
  .summary {
    padding: 6px 8px;
    border-radius: 8px;
  }
  .summary small {
    display: none;
  }
  .summary > span {
    font-size: 9px;
  }
  .summary strong {
    font-size: 14px;
    letter-spacing: -0.3px;
  }
  .summarygrid {
    gap: 6px;
  }
  .sectionhead {
    flex-direction: column;
    gap: 16px;
  }
  .searchbox {
    width: 100%;
  }
  .itemgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .itemcard {
    padding: 14px;
  }
  .itemtop {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
  }
  .itemname {
    font-size: 13px;
  }
  .cardnumbers {
    flex-direction: column;
    gap: 8px;
  }
  .cardnumbers > div:last-child {
    text-align: left;
  }
  .cardactions {
    flex-direction: column;
  }
  .flowhint {
    gap: 10px;
    font-size: 9px;
  }
  .flowhint b {
    display: block;
    margin: 2px 0;
  }
  .flowhint i {
    margin: 0 4px;
  }
  footer {
    flex-direction: column;
    font-size: 9px;
  }
  .loginpanel {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }
  .chestgrid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  dialog {
    padding: 20px;
    max-height: 95vh;
    width: 96vw;
  }
  .tradelayout {
    grid-template-columns: 1fr;
  }
  .detailmetrics {
    flex-wrap: wrap;
    gap: 15px;
  }
  .detailmetrics .badge {
    margin: 0;
  }
  .detailidentity h2 {
    font-size: 20px;
  }
  .detailidentity .itemicon {
    width: 46px;
    height: 46px;
  }
  .detailidentity img {
    width: 42px;
    height: 42px;
  }
  .detailidentity small {
    font-size: 9px;
  }
  .books {
    gap: 8px;
  }
  .books td {
    font-size: 11px;
  }
  .ticket {
    padding: 20px;
  }
  .panel {
    padding: 20px;
  }
}
/* Orderbuch und Auftrag bleiben auf dem Desktop nebeneinander sichtbar. */
@media (min-width: 761px) {
  dialog[open] {
    display: flex;
    flex-direction: column;
    height: min(880px, 94vh);
    max-height: 94vh;
    overflow: hidden;
  }
  .dialoghead,
  .detailmetrics {
    flex-shrink: 0;
  }
  .detailmetrics {
    padding: 18px 0;
    margin-bottom: 18px;
  }
  .tradelayout {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .ticket,
  .bookpanel {
    overflow-y: auto;
  }
  .ticket {
    scrollbar-width: thin;
  }
  .bookpanel {
    padding-right: 5px;
  }
  #detailNotice {
    flex-shrink: 0;
    max-height: 80px;
    overflow: auto;
    margin: 14px 0 0;
    padding: 10px 14px;
  }
  #variant {
    flex-shrink: 0;
    max-height: 60px;
    overflow: auto;
    margin-bottom: 12px;
  }
}
@media (min-width: 761px) {
  dialog[open],
  .tradelayout {
    overflow: clip;
  }
  .tradelayout {
    grid-template-rows: minmax(0, 1fr);
  }
  .ticket,
  .bookpanel {
    min-height: 0;
  }
}
/* Tabellen, Zentralbank und Diagramme der erweiterten Boerse. */
.markettools { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin:18px 0; }
.markettools label { display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted,#637086); }
.markettools select, .markettools input, #withdrawChest { background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:10px 12px; min-height:40px; max-width:100%; }
.markettools input { width:150px; }
.markettools h3 { margin:0; margin-right:auto; }
#pageInfo { font-size:12px; font-variant-numeric:tabular-nums; }
#depotTableWrap { margin-top:18px; padding:0; }
#depotTable td { font-variant-numeric:tabular-nums; }
#depotTable input[type=checkbox] { width:18px; height:18px; accent-color:var(--accent); }
.depotitem { display:flex; align-items:center; gap:10px; min-width:180px; }
.depotitem .itemicon { flex:0 0 36px; width:36px; height:36px; }
.depotitem img { width:32px; height:32px; }
#batchToolbar { margin-top:18px; }
#batchPreview { max-height:200px; overflow:auto; font-size:13px; }
#batchQuantity { width:95px; }
#investorPanel, #bankPanel { margin-top:28px; }
.chart { display:block; width:100%; height:260px; }
.chart.candles { height:240px; }
.chartblock { border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:20px; }
.chartblock .markettools { margin-top:0; }
.chartblock select { padding:8px; font-size:12px; }
.bankrates { padding:20px; border-radius:12px; background:var(--surface-raised); font-weight:600; margin:20px 0; }
#bankAsset { width:280px; }
#chestTable input { border:1px solid var(--line); border-radius:6px; padding:9px; width:170px; }
#chestTable td:last-child div { display:flex; gap:8px; flex-wrap:wrap; min-width:230px; }
#withdrawForm { display:flex; flex-wrap:wrap; gap:10px; }
#withdrawChest { flex-basis:100%; order:-1; }
.feenote { font-size:12px; line-height:1.6; color:var(--muted); background:var(--surface-raised); padding:12px; border-radius:8px; }
details summary { cursor:pointer; font-weight:600; padding:14px 0; }
#message { white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:760px) { .chart {height:220px;} .markettools {gap:8px;} .markettools label {max-width:100%;} #bankAsset {width:100%;} .sectionhead {flex-wrap:wrap;} }
/* Arbeitsansicht: Inhalte vor Erläuterungen, Hilfen bei Bedarf. */
[hidden] { display:none !important; }
.sidebar .brand { margin-bottom:22px; }
.summary strong { font-variant-numeric:tabular-nums; }
.summary.hero:after { display:none; }
#listHint { font-size:12px; }
.help { margin:12px 0; color:var(--muted); font-size:12px; }
.help summary { font-size:12px; font-weight:500; padding:8px 0; }
.help p { line-height:1.65; margin:8px 0; max-width:850px; }
.itemmeta { font-size:11px; color:var(--muted); }
.itemmeta summary { padding:5px 0; font-weight:400; }
.itemmeta #assetId, .itemmeta #variant { display:block; max-width:530px; overflow-wrap:anywhere; }
#chestHelp { margin:16px 0 22px; }
#chestListPanel { margin-top:14px; }
#depotTableWrap.scroll { max-height:none; overflow-x:auto; }
#depotTable td small { color:var(--muted); }
#bankPanel { margin-top:0; }
#bankEdit { padding-top:8px; }
#bankRates { margin-top:14px; }
#batchToolbar { border-color:var(--line); }
#batchPreview[hidden] {display:none;}
#detail #feePreview { margin-top:12px; }
@media (max-width:760px) { .kontoknopf {font-size:12px;} .kontomenue {min-width:0;left:0;right:auto;} }

.chart.emptychart { height:90px; }

/* Kauf-/Verkaufsaktionen bleiben bis Hover oder Tastaturfokus neutral. */
.marketcard { display:flex; flex-direction:column; }
.marketcard .itemtop { flex:1; }
.marketcard .cardactions { border-top:0; padding-top:0; }
.quoteaction {
  min-width:0; background:var(--surface-raised); color:var(--ink); border:1px solid var(--line);
  font-weight:500; line-height:1.5; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.quoteaction b { font-weight:650; }
.quoteaction:hover:not(:disabled), .quoteaction:focus-visible { color:#fff; filter:none; }
.quote-buy:hover:not(:disabled), .quote-buy:focus-visible { background:var(--green); border-color:var(--green); }
.quote-sell:hover:not(:disabled), .quote-sell:focus-visible { background:var(--red); border-color:var(--red); }
.searchbox:focus-within { border-color:var(--green); outline:3px solid var(--accent); outline-offset:3px; }
.searchbox input:focus, .searchbox input:focus-visible { outline:none; box-shadow:none; }
.markettools > button, .markettools > select, .markettools > input, .markettools label > select, .markettools label > input {
  height:40px; min-height:40px; padding:9px 12px; font-size:12px; line-height:20px;
}
.markettools > button { border:1px solid transparent; }
.markettools > span { min-height:40px; display:inline-flex; align-items:center; font-size:12px; }
.markettools h3 { align-self:center; }
@media(max-width:760px) {
  .searchbox { min-width:0; }
  .markettools > label { min-width:0; }
  .markettools > button { max-width:100%; }
}

.orderhistoryhead { margin-top:32px; }
.orderfills summary { font-size:12px; padding:6px 0; white-space:nowrap; }
.orderfills table { margin-top:10px; }
.orderfills th, .orderfills td { padding:8px; font-size:12px; white-space:nowrap; }
.orderfills .hint { max-width:340px; white-space:normal; margin:8px 0; }

/* Der Markt startet als kompakte Preistabelle, Karten bleiben optional. */
#marketTools { margin-top:0; margin-bottom:16px; }
#marketTools .searchbox { flex:1 1 240px; height:40px; min-width:200px; }
#marketTools .searchbox input { flex:1; width:100%; max-width:none; height:38px; font-size:12px; padding:9px 12px; border:0; border-radius:0; background:transparent; }
#marketTableWrap { padding:0; margin:0; max-height:none; overflow-x:auto; }
.markettable { table-layout:fixed; width:100%; }
.markettable th:first-child { width:50%; }
.markettable th:not(:first-child), .markettable td:not(:first-child) { text-align:right; }
.markettable th small { margin-left:4px; font-weight:400; color:var(--muted); }
.markettable td { padding:10px 18px; }
.marketitem { display:flex; align-items:center; gap:12px; min-width:0; }
.marketitem > div:last-child { min-width:0; }
.marketitem .itemicon { flex:0 0 34px; width:34px; height:34px; border-radius:7px; }
.marketitem img { width:30px; height:30px; }
.marketitem .itemname, .marketcard .itemname { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.marketitem small { display:block; color:var(--muted); font-size:10px; margin-top:2px; }
.marketitem .marketblocked, .marketcard .marketblocked { color:var(--red); }
.markettable .quoteaction { width:100%; max-width:190px; padding:8px 12px; text-align:right; font-size:13px; min-height:36px; }
.marketpagination { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px; padding:18px 0; }
.marketpagination button { font-size:12px; }
.marketcard .itemtop { min-height:65px; margin-bottom:16px; }
.marketcard .itemtop > div:last-child { min-width:0; }
.marketcard .quoteaction { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:60px; }
.marketcard .quoteaction b { display:block; font-size:13px; }
@media(max-width:760px) {
  #marketTools { display:grid; grid-template-columns:1fr 1fr; align-items:end; }
  #marketTools .searchbox { grid-column:1/-1; min-width:0; width:100%; }
  #marketTools select { width:100%; }
  .markettable th:first-child { width:44%; }
  .markettable th, .markettable td { padding:9px 6px; }
  .markettable th { font-size:11px; }
  .markettable th small { display:block; margin-left:0; }
  .markettable .quoteaction { font-size:11px; padding:8px 5px; }
  .marketitem { gap:7px; }
  .marketitem .itemicon { flex-basis:26px; width:26px; height:26px; }
  .marketitem img { width:24px; height:24px; }
  .marketitem .itemname { font-size:11px; }
  .marketitem small { font-size:9px; }
  .marketpagination { justify-content:center; gap:8px; }
  .marketpagination button { padding:9px; }
  .marketcard .itemtop { min-height:115px; }
  .marketcard .cardactions { flex-direction:column; }
}

.itemgrid:has(.marketcard) { grid-auto-rows:1fr; }

/* Gemeinsame Depotaktionen und direkt sortierbare, dichte Bestandstabelle. */
#depotTools { margin:12px 0; gap:10px; }
#depotTools label { flex-direction:row; align-items:center; gap:8px; }
#depotTools #selectionCount { margin-left:6px; font-weight:600; }
#depotTableWrap { margin-top:10px; }
#depotTableWrap table { min-width:620px; }
#depotTableWrap th, #depotTable td { padding:10px 12px; }
#depotTableWrap th:first-child { width:42px; }
#depotTableWrap th:nth-child(2) { width:32%; }
#depotTableWrap th:nth-child(n+3), #depotTable td:nth-child(n+3) { text-align:right; font-variant-numeric:tabular-nums; }
#depotTableWrap th button { padding:2px 0; background:transparent; color:var(--ink); font-size:12px; text-align:inherit; }
#selectAllDepot { width:18px; height:18px; accent-color:var(--green); }
#depotTable .depotitem { min-width:160px; gap:9px; }
#depotTable .depotitem .itemname { line-height:1.35; }
#batchToolbar { padding:14px; margin:0 0 10px; border-color:var(--line); }
.batch-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.batch-actions button { padding:8px 14px; font-size:12px; }
.batch-actions [aria-pressed=true] { background:var(--surface-raised); color:var(--ink); }
.batch-actions [data-batch-kind=buy][aria-pressed=true] { background:var(--green); color:white; }
.batch-actions [data-batch-kind=sell][aria-pressed=true] { background:var(--red); color:white; }
#batchToolbar .markettools { margin:12px 0 8px; }
#batchToolbar .markettools label { font-size:11px; gap:4px; }
#batchQuantity { width:110px; }
#batchPreview { max-height:none; margin:12px 0; }
#batchPreview .scroll { max-height:230px; }
#batchPreview table { min-width:650px; }
#batchPreview th, #batchPreview td { font-size:12px; padding:8px; }
#batchPreview p { font-size:12px; margin:8px 0; }
#batchConfirm { padding:9px 14px; font-size:12px; }
@media(max-width:760px) {
 #depotTools { gap:8px; }
 #depotTools > button { padding:8px; }
 #batchToolbar { padding:11px; }
 .batch-actions { gap:6px; }
 .batch-actions button { flex:1; padding:8px; }
 #batchToolbar .markettools > label { max-width:100%; }
 #batchChest { max-width:100%; }
}

/* Permanente Aktionsleiste: keine Hoehenaenderung durch Auswahl. */
#depotTools #selectionCount { flex:0 0 110px; white-space:nowrap; font-variant-numeric:tabular-nums; }
#depotTools .batch-actions { gap:8px; }
#depotTools .batch-actions button { background:var(--white,#fff); color:var(--ink); white-space:nowrap; }
#depotTools .batch-actions button:disabled { opacity:.45; }
#depotTools [data-batch-kind=buy]:hover:enabled { background:var(--green); color:#fff; }
#depotTools [data-batch-kind=sell]:hover:enabled { background:var(--red); color:#fff; }
dialog#batchToolbar { width:min(900px,calc(100vw - 32px)); height:fit-content; max-height:calc(100dvh - 32px); margin:auto; padding:24px; overflow:auto; border:1px solid var(--line); border-radius:16px; }
#batchToolbar .dialoghead { align-items:flex-start; }
#batchToolbar .dialoghead h2 { margin:0; }
#batchSelectionSummary { margin:6px 0 0; color:var(--muted); font-size:13px; }
#batchToolbar #batchPreview .scroll { max-height:40dvh; }
@media(max-width:600px) {
 #depotTools .batch-actions { flex:0 0 100%; }
 dialog#batchToolbar { padding:16px; }
 #batchToolbar .dialoghead { flex-direction:row; }
}

.currency-unit { font-size:12px; color:var(--muted); white-space:nowrap; }

.markettools label.bankcheck { display:flex; flex-direction:row; align-items:center; gap:8px; max-width:280px; padding-bottom:8px; }
.markettools label.bankcheck > input { width:17px; min-height:17px; height:17px; flex:0 0 17px; }
#batchNetwork { max-width:min(420px,100%); }

.starterrecipe { border:1px solid var(--line); border-radius:8px; padding:12px; margin:12px 0; }