/* PNTrades Gold VIP – Steuerseite. Blau, Weiß, Schwarz, Gold. */
:root{
  --grund:#070b12; --leiste:#050810; --karte:#0d1424; --karte2:#111b2e;
  --linie:#1b2a45; --linie2:#27395c; --text:#eaf0fa; --leise:#93a4c3;
  --blau:#2f7bff; --blau2:#4b8dff; --blau3:#173a7a;
  --gruen:#35c46f; --rot:#ff5d5d; --gelb:#f0b429; --lila:#9b7bff;
  --schatten:0 1px 0 rgba(255,255,255,.02) inset, 0 10px 30px rgba(0,0,0,.35);
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--grund);color:var(--text);
  font:14px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif}
body{font-variant-numeric:tabular-nums}
a{color:var(--blau2)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:.01em}
h2{font-size:17px}
h3{font-size:15px;display:flex;align-items:center;gap:8px}
.leise{color:var(--leise)} .klein{font-size:12px}
.gewinn{color:var(--gruen)} .verlust{color:var(--rot)} .warn{color:var(--gelb)}
.rechts{text-align:right} .mono{font-family:ui-monospace,Consolas,monospace}
[hidden]{display:none!important}

/* ------------------------------------------------------------ Rahmen */
.rahmen{display:flex;min-height:100vh}
.leiste{width:236px;flex:0 0 236px;background:var(--leiste);
  border-right:1px solid var(--linie);position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;padding:18px 12px}
.marke{display:flex;align-items:center;gap:10px;padding:4px 4px 18px}
.marke .wappen{width:36px;height:36px;flex:0 0 auto;border-radius:50%}
.anmeldung-kopf .wappen.gross{width:132px;height:132px;margin-bottom:6px}
.marke b{font-size:15.5px;display:block;line-height:1.15;white-space:nowrap}
.marke small{color:var(--leise);font-size:10px;letter-spacing:.05em;white-space:nowrap}
.gruppe{margin-top:10px}
.gruppe .titel{font-size:10px;letter-spacing:.14em;color:var(--leise);
  padding:6px 10px;text-transform:uppercase}
.navi{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;border-left:3px solid transparent;border-radius:8px;
  padding:9px 12px;color:var(--leise);cursor:pointer;font-size:14px}
.navi:hover{background:var(--karte);color:var(--text)}
.navi.aktiv{background:var(--karte2);color:var(--text);border-left-color:var(--blau)}
.navi .zeichen{width:20px;text-align:center;font-size:15px}
.navi .zahl{margin-left:auto;background:var(--linie2);border-radius:999px;
  padding:1px 8px;font-size:11px;color:var(--text)}
.konto{margin-top:auto;border-top:1px solid var(--linie);padding-top:12px}
.konto .wer{padding:4px 10px;font-size:13px}
.konto .wer small{display:block;color:var(--leise)}
.konto .knopfreihe{margin-top:8px;padding:0 6px}

.inhalt{flex:1;min-width:0;padding:0 28px 60px}
.kopf{position:sticky;top:0;z-index:5;background:var(--grund);
  display:flex;align-items:center;gap:10px;padding:16px 0 12px;
  border-bottom:1px solid var(--linie);margin-bottom:22px;flex-wrap:wrap}
.kopf h2{font-size:20px;margin-right:auto}
.kopf .knopfreihe{margin:0}

/* Zustandschips im Kopf: immer Beschriftung + Wert */
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--karte);
  border:1px solid var(--linie);border-radius:999px;padding:5px 12px 5px 9px;
  font-size:12.5px;white-space:nowrap}
.chip .punkt{width:8px;height:8px;border-radius:50%;background:var(--leise)}
.chip.gut .punkt{background:var(--gruen);box-shadow:0 0 0 3px rgba(53,196,111,.15)}
.chip.warn .punkt{background:var(--gelb);box-shadow:0 0 0 3px rgba(240,180,41,.15)}
.chip.aus .punkt{background:var(--rot);box-shadow:0 0 0 3px rgba(255,93,93,.15)}
.chip .l{color:var(--leise)} .chip b{font-weight:600}

/* ------------------------------------------------------------ Karten */
.reihe{display:grid;gap:16px;margin-bottom:16px}
.reihe.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.reihe.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.reihe.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.reihe.c6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1560px){.reihe.c6{grid-template-columns:repeat(3,minmax(0,1fr))}}
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--schatten);min-width:0}
.karte>h3{margin-bottom:4px}
.karte .erklaerung{color:var(--leise);font-size:12.5px;margin:0 0 14px}
.karte.voll{grid-column:1 / -1}

/* Kacheln: Beschriftung, Wert, dann eine kleine Tabelle statt Punkte */
.kachel{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--schatten);min-width:0}
.kachel .k-label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--leise)}
.kachel .k-wert{font-size:26px;font-weight:700;margin:4px 0 2px;line-height:1.15;overflow-wrap:anywhere}
.kachel .k-wert.klein{font-size:18px}
.kachel .k-sub{font-size:12.5px;color:var(--leise)}
.kachel table.mini{width:100%;margin-top:10px;border-collapse:collapse;font-size:12.5px}
.kachel table.mini td{padding:3px 0;border-top:1px solid var(--linie)}
.kachel table.mini td:last-child{text-align:right;color:var(--text);font-weight:600}
.kachel table.mini td:first-child{color:var(--leise)}

/* Zeilen mit Beschriftung links und Eingabe rechts */
.zeile{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--linie)}
.zeile:last-child{border-bottom:0}
.zeile>*{min-width:0}
.zeile .label{flex:1;min-width:150px}
.zeile .label .klein{display:block;color:var(--leise);margin-top:1px}
.zeile .wert{font-weight:600;text-align:right}
.zeile.stapel{display:block}
.zeile.stapel select,.zeile.stapel input[type=text]{width:100%;margin-top:8px}

input,select,textarea{background:var(--karte2);color:var(--text);border:1px solid var(--linie2);
  border-radius:9px;padding:8px 11px;font-size:14px;max-width:100%;min-width:0}
input[type=number]{width:96px;text-align:right}
input[type=time]{width:112px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blau);outline-offset:1px;border-color:var(--blau)}
input:disabled,select:disabled,button:disabled{opacity:.5;cursor:not-allowed}
textarea{width:100%;min-height:100px;resize:vertical;line-height:1.55}
label.feld{display:block;margin-bottom:12px}
label.feld span{display:block;font-size:12px;color:var(--leise);margin-bottom:5px}
label.feld input,label.feld select{width:100%}

button{background:var(--blau);color:#fff;border:0;border-radius:9px;padding:8px 15px;
  font-size:13.5px;cursor:pointer;font-weight:500}
button:hover{background:var(--blau2)}
button.grau{background:var(--karte2);color:var(--text);border:1px solid var(--linie2)}
button.grau:hover{background:var(--linie)}
button.rot{background:#8e2323} button.rot:hover{background:#a82a2a}
button.klein{padding:4px 10px;font-size:12px}
button.leer{background:none;border:1px solid transparent;color:var(--leise)}
button.leer:hover{color:var(--text);border-color:var(--linie2)}
.knopfreihe{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
.hinweis{font-size:13px;margin-top:10px;min-height:18px}
.hinweis.gut,b.gut{color:var(--gruen)} .hinweis.schlecht{color:var(--rot)}

/* Schalter */
.schalter{position:relative;display:inline-block;width:44px;height:24px;flex:0 0 auto}
.schalter input{opacity:0;width:0;height:0;position:absolute}
.bahn{position:absolute;inset:0;background:var(--linie2);border-radius:999px;transition:.15s;cursor:pointer}
.bahn:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s}
.schalter input:checked + .bahn{background:var(--blau)}
.schalter input:checked + .bahn:before{transform:translateX(20px)}
.schalter.warn input:checked + .bahn{background:var(--gelb)}
.schalter input:focus-visible + .bahn{outline:2px solid var(--blau);outline-offset:2px}

/* Reiter (Auswahl zwischen wenigen Möglichkeiten) */
.reiter{display:inline-flex;background:var(--karte2);border:1px solid var(--linie2);border-radius:10px;padding:3px;gap:2px}
.reiter button{background:none;border:0;color:var(--leise);border-radius:8px;padding:6px 13px;font-size:13px}
.reiter button.aktiv{background:var(--blau);color:#fff}

/* Tabellen */
.tabellenkasten{overflow-x:auto;margin:0 -4px}
table.daten{width:100%;border-collapse:collapse;font-size:13.5px}
table.daten th,table.daten td{text-align:left;padding:8px 8px;border-bottom:1px solid var(--linie);vertical-align:middle;white-space:nowrap}
table.daten th{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--leise);font-weight:500;
  position:sticky;top:0;background:var(--karte)}
table.daten td.zahl,table.daten th.zahl{text-align:right}
table.daten tr:hover td{background:rgba(47,123,255,.05)}
table.daten td .klein{display:block;color:var(--leise);font-size:11.5px}
table.daten .leer td{color:var(--leise);text-align:center;padding:22px}
table.daten td.matt{opacity:.5}

/* Markierungen */
.marke2{font-size:11.5px;padding:2px 9px;border-radius:999px;border:1px solid var(--linie2);
  color:var(--leise);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.m-gewinn{color:var(--gruen);border-color:#1d6b41;background:rgba(53,196,111,.08)}
.m-verlust{color:var(--rot);border-color:#6b1d1d;background:rgba(255,93,93,.08)}
.m-offen{color:var(--gelb);border-color:#6b551d;background:rgba(240,180,41,.08)}
.m-probe{color:#7fb0ff;border-color:#204a86;background:rgba(47,123,255,.08)}
.m-lila{color:var(--lila);border-color:#4a3a8a}
.richtung{font-weight:700} .richtung.buy{color:var(--gruen)} .richtung.sell{color:var(--rot)}

/* Laufende Trades */
/* Karte „Laufende Trades“ – ein Tick größer (Peer 18.09.2026: „da hat man ein bisschen
   wenig Spiel drin“; Peer sieht dort oft nach, wie ein Trade steht, das soll aus zwei
   Metern lesbar sein). Der Stand am Kurs ist die wichtigste Zahl und steht groß. */
.trade{background:var(--karte2);border:1px solid var(--linie2);border-radius:12px;padding:16px 18px}
.trade .oben{display:flex;align-items:center;gap:11px;margin-bottom:12px;flex-wrap:wrap}
.trade .nr{font-weight:700;color:#7fb0ff;font-size:19px}
.trade .oben .seit{margin-left:auto;color:var(--leise);font-size:12.5px}
.trade table.mini{width:100%;border-collapse:collapse;font-size:15px}
.trade table.mini td{padding:7px 0;border-top:1px solid var(--linie)}
.trade table.mini td:first-child{color:var(--leise)}
.trade table.mini td:last-child{text-align:right;font-weight:600}
.trade table.mini td.stand{font-size:20px;font-weight:700;line-height:1.15}
.balken{height:9px;background:var(--linie);border-radius:99px;margin-top:12px;overflow:hidden;display:flex;gap:2px}
.balken i{flex:1;background:var(--linie2);border-radius:99px}
.balken i.voll{background:var(--gruen)}
.trade .knopfreihe{margin-top:12px}

/* Formulierungen */
.baustein{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--linie)}
.baustein textarea{min-height:84px;flex:1}
.baustein .knoepfe{display:flex;flex-direction:column;gap:6px;width:124px;flex:0 0 auto}
.baustein .knoepfe label{display:flex;align-items:center;gap:6px;color:var(--leise);font-size:12px}
.platzhalter{font-size:12px;color:var(--leise);margin-bottom:12px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.platzhalter code{background:var(--karte2);padding:2px 7px;border-radius:5px;color:#7fb0ff;cursor:pointer}
pre.vorschau{background:var(--leiste);border:1px solid var(--linie);border-radius:10px;padding:14px;
  white-space:pre-wrap;font-size:13.5px;font-family:inherit;margin:12px 0 0;line-height:1.5}
pre.vorschau.leer{color:var(--leise)}

/* Nachricht senden */
.editor{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px}
.smileyleiste{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0}
.smileyleiste button{background:var(--karte2);border:1px solid var(--linie2);border-radius:8px;padding:4px 8px;font-size:16px}
.vorlagen-liste{display:flex;flex-direction:column;gap:6px}
.vorlage{display:flex;align-items:center;gap:8px;background:var(--karte2);border:1px solid var(--linie2);
  border-radius:9px;padding:8px 10px;cursor:pointer}
.vorlage:hover{border-color:var(--blau)}
.vorlage b{flex:1;font-weight:500}
.vorlage small{color:var(--leise);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.gesendet{border-top:1px solid var(--linie);padding:8px 0;font-size:12.5px}
.gesendet .kopfzeile{display:flex;gap:8px;color:var(--leise);margin-bottom:3px}
.gesendet pre{margin:0;white-space:pre-wrap;font-family:inherit;max-height:80px;overflow:hidden}

/* Protokoll */
#protokoll{background:var(--leiste);border:1px solid var(--linie);border-radius:10px;padding:14px;
  max-height:460px;overflow:auto;font-family:ui-monospace,Consolas,monospace;font-size:12px;
  white-space:pre-wrap;color:var(--leise)}
#protokoll .warn{color:var(--gelb)} #protokoll .fehler{color:var(--rot)}
.leer{color:var(--leise);font-size:13px;padding:14px 0;text-align:center}

/* Ansagen als Raster */
.ansage{display:grid;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--linie);
  grid-template-columns:minmax(200px,1.4fr) 140px 120px 170px 44px 120px}
.ansage:last-child{border-bottom:0}
.ansage .takt{font-size:12.5px;color:var(--leise)}
.ansage input[type=time]{width:100%}
@media (max-width:1150px){.ansage{grid-template-columns:1fr 1fr;row-gap:8px}.ansage .name{grid-column:1 / -1}}

/* Quellen-Tabelle */
.griff{cursor:grab;color:var(--leise);user-select:none;font-size:17px}
tr.zieht{opacity:.4}
table.daten input.inline{width:140px;padding:5px 8px;font-size:13px}
table.daten input.inline.id{width:124px}
table.daten input.inline.kurz{width:64px}

/* Kleine Statistikleiste (30 Tage) */
.saeulen{display:flex;align-items:flex-end;gap:3px;height:90px;margin:10px 0 4px}
.saeulen div{flex:1;background:var(--linie2);border-radius:3px 3px 0 0;min-height:2px;position:relative}
.saeulen div.plus{background:var(--gruen)} .saeulen div.minus{background:var(--rot)}
.saeulen div:hover:after{content:attr(data-t);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  background:var(--karte2);border:1px solid var(--linie2);padding:3px 7px;border-radius:6px;font-size:11px;white-space:nowrap;z-index:2}

/* Dialog */
.dialog-hintergrund{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:50}
.dialog{background:var(--karte);border:1px solid var(--linie2);border-radius:14px;padding:22px 24px;width:min(520px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.6)}
.dialog h3{margin-bottom:10px}
.dialog .passwort-anzeige{font-family:ui-monospace,Consolas,monospace;font-size:20px;background:var(--leiste);
  border:1px dashed var(--linie2);padding:12px;border-radius:10px;text-align:center;margin:10px 0;user-select:all}

/* Anmeldeseite */
body.anmeldeseite{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.anmeldung{width:min(400px,100%);background:var(--karte);border:1px solid var(--linie);border-radius:16px;padding:32px 30px;box-shadow:var(--schatten)}
.anmeldung-kopf{text-align:center;margin-bottom:22px}

.anmeldung-kopf h1{font-size:22px;margin-top:4px}
.anmeldung button{width:100%;padding:11px;margin-top:6px;font-size:15px}
.anmeldung-fuss{text-align:center;margin-top:18px}

/* Meldung oben rechts */
#meldungen{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:60}
.meldung{background:var(--karte2);border:1px solid var(--linie2);border-left:4px solid var(--blau);border-radius:10px;
  padding:10px 14px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.4);max-width:360px}
.meldung.gut{border-left-color:var(--gruen)} .meldung.schlecht{border-left-color:var(--rot)}

@media (max-width:1100px){
  .reihe.c3,.reihe.c4,.reihe.c6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .editor{grid-template-columns:1fr}
}
@media (max-width:820px){
  /* Handy: Menü als eine Zeile zum Wischen, Kopf kompakt, alles untereinander */
  .rahmen{flex-direction:column}
  .leiste{width:auto;flex:none;height:auto;position:sticky;top:0;z-index:6;border-right:0;border-bottom:1px solid var(--linie);
    display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 6px;padding:8px 10px}
  .marke{padding:0 4px 0 0;gap:8px}
  .marke .wappen{width:28px;height:28px}
  .marke b{font-size:14px} .marke small{display:none}
  #navigation{display:flex;flex:1 1 100%;overflow-x:auto;gap:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-top:6px}
  #navigation::-webkit-scrollbar{display:none}
  .gruppe{margin:0;display:flex;gap:2px;flex-wrap:nowrap}
  .gruppe .titel{display:none}
  .navi{width:auto;border-left:0;padding:6px 9px;font-size:13px;white-space:nowrap;border-radius:999px;background:var(--karte)}
  .navi.aktiv{border-left:0;background:var(--blau);color:#fff}
  .konto{margin:0 0 0 auto;border:0;padding:0;display:flex;align-items:center;gap:6px}
  .konto .wer{padding:0;font-size:12px} .konto .wer small{display:none}
  .konto .knopfreihe{margin:0;padding:0;gap:4px}
  .inhalt{padding:0 12px 40px}
  .kopf{position:static;padding:12px 0 10px;gap:6px}
  .kopf h2{font-size:18px;width:100%}
  .chip{font-size:11.5px;padding:4px 9px 4px 7px}
  .reihe.c2,.reihe.c3,.reihe.c4,.reihe.c6{grid-template-columns:1fr}
  .karte{padding:14px 14px}
  .kachel .k-wert{font-size:22px}
  .trade{padding:14px 14px}
  .trade table.mini{font-size:14px}
  .trade table.mini td.stand{font-size:18px}
  .trade .nr{font-size:17px}
  .tradechips button{font-size:11.5px;padding:4px 9px}
  .dialog.breit{width:96vw}
  .trade-details{grid-template-columns:1fr}
}

/* Benutzer: Rechte dürfen umbrechen */
#benutzer td{white-space:normal;vertical-align:top}
#benutzer td:first-child{white-space:nowrap}
/* Anbieterkette auf der Seite System: eine Zeile je Anbieter statt Laufband */
.kette{white-space:normal;text-align:left;line-height:1.6}
/* Seite Mitglieder: links die Anfragen, rechts die Unterhaltung */
.mitglieder{display:grid;grid-template-columns:360px 1fr;gap:16px;align-items:start}
@media (max-width:1100px){.mitglieder{grid-template-columns:1fr}}
.kontaktliste{margin-top:12px;max-height:60vh;overflow:auto;display:flex;flex-direction:column;gap:6px}
.kontakt{background:var(--karte2);border:1px solid var(--linie2);border-radius:10px;padding:9px 11px;cursor:pointer}
.kontakt:hover{border-color:var(--blau)}
.kontakt.aktiv{border-color:var(--blau);background:rgba(47,123,255,.10)}
.kontakt.wartet{border-left:3px solid var(--warn,#e0a020)}
.kontaktliste .trenner2{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--leise);margin:6px 0 2px}
.mg_id{margin:0 0 8px;color:var(--leise)}
.mg_id b{color:var(--text)}
.banner.mg{background:rgba(224,160,32,.14);border:1px solid rgba(224,160,32,.5);color:var(--text);cursor:pointer}
.banner.mg:hover{background:rgba(224,160,32,.22)}
.kontakt .kz{display:flex;align-items:center;gap:7px}
.kontakt .kz b{font-weight:600}
.kontakt .kz small{color:var(--leise)}
.kontakt .kz .zeit{margin-left:auto;font-size:11px}
.kontakt .zahl{background:var(--blau);color:#fff;border-radius:999px;font-size:11px;padding:1px 7px}
.kontakt .letzte{color:var(--text);opacity:.8;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat.mg{max-height:52vh;min-height:220px}
.blase.aus{background:rgba(47,123,255,.12);border-color:var(--blau3);align-self:flex-end;border-radius:14px 14px 4px 14px}
.mg_text{padding:10px 0;border-bottom:1px solid var(--linie)}
.mg_text:last-child{border-bottom:0}
.mg_text textarea{width:100%;min-height:64px}
.mg_schritt{display:inline-block;font-size:10.5px;font-weight:600;color:var(--leise);border:1px solid var(--linie2);border-radius:999px;padding:0 7px;margin-right:4px;vertical-align:1px}
/* Mitglieder: UID und Einzahlungsnachweis (17.09.2026) */
a.knopf{display:inline-flex;align-items:center;gap:6px;text-decoration:none;background:var(--blau);color:#fff;border-radius:9px;padding:8px 15px;font-weight:600;cursor:pointer}
a.knopf.grau{background:var(--karte2);color:var(--text);border:1px solid var(--linie2)}
a.knopf.grau:hover{background:var(--linie)}
a.knopf.klein{padding:4px 10px;font-size:12px}
.mg_nachweis{border:1px solid var(--linie);border-radius:10px;background:var(--karte2);padding:10px 12px;margin:0 0 10px}
.nw-zeile{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 14px}
.nw-feld{min-width:0}
.nw-feld .l{display:block;font-size:11px;color:var(--leise);text-transform:uppercase;letter-spacing:.04em}
.nw-feld b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.nw-feld small{font-weight:400}
b.schlecht,span.schlecht{color:var(--rot)} span.gut{color:var(--gruen)}
.nw-bild{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px}
.nw-bild .knopfreihe{margin-top:0;flex:1 1 260px}
.nw-vorschau{width:120px;height:90px;object-fit:cover;border-radius:8px;border:1px solid var(--linie2);cursor:zoom-in;background:#000}
.nw-chat{margin-top:6px}
.nw-mini{width:88px;height:66px;object-fit:cover;border-radius:6px;border:1px solid var(--linie2);cursor:zoom-in;display:block;background:#000}
.nachweis-gross{text-align:center;background:#000;border-radius:10px;padding:6px}
.nachweis-gross img{max-width:100%;max-height:74vh;object-fit:contain}
@media (max-width:820px){.nw-zeile{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Zugang & Broker: Hinweis des Servers */
.zugang_hinweis{border:1px solid var(--linie2);border-left:4px solid var(--gelb);border-radius:10px;background:var(--karte2);padding:8px 12px;margin:0 0 12px;font-size:13px}
.zugang_vorgabe{margin:-4px 0 8px;font-size:12px;color:var(--gelb)}
/* Benutzer: online/offline und Anmeldeverlauf (17.09.2026) */
.online-punkt{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--linie2);margin-right:6px;vertical-align:0}
.online-punkt.an{background:var(--gruen);box-shadow:0 0 0 3px rgba(53,196,111,.18)}
.anm-art{display:inline-block;font-size:11.5px;font-weight:600;border-radius:999px;padding:1px 9px;border:1px solid var(--linie2)}
.anm-art.gut{color:var(--gruen);border-color:#1d6b41;background:rgba(53,196,111,.08)}
.anm-art.leise{color:var(--leise)}
.anm-art.schlecht{color:var(--rot);border-color:#6b1d1d;background:rgba(255,93,93,.08)}
table.anmeldungen tr.anm-fehl td{background:rgba(255,93,93,.04)}
#c_online .punkt{background:var(--gruen)}
#benutzer label{margin-bottom:4px}
#benutzer button{margin:2px 2px 2px 0}

/* Trade-Chart (SVG aus der eigenen Kursaufzeichnung) */
.chart{margin-top:10px;background:var(--leiste);border:1px solid var(--linie);border-radius:10px;padding:6px 6px 2px;min-height:60px}
.chart svg{display:block;width:100%;height:auto;font-family:inherit}
.chart .leer{padding:18px 0}
.chart{min-width:0}
.chart.gross{padding:0;position:relative;overflow:hidden;background:#0b1220}
/* max-width: die Zeichenfläche darf die Seite nie breiter machen als den Bildschirm */
.kurscanvas{display:block;width:100%;max-width:100%;border-radius:9px;touch-action:none;user-select:none;cursor:crosshair;-webkit-tap-highlight-color:transparent}
.karte,.trade,.reihe>*{min-width:0}
.kurscanvas.zieht{cursor:grabbing}
.kurscanvas.skaliert{cursor:ns-resize}
.kurscanvas.knopf{cursor:pointer}
#k_live_analyse.aktiv{border-color:var(--blau);background:rgba(47,123,255,.18);color:#fff}
/* Bild-Vorschau: das Bild fürs Posten, wie es aus dem Trade-Chart kommt */
.bilder{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,560px),1fr));gap:14px}
.bilder figure{margin:0;background:#000;border:1px solid var(--linie);border-radius:10px;overflow:hidden}
.bilder img{display:block;width:100%;aspect-ratio:16/9;background:#000}
.bilder figcaption{padding:9px 12px;font-size:12.5px;color:var(--text);display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--linie)}
.bilder .hist-nr{font-weight:700;color:#7fb0ff}
.bilder figcaption .richtung{font-weight:700}
.bilder .leer{grid-column:1/-1}
/* Trades unter dem Live-Chart: ein Klick springt im Chart dorthin */
.tradechips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tradechips button{background:var(--karte2);border:1px solid var(--linie2);color:var(--text);border-radius:999px;padding:4px 11px;font-size:12px;display:inline-flex;gap:6px;align-items:center}
.tradechips button:hover{border-color:var(--blau);background:var(--karte2)}
.tradechips button.laeuft{border-color:#1d6b41}
.tradechips button.echt .nr{color:#4b8dff}
.tradechips button.uebung{border-style:dashed;color:#c9b8ff}
.tradechips button small{color:var(--leise);font-size:10.5px}
.tradechips button.aktiv{border-color:var(--blau);background:rgba(47,123,255,.12)}
.tradechips button b.gewinn{color:var(--gruen)} .tradechips button b.verlust{color:var(--rot)}
.tradechips button .nr{font-weight:700;color:#7fb0ff}
.tradechips .leer{padding:6px 0;font-size:12px;text-align:left}
.chart .marke.trade{font-weight:700}
.reiter.klein button{padding:3px 9px;font-size:12px}
h3 .reiter{font-weight:400}
.chart text{font-size:10.5px;fill:var(--leise)}
.chart text.marke{font-size:10px;font-weight:600}
.chart .kurslinie{fill:none;stroke:#7fb0ff;stroke-width:1.6;stroke-linejoin:round}
.chart .kursband{fill:rgba(127,176,255,.14);stroke:none}
.chart .entry{stroke:var(--blau2);stroke-width:1.2}
.chart .zone{fill:rgba(47,123,255,.13)}
.chart .sl{stroke:var(--rot);stroke-width:1.2;stroke-dasharray:5 4}
.chart .tp{stroke:var(--gruen);stroke-width:1.1;stroke-dasharray:5 4}
.chart .tp.erreicht{stroke-dasharray:none;opacity:.6}
.chart .raster{stroke:var(--linie);stroke-width:1}
.chart .jetzt{fill:#fff;stroke:#7fb0ff;stroke-width:2}
.chart .treffer{fill:var(--gruen);stroke:var(--karte);stroke-width:1.5}
.chart .treffer.stop{fill:var(--rot)}
.chart .post{stroke:var(--leise);stroke-width:1;stroke-dasharray:2 3}
.dialog.breit{width:min(980px,96vw)}
.trade-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px 18px;font-size:13px;margin-top:10px}
.trade-details div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--linie);padding:4px 0}
.trade-details div span:first-child{color:var(--leise)}
table.daten tr.klickbar{cursor:pointer}
/* Regeln: selten gebrauchte Einstellungen eingeklappt */
details.erweitert{margin-top:6px;border-top:1px dashed var(--linie2);padding-top:4px}
details.erweitert summary{cursor:pointer;color:var(--leise);font-size:12.5px;padding:8px 0;list-style:none;display:flex;align-items:center;gap:6px}
details.erweitert summary::-webkit-details-marker{display:none}
details.erweitert summary:before{content:"▸";font-size:11px;transition:.15s}
details.erweitert[open] summary:before{transform:rotate(90deg)}
.kachel[data-gehe]{cursor:pointer} .kachel[data-gehe]:hover{border-color:var(--blau)}

/* Verbindungsbanner */
.banner{background:#4a1d1d;border:1px solid #8e2323;color:#ffd6d6;border-radius:10px;padding:10px 14px;margin:14px 0 0;font-size:13.5px}

/* Gruppenverlauf als Chat */
.chatseite{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:16px}
.chat{background:var(--leiste);border:1px solid var(--linie);border-radius:12px;padding:14px;max-height:calc(100vh - 230px);overflow:auto;display:flex;flex-direction:column;gap:10px}
.blase{max-width:78%;background:var(--karte2);border:1px solid var(--linie2);border-radius:14px 14px 14px 4px;padding:9px 12px;font-size:13.5px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.blase .kopfzeile{display:flex;gap:8px;font-size:11px;color:var(--leise);margin-bottom:4px;align-items:center}
.blase .kopfzeile b{color:var(--text);font-weight:500}
.blase.antwort{margin-left:26px;border-left:3px solid var(--blau3)}
.blase.testmodus{border-style:dashed;opacity:.75}
.blase.geplant{background:rgba(47,123,255,.08);border-color:var(--blau3);border-radius:14px 14px 4px 14px;align-self:flex-end}
.blase.geplant.offen{border-style:dashed;background:transparent}
.blase.geplant .kopfzeile{justify-content:flex-end}
.chat .trenner{text-align:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--leise);margin:8px 0;display:flex;align-items:center;gap:10px}
.chat .trenner:before,.chat .trenner:after{content:"";flex:1;border-top:1px solid var(--linie)}
.chat .trenner.jetzt{color:var(--blau2)}
.chat .trenner.jetzt:before,.chat .trenner.jetzt:after{border-color:var(--blau3)}
.blase .weg{margin-left:auto;background:none;border:0;color:var(--leise);padding:0 2px;font-size:12px}
.blase .weg:hover{color:var(--rot)}
@media (max-width:1100px){.chatseite{grid-template-columns:1fr}}

/* ---- Quellen-Analyse ---- */
.an-emp{font-size:15px;line-height:1.5;margin:0 0 12px;padding:12px 14px;border-radius:10px;background:rgba(47,123,255,.08);border:1px solid var(--blau3)}
.an-rang{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.an-wahl{border-top:1px solid var(--linie);padding-top:14px}
.an-wahl-text{color:var(--leise);font-size:13px;margin:10px 0}
.an-kaestchen{display:flex;gap:10px;flex-wrap:wrap}
.an-kasten{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border:1px solid var(--linie2);border-radius:10px;background:var(--karte2);cursor:pointer;min-width:180px;position:relative}
.an-kasten.an{border-color:var(--blau);background:rgba(47,123,255,.12)}
.an-kasten input{position:absolute;right:10px;top:12px}
.an-kasten small{color:var(--leise)}
.an-wert{display:inline-block;min-width:38px;text-align:center;padding:3px 8px;border-radius:999px;background:rgba(53,196,111,.12);border:1px solid #1d6b41;color:var(--gruen);font-weight:700}
.an-wert.matt{opacity:.55;border-color:var(--linie2);color:var(--leise);background:var(--karte2)}
.an-wert.gross{font-size:20px;padding:6px 14px}
.an-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.an-kacheln{margin:12px 0 4px}
.an-kacheln .kachel{padding:12px 14px}
.an-kacheln .k-wert{font-size:22px}
.an-reihe{margin-bottom:6px}
.an-titel{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--leise);margin:8px 0 4px}
.an-svg{width:100%;height:auto;display:block;background:var(--karte2);border:1px solid var(--linie);border-radius:8px}
.an-sub{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;color:var(--leise);margin-top:6px}
.an-stufen{display:flex;flex-direction:column;gap:6px;padding:8px 0}
.an-stufe{display:flex;align-items:center;gap:10px;font-size:12.5px}
.an-stufe .l{width:34px;color:var(--leise)}
.an-stufe .bahn{flex:1;height:10px;background:var(--karte2);border:1px solid var(--linie);border-radius:999px;overflow:hidden}
.an-stufe .bahn span{display:block;height:100%;background:var(--gruen);border-radius:999px}
.an-stufe .w{width:76px;text-align:right;font-weight:600}
.an-stufe .w small{color:var(--leise);font-weight:400}
table.an-klein{font-size:12.5px} table.an-klein td,table.an-klein th{padding:5px 6px;white-space:normal}
@media (max-width:1100px){.an-kacheln{grid-template-columns:repeat(3,minmax(0,1fr))}.an-reihe.c3{grid-template-columns:1fr}.an-reihe.c2{grid-template-columns:1fr}}
@media (max-width:640px){.an-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Seite MetaTrader (Brücke pn-mt5) */
/* Die Übersicht hat mit der Kachel „MetaTrader“ sieben Kacheln: 7 in einer Reihe auf breiten, sonst 4 + 3 */
@media (min-width:1700px){#zustand_kacheln{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media (min-width:1101px) and (max-width:1699px){#zustand_kacheln{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mt-app{background:#fff;color:#1c1c1e;border-radius:12px;padding:14px 16px;font-family:"Segoe UI",system-ui,Roboto,sans-serif}
.mt-app-summe{font-size:26px;font-weight:600;text-align:center;padding:6px 0 10px;color:#1c1c1e}
.mt-app-summe.plus{color:#1d7bff} .mt-app-summe.minus{color:#e0322d}
.mt-app-konto{display:grid;grid-template-columns:1fr 1fr;gap:3px 22px;font-size:12.5px;border-bottom:1px solid #e3e3e6;padding-bottom:10px}
.mt-app-konto div{display:flex;justify-content:space-between;gap:10px}
.mt-app-konto span{color:#8a8a8f} .mt-app-konto b{font-weight:600}
.mt-app-titel{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#8a8a8f;margin:12px 0 4px}
.mt-app .leer{color:#8a8a8f}
.mt-gruppe{border-top:1px solid #e3e3e6;padding-top:6px;margin-top:6px}
.mt-gruppe-kopf{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:2px 0 4px}
.mt-gruppe-kopf b{color:#1c1c1e}
.mt-gruppe-kopf .leise{color:#8a8a8f}
.mt-gruppe-kopf .gewinn{margin-left:auto;color:#1d7bff;font-weight:600} .mt-gruppe-kopf .verlust{margin-left:auto;color:#e0322d;font-weight:600}
.mt-pos{padding:6px 0;border-top:1px solid #f0f0f2;font-size:13px;line-height:1.35}
.mt-pos .z1{display:flex;justify-content:space-between;gap:10px;font-weight:600}
.mt-pos .typ.buy,.mt-pos .buy{color:#1d7bff} .mt-pos .typ.sell,.mt-pos .sell{color:#e0322d}
.mt-pos .z2,.mt-pos .z3{color:#8a8a8f;font-size:12px}
.mt-pos .z3{display:flex;gap:14px;flex-wrap:wrap}
.mt-pos .z3 .layer{margin-left:auto;color:#b0b0b5}
.mt-bilder{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;max-width:720px}
.mt-bilder figure{margin:0;background:#000;border:1px solid var(--linie);border-radius:10px;overflow:hidden}
.mt-bilder img{display:block;width:100%;aspect-ratio:9/16;object-fit:contain;background:#000}
.mt-bilder figcaption{padding:7px 12px;font-size:12px;color:var(--leise);border-top:1px solid var(--linie)}
.mt-bilder figure.fehlt img{opacity:.25}
.mt-bilder figure.fehlt figcaption:after{content:" · kein Bild vom Server";color:var(--rot)}
.mt-protokoll{background:var(--leiste);border:1px solid var(--linie);border-radius:10px;padding:10px 14px;max-height:460px;overflow:auto;font-size:12.5px}
.mt-ereignis{display:flex;gap:10px;align-items:baseline;padding:4px 0;border-bottom:1px solid var(--linie);flex-wrap:wrap}
.mt-ereignis:last-child{border-bottom:0}
.mt-ereignis .zeit{color:var(--leise);font-family:ui-monospace,Consolas,monospace;font-size:11.5px;flex:0 0 auto}
.mt-ereignis .quelle{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--leise);border:1px solid var(--linie2);border-radius:999px;padding:0 7px}
.mt-ereignis .nr{font-weight:700;color:#7fb0ff}
.mt-ereignis .text{flex:1 1 200px}
.mt-ereignis.warn .text{color:var(--gelb)} .mt-ereignis.fehler .text{color:var(--rot)}
/* Lange Texte in den Tabellen Zustand und Aufträge dürfen umbrechen */
#mt_zustand td,#mt_auftraege td{white-space:normal;vertical-align:top}
#mt_zustand td:first-child,#mt_auftraege td:first-child,#mt_auftraege td.klein{white-space:nowrap}
.mt-schritte{margin:0;padding-left:22px;line-height:1.65}
.mt-schritte li{margin-bottom:6px}
/* Kontoart im Zustand: Demo grün, Contest gelb, Echtkonto rot (Handel gesperrt) */
.mt-konto-art{display:inline-block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:1px 8px;border-radius:999px;border:1px solid var(--linie2);color:var(--leise);margin-left:6px;vertical-align:middle}
.mt-konto-art.demo{color:var(--gruen);border-color:#1d6b41;background:rgba(53,196,111,.1)}
.mt-konto-art.contest{color:var(--gelb);border-color:#6b551d;background:rgba(240,180,41,.1)}
.mt-konto-art.echt{color:#fff;border-color:#a82a2a;background:#8e2323}
.mt-warnung{margin:0 0 12px;padding:10px 14px;border-radius:10px;border:1px solid #a82a2a;background:rgba(255,93,93,.12);font-size:13px;line-height:1.5}
.mt-warnung b{color:var(--rot)}
/* Karte Demokonto-Zugang (nur Inhaber) und Auswahl der Testgruppe in der Steuerung */
.mt-zugang .zeile.stapel input{width:100%;margin-top:8px}
.mt-zugang .wert{text-align:right}
.mt-zugang-teil{border-top:1px solid var(--linie);padding-top:12px;margin-top:12px}
.mt-zugang-teil+.mt-zugang-teil{margin-top:18px}
.mt-zugang-titel{font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.mt-zugang-titel .marke2{margin-left:auto}
.mt-zugang-teil[data-konto="mitlauf"] .mt-zugang-titel{color:#9fb3cc}
.mt-zugang-teil[data-konto="vip"] .mt-zugang-titel{color:#e8c46a}
/* Zustand: zwei Konten nebeneinander (VIP-Konto, Mitlauf-Konto) und die Summe darunter */
.mt-konten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 10px}
.mt-konto-spalte{background:var(--karte2);border:1px solid var(--linie);border-radius:10px;padding:10px 12px;min-width:0}
.mt-konto-spalte.vip{border-color:#6b5520}
.mt-konto-spalte.mitlauf{border-color:#3a4a60}
.mt-konto-spalte.aus{border-style:dashed;opacity:.85}
.mt-konto-kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.mt-konto-kopf b{font-size:14px}
.mt-konto-spalte.vip .mt-konto-kopf b{color:#e8c46a}
.mt-konto-spalte.mitlauf .mt-konto-kopf b{color:#9fb3cc}
.mt-konto-kopf .marke2{margin-left:auto}
.mt-konto-zeilen{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:12.5px}
.mt-konto-zeilen span{color:var(--leise)}
.mt-konto-zeilen b{font-weight:600;text-align:right;overflow-wrap:anywhere}
.mt-konto-leer{font-size:12.5px;color:var(--leise);line-height:1.5}
.mt-konto-leer.klein{margin-top:6px;font-size:12px}
.mt-konto-warn{margin:0 0 8px;padding:6px 9px;border-radius:8px;border:1px solid rgba(242,54,69,.55);background:rgba(242,54,69,.10);font-size:12.5px;line-height:1.45}
.mt-konten-summe{margin:0 0 12px;padding:8px 12px;border-radius:10px;border:1px solid var(--linie2);font-size:13px;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center}
.mt-konten-summe b{font-weight:700}
.mt-konto-marke{font-size:10.5px;padding:1px 7px}
.mt-konto-titel{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8a8a8f;padding:6px 0 2px;font-weight:700}
@media (max-width:820px){.mt-konten{grid-template-columns:1fr}}
.mt-gruppenwahl .mt-gruppen-reihe{display:flex;gap:8px;align-items:center;margin-top:8px}
.mt-gruppenwahl .mt-gruppen-reihe select{flex:1 1 auto;min-width:0;margin-top:0}
.mt-gruppenwahl .mt-gruppen-reihe button{flex:0 0 auto}
.mt-warntext{display:block;margin-top:6px;color:var(--gelb);font-size:12px;line-height:1.45}
.mt-warntext.rot{color:var(--rot)}
/* Karte Bilder: je Eintrag ein Kopf (Trade, Grund, Pips, Zeit) und zwei Vorschaubilder im Handyformat */
.mt-bilder-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.mt-bild-karte{background:var(--karte2);border:1px solid var(--linie);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.mt-bild-kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.mt-bild-kopf b{color:#7fb0ff}
.mt-bild-kopf .klein{margin-left:auto}
.mt-bild-paar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mt-bild-kachel{display:block;position:relative;background:#000;border:1px solid var(--linie);border-radius:8px;overflow:hidden;text-decoration:none;color:var(--leise)}
.mt-bild-kachel img{display:block;width:100%;aspect-ratio:9/16;object-fit:contain;background:#000;transition:.15s}
.mt-bild-kachel:hover img{opacity:.85}
.mt-bild-kachel span{display:block;padding:4px 8px;font-size:11px;border-top:1px solid var(--linie)}
.mt-bild-kachel.fehlt{aspect-ratio:9/16;display:flex;align-items:center;justify-content:center;color:var(--rot);font-size:12px}
.mt-bild-fuss{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px}
.mt-bild-fuss a{color:var(--leise)} .mt-bild-fuss a:hover{color:var(--text)}
/* Statistik: vier Kacheln, darunter die Tabelle je Layer mit Balken */
.mt-kacheln{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mt-kacheln .kachel{padding:12px 14px}
.mt-kacheln .k-wert{font-size:22px}
.mt-balken{width:100%;min-width:80px;height:8px;background:var(--karte2);border:1px solid var(--linie);border-radius:999px;overflow:hidden}
.mt-balken span{display:block;height:100%;background:var(--blau);border-radius:999px}
/* Mitgegangene Trades: Zeile klappt die Layer auf */
table.mt-trades tr.mt-trade td{cursor:pointer}
table.mt-trades tr.mt-trade.offen td{background:rgba(47,123,255,.08);border-bottom-color:transparent}
table.mt-trades .mt-pfeil{color:var(--leise);margin-left:4px;font-size:11px}
table.mt-trades tr.mt-layer td{white-space:normal;padding:0 8px 10px;background:rgba(47,123,255,.04)}
table.mt-layer-tabelle{font-size:12.5px;margin:4px 0 0}
table.mt-layer-tabelle th{position:static;background:none;font-size:10px}
table.mt-layer-tabelle td,table.mt-layer-tabelle th{padding:5px 8px}
table.mt-layer-tabelle tr:hover td{background:none}
#mt_stat_reiter,#mt_quellen_reiter{margin-left:auto}
/* Mitlauf-Trades (nur Demokonto) dezent grau-blau, VIP-Trades gold */
.m-mitlauf{color:#9fb3cc;border-color:#3a4a60;background:rgba(120,145,180,.10)}
.m-vip{color:#e8c46a;border-color:#6b5520;background:rgba(232,196,106,.10)}
.mt-app .m-mitlauf{color:#4f6380;border-color:#b9c5d6;background:#eef2f8}
.mt-app .m-vip{color:#8a6410;border-color:#e2cf97;background:#fbf4e1}
.mt-gruppe.mitlauf .mt-gruppe-kopf b{color:#4f6380}
.mt-bild-karte.mitlauf{border-style:dashed;border-color:#3a4a60}
.mt-bild-kopf .marke2{font-size:10.5px;padding:1px 7px}
.mt-freigabe{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:6px;border-top:1px solid var(--linie);font-size:12px}
.mt-freigabe button{flex:0 0 auto}
.mt-freigabe.erledigt{color:var(--gruen)}
/* Nach Gruppe: Summenzeile abgesetzt */
table.mt-quellen td{vertical-align:top}
table.mt-quellen td .klein{margin-top:2px}
table.mt-quellen tr.mt-summe td{border-top:2px solid var(--linie2);background:rgba(47,123,255,.05)}
@media (max-width:1100px){.mt-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.mt-bild-paar{grid-template-columns:1fr 1fr}.mt-bilder-liste{grid-template-columns:1fr}#mt_stat_reiter,#mt_quellen_reiter{margin-left:0}}
/* Handy-App (echte Bilder, 17.09.2026): Banner auf jeder Seite, Karte oben auf MetaTrader */
.banner.handy{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:linear-gradient(90deg,#f0b429,#ffd35c);
  color:#1a1300;border:0;font-weight:700;font-size:15px;padding:12px 16px;cursor:pointer;
  box-shadow:0 0 0 2px rgba(240,180,41,.35),0 8px 24px rgba(240,180,41,.22);animation:handy-puls 2.2s ease-in-out infinite}
.banner.handy:hover,.banner.handy:focus{filter:brightness(1.06);outline:none}
.banner.handy .los{margin-left:auto;background:#1a1300;color:#ffd35c;border-radius:999px;padding:4px 12px;font-size:13px;white-space:nowrap}
@keyframes handy-puls{0%,100%{box-shadow:0 0 0 2px rgba(240,180,41,.35),0 8px 24px rgba(240,180,41,.18)}50%{box-shadow:0 0 0 5px rgba(240,180,41,.55),0 8px 28px rgba(240,180,41,.35)}}
.handy-karte{border-color:#6b551d;background:linear-gradient(180deg,rgba(240,180,41,.06),transparent 160px),var(--karte)}
.handy-karte.wartet{border:2px solid var(--gelb)}
.handy-aktion{background:rgba(240,180,41,.13);border:2px solid var(--gelb);border-radius:14px;padding:16px 18px;margin:0 0 16px}
.handy-aktion .titel{font-size:19px;font-weight:700;color:#ffd35c;margin:0 0 6px}
.handy-aktion p{margin:0 0 12px;font-size:13.5px;line-height:1.5}
.handy-aktion button.handy-gross{background:var(--gelb);color:#1a1300;font-size:17px;font-weight:700;padding:14px 24px;border-radius:12px;border:0;
  box-shadow:0 6px 18px rgba(240,180,41,.3)}
.handy-aktion button.handy-gross:hover{background:#ffc940}
.handy-aktion button.handy-gross:disabled{opacity:.6;cursor:wait}
.handy-reihe{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.handy-rahmen{position:relative;flex:0 0 auto;max-width:100%;background:#000;border:2px solid #2a2f3a;border-radius:30px;padding:12px 8px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);line-height:0;user-select:none;touch-action:none}
.handy-rahmen img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(70vh - 28px);border-radius:18px;cursor:crosshair;-webkit-user-drag:none}
.handy-leer{width:220px;height:min(420px,calc(70vh - 28px));display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--leise);font-size:12.5px;line-height:1.4;padding:0 16px}
.handy-rahmen.laedt img{opacity:.75}
.handy-tipp{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid var(--gelb);
  background:rgba(240,180,41,.25);pointer-events:none;animation:handy-tipp .7s ease-out forwards}
@keyframes handy-tipp{from{transform:scale(.4);opacity:1}to{transform:scale(1.5);opacity:0}}
.handy-seite{flex:1 1 300px;min-width:0}
.mt-mitnehmen{margin:12px 0 0;padding:10px 12px;border:1px solid var(--linie2);border-radius:10px;background:var(--karte2);font-size:13px}
.mt-mitnehmen .kopf2{font-weight:600;margin-bottom:6px}
.mt-mitnehmen .ml-zeile{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:5px 0;border-top:1px solid var(--linie)}
.mt-mitnehmen .ml-zeile .rechts2{margin-left:auto}
.m-echt{color:var(--gruen);border-color:#1d6b41;background:rgba(53,196,111,.1)}
.m-gezeichnet{color:var(--leise);border-style:dashed}
.mt-bild-karte.gezeichnet .mt-bild-paar{opacity:.7}
@media (prefers-reduced-motion:reduce){.banner.handy{animation:none}.handy-tipp{animation:none;opacity:0}}
@media (max-width:640px){.handy-rahmen{margin:0 auto}.handy-aktion button.handy-gross{width:100%}}

/* ------------------------------------------------------------ Quellen: Reiter und Schaltplan (17.09.2026) */
.q-reiterzeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-6px 0 16px}
.q-panel>.karte,#an_inhalt>.karte{margin-bottom:16px}
.q-zelle-detail table.daten td:last-child{white-space:normal;min-width:120px}
.q-reiter{max-width:100%;overflow-x:auto;scrollbar-width:none}
.q-reiter::-webkit-scrollbar{display:none}
.q-reiter button{white-space:nowrap;padding:7px 14px;font-size:13.5px}
.q-band{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:10px 14px;border-radius:10px;
  background:rgba(249,115,22,.14);border:1px solid rgba(249,115,22,.6);font-size:13.5px}
.q-band b{color:#ffb27a}
.q-band button{margin-left:auto}
.q-warnungen{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.q-warnungen:empty{display:none}
.q-warnung{padding:8px 12px;border-radius:9px;border:1px solid #6b551d;background:rgba(240,180,41,.08);color:#f6d58a;font-size:13px}
.q-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 7px;border-radius:999px;font-size:12.5px;font-weight:600;
  border:1px solid var(--f,#3b82f6);background:var(--fh,rgba(59,130,246,.18));color:var(--text);white-space:nowrap;line-height:1.5}
.q-chip:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--f,#3b82f6);flex:0 0 auto}
.q-chip.gross{font-size:14px;padding:4px 12px 4px 9px}
.q-chip.matt{opacity:.55}
.q-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.q-jetzt-kopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:6px 0 10px}
.q-jetzt-kopf .gross{font-size:22px;font-weight:700}
.q-jetzt-kopf .zeit{color:var(--leise);font-size:14px}
.q-jetzt table.daten td{white-space:normal}
.q-grund{font-size:12.5px;color:var(--leise);margin:8px 0 0;line-height:1.45}
.q-haken{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.q-haken input{width:auto}
.q-modi{flex-wrap:wrap}
.q-weitere{margin-top:8px}
.q-weitere summary{cursor:pointer;color:var(--leise);font-size:12.5px;padding:4px 0;list-style:none}
.q-weitere summary::-webkit-details-marker{display:none}
.q-weitere summary:before{content:"▸ ";font-size:11px}
.q-weitere[open] summary:before{content:"▾ "}
.q-weitere .reiter{margin-top:6px}
#q_modus_tabelle{margin-top:10px}
.q-kaesten{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 4px}
.q-kasten{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--linie2);border-radius:10px;background:var(--karte2);cursor:pointer}
.q-kasten.an{border-color:var(--blau);background:rgba(47,123,255,.12)}
.q-kasten input{width:auto}

/* Wochenplan: Wochentage × Fenster */
table.q-plan{width:100%;border-collapse:separate;border-spacing:4px;table-layout:fixed;min-width:520px}
table.q-plan th{font-size:11px;letter-spacing:.06em;color:var(--leise);font-weight:500;text-align:center;padding:2px 4px;text-transform:none}
table.q-plan th small{display:block;font-size:10.5px;opacity:.8}
table.q-plan th.q-tag{width:52px;text-align:left;font-size:13px;color:var(--text);font-weight:600}
table.q-plan tr.heute th.q-tag{color:var(--gelb)}
table.q-plan td{padding:0;vertical-align:stretch}
.q-zelle{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-height:64px;height:100%;padding:7px 8px;
  background:var(--karte2);border:1px solid var(--linie2);border-radius:9px;color:var(--text);text-align:left;cursor:pointer;position:relative;font-weight:400}
.q-zelle:hover{background:var(--linie);border-color:var(--blau3)}
tr.heute .q-zelle{background:#16233c}
.q-zelle.wenig{background-image:repeating-linear-gradient(135deg,rgba(147,164,195,.10) 0 6px,transparent 6px 12px)}
.q-zelle.jetzt{border:2px solid var(--gelb);box-shadow:0 0 0 3px rgba(240,180,41,.14);padding:6px 7px}
.q-zelle.gewaehlt{outline:2px solid var(--blau);outline-offset:1px}
.q-zelle.leer-zelle{color:var(--leise)}
.q-zelle .q-werte{font-size:11.5px;color:var(--leise);line-height:1.35}
.q-zelle .q-werte b{color:var(--text);font-weight:600}
.q-zelle .q-werte b.verlust{color:var(--rot)}
.q-zelle .q-zeichen{position:absolute;right:6px;top:4px;font-size:12px;letter-spacing:1px}
.q-zelle .q-jetzt-marke{position:absolute;right:6px;bottom:4px;font-size:10px;font-weight:700;color:var(--gelb);text-transform:uppercase;letter-spacing:.08em}
.q-zelle .q-chip{font-size:11.5px;padding:1px 7px 1px 6px}
.q-legende{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--leise);margin-top:10px;align-items:center}
.q-legende span{display:inline-flex;align-items:center;gap:6px}
.q-leg{display:inline-block;width:16px;height:12px;border-radius:3px;border:1px solid var(--linie2);background:var(--karte2)}
.q-leg.jetzt{border:2px solid var(--gelb)}
.q-leg.wenig{background-image:repeating-linear-gradient(135deg,rgba(147,164,195,.35) 0 3px,transparent 3px 6px)}
.q-stand{font-size:12px;color:var(--leise);margin-top:8px}
.q-zelle-detail{margin-top:14px;padding:14px 16px;border:1px solid var(--blau3);border-radius:12px;background:rgba(47,123,255,.05)}
.q-zelle-detail h4{margin:0;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.q-zelle-detail h4 button{margin-left:auto}
.q-zelle-detail table.daten td,.q-zelle-detail table.daten th{padding:6px 7px}
.q-zelle-detail .q-grund{font-size:13px;color:var(--text)}
.q-fest{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--linie)}
.q-fest label.feld{margin:0;min-width:170px}
.q-verlauf{max-height:420px;overflow:auto}
.q-verlauf td{white-space:normal!important;vertical-align:top!important}
.q-rueck td.besser{color:var(--gruen);font-weight:600}
.q-hinweis{margin:10px 0 0;padding:8px 12px;border-radius:9px;font-size:13px;border:1px solid #6b551d;background:rgba(240,180,41,.08);color:#f6d58a}
.q-hinweis.gut{border-color:#1d6b41;background:rgba(53,196,111,.08);color:var(--gruen)}
.q-unter{margin:4px 0 6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--leise)}

/* Einstellungen des Plans */
details.q-einst>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
details.q-einst>summary::-webkit-details-marker{display:none}
details.q-einst>summary:before{content:"▸";color:var(--leise);font-size:12px}
details.q-einst[open]>summary:before{content:"▾"}
.q-einst-titel{font-size:15px;font-weight:600}
.q-einst-inhalt{margin-top:14px}
.q-fenster-zeile{display:grid;grid-template-columns:minmax(0,1fr) 112px 112px 40px;gap:8px;align-items:center;margin-bottom:8px}
.q-fenster-zeile input{width:100%}
.q-fenster-kopf{font-size:11px;color:var(--leise);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}

/* Auswertung: Wärmekarte Wochentag × Fenster je Gruppe */
table.q-waerme{border-collapse:separate;border-spacing:3px;font-size:12px;width:100%;table-layout:fixed}
table.q-waerme th{font-weight:500;color:var(--leise);font-size:11px;text-align:center;padding:2px}
table.q-waerme th:first-child{text-align:left;width:34px}
table.q-waerme td{text-align:center;padding:6px 2px;border-radius:6px;background:var(--karte2);line-height:1.2}
table.q-waerme td b{display:block;font-size:13px}
table.q-waerme td small{color:var(--leise);font-size:10.5px}

@media (max-width:820px){
  .q-reiterzeile{margin-top:0}
  .q-reiter button{padding:6px 10px;font-size:12.5px}
  .q-fenster-zeile{grid-template-columns:minmax(0,1fr) 92px 92px 36px;gap:6px}
  .q-fenster-zeile input[type=time]{width:100%}
  .q-band button{margin-left:0}
}
/* ---------------------------------------------------------- Für Screenshots
   Peers Vorgabe 18.09.2026 nachts: Screenshots der Steuerseite sollen in die VIP dürfen,
   dort darf nie stehen, aus welcher Gruppe ein Signal stammt. Jede Herkunftsangabe trägt
   deshalb die Klasse „pn-herkunft“ und steht klein und leise oben links in ihrer Karte –
   also genau da, wo ein Zuschnitt sie mühelos wegnimmt. Der Schalter in der Kopfzeile
   setzt „ohne-herkunft“ am body und nimmt sie ganz heraus. */
body.ohne-herkunft .pn-herkunft{display:none!important}
.herkunft{display:flex;align-items:center;gap:5px;margin:-2px 0 9px;
  font-size:11.5px;line-height:1.2;color:var(--leise);letter-spacing:.01em}
.dialog>.herkunft{margin:-4px 0 8px}
/* Ein hoher Dialog („groß anzeigen“ zu einem Trade) wurde oben und unten abgeschnitten,
   weil der Hintergrund zentriert, aber nicht scrollt. „safe center“ zentriert nur, solange
   alles hineinpasst, sonst beginnt der Dialog oben und der Hintergrund lässt sich scrollen.
   Browser ohne „safe“ lassen die Zeile weg und bleiben beim bisherigen Verhalten. */
.dialog-hintergrund{overflow:auto;padding:18px 10px;align-items:safe center}
#k_screenshot.aktiv{border-color:var(--gelb);background:rgba(240,180,41,.18);color:#fff}

/* Auswahl „Trades im Chart“ in der Knopfreihe des Live-Kurses (dieselben sechs Stufen
   wie in der Stream-Ansicht, Peer 18.09.2026) */
.ct-wahl{display:inline-flex;align-items:center;gap:7px;background:var(--karte2);
  border:1px solid var(--linie2);border-radius:10px;padding:2px 3px 2px 10px;
  color:var(--leise);font-size:12px;cursor:pointer}
.ct-wahl select{background:none;border:0;border-radius:8px;padding:4px 6px;
  font-size:12px;color:var(--text);cursor:pointer}
.ct-wahl.aktiv{border-color:var(--blau);color:var(--text)}
.ct-wahl.aktiv select{background:var(--blau);color:#fff}
@media (max-width:820px){.ct-wahl{padding-left:8px;font-size:11.5px;gap:5px}}

@media (max-width:640px){
  table.q-plan{min-width:0;border-spacing:3px}
  table.q-plan th.q-tag{width:30px;font-size:12px}
  .q-zelle{min-height:54px;padding:5px 5px}
  .q-zelle.jetzt{padding:4px 4px}
  .q-zelle .q-werte .q-f,.q-zelle .q-werte .q-js{display:none}
  .q-zelle .q-chip{font-size:10.5px;padding:0 5px 0 4px;gap:4px}
  .q-zelle .q-chip:before{width:6px;height:6px}
  .q-zelle .q-jetzt-marke{display:none}
  .q-jetzt-kopf .gross{font-size:19px}
}