/* ==========================================================================
   MDInform – zentrales Stylesheet fuer Referenzen + geteilte Ansicht
   Gehoert zu static/js/mdref.js. Farben kommen aus den Design-Variablen
   in base.html (--pri, --soft, --bd ...), damit alles im Marken-Look bleibt.
   ========================================================================== */

/* ---------------------------------------------------------- Geteilte Ansicht */
.mdsplit { display: flex; align-items: stretch; gap: 0; width: 100%; }
.mdsplit-links  { flex: 0 0 58%; min-width: 0; padding-right: 14px; }
.mdsplit-rechts { flex: 1 1 auto; min-width: 0; padding-left: 14px; }

.mdsplit-griff {
  flex: 0 0 10px; cursor: col-resize; position: relative;
  background: transparent; align-self: stretch;
}
.mdsplit-griff::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; margin-left: -1px; background: var(--bd); border-radius: 2px;
  transition: background .15s;
}
.mdsplit-griff:hover::before { background: var(--pri); }
.mdsplit-griff::after {                       /* Anfasser-Punkte in der Mitte */
  content: "⋮"; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); color: var(--tx2); font-size: 1rem;
  background: var(--bg); padding: 4px 0; line-height: 1;
}
/* Waehrend des Ziehens: iframes/Textauswahl duerfen die Maus nicht schlucken */
.mdsplit.zieht .mdsplit-links,
.mdsplit.zieht .mdsplit-rechts { pointer-events: none; user-select: none; }

.mdsplit-titel {
  font-family: var(--serif), serif; font-size: 1rem; font-weight: 700;
  color: var(--tx); margin: 0 0 10px; padding-bottom: 7px;
  border-bottom: 2px solid var(--pri);
}

@media (max-width: 900px) {                   /* Handy: untereinander statt nebeneinander */
  .mdsplit { flex-direction: column; }
  .mdsplit-links, .mdsplit-rechts { flex: 1 1 auto !important; padding: 0; }
  .mdsplit-griff { display: none; }
  .mdsplit-rechts { margin-top: 18px; }
}

/* ---------------------------------------------------------- Zitat-Nummern [1] */
.mdref-num {
  color: var(--pri); font-weight: 700; text-decoration: none;
  cursor: pointer; padding: 0 1px; border-radius: 3px;
}
.mdref-num:hover { background: var(--soft); text-decoration: underline; }

/* ---------------------------------------------------------- Referenz-Karten */
.mdref-liste { display: flex; flex-direction: column; gap: 8px; }

.mdref {
  border: 1px solid var(--bd); border-radius: 10px; padding: 9px 11px;
  background: var(--bg); font-size: .87rem;
}
.mdref-kopf { display: flex; align-items: flex-start; gap: 8px; }
.mdref-kopf > input[type=checkbox] { margin-top: 3px; flex-shrink: 0; }
.mdref-inhalt { flex: 1; min-width: 0; }

.mdref-nr { color: var(--pri); }
.mdref-tt a { color: var(--tx); text-decoration: none; font-weight: 600; }
.mdref-tt a:hover { color: var(--pri); }
.mdref-meta { color: var(--tx2); font-size: .78rem; margin-top: 2px; }
/* R5-14: Belegstelle - hinter einem Knopf, mit Umgebung */
.mdref-belegknopf {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 7px;
  font-size: .76rem; font-weight: 600; padding: 3px 10px; border-radius: 7px;
  border: 1px solid var(--bd); background: var(--card); color: var(--tx2); cursor: pointer;
}
.mdref-belegknopf:hover { border-color: var(--pri); color: var(--pri); background: var(--soft); }
.mdref-belegknopf.offen { border-color: var(--pri); color: var(--pri); background: var(--soft); }
.mdref-beleg-um { color: var(--tx2); opacity: .82; }
.mdref-beleg-kern {
  background: color-mix(in srgb, var(--pri) 16%, transparent);
  color: var(--tx); padding: 1px 3px; border-radius: 3px; font-weight: 600;
}
.mdref-beleg {
  margin-top: 5px; padding: 6px 8px; border-radius: 6px; color: var(--tx);
  background: color-mix(in srgb, var(--pri) 8%, var(--card));
  border-left: 3px solid var(--pri);
}
.mdref-zf {
  margin-top: 6px; padding: 8px 10px; background: var(--soft);
  border-radius: 8px; font-size: .86rem; line-height: 1.5;
}
.mdref-metriken { font-size: .82rem; color: var(--tx2); align-self: center; }

@keyframes mdrefBlink {
  0%   { background: color-mix(in srgb, var(--pri) 22%, var(--card)); border-color: var(--pri); }
  100% { background: var(--bg); border-color: var(--bd); }
}
.mdref.mdref-blink { animation: mdrefBlink 1.6s ease-out; }

/* ---------------------------------------------------------- Knoepfe je Karte */
.mdref-aktionen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.mdref-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px;
  border: 1px solid var(--bd); border-radius: 8px; background: var(--card);
  color: var(--tx); font-size: .8rem; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: background .12s, border-color .12s;
}
.mdref-btn:hover { background: var(--soft); border-color: var(--pri); color: var(--pri); }
.mdref-btn:disabled { opacity: .6; cursor: default; }

/* ---------------------------------------------------------- Sammelaktionen */
.mdref-leiste {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  background: var(--soft); border: 1px solid var(--bd);
  border-radius: 11px; padding: 9px 12px;
  /* R5-13: Die Leiste steht jetzt OBEN - Abstand nach unten statt nach oben.
     Und sie bleibt beim Scrollen stehen, damit man die Funktionen auch bei
     zwanzig Treffern immer erreicht. */
  margin: 0 0 12px;
  position: sticky; top: 0; z-index: 5;
  backdrop-filter: blur(6px);
}
.mdref-alle { display: flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; cursor: pointer; }
.mdref-zaehler-txt { color: var(--tx2); font-size: .79rem; }
.mdref-zahl { color: var(--pri); }

.mdref-akt {
  border-radius: 8px; font-weight: 600; font-size: .79rem; padding: 4px 10px;
  cursor: pointer; background: var(--card); border: 1px solid var(--bd); color: var(--tx);
}
.mdref-akt:hover { filter: brightness(.97); }
/* Gesperrt, solange nichts ausgewaehlt ist */
.mdref-akt.gesperrt { opacity: .42; cursor: not-allowed; pointer-events: none; filter: grayscale(.6); }
.mdref-akt.akt-lib  { background: #B91C1C; border-color: #B91C1C; color: #fff; }
.mdref-akt.akt-cmp  { background: #7F1D1D; border-color: #7F1D1D; color: #fff; }
.mdref-akt.akt-pdf  { border-color: #DC2626; color: #DC2626; }
.mdref-akt.akt-xls  { border-color: #15803D; color: #15803D; }
.mdref-akt.akt-mail { border-color: #2563EB; color: #2563EB; }
.mdref-akt.akt-bib  { border-color: #7C3AED; color: #7C3AED; }
.mdref-akt.akt-ris  { border-color: #C2410C; color: #C2410C; }

.mdref-pdfbox {
  display: inline-flex; align-items: center; gap: 7px; background: var(--card);
  border: 1px solid var(--bd); border-radius: 9px; padding: 3px 8px 3px 3px;
}
.mdref-pdfbox label {
  font-size: .75rem; color: var(--tx); display: inline-flex;
  align-items: center; gap: 4px; cursor: pointer;
}
.mdref-hinweis { display: none; color: var(--pri); font-size: .79rem; font-weight: 600; }