/* Unterlagen an Lerninhalten (Word/PDF) – Kachel-Zeile, Fenster, Bearbeiten.
   Eigenes Präfix ul-, damit das vorkompilierte Tailwind unberührt bleibt.
   Markenfarben: #006C84 / #004e60 / #6EB0BC. font-weight nie über 700. */

/* ── Kachel ─────────────────────────────────────────────────────────────── */
.ul-kachelzeile {
  display: inline-flex; align-items: center; gap: .35rem;
  margin: -.25rem 0 .75rem; padding: .2rem .5rem .2rem .35rem;
  font-size: .75rem; font-weight: 600; color: #006C84;
  background: rgba(110, 176, 188, .12); border: 1px solid rgba(110, 176, 188, .3);
  border-radius: 999px; cursor: pointer; align-self: flex-start;
  transition: background .15s;
}
.ul-kachelzeile:hover { background: rgba(110, 176, 188, .24); }
.ul-kachelzeile:focus-visible { outline: 2px solid #006C84; outline-offset: 2px; }
.ul-kachelzeile.ist-beispiel { margin: 0; cursor: default; vertical-align: middle; }
.ul-kachelzeile.ist-beispiel:hover { background: rgba(110, 176, 188, .12); }

/* ── Datei-Symbol ───────────────────────────────────────────────────────── */
.ul-symbol {
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: .45rem;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
}
.ul-symbol.ist-docx { background: #e8f0fb; color: #2b5797; }
.ul-symbol.ist-pdf  { background: #fdecea; color: #c0392b; }

/* ── Fenster für Besucher ──────────────────────────────────────────────── */
.ul-fenster {
  position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(15, 23, 42, .6); backdrop-filter: blur(4px);
}
.ul-fenster[hidden] { display: none; }
.ul-fenster-box {
  background: #fff; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
  width: 100%; max-width: 34rem; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
}
.ul-fenster-kopf { padding: 1.25rem 1.5rem .75rem; border-bottom: 1px solid #f1f5f9; }
.ul-fenster-art { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6EB0BC; }
.ul-fenster-titel { margin-top: .15rem; font-size: 1.15rem; font-weight: 700; color: #1e293b; line-height: 1.3; }
.ul-fenster-inhalt { padding: .5rem 1.5rem 1rem; overflow-y: auto; }
.ul-fenster-fuss {
  padding: .9rem 1.5rem; border-top: 1px solid #f1f5f9; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: .75rem; font-size: .8rem; color: #64748b;
}
.ul-fenster-fuss a { color: #006C84; font-weight: 600; }
.ul-fenster-fuss a:hover { text-decoration: underline; }
.ul-knopf-zu {
  margin-left: auto; padding: .5rem 1rem; border-radius: .6rem; background: #f1f5f9;
  color: #475569; font-weight: 700; font-size: .85rem;
}
.ul-knopf-zu:hover { background: #e2e8f0; }

.ul-gruppe-v { margin-top: 1rem; }
.ul-gruppe-v-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.ul-gruppe-v-name { font-size: .78rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .04em; }
.ul-alle {
  font-size: .75rem; font-weight: 600; color: #006C84; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .3rem;
}
.ul-alle:hover { text-decoration: underline; }
.ul-eintrag {
  display: flex; align-items: center; gap: .65rem; padding: .5rem .55rem; border-radius: .6rem;
  color: #1e293b; text-decoration: none;
}
a.ul-eintrag:hover { background: #f1f5f9; }
.ul-eintrag-text { flex: 1; min-width: 0; }
.ul-eintrag-titel { display: block; font-size: .875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ul-eintrag-info { display: block; font-size: .72rem; color: #94a3b8; }
.ul-eintrag-aktion { flex: none; font-size: 1.05rem; color: #006C84; }
.ul-eintrag.ist-gesperrt .ul-eintrag-titel { color: #64748b; }
.ul-eintrag.ist-gesperrt .ul-symbol { filter: grayscale(1); opacity: .6; }
.ul-schloss {
  flex: none; display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600;
  color: #92400e; background: #fef3c7; border: 1px solid #fde68a; border-radius: 999px; padding: .15rem .55rem;
}
.ul-leer { padding: 1.5rem 0; text-align: center; color: #94a3b8; font-size: .875rem; }

/* ── Bearbeiten ─────────────────────────────────────────────────────────── */
.ul-hinweis { font-size: .75rem; color: #64748b; line-height: 1.5; margin-bottom: .75rem; }
.ul-drop {
  border: 2px dashed #cbd5e1; border-radius: .9rem; padding: 1.1rem 1rem; text-align: center;
  color: #64748b; font-size: .85rem; cursor: pointer; transition: border-color .15s, background .15s;
}
.ul-drop:hover, .ul-drop.ist-drueber { border-color: #6EB0BC; background: rgba(110, 176, 188, .08); color: #004e60; }
.ul-drop i { display: block; font-size: 1.5rem; color: #6EB0BC; margin-bottom: .2rem; }
.ul-drop small { display: block; margin-top: .15rem; font-size: .72rem; color: #94a3b8; }
.ul-rechte { display: flex; gap: .5rem; align-items: flex-start; margin-top: .75rem; font-size: .75rem; color: #475569; line-height: 1.45; }
.ul-rechte input { margin-top: .15rem; flex: none; accent-color: #006C84; }
.ul-rechte.ist-fehlt { color: #b45309; }
.ul-meldung { margin-top: .6rem; font-size: .78rem; border-radius: .5rem; padding: .45rem .65rem; white-space: pre-line; }
.ul-meldung.ist-fehler { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.ul-meldung[hidden] { display: none; }

.ul-laden { margin-top: .6rem; display: flex; flex-direction: column; gap: .35rem; }
.ul-laden-zeile { font-size: .75rem; color: #475569; }
.ul-laden-balken { height: 4px; background: #e2e8f0; border-radius: 999px; overflow: hidden; margin-top: .2rem; }
.ul-laden-balken > span { display: block; height: 100%; width: 0; background: #006C84; transition: width .15s; }

.ul-gruppen { margin-top: 1rem; display: flex; flex-direction: column; gap: .9rem; }
.ul-gruppe { border: 1px solid #e2e8f0; border-radius: .9rem; background: #f8fafc; padding: .55rem .55rem .45rem; }
.ul-gruppe.ist-drueber { border-color: #6EB0BC; background: rgba(110, 176, 188, .08); }
.ul-gruppe-kopf { display: flex; align-items: center; gap: .25rem; margin-bottom: .35rem; }
.ul-gruppe-name {
  flex: 1; min-width: 0; font-size: .82rem; font-weight: 700; color: #334155; background: transparent;
  border: 1px solid transparent; border-radius: .4rem; padding: .25rem .4rem;
}
.ul-gruppe-name:hover { border-color: #e2e8f0; background: #fff; }
.ul-gruppe-name:focus { outline: none; border-color: #006C84; background: #fff; }
.ul-mini {
  flex: none; width: 1.7rem; height: 1.7rem; border-radius: .4rem; color: #94a3b8;
  display: inline-flex; align-items: center; justify-content: center; font-size: .85rem;
}
.ul-mini:hover { background: #e2e8f0; color: #334155; }
.ul-mini:disabled { opacity: .3; pointer-events: none; }
.ul-liste { min-height: 2.4rem; display: flex; flex-direction: column; gap: .3rem; }
.ul-liste-leer { font-size: .75rem; color: #94a3b8; padding: .6rem .4rem; text-align: center; border: 1px dashed #cbd5e1; border-radius: .6rem; }

.ul-zeile {
  display: flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid #e2e8f0;
  border-radius: .6rem; padding: .3rem .35rem;
}
.ul-zeile.ist-gezogen { opacity: .4; }
.ul-griff { flex: none; cursor: grab; color: #cbd5e1; padding: 0 .1rem; font-size: 1rem; }
.ul-griff:hover { color: #64748b; }
.ul-zeile .ul-symbol { width: 1.6rem; height: 1.6rem; font-size: .85rem; }
.ul-titel {
  flex: 1; min-width: 0; font-size: .8rem; color: #1e293b; border: 1px solid transparent;
  border-radius: .35rem; padding: .2rem .3rem; background: transparent;
}
.ul-titel:hover { border-color: #e2e8f0; }
.ul-titel:focus { outline: none; border-color: #006C84; }
.ul-stufe {
  flex: none; font-size: .72rem; font-weight: 600; border: 1px solid #cbd5e1; border-radius: .4rem;
  padding: .2rem .3rem; background: #fff; color: #334155; max-width: 9rem;
}
/* Handy: Titel bekommt die erste Zeile, Stufe + Knöpfe rutschen darunter */
@media (max-width: 520px) {
  .ul-zeile { flex-wrap: wrap; row-gap: .15rem; }
  .ul-titel { flex: 1 1 calc(100% - 4.5rem); }
  .ul-stufe { margin-left: auto; }
}
.ul-stufe.ist-alle { border-color: #6ee7b7; background: #ecfdf5; color: #047857; }
.ul-stufe.ist-premium { border-color: #fcd34d; background: #fffbeb; color: #92400e; }

.ul-werkzeuge { margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ul-knopf {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600;
  color: #006C84; border: 1px solid rgba(0, 108, 132, .3); border-radius: .55rem; padding: .35rem .65rem; background: #fff;
}
.ul-knopf:hover { border-color: #006C84; background: rgba(0, 108, 132, .05); }
.ul-status { margin-left: auto; font-size: .72rem; color: #94a3b8; }
.ul-status.ist-ok { color: #059669; }
.ul-status.ist-fehler { color: #b91c1c; }

.ul-auswahl { margin-top: .6rem; border: 1px solid #e2e8f0; border-radius: .7rem; background: #fff; max-height: 15rem; overflow-y: auto; }
.ul-auswahl[hidden] { display: none; }
.ul-auswahl-zeile { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; font-size: .8rem; border-bottom: 1px solid #f1f5f9; }
.ul-auswahl-zeile:last-child { border-bottom: 0; }
.ul-auswahl-zeile span.ul-eintrag-text { color: #334155; }
.ul-auswahl-zeile button { font-size: .75rem; font-weight: 600; color: #006C84; }
.ul-auswahl-zeile button:hover { text-decoration: underline; }
.ul-legende { margin-top: .7rem; font-size: .72rem; color: #94a3b8; line-height: 1.5; }
.ul-legende b { color: #64748b; font-weight: 600; }