/* ITL Journal — Aussehen nach dem Vorbild TradeTracer.
   Farben und Maße aus der gerenderten Vorlage abgelesen (references/02_tradetracer_design.md).
   Alles fließend: Das Journal nutzt genau die Breite des Browserfensters. */

:root{
  --grund:#212529;
  --leiste:#1b1e22;
  --karte:rgba(255,255,255,.08);
  --karte-rand:rgba(255,255,255,.15);
  --feld:rgba(255,255,255,.06);
  --feld-rand:rgba(255,255,255,.10);
  --streifen:rgba(255,255,255,.03);
  --schwebe:#2a2e34;
  --text:rgba(255,255,255,.72);
  --text-hell:rgba(255,255,255,.95);
  --text-leise:rgba(255,255,255,.45);
  --akzent:#FFB74D;
  --akzent-stark:#FCAD3E;
  --akzent-flaeche:rgba(255,183,77,.09);
  --gut:#00FF88;
  --schlecht:#FF4757;
  --gut-flaeche:rgba(0,255,136,.10);
  --schlecht-flaeche:rgba(255,71,87,.10);
  --mittel:#FFA502;
  --daten:#00BCD4;
  --daten2:#7C3AED;
  --r:12px; --r-m:8px; --r-k:6px;
  --luft:1.25rem; --luft-g:2rem;
  --schrift:"Poppins","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  color-scheme:dark;
}
/* Gewinn/Verlust-Farben aus den Einstellungen */
:root.blau_orange{ --gut:#3FA9F5; --schlecht:#FF8A3D;
  --gut-flaeche:rgba(63,169,245,.12); --schlecht-flaeche:rgba(255,138,61,.12); }

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--grund); color:var(--text); font-family:var(--schrift);
     font-size:13.5px; line-height:1.45; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0; font-weight:600; color:var(--text-hell)}
p{margin:.4em 0}
a{color:var(--akzent); text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit; color:inherit}
code{font-family:Consolas,"Cascadia Mono",monospace; font-size:12px; color:var(--akzent)}
::selection{background:rgba(255,183,77,.35)}
*::-webkit-scrollbar{width:10px; height:10px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:8px; border:2px solid transparent; background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}

/* ------------------------------------------------------------ Gerüst */
#huelle{display:flex; min-height:100vh}
#leiste{width:200px; flex:0 0 200px; background:var(--leiste); border-right:1px solid var(--feld-rand);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; transition:width .15s, flex-basis .15s}
#leiste.schmal{width:64px; flex-basis:64px}
#marke{display:flex; align-items:center; gap:10px; padding:16px 16px 18px; white-space:nowrap; overflow:hidden}
#marke .logo{width:32px; height:32px; flex:0 0 32px; border-radius:9px;
  background:linear-gradient(135deg,#FFB74D,#F57C00); display:grid; place-items:center; color:#1b1e22}
#marke .logo .sym{font-size:22px; font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24}
#marke b{color:var(--text-hell); font-size:15px; letter-spacing:.3px}
#marke small{display:block; color:var(--text-leise); font-size:10px; letter-spacing:1.2px; text-transform:uppercase}
#nav{flex:1; overflow-y:auto; padding:0 8px}
.navpunkt{display:flex; align-items:center; gap:12px; padding:8px 10px; margin:1px 0; border-radius:var(--r-m);
  cursor:pointer; color:var(--text); font-size:13px; white-space:nowrap; user-select:none; position:relative;
  text-decoration:none!important}
.navpunkt .sym{font-size:20px; opacity:.85}
.navpunkt:hover{background:rgba(255,255,255,.05); color:var(--text-hell)}
.navpunkt.aktiv{background:var(--akzent-flaeche); color:var(--akzent)}
.navpunkt.aktiv::before{content:""; position:absolute; left:-8px; top:6px; bottom:6px; width:3px; border-radius:2px; background:var(--akzent)}
.navpunkt.aktiv .sym{opacity:1; font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 20}
.navpunkt .zahlmarke{margin-left:auto; font-size:10.5px; color:var(--text-leise)}
.navtrenner{height:1px; background:var(--feld-rand); margin:8px 10px}
#leiste.schmal .navpunkt span:not(.sym), #leiste.schmal #marke div, #leiste.schmal .zahlmarke{display:none}
#leiste .fuss{padding:10px 16px 14px; font-size:10.5px; color:var(--text-leise); border-top:1px solid var(--feld-rand)}
#leiste.schmal .fuss{display:none}
#einklappen{position:absolute; right:-12px; top:22px; width:24px; height:24px; border-radius:50%;
  background:var(--schwebe); border:1px solid var(--feld-rand); display:grid; place-items:center; cursor:pointer; z-index:5; padding:0}
#einklappen .sym{font-size:18px}

#rechts{flex:1; min-width:0; display:flex; flex-direction:column}
#oben{display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:10px 22px 0}
#inhalt{flex:1; padding:12px 22px 70px; min-width:0}

.glocke{position:relative; width:36px; height:36px; border-radius:50%; background:var(--feld);
  border:1px solid var(--feld-rand); display:grid; place-items:center; cursor:pointer; padding:0}
.glocke .punkt{position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; border-radius:9px;
  background:var(--akzent); color:#1b1e22; font-size:10px; font-weight:700; display:grid; place-items:center; padding:0 4px}
.kontozeiger{display:flex; align-items:center; gap:8px; padding:6px 12px; border-radius:20px;
  background:var(--feld); border:1px solid var(--feld-rand); font-size:12px; cursor:pointer; white-space:nowrap}
.kontozeiger .lampe{width:8px; height:8px; border-radius:50%; background:var(--gut); box-shadow:0 0 8px var(--gut)}

/* ------------------------------------------------------------ Bausteine */
.sym{font-family:'Material Symbols Outlined'; font-weight:normal; font-style:normal; font-size:20px;
  line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap;
  direction:ltr; -webkit-font-smoothing:antialiased; vertical-align:middle; user-select:none;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20}
.sym.voll{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 20}

.kopf{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--karte); border:1px solid var(--karte-rand); border-radius:var(--r);
  padding:14px 18px; margin-bottom:var(--luft)}
.kopf .titel{display:flex; align-items:center; gap:12px; min-width:0}
.kopf .titel > .sym{color:var(--akzent); font-size:24px; font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.kopf h1{font-size:19px; line-height:1.2}
.kopf .unter{font-size:12px; color:var(--text-leise); margin-top:2px}
.kopf .rechts{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

.datumsnav{display:flex; align-items:center; gap:6px}
.datumsnav input[type=date]{height:34px; padding:0 8px; width:150px; color:var(--akzent)}

.abschnitt{display:flex; align-items:center; gap:8px; margin:var(--luft-g) 0 12px; padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.06); font-size:15px; font-weight:400; letter-spacing:.6px;
  text-transform:uppercase; color:var(--text-hell); flex-wrap:wrap}
.abschnitt > .sym{font-size:19px; color:var(--akzent)}
.abschnitt .datum{background:var(--akzent-flaeche); border:1px solid rgba(255,183,77,.3); color:var(--akzent);
  border-radius:var(--r-k); padding:2px 8px; font-size:12.5px; font-weight:600}
.abschnitt .rechts{margin-left:auto; display:flex; gap:8px; align-items:center; text-transform:none; letter-spacing:0; font-size:13px}
.abschnitt:first-child{margin-top:0}

.karte{background:var(--karte); border:1px solid var(--karte-rand); border-radius:var(--r); padding:var(--luft); min-width:0}
.karte.eng{padding:14px}
.karte h3{font-size:13px; margin-bottom:10px}
.karte h3.akzent, .liste h3{color:var(--akzent)}

.raster{display:grid; gap:var(--luft); align-items:start}
.raster.dehnen{align-items:stretch}
.r2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.r3{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.r4{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.r5{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.r6{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}

.zahl{font-size:26px; font-weight:600; color:var(--text-hell); line-height:1.15; font-variant-numeric:tabular-nums}
.zahl.gut{color:var(--gut)} .zahl.schlecht{color:var(--schlecht)}
.marke{font-size:11px; color:var(--text-leise); text-transform:uppercase; letter-spacing:.7px}
.gut{color:var(--gut)} .schlecht{color:var(--schlecht)} .mittel{color:var(--mittel)} .leise{color:var(--text-leise)}

.kennkarte{display:flex; flex-direction:column; gap:6px; min-height:120px; position:relative; overflow:hidden}
.kennkarte .zeichnung{margin-top:auto}
.kennkarte .unten{font-size:12px; color:var(--text-leise)}

.feld{background:var(--feld); border:1px solid var(--feld-rand); border-radius:var(--r-m); padding:10px 12px; min-width:0}
.feld .marke{display:block; margin-bottom:3px; font-size:10px}
.feld .wert{font-size:15px; color:var(--text-hell); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis}
.kachel{background:var(--feld); border:1px solid var(--feld-rand); border-radius:var(--r-m);
  padding:12px 10px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px}
.kachel .sym{font-size:18px; color:var(--daten)}
.kachel .marke{font-size:9.5px}
.kachel .wert{font-size:15px; font-weight:600; color:var(--text-hell); font-variant-numeric:tabular-nums}

.liste h3{font-size:12.5px; margin-bottom:8px}
.zeile{display:flex; justify-content:space-between; gap:12px; padding:3px 0; font-size:12.5px; border-bottom:1px solid rgba(255,255,255,.035)}
.zeile:last-child{border-bottom:0}
.zeile .w{font-variant-numeric:tabular-nums; color:var(--text-hell); text-align:right; white-space:nowrap}

/* ------------------------------------------------------------ Knöpfe und Eingaben */
button{background:var(--feld); border:1px solid var(--feld-rand); color:var(--text-hell); border-radius:var(--r-k);
  padding:7px 13px; cursor:pointer; font-size:12.5px; display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap; line-height:1.3}
button:hover{background:rgba(255,255,255,.11)}
button:focus-visible{outline:2px solid var(--akzent); outline-offset:1px}
button .sym{font-size:18px}
button.haupt{background:transparent; border-color:var(--akzent); color:var(--akzent); text-transform:uppercase; letter-spacing:.5px; font-size:12px; font-weight:500}
button.haupt:hover{background:var(--akzent-flaeche)}
button.voll{background:var(--akzent); border-color:var(--akzent); color:#1b1e22; font-weight:600}
button.voll:hover{background:var(--akzent-stark)}
button.gruen{background:transparent; border-color:var(--gut); color:var(--gut); text-transform:uppercase; font-size:12px}
button.gruen:hover{background:var(--gut-flaeche)}
button.rot{background:transparent; border-color:var(--schlecht); color:var(--schlecht)}
button.rot:hover{background:var(--schlecht-flaeche)}
button.flach{background:transparent; border-color:transparent; color:var(--text)}
button.flach:hover{background:rgba(255,255,255,.07); color:var(--text-hell)}
button.symbol{padding:6px; border-radius:50%; background:transparent; border-color:transparent; color:var(--text-leise)}
button.symbol:hover{background:rgba(255,255,255,.08); color:var(--text-hell)}
button.an{background:var(--akzent-flaeche); border-color:var(--akzent); color:var(--akzent)}
button:disabled{opacity:.4; cursor:default}
.umschalter{display:inline-flex; border:1px solid var(--feld-rand); border-radius:var(--r-k); overflow:hidden}
.umschalter button{border:0; border-radius:0; background:transparent; color:var(--text)}
.umschalter button.an{background:var(--akzent-flaeche); color:var(--akzent)}
.reiter{display:flex; gap:2px; border-bottom:1px solid var(--feld-rand); margin-bottom:var(--luft); flex-wrap:wrap}
.reiter button{background:transparent; border:0; border-bottom:2px solid transparent; border-radius:0;
  padding:10px 14px; color:var(--text)}
.reiter button.an{color:var(--akzent); border-bottom-color:var(--akzent)}

input,select,textarea{background:var(--feld); border:1px solid var(--feld-rand); border-radius:var(--r-k);
  padding:7px 10px; min-width:0; color:var(--text-hell)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--akzent)}
input::placeholder,textarea::placeholder{color:var(--text-leise)}
select option{background:var(--schwebe); color:#fff}
textarea{resize:vertical; line-height:1.5; width:100%}
input[type=checkbox]{accent-color:var(--akzent); width:16px; height:16px}
input[type=color]{padding:2px; width:40px; height:30px}
label.klein{font-size:10.5px; color:var(--text-leise); text-transform:uppercase; letter-spacing:.7px; display:block; margin-bottom:4px}
.formular{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:12px}
.formular .ganz{grid-column:1/-1}
.eingabe{display:flex; flex-direction:column}
.eingabe .mitzeichen{display:flex; align-items:center; background:var(--feld); border:1px solid var(--feld-rand); border-radius:var(--r-k)}
.eingabe .mitzeichen input{border:0; background:transparent; flex:1}
.eingabe .mitzeichen span{padding:0 10px; color:var(--text-leise)}

/* ------------------------------------------------------------ Aufklapp-Auswahl (wie mat-select) */
.feldbox{position:relative; min-width:0}
.feldknopf{width:100%; height:50px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  gap:1px; padding:5px 32px 5px 12px; background:var(--feld); border:1px solid var(--feld-rand);
  border-radius:var(--r-m); text-align:left; cursor:pointer; position:relative; color:var(--text-hell)}
.feldknopf:hover{border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.08)}
.feldbox.offen .feldknopf{border-color:var(--akzent)}
.feldbox.gesetzt .feldknopf{border-color:rgba(255,183,77,.5)}
.feldtitel{font-size:10px; letter-spacing:.7px; text-transform:uppercase; color:var(--text-leise); line-height:1.2}
.feldwert{font-size:13px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.feldbox.gesetzt .feldwert{color:var(--akzent)}
.feldknopf .pfeil{position:absolute; right:8px; top:50%; transform:translateY(-50%); color:var(--text-leise); transition:transform .15s}
.feldbox.offen .pfeil{transform:translateY(-50%) rotate(180deg)}
.feldknopf input{background:transparent; border:0; padding:0; width:100%; font-size:13px; color:var(--text-hell)}
.feldknopf input[type=date]{color-scheme:dark}
.aufklapp{position:absolute; z-index:60; top:calc(100% + 4px); left:0; min-width:100%; width:max-content; max-width:min(360px,90vw);
  background:var(--schwebe); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-m);
  box-shadow:0 14px 36px rgba(0,0,0,.5); padding:6px}
.aufklapp.rechtsbuendig{left:auto; right:0}
.aufklapp .suche{width:100%; margin-bottom:6px}
.optionen{max-height:300px; overflow-y:auto}
.option{display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:6px; cursor:pointer;
  font-size:13px; color:var(--text-hell); white-space:nowrap; position:relative}
.option:hover{background:rgba(255,255,255,.07)}
.option input{position:absolute; opacity:0; pointer-events:none}
.kasten{width:17px; height:17px; flex:0 0 17px; border:1.5px solid rgba(255,255,255,.35); border-radius:4px; display:grid; place-items:center}
.kasten.rund{border-radius:50%}
.kasten .sym{font-size:14px; visibility:hidden; color:#1b1e22; font-variation-settings:'FILL' 0,'wght' 700,'GRAD' 0,'opsz' 20}
.option input:checked + .kasten{background:var(--akzent); border-color:var(--akzent)}
.option input:checked + .kasten .sym{visibility:visible}
.option .farbe{width:10px; height:10px; border-radius:50%; flex:0 0 10px}
.optgruppe{font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:var(--text-leise); padding:8px 10px 3px}
.aufklapp-fuss{border-top:1px solid var(--feld-rand); margin-top:6px; padding-top:6px; display:flex; justify-content:space-between; gap:6px}
.aufklapp-fuss button{background:transparent; border:0; color:var(--akzent); font-size:12px; padding:4px 6px}

/* ------------------------------------------------------------ Filterleiste */
.filterkarte{margin-bottom:var(--luft); padding:14px}
.filterraster{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr)); gap:10px}
.filterfuss{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px}
.filterfuss .links, .filterfuss .rechts{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.chip{border-radius:20px; padding:6px 13px}
.chip.an{background:var(--akzent-flaeche); border-color:var(--akzent); color:var(--akzent)}
.vorlagen{display:flex; align-items:center; gap:6px}
.vorlagen input{width:220px; height:34px}
.baukasten{margin-top:12px; padding-top:12px; border-top:1px solid var(--feld-rand)}
.baugruppe{border:1px solid var(--feld-rand); border-left:3px solid var(--akzent); border-radius:var(--r-m);
  padding:10px; display:flex; flex-direction:column; gap:8px; background:rgba(0,0,0,.12)}
.baugruppe .baugruppe{border-left-color:var(--daten)}
.baugruppe-kopf{display:flex; gap:8px; align-items:center}
.baugruppe-kopf select{width:90px}
.bauzeile{display:grid; grid-template-columns:minmax(150px,1.2fr) minmax(130px,1fr) minmax(120px,1.4fr) auto; gap:8px; align-items:center}
.bauzeile .werte{display:flex; gap:6px; align-items:center; min-width:0}
.bauzeile .werte input{flex:1; min-width:60px}
@media (max-width:700px){ .bauzeile{grid-template-columns:1fr} }

/* ------------------------------------------------------------ Trade-Karten */
.werkzeugleiste{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.werkzeugleiste .luecke{flex:1}
.trade{display:grid; grid-template-columns:28px 92px 96px 118px minmax(0,1fr) auto; gap:14px; align-items:center;
  background:var(--karte); border:1px solid var(--karte-rand); border-left:4px solid var(--text-leise);
  border-radius:var(--r-m); padding:9px 14px; margin-bottom:7px; cursor:pointer; min-width:0}
.trade:hover{background:rgba(255,255,255,.11)}
.trade.gewinn{border-left-color:var(--gut)}
.trade.verlust{border-left-color:var(--schlecht)}
.trade.markiert{outline:1px solid var(--akzent); background:var(--akzent-flaeche)}
.trade .instr{display:flex; flex-direction:column; gap:4px; align-items:flex-start}
.trade .instr b{color:var(--text-hell); font-size:14px}
.trade .betrag{font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.trade .ticks{font-size:11px; color:var(--text-leise)}
.spalten{display:flex; gap:18px; flex-wrap:wrap; min-width:0}
.spalte{min-width:0}
.spalte .marke{display:block; font-size:9px; margin-bottom:1px}
.spalte .w{font-size:12px; color:var(--text-hell); font-variant-numeric:tabular-nums; white-space:nowrap}
.spalte .w small{display:block; color:var(--akzent); font-size:11.5px; font-weight:500}
.trade .marken{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; align-items:center; max-width:280px}
.rasteransicht{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:10px}
.rasteransicht .trade{grid-template-columns:1fr; margin:0}
@media (max-width:980px){ .trade{grid-template-columns:28px 1fr 1fr} .trade .spalten,.trade .marken{grid-column:1/-1; justify-content:flex-start} }

.richtung{font-size:9.5px; letter-spacing:.8px; padding:2px 7px; border-radius:4px; text-transform:uppercase; font-weight:600}
.richtung.long{background:var(--gut-flaeche); color:var(--gut)}
.richtung.short{background:var(--schlecht-flaeche); color:var(--schlecht)}
.etikett{display:inline-flex; align-items:center; gap:5px; background:var(--akzent-flaeche); border:1px solid rgba(255,183,77,.35);
  color:var(--akzent); border-radius:14px; padding:2px 10px; font-size:11px; white-space:nowrap; font-weight:500}
.etikett b{cursor:pointer; opacity:.6; font-weight:400}
.etikett b:hover{opacity:1}
.art{display:inline-flex; align-items:center; gap:4px; font-size:10px; padding:2px 8px; border-radius:10px; text-transform:uppercase; letter-spacing:.6px; font-weight:600}
.art.challenge{background:rgba(124,58,237,.18); color:#B79CFF}
.art.funded{background:var(--gut-flaeche); color:var(--gut)}
.art.eigenkapital{background:var(--akzent-flaeche); color:var(--akzent)}
.art.demo,.art.simulation,.art.replay{background:rgba(0,188,212,.14); color:var(--daten)}
.art.sonstiges,.art.unbekannt{background:rgba(255,255,255,.08); color:var(--text-leise)}
.art .vermutet{font-weight:400; opacity:.8; text-transform:none; letter-spacing:0}

.sterne{display:inline-flex; gap:0; color:var(--akzent)}
.sterne .sym{font-size:16px; font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 20}
.sterne .sym.aus{color:rgba(255,255,255,.2)}   /* nicht „leer“: die Klasse gehört dem Leerzustand-Kasten (88 px breit) */
.sterne.klickbar .sym{cursor:pointer; font-size:26px}
.sterne.klickbar .sym:hover{transform:scale(1.12)}

.blaettern{display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap}

/* ------------------------------------------------------------ Grafiken */
.bild{background:var(--karte); border:1px solid var(--karte-rand); border-radius:var(--r); padding:16px 18px; min-width:0; position:relative}
.bild h3{font-size:13px; margin-bottom:10px; display:flex; align-items:center; gap:8px}
.bild h3 .rechts{margin-left:auto; display:flex; gap:4px}
.zeichnung{width:100%; min-width:0}
.zeichnung svg{display:block; max-width:100%}
.mitte{display:flex; justify-content:center}
.hinweis{font-size:11px; color:var(--text-leise); margin-top:8px}
svg text{fill:rgba(255,255,255,.5); font-size:11px; font-family:var(--schrift)}
svg text.hell{fill:rgba(255,255,255,.92)}
svg .gitter{stroke:rgba(255,255,255,.07); stroke-width:1}
.bildmenue{position:absolute; top:10px; right:10px}

/* Monatskalender */
.monatstabelle{width:100%; border-collapse:separate; border-spacing:6px; table-layout:fixed}
.monatstabelle th{font-size:10.5px; text-transform:uppercase; letter-spacing:.7px; color:var(--text-leise);
  background:var(--feld); border:1px solid var(--feld-rand); border-radius:var(--r-k); padding:8px 4px; font-weight:500}
.monatstabelle td{vertical-align:top; background:var(--feld); border:1px solid var(--feld-rand); border-radius:var(--r-m);
  height:92px; padding:7px 9px; cursor:pointer; position:relative}
.monatstabelle td:hover{border-color:rgba(255,255,255,.3)}
.monatstabelle td.aussen{opacity:.35}
.monatstabelle td.gewinn{background:linear-gradient(180deg,rgba(0,255,136,.16),rgba(0,255,136,.05)); border-color:rgba(0,255,136,.35)}
.monatstabelle td.verlust{background:linear-gradient(180deg,rgba(255,71,87,.18),rgba(255,71,87,.05)); border-color:rgba(255,71,87,.35)}
.monatstabelle td.woche{background:linear-gradient(135deg,rgba(8,145,178,.12),rgba(124,58,237,.12)); border-color:rgba(8,145,178,.3); cursor:default}
.monatstabelle td.heute{box-shadow:inset 0 0 0 1px var(--akzent)}
.monatstabelle .tagnr{font-size:12px; font-weight:600; color:var(--text-hell)}
.monatstabelle .betrag{font-size:15px; font-weight:600; margin-top:10px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.monatstabelle .klein{font-size:10.5px; color:var(--text-leise)}
.monatstabelle .ecke{position:absolute; top:6px; right:8px; color:var(--akzent); font-size:15px}
@media (max-width:760px){ .monatstabelle td{height:62px; padding:4px} .monatstabelle .betrag{font-size:11px} }

/* Grenzbalken (Trading-Plan) */
.grenze{background:var(--feld); border:1px solid var(--feld-rand); border-radius:var(--r-m); padding:10px 12px}
.grenze .kopfzeile{display:flex; justify-content:space-between; font-size:12px; margin-bottom:8px}
.grenze .kopfzeile b{color:var(--text-hell)}
.grenze .spur{position:relative; height:12px; border-radius:6px; background:rgba(255,255,255,.07); overflow:hidden}
.grenze .spur .minus{position:absolute; top:0; bottom:0; right:50%; background:linear-gradient(90deg,var(--schlecht),rgba(255,71,87,.35))}
.grenze .spur .plus{position:absolute; top:0; bottom:0; left:50%; background:linear-gradient(90deg,rgba(0,255,136,.35),var(--gut))}
.grenze .spur .mitte{position:absolute; left:50%; top:-2px; bottom:-2px; width:2px; background:rgba(255,255,255,.5)}
.grenze .fusszeile{display:flex; justify-content:space-between; font-size:10.5px; color:var(--text-leise); margin-top:5px}
.grenze .leer{font-size:11px; color:var(--text-leise); font-style:italic; text-align:center; margin-top:6px}

/* Hinweise / Befunde */
.befund{border-left:3px solid var(--text-leise); border-radius:var(--r-m); padding:11px 14px; margin-bottom:9px; background:var(--feld)}
.befund.hoch,.befund.warnung{border-left-color:var(--schlecht); background:var(--schlecht-flaeche)}
.befund.mittel{border-left-color:var(--mittel); background:rgba(255,165,2,.07)}
.befund.hinweis,.befund.gut{border-left-color:var(--gut); background:var(--gut-flaeche)}
.befund.info{border-left-color:var(--daten); background:rgba(0,188,212,.08)}
.befund b{display:block; color:var(--text-hell); margin-bottom:3px}
.warnfeld{border:1px solid rgba(0,255,136,.35); background:var(--gut-flaeche); border-radius:var(--r-m);
  padding:18px; text-align:center; color:var(--gut)}
.warnfeld .sym{font-size:28px; display:block; margin:0 auto 6px; font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.warnfeld.rot{border-color:rgba(255,71,87,.4); background:var(--schlecht-flaeche); color:var(--schlecht); text-align:left}

/* Tabellen */
.tabellenkasten{overflow-x:auto}
table.tabelle{width:100%; border-collapse:collapse; font-size:12.5px}
.tabelle th{text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.7px; color:var(--text-leise);
  font-weight:500; padding:8px 10px; border-bottom:1px solid var(--feld-rand); white-space:nowrap}
.tabelle td{padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.04); font-variant-numeric:tabular-nums; vertical-align:middle}
.tabelle tr.klick{cursor:pointer}
.tabelle tr.klick:hover td{background:rgba(255,255,255,.04)}
.tabelle .re{text-align:right}

/* Checklisten */
.checkliste{display:flex; flex-direction:column; gap:6px}
.checkpunkt{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r-m); background:var(--feld);
  border:1px solid var(--feld-rand); cursor:pointer}
.checkpunkt.erledigt{background:var(--gut-flaeche); border-color:rgba(0,255,136,.3)}
.checkpunkt.erledigt .text{text-decoration:line-through; color:var(--text-leise)}
.checkpunkt .zaehler{margin-left:auto; font-size:11px; color:var(--text-leise)}

/* Tagesanalyse */
.tageskarte{border-left:4px solid var(--akzent)}
.teilkasten{background:rgba(0,0,0,.14); border:1px solid var(--feld-rand); border-radius:var(--r-m); padding:14px; margin-bottom:12px}
.teilkasten .teilkopf{display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.8px; color:var(--text-hell); font-weight:600}
.teilkasten .teilkopf .sym{color:var(--akzent); font-size:18px}
.teilkasten .teilkopf .rechts{margin-left:auto; display:flex; gap:4px}
.coachkasten{background:rgba(124,58,237,.10); border:1px solid rgba(124,58,237,.35); border-radius:var(--r-m); padding:14px}
.coachkasten h4{display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:14px}
.coachkasten h4 .sym{color:#B79CFF}
.minikalender{width:100%; border-collapse:collapse; table-layout:fixed}
.minikalender th{font-size:10px; color:var(--text-leise); font-weight:500; padding:4px 0}
.minikalender td{text-align:center; padding:2px}
.minikalender button{width:100%; aspect-ratio:1; max-width:38px; padding:0; justify-content:center; border-radius:50%;
  background:transparent; border-color:transparent; font-size:12px; position:relative}
.minikalender button.hat{color:var(--text-hell); font-weight:600}
.minikalender button.plus::after,.minikalender button.minus::after{content:""; position:absolute; bottom:3px; left:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%}
.minikalender button.plus::after{background:var(--gut)}
.minikalender button.minus::after{background:var(--schlecht)}
.minikalender button.notiz{box-shadow:inset 0 0 0 1px rgba(255,183,77,.5)}
.minikalender button.gewaehlt{background:var(--akzent); color:#1b1e22}
.minikalender button.heute{border-color:var(--daten)}

/* Win to Loss — Kalender je Konto */
.wlkal{width:100%; border-collapse:collapse; table-layout:fixed}
.wlkal th{font-size:10px; color:var(--text-leise); font-weight:500; padding:4px 0}
.wlkal td{text-align:center; padding:2px; vertical-align:top}
.wlkal button{width:100%; min-height:48px; padding:3px 2px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:1px; border-radius:6px; background:rgba(255,255,255,.02); border:1px solid transparent; font-size:11px; line-height:1.15}
.wlkal button:disabled{opacity:.45; cursor:default}
.wlkal button .t{font-size:10px; color:var(--text-leise)}
.wlkal button .w{font-weight:600; color:var(--text-hell); font-variant-numeric:tabular-nums; font-size:10.5px}
.wlkal button .n{font-size:9px; color:var(--text-leise)}
.wlkal button.gewaehlt{border-color:var(--akzent); box-shadow:0 0 0 1px var(--akzent)}
.wlkal button.heute .t{color:var(--daten); font-weight:600}
.wlkal td.woche{font-size:10.5px; font-weight:600; vertical-align:middle; font-variant-numeric:tabular-nums}

/* Screenshots */
.bilderraster{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr)); gap:10px}
.bildkachel{position:relative; border-radius:var(--r-m); overflow:hidden; border:1px solid var(--feld-rand); background:rgba(0,0,0,.35)}
.bildkachel img{display:block; width:100%; height:130px; object-fit:contain; object-position:top; cursor:zoom-in}
.bildkachel .unter{font-size:10.5px; color:var(--text-leise); padding:5px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-top:1px solid var(--feld-rand)}
.bildkachel .art{position:absolute; top:6px; left:6px}
.bildkachel .weg{position:absolute; top:4px; right:4px; background:rgba(0,0,0,.6)}
.ablage{border:2px dashed rgba(255,255,255,.18); border-radius:var(--r-m); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; min-height:130px; color:var(--text-leise); cursor:pointer; text-align:center; padding:10px; font-size:12px}
.ablage:hover,.ablage.drueber{border-color:var(--akzent); color:var(--akzent)}
.ablage .sym{font-size:30px}
#grossbild{position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.88); display:flex; align-items:center; justify-content:center; padding:20px; cursor:zoom-out}
#grossbild img{max-width:100%; max-height:100%; object-fit:contain; border-radius:6px}

/* Dialoge */
#dialogschicht{position:fixed; inset:0; z-index:150; background:rgba(0,0,0,.6); display:flex; align-items:flex-start;
  justify-content:center; padding:5vh 16px; overflow-y:auto}
.dialog{background:#262a30; border:1px solid rgba(255,255,255,.14); border-radius:14px; width:min(640px,100%);
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.dialog.breit{width:min(920px,100%)}
.dialog .dkopf{display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid var(--feld-rand)}
.dialog .dkopf .sym{color:var(--akzent)}
.dialog .dkopf h2{font-size:16px; flex:1}
.dialog .dinhalt{padding:18px 20px}
.dialog .dfuss{display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid var(--feld-rand)}
.dialog .gruppe{margin-bottom:16px}
.dialog .gruppe h4{display:flex; align-items:center; gap:6px; font-size:11px; text-transform:uppercase; letter-spacing:.8px; margin-bottom:10px; color:var(--text-hell)}
.dialog .gruppe h4 .sym{font-size:17px; color:var(--akzent)}
.infozeile{display:flex; gap:8px; align-items:flex-start; background:rgba(0,188,212,.08); border:1px solid rgba(0,188,212,.25);
  border-radius:var(--r-m); padding:9px 12px; font-size:12px; margin-bottom:14px}
.infozeile .sym{color:var(--daten); font-size:18px}

/* Meldungen */
#meldungen{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:300; display:flex; flex-direction:column; gap:8px; align-items:center}
.meldung{background:#30353c; border:1px solid rgba(255,255,255,.14); border-left:3px solid var(--gut); border-radius:var(--r-m);
  padding:9px 16px; font-size:12.5px; color:var(--text-hell); box-shadow:0 8px 24px rgba(0,0,0,.4); animation:rein .18s ease-out}
.meldung.fehler{border-left-color:var(--schlecht)}
@keyframes rein{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
#lade{position:fixed; top:0; left:0; right:0; height:2px; z-index:400; overflow:hidden; display:none}
#lade::after{content:""; position:absolute; top:0; bottom:0; width:30%; background:var(--akzent); animation:laufen 1s linear infinite}
@keyframes laufen{from{left:-30%} to{left:100%}}
#glockenfeld{position:absolute; top:52px; right:22px; z-index:80; width:min(380px,90vw); background:var(--schwebe);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r); box-shadow:0 14px 36px rgba(0,0,0,.5); padding:10px}
.ecke-knoepfe{position:fixed; right:18px; bottom:18px; display:flex; gap:8px; z-index:90}
.ecke-knoepfe button{width:40px; height:40px; border-radius:10px; justify-content:center; padding:0}

.leer{padding:36px; text-align:center; color:var(--text-leise)}
.leer .sym{display:block; font-size:36px; margin:0 auto 8px; opacity:.6}
.reihe{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.rechtsbuendig{margin-left:auto}
.kleintext{font-size:11.5px; color:var(--text-leise)}
.trenner{height:1px; background:var(--feld-rand); margin:14px 0}
kbd{background:var(--feld); border:1px solid var(--feld-rand); border-bottom-width:2px; border-radius:4px; padding:1px 6px; font-size:11px; font-family:inherit}

@media (max-width:820px){
  #leiste{position:fixed; z-index:120; left:0; transform:translateX(-100%); transition:transform .2s}
  #leiste.offen{transform:none}
  #menueknopf{display:inline-flex!important}
  #inhalt{padding:10px 12px 70px}
  #oben{padding:10px 12px 0}
  .kopf{padding:12px}
  .zahl{font-size:21px}
}
#menueknopf{display:none; margin-right:auto}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }

/* ---------- Konten & Provisionen ---------- */
.kontoname{display:inline-flex; align-items:center; gap:8px; color:var(--text-hell); text-decoration:none}
.kontoname:hover b{color:var(--akzent)}
.kontoname small{display:block; color:var(--text-leise); font-size:10.5px; font-weight:400}
.kontoname .lampe{width:8px; height:8px; border-radius:50%; background:var(--gut); box-shadow:0 0 8px var(--gut); flex:none}
.status{display:inline-block; font-size:10.5px; padding:2px 8px; border-radius:10px; background:rgba(255,255,255,.07); color:var(--text); white-space:nowrap}
.status.aktiv{background:var(--gut-flaeche); color:var(--gut)}
.status.bestanden,.status.ausgezahlt{background:rgba(0,188,212,.14); color:var(--daten)}
.status.verloren{background:var(--schlecht-flaeche); color:var(--schlecht)}
.status.geschlossen{color:var(--text-leise)}
.mitzeichen.klein{display:inline-flex; align-items:center; background:var(--feld); border:1px solid var(--feld-rand); border-radius:var(--r-k); width:128px}
.mitzeichen.klein span{padding:0 6px; color:var(--text-leise); font-size:11px}
.mitzeichen.klein input{border:0; background:transparent; width:100%; min-width:0; text-align:right; padding:5px 6px}
.mitzeichen.klein input.vermutet{color:var(--text-leise); font-style:italic}
.werkzeugleiste.sammel{background:var(--akzent-flaeche); border:1px solid rgba(255,183,77,.35); border-radius:var(--r-m); padding:8px 12px}
.symbolmarke{display:inline-block; font-family:ui-monospace,Consolas,monospace; font-size:11px; padding:2px 8px; border-radius:6px; background:var(--akzent-flaeche); color:var(--akzent); border:1px solid rgba(255,183,77,.35)}
.kontentabelle td{white-space:nowrap}
.kontentabelle tr.leise td{opacity:.55}
.kontentabelle .option{gap:0}

/* ---------- Import ---------- */
.banner{display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:14px 16px; border-radius:var(--r-m);
  background:linear-gradient(90deg,rgba(0,188,212,.10),rgba(255,183,77,.08)); border:1px solid rgba(0,188,212,.3); border-top:2px solid var(--akzent)}
.banner code{font-family:ui-monospace,Consolas,monospace; font-size:11px; color:var(--akzent)}
.schritt{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--feld-rand)}
.schritt:last-of-type{border-bottom:0}
.schritt .nr{flex:none; width:26px; height:26px; border-radius:50%; background:var(--akzent); color:#1b1e22; font-weight:700; font-size:12px;
  display:inline-flex; align-items:center; justify-content:center}
.schritt b{color:var(--text-hell)}
.codeblock{margin-top:8px; padding:10px 12px; border-radius:var(--r-k); background:var(--feld); border:1px solid var(--feld-rand);
  font-family:ui-monospace,Consolas,monospace; font-size:11.5px; line-height:1.7; color:var(--text)}
.codeblock b{color:var(--akzent)}
.ablage.an{border-color:var(--akzent); background:var(--akzent-flaeche)}

/* ---------- Benutzerprofil ---------- */
.farbwahl{padding:8px 10px; border:1px solid var(--feld-rand); border-radius:var(--r-k); gap:10px}
.farbwahl.an{border-color:var(--akzent); background:var(--akzent-flaeche)}
.farbwahl .farbe{width:18px; height:18px; border-radius:5px; display:inline-block}
.monitorkarte{align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--feld-rand); border-radius:var(--r-k)}
.monitorkarte.an{border-color:var(--akzent); background:var(--akzent-flaeche)}
.einstellblock h3{margin:0}

/* ---------- Hilfe ---------- */
.hilfe{display:grid; grid-template-columns:minmax(200px,260px) minmax(0,1fr) minmax(180px,230px); gap:var(--luft); align-items:start}
@media (max-width:1100px){.hilfe{grid-template-columns:minmax(200px,240px) minmax(0,1fr)} .hilfe-rechts{display:none}}
@media (max-width:760px){.hilfe{grid-template-columns:1fr}}
.hilfe-gruppenkopf{display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:8px 6px}
.hilfe-punkt{display:block; padding:6px 10px 6px 34px; border-radius:var(--r-k); color:var(--text); text-decoration:none; font-size:12.5px}
.hilfe-punkt:hover{background:var(--feld)}
.hilfe-punkt.an{color:var(--akzent); background:var(--akzent-flaeche)}
.hilfe-sprung{display:block; padding:4px 6px; font-size:12px; color:var(--text); text-decoration:none; border-radius:var(--r-k)}
.hilfe-sprung:hover{color:var(--akzent)}
.hilfe-text h2{color:var(--akzent); font-size:22px; margin:8px 0 14px; padding-bottom:8px; border-bottom:2px solid var(--akzent-flaeche)}
.hilfe-text h3{margin:22px 0 8px; padding-left:10px; border-left:3px solid var(--akzent); color:var(--text-hell); font-size:15px}
.hilfe-text h4{margin:14px 0 4px; color:var(--text-hell); font-size:13px}
.hilfe-text p,.hilfe-text li{line-height:1.65; max-width:78ch}
.hilfe-text ul,.hilfe-text ol{padding-left:22px; margin:6px 0}
.hilfe-text code{font-family:ui-monospace,Consolas,monospace; font-size:11.5px; background:var(--feld); padding:1px 5px; border-radius:4px; color:var(--akzent)}
.hilfe-text kbd{font-family:ui-monospace,Consolas,monospace; font-size:11px; background:var(--feld); border:1px solid var(--feld-rand); border-bottom-width:2px; padding:1px 6px; border-radius:4px}
.hilfe-text a{color:var(--akzent)}
.hilfe-text .tabelle{margin:8px 0 14px}
.brotkrumen a{color:var(--text-leise); text-decoration:none}

/* ---------- Helles Design ---------- */
html.hell{--grund:#eef0f3; --leiste:#ffffff; --karte:rgba(255,255,255,.75); --karte-rand:rgba(0,0,0,.10); --feld:rgba(0,0,0,.045);
  --feld-rand:rgba(0,0,0,.12); --streifen:rgba(0,0,0,.025); --schwebe:#ffffff; --text:rgba(0,0,0,.74); --text-hell:rgba(0,0,0,.92);
  --text-leise:rgba(0,0,0,.48); --akzent:#d98a12; --akzent-stark:#c47b08; --akzent-flaeche:rgba(217,138,18,.12);
  --gut:#0b9d5c; --schlecht:#d9303f; --gut-flaeche:rgba(11,157,92,.12); --schlecht-flaeche:rgba(217,48,63,.12); --daten:#0a8fa3; --daten2:#6d3fd6}
html.hell.blau_orange{--gut:#1f7fd6; --schlecht:#e0651a; --gut-flaeche:rgba(31,127,214,.12); --schlecht-flaeche:rgba(224,101,26,.12)}
html.hell svg text{fill:rgba(0,0,0,.55)}
html.hell svg text.hell{fill:rgba(0,0,0,.9)}
html.hell svg .gitter{stroke:rgba(0,0,0,.08)}
html.hell .tabelle td{border-bottom-color:rgba(0,0,0,.06)}
html.hell .tabelle tr.klick:hover td{background:rgba(0,0,0,.04)}
html.hell .art.sonstiges,html.hell .art.unbekannt,html.hell .status{background:rgba(0,0,0,.07)}
html.hell select option{color:#111}
html.hell .schritt .nr{color:#fff}

/* Handybreite (Server-Fassung itl-journal.de, 25.09.2026): nichts ragt über den rechten Rand */
@media (max-width:600px){
  .abschnitt{flex-wrap:wrap}
  .zeile .w{white-space:normal; overflow-wrap:anywhere; min-width:0}
  #inhalt .formular{grid-template-columns:1fr !important}
  #inhalt .raster{grid-template-columns:minmax(0,1fr) !important}
  .karte{padding:14px}
}

/* ---------- Lese-Modus: fremdes Journal aus der Community (Server-Fassung, Teil 3) ---------- */
.nurlesen .bearbeiten{display:none !important}
.nurlesen .sterne.klickbar .sym{cursor:default; pointer-events:none; font-size:16px}
.nurlesen #tr_doku,.nurlesen .checkliste .checkpunkt,.nurlesen .monatstabelle td,.nurlesen a[href^="#/konto/"],.nurlesen a[href^="#/strategien"]{pointer-events:none}
.nurlesen .trade{grid-template-columns:92px 96px 118px minmax(0,1fr) auto}
@media (max-width:980px){ .nurlesen .trade{grid-template-columns:1fr 1fr} }
.fremdbanner{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:0 var(--luft); padding:10px 14px; border-radius:var(--r-m);
  background:linear-gradient(90deg,rgba(255,183,77,.16),rgba(0,188,212,.10)); border:1px solid rgba(255,183,77,.45)}
.fremdbanner .sym{color:var(--akzent)}
.fremdbanner b{color:var(--text-hell)}
.fremdbanner .luecke{flex:1}

/* ---------- Kopierer ---------- */
.zustand{display:inline-flex; align-items:center; gap:5px; font-size:11px; padding:3px 9px; border-radius:20px; border:1px solid var(--feld-rand); background:var(--feld); color:var(--text-leise); white-space:nowrap}
.zustand .sym{font-size:14px}
.zustand.an{color:var(--gut); border-color:rgba(0,255,136,.4); background:var(--gut-flaeche)}
.zustand.aus{color:var(--schlecht); border-color:rgba(255,71,87,.4); background:var(--schlecht-flaeche)}
.zustand.warte{color:var(--mittel); border-color:rgba(255,165,2,.4); background:rgba(255,165,2,.08)}
.zustand.gross{font-size:12.5px; padding:6px 12px}
.zustaende{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.warnkasten{border:2px solid var(--schlecht); background:var(--schlecht-flaeche); border-radius:var(--r-m); padding:14px 16px}
.warnkasten h4{display:flex; align-items:center; gap:8px; color:#ffb3ba; font-size:14px; margin-bottom:8px}
.warnkasten ul{padding-left:20px; margin:6px 0}
.warnkasten li{margin:5px 0}
.warnkasten label.haken{display:flex; gap:10px; align-items:flex-start; margin-top:12px; cursor:pointer; color:var(--text-hell)}
.kopiertabelle td.re,.kopiertabelle th.re{text-align:right}
.kopiertabelle .paar{display:flex; flex-direction:column; gap:2px; line-height:1.25}
.kopiertabelle .paar small{color:var(--text-leise); font-size:10.5px}

/* ---------- Community ---------- */
.mitgliedraster{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr)); gap:14px}
.mitglied{background:var(--feld); border:1px solid var(--feld-rand); border-radius:var(--r); padding:16px; display:flex; flex-direction:column; gap:10px; min-width:0}
.mitglied .kopfzeile{display:flex; gap:12px; align-items:center; min-width:0}
.mitglied .kopfzeile b{display:block; color:var(--text-hell); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mitglied .kopfzeile code{font-size:11px}
.avatar{width:44px; height:44px; flex:0 0 44px; border-radius:50%; display:grid; place-items:center; font-weight:600; font-size:15px; color:#1b1e22;
  background:linear-gradient(135deg,#FFB74D,#F57C00)}
.avatar.blau{background:linear-gradient(135deg,#00BCD4,#7C3AED); color:#fff}
.kontochips{display:flex; gap:5px; flex-wrap:wrap}
.kontochips .etikett{font-size:10.5px}
.mitglied .fuss{display:flex; gap:6px; align-items:center; justify-content:flex-end; margin-top:auto; flex-wrap:wrap}
.mitglied .fuss .luecke{flex:1}
.idfeld{display:inline-flex; align-items:center; gap:8px; background:var(--feld); border:1px solid var(--feld-rand); border-radius:var(--r-k); padding:6px 8px 6px 12px}
.idfeld code{font-size:13px; letter-spacing:.5px}
.suchfeld{display:flex; align-items:center; gap:8px; max-width:360px; margin-bottom:14px}
.suchfeld input{flex:1}