.detail { display: grid; grid-template-columns: 232px 1fr; gap: 12px; align-items: start; }
@media (max-width: 1180px) { .detail { grid-template-columns: 1fr; } }

/* Kachelspalte links */
.tile { background: var(--card); border: 1px solid var(--border-2); border-radius: 11px; padding: 11px 13px; margin-bottom: 9px; }
.tile .l { color: var(--dim); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
.tile .v { font-size: 17px; font-weight: 650; margin-top: 3px; }
.tile .s { color: var(--muted); font-size: 11px; margin-top: 2px; }

/* Ein-/Ausstiegsblock */
.legs { display: grid; grid-template-columns: 1fr 34px 1fr; gap: 10px; align-items: center; }
.leg { background: rgba(255,255,255,.03); border: 1px solid var(--border-2); border-radius: 10px; padding: 11px 13px; }
.leg .t { color: var(--dim); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
.leg .p { font-size: 19px; font-weight: 650; margin-top: 3px; font-variant-numeric: tabular-nums; }
.leg .w { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.arrow { text-align: center; color: var(--accent-2); font-size: 17px; }

/* Ziel/Stop-Leiste */
.tpsl { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; margin-top: 12px; }
.tpsl div { border-radius: 9px; padding: 9px 11px; background: rgba(255,255,255,.025); border: 1px solid var(--border-2); }
.tpsl .t { color: var(--dim); font-size: 10px; letter-spacing: .9px; text-transform: uppercase; font-weight: 600; }
.tpsl .v { font-size: 14px; font-weight: 650; margin-top: 2px; }
.tpsl .s { color: var(--muted); font-size: 11px; }

/* Kasten, dessen Wert es noch nicht gibt -- dieselbe Sprache wie `.tile.offen` bei MAE/MFE:
   gestrichelt und zurueckgenommen. Leer allein liest sich wie ein Fehler, gestrichelt wie
   ein offener Posten. NICHT `offen` genannt: die Klasse ist global fuer aufgeklappte
   Auswahlfelder belegt (siehe journal.css). */
.tpsl div.wartet { border-style: dashed; opacity: .72; }
.tpsl div.wartet .v { color: var(--dim); }

/* Bewertung */
.stars { color: var(--gold); font-size: 17px; letter-spacing: 2px; }

/* Regelliste */
.crit { display: grid; gap: 6px; margin-top: 3px; }
.crit div { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; padding: 5px 0; }
.crit .mk { width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center; font-size: 10.5px; flex: 0 0 auto; margin-top: 1px; }
.crit .mk.ja   { background: var(--green-dim); color: var(--green); }
.crit .mk.nein { background: var(--red-dim); color: var(--red); }
.crit .mk.na   { background: rgba(255,255,255,.05); color: var(--dim); }

/* Merkmale */
/* Auch fuer <span>: Merkmale sind seit dem 13.08.2026 echte Werte aus der Datenbank und
   fuehren nirgendwohin -- ein Link, der nur wie ein Link aussieht, verspricht ein Ziel. */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.chips a, .chips span {
  font-size: 11.5px; padding: 4px 10px; border-radius: 20px; text-decoration: none;
  background: rgba(255,255,255,.04); border: 1px solid var(--border-2); color: var(--muted);
}
.chips a:hover { color: var(--text); border-color: var(--border); }
.chips a.acc, .chips span.acc { background: var(--accent-soft); border-color: var(--border); color: var(--accent-2); }

details { margin-top: 11px; border-top: 1px solid var(--border-2); padding-top: 11px; }
summary { cursor: pointer; color: var(--accent-2); font-size: 12px; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "▸ "; }
details[open] summary::before { content: "▾ "; }

/* Kachel, deren Wert es noch nicht gibt: sichtbar, aber sichtlich leer. Eine erfundene Zahl
   waere hier schlimmer als gar keine -- man wuerde sie auswerten. */
.tile.offen { border-style: dashed; opacity: .72; }
.tile.offen .v { color: var(--dim); }

/* Blaetterknopf ohne Ziel bleibt STEHEN statt zu verschwinden -- sonst springen die Knoepfe
   daneben bei jedem Trade an eine andere Stelle.

   ACHTUNG, DIE KLASSE HEISST `gesperrt` UND NICHT `aus`. `.aus` ist die aufklappende Liste
   der Kopfzeilen-Auswahlen und steht global auf `position: absolute; width: 352px`. Ein
   Knopf mit dieser Klasse wird dadurch aus dem Fluss genommen und 352 px breit -- er landet
   unter der Kopfzeile am linken Rand. Genau so gemessen am 12.08.2026, und es ist das
   zweite Mal, dass diese Klasse jemandem das Bild zerlegt (siehe `kal-aus` im Kalender). */
.btn.gesperrt { opacity: .35; pointer-events: none; }

/* Der Knopf wechselt zwischen "Als durchgesehen markieren" und "Doch noch offen" -- zwei
   sehr verschieden lange Texte. Ohne feste Breite schrumpft er beim Umschalten, und weil er
   ganz rechts steht, WANDERN DIE BEIDEN BLAETTERKNOEPFE DANEBEN MIT. Wer sich durchklickt,
   zielt dann jedes Mal woanders hin. Breite deshalb am laengeren Text festgemacht. */
.btn.t-gesehen { min-width: 216px; justify-content: center; }

/* Bis trade.js den Zustand kennt, bleibt der Knopf leer -- aber er nimmt seinen Platz schon
   ein (min-width oben). Ein kurz falscher Text ist schlimmer als ein kurz leerer: Man liest
   ihn, klickt danach, und trifft etwas anderes. */
.btn.t-gesehen.leer { opacity: 0; pointer-events: none; }

/* Zeiteinheit-Auswahl im Chart-Kopf. Rechts neben der Ueberschrift, klein und ruhig --
   sie ist ein Werkzeug, keine Kennzahl. */
.tf-wahl { display: inline-flex; gap: 3px; margin-left: auto; flex-wrap: wrap; }
.tf-wahl button {
  background: rgba(255,255,255,.04); border: 1px solid var(--border-2); color: var(--muted);
  border-radius: 6px; padding: 2px 7px; font-size: 10.5px; font-weight: 600; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.tf-wahl button:hover { border-color: var(--accent); color: var(--text); }
.tf-wahl button.an { background: rgba(124,108,245,.26); border-color: var(--accent); color: var(--text); }

/* Linien ein-/ausblenden -- unten rechts in der Chart-Kachel, gebaut wie die Zeiteinheit oben. */
.linien-wahl { display: flex; align-items: center; gap: 5px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
.linien-wahl .lw-titel { color: var(--dim); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; margin-right: 3px; }
.linien-wahl button {
  background: rgba(255,255,255,.04); border: 1px solid var(--border-2); color: var(--dim);
  border-radius: 6px; padding: 2px 9px; font-size: 10.5px; font-weight: 600; cursor: pointer;
}
.linien-wahl button:hover { border-color: var(--accent); color: var(--text); }
.linien-wahl button.an { background: rgba(124,108,245,.26); border-color: var(--accent); color: var(--text); }