/* studium/marks.css — Recherche-/Markier-Tool: Selektions-Popup, Toast,
   und die marks.html-Sammelansicht. Eigenständige Datei statt Anhang an
   learn.css, da eigenständiges Feature (Konvention: Modul-CSS neben Modul-JS).

   Bewusst NICHT enthalten: dauerhafte Inline-Wiedereinfärbung gespeicherter
   Markierungen im Vers-/Panel-Text bei erneutem Rendern (siehe Plan) — der
   bestehende .ref-flash-Scroll-Puls (reader.css) liefert beim Ruecksprung
   bereits ausreichendes "gefunden"-Feedback. */

/* ─── Schwebendes Auswahl-Popup ─────────────────────────────────────────── */
.marks-popup{
  position:fixed; z-index:60; width:min(280px, calc(100vw - 16px));
  background:var(--card); border:1px solid var(--gold); border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,.18); padding:var(--sp-3);
  display:flex; flex-direction:column; gap:var(--sp-2);
}
.marks-popup[hidden]{display:none}
.marks-popup-quote{
  font-size:var(--fs-meta); color:var(--fg2); font-style:italic;
  max-height:4.2em; overflow:hidden; line-height:1.4;
}
.marks-popup-note{
  width:100%; resize:vertical; min-height:calc(var(--touch) - 4px);
  font:inherit; font-size:var(--fs-body); color:var(--fg);
  background:var(--bg2); border:1px solid var(--line); border-radius:6px;
  padding:6px 8px;
}
.marks-popup-actions{display:flex; gap:var(--sp-2); justify-content:flex-end}
.marks-popup-save{
  min-height:var(--touch); padding:0 var(--sp-3); border:none; border-radius:6px;
  background:var(--hlfull); color:#fff; font-weight:700; cursor:pointer;
}
.marks-popup-save:hover{filter:brightness(1.08)}
.marks-popup-cancel{
  min-height:var(--touch); min-width:var(--touch); border:1px solid var(--line);
  border-radius:6px; background:transparent; color:var(--fg2); cursor:pointer;
}

/* ─── Toast ──────────────────────────────────────────────────────────────── */
.marks-toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(12px);
  z-index:70; background:var(--hlfull); color:#fff; font-weight:700; font-size:var(--fs-meta);
  padding:10px 18px; border-radius:999px; box-shadow:0 4px 16px rgba(0,0,0,.2);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.marks-toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ─── marks.html Sammelansicht ──────────────────────────────────────────── */
.marks-toolbar{
  max-width:900px; margin:0 auto 18px; padding:12px 18px;
  display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center;
}
.marks-toolbar select{
  font:inherit; font-size:var(--fs-meta); padding:6px 8px; border-radius:6px;
  border:1px solid var(--line); background:var(--bg2); color:var(--fg);
}
.marks-toolbar .marks-export-btn{
  min-height:var(--touch); padding:0 var(--sp-3); border:1px solid var(--gold);
  border-radius:6px; background:var(--card); color:var(--fg); cursor:pointer; font-size:var(--fs-meta);
}
.marks-toolbar .marks-export-btn:hover{background:var(--hl2)}
.marks-stats{color:var(--fg2); font-size:var(--fs-meta); margin-left:auto}

.marks-group{max-width:900px; margin:0 auto 32px}
.marks-group-title{
  font-size:var(--fs-label); letter-spacing:.05em; text-transform:uppercase;
  color:var(--fg2); font-weight:700; margin:0 0 10px 2px;
}
.marks-list{display:flex; flex-direction:column; gap:10px}

.mark-card{
  position:relative; padding:12px 14px; background:var(--card);
  border:1px solid var(--line); border-radius:10px;
}
.mark-card-head{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.mark-type-icon{font-size:15px}
.mark-ref{font-weight:700; font-size:var(--fs-meta); color:var(--fg)}
.mark-lang-badge{
  font-size:var(--fs-label); color:var(--fg2); border:1px solid var(--line); border-radius:4px;
  padding:1px 5px; text-transform:uppercase;
}
.mark-date{margin-left:auto; font-size:var(--fs-label); color:var(--fg2)}
.mark-quote{
  font-size:var(--fs-body); color:var(--fg); line-height:1.5; margin-bottom:6px;
  padding-left:10px; border-left:3px solid var(--gold);
}
.mark-note{font-size:var(--fs-body); color:var(--fg2); margin-bottom:8px}
.mark-note-input{
  width:100%; resize:vertical; min-height:2.4em; font:inherit; font-size:var(--fs-body);
  color:var(--fg); background:var(--bg2); border:1px solid var(--line); border-radius:6px;
  padding:6px 8px; margin-bottom:8px;
}
.mark-card-actions{display:flex; gap:var(--sp-2); align-items:center}
.mark-jump{color:var(--red); text-decoration:none; font-weight:700; font-size:var(--fs-meta)}
.mark-jump-disabled{color:var(--fg2); font-size:var(--fs-meta); font-style:italic}
.mark-edit-note,.mark-delete{
  margin-left:auto; border:none; background:transparent; color:var(--fg2);
  cursor:pointer; font-size:16px; min-width:var(--touch); min-height:var(--touch);
}
.mark-edit-note:hover,.mark-delete:hover{color:var(--fg)}

.marks-empty{
  max-width:600px; margin:60px auto; text-align:center; color:var(--fg2);
  padding:0 18px; line-height:1.6;
}
.marks-empty a{color:var(--red); font-weight:700}
.marks-empty-filtered{
  max-width:600px; margin:40px auto; text-align:center; color:var(--fg2); padding:0 18px;
}
.marks-empty-filtered button{
  margin-top:10px; min-height:var(--touch); padding:0 var(--sp-3); border:1px solid var(--gold);
  border-radius:6px; background:var(--card); color:var(--fg); cursor:pointer;
}

/* ─── Eingebettetes Recherche-Panel im #detail-Aside (Seitenleiste) ───────
   Kompakte Variante derselben .mark-card-Bausteine oben — dieselbe Logik wie
   die Bibelkarte, die ebenfalls zusaetzlich zur eigenen Seite direkt im
   Aside eingebettet ist, statt eines Sonderwegs auf einer eigenen Seite. */
#marksView{padding:var(--sp-3)}
.marks-panel-header{
  display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-3);
  padding-bottom:var(--sp-2); border-bottom:1px solid var(--line);
}
.marks-panel-title{font-weight:800; font-size:var(--fs-body); color:var(--fg)}
.marks-panel-count{color:var(--fg2); font-weight:400}
.marks-panel-fullpage{
  margin-left:auto; color:var(--red); text-decoration:none; font-weight:700; font-size:var(--fs-meta);
}
.marks-panel-empty{color:var(--fg2); font-size:var(--fs-meta); line-height:1.6; padding:var(--sp-2) 0}
.marks-panel-list{display:flex; flex-direction:column; gap:10px}
.marks-panel-list .mark-card{padding:10px 12px}