/* ==========================================================================
   DATENBANK-TRAINER  -  modernes dunkles Layout im FISI-Quest-Stil
   Alles unter .dbt gescoped.
   ========================================================================== */
.dbt {
  display: block; max-width: 1080px; margin: 0 auto; padding: 20px 22px 48px;
  --bg: #0b0b12;
  /* halbtransparent, damit der Ambient-Glow aus fq-theme.css durchscheint */
  --karte: rgba(20,20,31,.58);
  --karte-2: rgba(25,25,38,.55);
  --erhoben: rgba(29,29,44,.58);
  --line: #262637;
  --line-soft: #1e1e2c;
  --txt: #eef0f6;
  --dim: #a2a2ba;
  --faint: #6a6a86;
  --blue: #3da9ff;
  --violet: #b47bff;
  --green: #3ddc84;
  --amber: #ffb347;
  --red: #ff3b5c;
  --mono: 'FQ Ziffern', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --label: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--txt); font-family: var(--label);
}
@media (max-width: 700px) { .dbt { padding: 14px 12px 36px; } }

.dbt .dbt-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--karte); border: 1px solid var(--line); color: var(--txt);
  font-size: 13px; font-weight: 600; padding: 9px 15px;
  border-radius: 10px; cursor: pointer; margin-bottom: 16px;
}
.dbt .dbt-back:hover { border-color: var(--blue); color: var(--blue); }

/* ---------- Kopf ---------- */
.dbt .dbt-kopf { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.dbt .dbt-kopf-l { flex: 1; min-width: 200px; }
.dbt .dbt-kopf-l h1 {
  margin: 0; font-family: 'Press Start 2P', monospace; font-size: 16px; line-height: 1.5;
  background: linear-gradient(90deg, var(--blue), var(--violet));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dbt .dbt-kopf-s { font-size: 12.5px; color: var(--dim); margin-top: 9px; }
.dbt .dbt-neu {
  background: var(--karte); border: 1px solid var(--line); color: var(--dim);
  font-size: 12.5px; font-weight: 600; padding: 9px 16px; border-radius: 10px; cursor: pointer;
}
.dbt .dbt-neu:hover { border-color: var(--violet); color: var(--violet); }

.dbt .dbt-fortschritt {
  height: 8px; background: var(--karte); border-radius: 99px; overflow: hidden;
  border: 1px solid var(--line-soft);
}
.dbt .dbt-fortschritt i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.dbt .dbt-fort-text { font-size: 11.5px; color: var(--faint); margin: 7px 0 16px; font-family: var(--mono); }

/* ---------- Szenariokarte ---------- */
.dbt .dbt-szenario {
  background: linear-gradient(135deg, rgba(180,123,255,.10), rgba(61,169,255,.05));
  border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin-bottom: 16px;
}
.dbt .dbt-sz-t { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.dbt .dbt-szenario p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--dim); }

/* ---------- Stufenleiste ---------- */
.dbt .dbt-stufen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.dbt .dbt-stufe {
  display: flex; align-items: center; gap: 8px;
  background: var(--karte); border: 1px solid var(--line); color: var(--dim);
  font-family: var(--label); font-size: 12.5px; font-weight: 600;
  padding: 8px 13px 8px 8px; border-radius: 12px; cursor: pointer;
  transition: border-color .15s, color .15s, transform .1s;
}
.dbt .dbt-stufe:hover { color: var(--txt); border-color: #34344c; transform: translateY(-1px); }
.dbt .dbt-stufe .n {
  display: grid; place-items: center; min-width: 26px; height: 24px; padding: 0 5px;
  border-radius: 8px; background: var(--erhoben); color: var(--faint);
  font-family: var(--mono); font-size: 11px;
}
.dbt .dbt-stufe.on { border-color: var(--blue); color: var(--txt); background: rgba(61,169,255,.10); }
.dbt .dbt-stufe.on .n { background: var(--blue); color: #04121f; }
.dbt .dbt-stufe.done { border-color: rgba(61,220,132,.45); }
.dbt .dbt-stufe.done .n { background: rgba(61,220,132,.16); color: var(--green); }

/* ---------- Lernkarte ---------- */
.dbt .dbt-lern {
  background: var(--karte); border: 1px solid var(--line); border-left: 3px solid var(--violet);
  border-radius: 14px; margin-bottom: 14px; overflow: hidden;
}
.dbt .dbt-lern-kopf {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer; padding: 14px 16px;
  color: var(--txt); font-family: var(--label); font-size: 14px; font-weight: 700;
}
.dbt .dbt-lern-kopf .ico { color: var(--violet); font-size: 12px; transition: transform .18s; }
.dbt .dbt-lern.offen .dbt-lern-kopf .ico { transform: rotate(90deg); }
.dbt .dbt-lern-kopf .t { flex: 1; }
.dbt .dbt-lern-kopf .s { font-size: 11px; font-weight: 500; color: var(--faint); }
.dbt .dbt-lern-body { padding: 0 18px 16px; }
.dbt .dbt-lern-body p {
  margin: 0 0 10px; font-size: 13.5px; line-height: 1.65; color: var(--dim);
}
.dbt .dbt-bsp {
  background: var(--karte-2); border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 12px 14px; margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--txt);
}
.dbt .dbt-bsp .l {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 6px;
}
.dbt .dbt-weg2 { margin-top: 12px; }
.dbt .dbt-weg2-t, .dbt .dbt-tipp-t {
  display: none; margin-top: 10px; padding: 11px 14px; border-radius: 10px;
  background: rgba(180,123,255,.08); border: 1px solid rgba(180,123,255,.3);
  font-size: 13px; line-height: 1.6; color: var(--txt);
}
.dbt .dbt-weg2-t.show, .dbt .dbt-tipp-t.show { display: block; }
.dbt .dbt-tipp { margin-top: 12px; }
.dbt .dbt-tipp-t { background: rgba(255,179,71,.08); border-color: rgba(255,179,71,.3); }

/* ---------- Aufgabenkarte ---------- */
.dbt .dbt-karte {
  background: var(--karte); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
.dbt .dbt-k-kopf {
  display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap;
  padding: 16px 18px; border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(61,169,255,.07), transparent);
}
.dbt .dbt-k-nr { font-family: var(--mono); font-size: 13px; color: var(--blue); }
.dbt .dbt-k-frage { flex: 1; min-width: 220px; font-size: 14.5px; line-height: 1.55; }
.dbt .dbt-k-punkte {
  font-family: var(--mono); font-size: 12px; white-space: nowrap; color: var(--amber);
  border: 1px solid rgba(255,179,71,.35); padding: 4px 10px; border-radius: 8px;
}
.dbt .dbt-k-body { padding: 16px 18px; }
.dbt .dbt-hint { font-size: 12.5px; color: var(--faint); line-height: 1.55; margin-bottom: 12px; }
.dbt .dbt-hint.klein { font-size: 11.5px; margin: 8px 0 0; }
.dbt .dbt-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin: 14px 0 7px;
}

/* ---------- Chips ---------- */
.dbt .dbt-vorrat {
  display: flex; flex-wrap: wrap; gap: 8px; min-height: 50px;
  background: var(--karte-2); border: 1px dashed var(--line); border-radius: 12px;
  padding: 11px; margin-bottom: 16px;
}
.dbt .dbt-vorrat.mini { min-height: 0; display: inline-flex; margin-bottom: 14px; }
.dbt .dbt-vorrat.spalte { flex-direction: column; }
.dbt .dbt-chip { touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.dbt .dbt-chip.weg { opacity: .25; }
.dbt .dbt-chip.sel { box-shadow: 0 0 0 2px rgba(61,169,255,.55); }
.dbt .dbt-drop.over { border-color: var(--blue); background: rgba(61,169,255,.07); }

.dbt .dbt-feld {
  display: inline-block; background: var(--erhoben); border: 1px solid var(--line);
  border-radius: 9px; padding: 7px 12px; font-family: var(--mono); font-size: 12px; color: var(--txt);
}
.dbt .dbt-feld:hover { border-color: #3a3a58; }
.dbt .dbt-feld.fk { border-left: 3px solid var(--blue); }
.dbt .dbt-feld.ruhe {
  display: block; background: transparent; border: none;
  border-bottom: 1px solid var(--line-soft); border-radius: 0;
  padding: 7px 12px; color: var(--dim); cursor: default;
}
.dbt .dbt-feld.ruhe.fk { border-left: 3px solid var(--blue); color: var(--txt); }
.dbt .dbt-feld.ok { border-color: var(--green); color: var(--green); background: rgba(61,220,132,.10); }
.dbt .dbt-feld.bad { border-color: var(--red); color: #ff7d90; background: rgba(255,59,92,.10); }

.dbt .dbt-kard {
  display: inline-grid; place-items: center; width: 46px; height: 38px;
  background: var(--erhoben); border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--mono); font-size: 17px; color: var(--txt);
}
.dbt .dbt-kard:hover { border-color: var(--blue); color: var(--blue); }
.dbt .dbt-baustein {
  display: inline-block; background: var(--erhoben); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 12px; font-family: var(--mono); font-size: 12.5px; color: var(--txt);
}
.dbt .dbt-baustein:hover { border-color: var(--blue); }
.dbt .dbt-satz {
  background: var(--erhoben); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px; font-size: 13px; line-height: 1.55;
}
.dbt .dbt-satz.ok { border-color: var(--green); background: rgba(61,220,132,.09); }
.dbt .dbt-satz.bad { border-color: var(--red); background: rgba(255,59,92,.09); }

/* ---------- Beziehungsansicht ---------- */
.dbt .dbt-reihe {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0;
  margin-bottom: 16px; overflow-x: auto; padding-bottom: 4px;
}
.dbt .dbt-tab {
  flex: 1 1 180px; min-width: 178px;
  background: var(--karte-2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.dbt .dbt-reihe.klein .dbt-tab { min-width: 158px; }
.dbt .dbt-tab-kopf {
  background: linear-gradient(180deg, rgba(61,169,255,.16), rgba(61,169,255,.05));
  border-bottom: 1px solid var(--line); padding: 9px 12px;
  font-family: var(--mono); font-size: 12.5px; color: var(--blue);
}
.dbt .dbt-tab-pk {
  display: flex; align-items: center; gap: 7px; padding: 7px 12px;
  border-bottom: 1px solid var(--line-soft); font-family: var(--mono); font-size: 12px;
}
.dbt .dbt-tab-pk .sl { color: var(--amber); font-size: 13px; }
.dbt .dbt-tab-pk .nm { color: var(--txt); }
.dbt .dbt-tab-body { min-height: 104px; padding: 9px; display: flex; flex-direction: column; gap: 6px; }
.dbt .dbt-verb {
  flex: 0 0 100px; display: flex; align-items: center; justify-content: center;
  gap: 5px; align-self: center; padding: 0 5px;
}
.dbt .dbt-linie { flex: 1; height: 2px; border-radius: 2px; background: #33334c; min-width: 12px; }
.dbt .dbt-slot {
  flex: 0 0 36px; width: 36px; height: 32px; display: grid; place-items: center;
  border: 1px dashed var(--blue); border-radius: 9px; background: var(--karte-2);
  font-family: var(--mono); font-size: 15px; color: var(--faint);
}
.dbt .dbt-slot.set { border-style: solid; color: var(--txt); }
.dbt .dbt-slot.ok { border-color: var(--green); color: var(--green); background: rgba(61,220,132,.10); }
.dbt .dbt-slot.bad { border-color: var(--red); color: #ff7d90; background: rgba(255,59,92,.10); }
@media (max-width: 700px) {
  .dbt .dbt-reihe { flex-direction: column; }
  .dbt .dbt-tab { width: 100%; }
  .dbt .dbt-verb { flex: none; width: 100%; padding: 8px 0; }
  .dbt .dbt-linie { min-width: 40px; }
}

/* ---------- Dialog ---------- */
.dbt .dbt-dialog {
  background: var(--karte-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 0 0 14px; margin-bottom: 16px; max-width: 470px;
}
.dbt .dbt-dlg-kopf {
  background: var(--erhoben); border-bottom: 1px solid var(--line);
  padding: 10px 14px; font-size: 12.5px; font-weight: 700; color: var(--dim);
}
.dbt .dbt-cb {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px 0;
  font-size: 12.5px; cursor: pointer; line-height: 1.5; color: var(--dim);
}
.dbt .dbt-cb.sub { padding-left: 34px; }
.dbt .dbt-cb.on { color: var(--txt); }
.dbt .dbt-cb.gesperrt { opacity: .35; cursor: not-allowed; }
.dbt .dbt-cb-box {
  flex: 0 0 17px; width: 17px; height: 17px; margin-top: 1px;
  border: 1px solid var(--faint); border-radius: 5px; background: var(--karte);
  display: grid; place-items: center; font-size: 12px; color: var(--blue); line-height: 1;
}
.dbt .dbt-cb.on .dbt-cb-box { border-color: var(--blue); }
.dbt .dbt-demo {
  display: none; margin: 14px 14px 0; padding: 12px 14px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.6;
}
.dbt .dbt-demo.show { display: block; }
.dbt .dbt-demo .z2 { margin-top: 7px; font-weight: 700; }
.dbt .dbt-demo.ok { background: rgba(61,220,132,.09); border: 1px solid rgba(61,220,132,.4); color: var(--green); }
.dbt .dbt-demo.err { background: rgba(255,59,92,.09); border: 1px solid rgba(255,59,92,.4); color: #ff7d90; }
.dbt .dbt-demo.warn { background: rgba(255,179,71,.09); border: 1px solid rgba(255,179,71,.4); color: var(--amber); }

.dbt .dbt-antwort-feld {
  min-height: 78px; border: 1px dashed var(--line); border-radius: 12px;
  background: var(--karte-2); padding: 10px; display: flex; flex-direction: column; gap: 7px;
}
.dbt .dbt-sqlzeile {
  min-height: 58px; border: 1px dashed var(--line); border-radius: 12px;
  background: var(--karte-2); padding: 10px; display: flex; flex-wrap: wrap; gap: 7px;
  align-items: flex-start;
}

/* ---------- Ausgabe ---------- */
.dbt .dbt-ausgabe { margin-top: 14px; overflow-x: auto; }
.dbt .dbt-erg {
  border-collapse: collapse; background: var(--karte-2);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  font-family: var(--mono); font-size: 12px;
}
.dbt .dbt-erg th, .dbt .dbt-erg td { border: 1px solid var(--line-soft); padding: 7px 13px; text-align: left; }
.dbt .dbt-erg th { background: var(--erhoben); color: var(--blue); font-weight: 600; }
.dbt .dbt-erg td { color: var(--txt); }
.dbt .dbt-erg-leer { font-size: 12.5px; color: var(--faint); }

/* ---------- Knoepfe ---------- */
.dbt .dbt-btnreihe { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; }
.dbt .dbt-btn {
  background: linear-gradient(135deg, #2b6fd0, var(--blue)); border: none; color: #fff;
  font-family: var(--label); font-size: 13px; font-weight: 700;
  padding: 11px 20px; border-radius: 11px; cursor: pointer; margin-top: 14px;
}
.dbt .dbt-btnreihe .dbt-btn { margin-top: 0; }
.dbt .dbt-btn:hover:not(:disabled) { filter: brightness(1.12); }
.dbt .dbt-btn:disabled { opacity: .4; cursor: default; }
.dbt .dbt-btn.geist {
  background: transparent; border: 1px solid var(--line); color: var(--dim); font-weight: 600;
}
.dbt .dbt-btn.geist:hover { border-color: var(--amber); color: var(--amber); filter: none; }
.dbt .dbt-btn.go { background: linear-gradient(135deg, #1f9e63, var(--green)); color: #04140a; margin-top: 12px; }
.dbt .dbt-dialog .dbt-btn { margin: 14px 14px 0; }

.dbt .dbt-rueck {
  display: none; margin: 0 18px 18px; padding: 12px 15px; border-radius: 11px;
  font-size: 13px; line-height: 1.6;
}
.dbt .dbt-rueck.show { display: block; }
.dbt .dbt-rueck.ok { background: rgba(61,220,132,.10); border: 1px solid var(--green); color: var(--green); }
.dbt .dbt-rueck.err { background: rgba(255,59,92,.09); border: 1px solid var(--red); color: #ff7d90; }

/* ---------- Bewertung ---------- */
.dbt .dbt-bewertung {
  margin-top: 16px; background: linear-gradient(135deg, rgba(61,220,132,.10), rgba(61,169,255,.05));
  border: 1px solid rgba(61,220,132,.35); border-radius: 16px; padding: 18px 20px;
}
.dbt .dbt-bew-gross {
  font-family: 'Press Start 2P', monospace; font-size: 22px; color: var(--green); margin-bottom: 14px;
}
.dbt .dbt-bew-liste { display: flex; flex-direction: column; gap: 7px; max-width: 420px; }
.dbt .dbt-bew-z {
  display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--dim);
  border-bottom: 1px solid var(--line-soft); padding-bottom: 7px;
}
.dbt .dbt-bew-z b { font-family: var(--mono); color: var(--txt); }

/* ---------- Mitfliegender Chip ---------- */
.dbt-geist {
  position: fixed; z-index: 400; pointer-events: none; opacity: .95;
  background: #1d1d2c; border: 1px solid #3da9ff; border-radius: 9px;
  padding: 8px 12px; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px; color: #eef0f6; box-shadow: 0 10px 26px rgba(0,0,0,.6);
}

/* ==========================================================================
   ER-MODELL: echte Chen-Formen (Rechteck, Ellipse, Raute)
   ========================================================================== */
.dbt .dbt-sz-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.dbt .dbt-sz-kopf .dbt-sz-t { margin-bottom: 0; flex: 1; min-width: 180px; }
.dbt .dbt-sz-zahl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; white-space: nowrap;
  color: var(--violet); border: 1px solid rgba(180,123,255,.35);
  padding: 4px 9px; border-radius: 8px;
}

/* Lerngrafik: ein skalierendes SVG, zwei Anordnungen */
.dbt .dbt-grafik {
  background: var(--karte-2); border: 1px solid var(--line-soft);
  border-radius: 12px; margin: 4px 0 14px; padding: 12px;
}
.dbt .dbt-grafik svg { width: 100%; height: auto; }
.dbt .dbt-grafik line.ln { stroke: #3a3a56; stroke-width: 2; }
/* Es ist immer genau eine der beiden Fassungen sichtbar.
   Die Selektoren muessen dieselbe Spezifitaet haben wie die Regel darueber,
   sonst gewinnt display: block und beide Diagramme erscheinen. */
.dbt .dbt-grafik svg.dbt-dia-weit { display: block; }
.dbt .dbt-grafik svg.dbt-dia-schmal { display: none; max-height: 24vh; }
/* Hochkant-Anordnung, sobald es fuer die breite Fassung zu eng wird */
@media (max-width: 700px) {
  .dbt .dbt-grafik svg.dbt-dia-weit { display: none; }
  .dbt .dbt-grafik svg.dbt-dia-schmal { display: block; }
}
.dbt .dbt-dia-schmal .figtxt { font-size: 15px; }

/* Gemeinsame Figurenoptik */
.dbt .fig { fill: rgba(20,20,31,.94); stroke: var(--fc, var(--blue)); stroke-width: 2.5; }
.dbt .figtxt {
  fill: #fff; font-family: 'Inter','Segoe UI',system-ui,sans-serif; font-size: 14px;
  font-weight: 700; text-anchor: middle; dominant-baseline: central;
}
.dbt .t-entitaet  { --fc: var(--blue); }
.dbt .t-attribut  { --fc: var(--green); }
.dbt .t-beziehung { --fc: var(--amber); }

/* Ablagezonen in Formgestalt */
.dbt .dbt-formzonen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 720px) { .dbt .dbt-formzonen { grid-template-columns: 1fr; } }
.dbt .dbt-formzone {
  background: var(--karte-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 12px 10px; text-align: center;
}
.dbt .dbt-formzone.t-entitaet  { border-color: rgba(61,169,255,.35); }
.dbt .dbt-formzone.t-attribut  { border-color: rgba(61,220,132,.35); }
.dbt .dbt-formzone.t-beziehung { border-color: rgba(255,179,71,.35); }
.dbt .dbt-fz-kopf svg { display: block; margin: 0 auto; max-width: 100%; }
.dbt .dbt-fz-sub {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin: 6px 0 10px;
}
.dbt .dbt-formzone.t-entitaet  .dbt-fz-sub { color: var(--blue); }
.dbt .dbt-formzone.t-attribut  .dbt-fz-sub { color: var(--green); }
.dbt .dbt-formzone.t-beziehung .dbt-fz-sub { color: var(--amber); }
.dbt .dbt-fz-body {
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; min-height: 66px;
  border: 1px dashed var(--line); border-radius: 10px; padding: 9px;
}

/* Begruendung zu den Ablenkerfeldern nach dem Loesen */
.dbt .dbt-zusatz {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(61,220,132,.3);
  font-size: 12.5px; line-height: 1.6;
}
.dbt .dbt-zusatz .kopf {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  opacity: .7; margin-bottom: 6px;
}
.dbt .dbt-zusatz .zeile { margin-bottom: 6px; }
.dbt .dbt-zusatz .zeile:last-child { margin-bottom: 0; }
.dbt .dbt-zusatz .zeile b { font-family: var(--mono); }