/* Ablage — Handy zuerst. Eine Ebene pro Bildschirm, Breadcrumb oben. */

/* Site-Filter und Listenkopf ------------------------------------------ */
.abl-titel-klein { font-size: 12px; color: var(--fa-muted); margin: 0 0 8px; }
.abl-label { display: block; margin-bottom: 12px; }
.abl-label input {
  display: block; width: 100%; box-sizing: border-box;
  padding: 14px 16px; font: inherit; font-size: 16px;   /* 16px: iOS zoomt sonst beim Fokus */
  border: 1px solid var(--fa-border); border-radius: 12px;
  background: #fff; color: var(--fa-text);
}
.abl-label input::placeholder { color: var(--fa-muted); opacity: .75; }
.abl-label input:focus { outline: 2px solid var(--fa-cyan); outline-offset: -1px; }

.abl-zeilenkopf {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--fa-muted); margin-bottom: 10px;
}
.abl-zeilenkopf span { flex: 1; }
.abl-zeilenkopf button {
  background: none; border: 1px solid var(--fa-border); border-radius: 999px;
  padding: 5px 12px; font: inherit; font-size: 12px; color: var(--fa-cyan-dark);
  cursor: pointer; white-space: nowrap;
}

/* Kopf: Objekt + Breadcrumb ------------------------------------------- */
.abl-objekt { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.abl-zurueck {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  background: #fff; border: 1px solid var(--fa-border); font-size: 17px;
  color: var(--fa-muted); cursor: pointer; line-height: 1;
}
.abl-objekt-text { min-width: 0; }
.abl-objekt-nr { font-weight: 700; font-size: 15px; line-height: 1.2; }
.abl-objekt-bez { font-size: 12px; color: var(--fa-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.abl-krumen {
  display: flex; align-items: center; gap: 4px; flex-wrap: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 8px; margin-bottom: 4px;
}
.abl-krumen::-webkit-scrollbar { display: none; }
.abl-krume {
  flex: 0 0 auto; background: none; border: 0; padding: 3px 2px;
  font: inherit; font-size: 12px; color: var(--fa-cyan-dark); cursor: pointer;
  white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis;
}
.abl-krume.jetzt { color: var(--fa-muted); font-weight: 600; cursor: default; }
.abl-sep { flex: 0 0 auto; color: var(--fa-border); font-size: 12px; }

/* Liste --------------------------------------------------------------- */
.abl-liste { display: grid; gap: 8px; }
.abl-zeile {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--fa-border); border-radius: 11px;
  padding: 11px 13px; font: inherit; color: inherit; cursor: pointer;
  text-decoration: none; box-sizing: border-box;
}
.abl-zeile:active { background: #f0f6fa; }
.abl-ico { flex: 0 0 auto; font-size: 19px; line-height: 1; }
.abl-text { flex: 1; min-width: 0; }
.abl-name { display: block; font-size: 14px; font-weight: 500; line-height: 1.35;
  overflow-wrap: anywhere; }
.abl-meta { display: block; font-size: 11px; color: var(--fa-muted); margin-top: 2px; }
.abl-pfeil { flex: 0 0 auto; color: var(--fa-muted); font-size: 15px; }
.abl-ordner .abl-name { font-weight: 600; }

/* Status, Fehler, Anmeldung ------------------------------------------- */
.abl-status { font-size: 13px; color: var(--fa-muted); margin-bottom: 12px; line-height: 1.55; }
.abl-spinner {
  display: inline-block; width: 13px; height: 13px; vertical-align: -2px;
  border: 2px solid var(--fa-border); border-top-color: var(--fa-cyan);
  border-radius: 50%; animation: abl-dreh .8s linear infinite;
}
@keyframes abl-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .abl-spinner { animation-duration: 2.4s; } }

.abl-status.abl-fehler {
  background: #fdecea; border: 1px solid #f5c6c2; border-radius: 10px;
  padding: 12px 14px; color: var(--fa-error);
}
.abl-status.abl-fehler p { margin: 0 0 10px; }
.abl-status.abl-fehler button {
  background: var(--fa-error); color: #fff; border: 0; border-radius: 8px;
  padding: 8px 14px; font: inherit; font-size: 13px; cursor: pointer;
  /* Zwei Knoepfe (zuruecksetzen / nochmal) muessen auf 375px umbrechen duerfen,
     statt aus dem Kasten zu laufen — darum Abstand rechts UND unten. */
  margin: 0 8px 6px 0;
}
.abl-status.abl-fehler button:last-child { margin-right: 0; }

.abl-status.abl-anmeldung {
  background: #fff; border: 1px solid var(--fa-border); border-radius: 11px;
  padding: 14px 16px; color: var(--fa-text);
}
.abl-status.abl-anmeldung p { margin: 0 0 12px; font-size: 13px; color: var(--fa-muted); }
.abl-status.abl-anmeldung b { color: var(--fa-text); }
.abl-status.abl-anmeldung button {
  background: #2f2f2f; color: #fff; border: 0; border-radius: 8px;
  padding: 11px 16px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.abl-status.abl-anmeldung button:disabled { opacity: .5; cursor: default; }

/* Auf der Wurzelebene gibt es nur eine Krume — die darf die ganze Breite
   nutzen, statt bei 46vw abgeschnitten zu werden. */
.abl-krume:only-child { max-width: 100%; }

/* Fehlercode aus einem abgelehnten Microsoft-Login ---------------------- */
.abl-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 700; margin: 0 0 6px;
  overflow-wrap: anywhere;
}
.abl-code-text {
  font-size: 12px; line-height: 1.5; margin: 0 0 10px;
  overflow-wrap: anywhere; opacity: .9;
}