/* Skelett-Ladezustaende – die Form des Inhalts, bevor der Inhalt da ist.

   Warum es diese Datei gibt: Wenn Daten geladen werden, hat ein Bereich drei
   schlechte Moeglichkeiten und eine gute. Schlecht ist die leere Flaeche (der
   Nutzer denkt, es sei fertig und leer), schlecht ist ein Dreh-Rad in der Mitte
   (es sagt nur "warte", nicht "was kommt"), schlecht ist das Ruckeln, wenn die
   echten Inhalte einspringen und das Layout verschieben. Gut ist der Platz-
   halter, der schon die Form der kommenden Inhalte hat: eine Liste sieht nach
   Zeilen aus, ein Kartenraster nach Karten. Der Sprung von Platzhalter zu Inhalt
   ist dann klein, weil die Umrisse bereits stimmen – so machen es Linear und
   Notion, und darum wirkt dort das Laden ruhig statt hektisch.

   Deshalb DEUTET DAS SKELETT DIE ECHTE FORM AN und nicht generische Balken:
   Zeilen mit unterschiedlich langen Textstellen, Karten mit Kopf und Fuss,
   Kacheln mit Symbol und Beschriftung. Ein Feld gleich langer grauer Balken
   waere schneller gebaut, wuerde aber beim Umschalten trotzdem springen.

   Farben und Radien kommen aus den Tokens (styles.css), eigene Werte bringt die
   Datei nicht mit. Der Schimmer ist bewusst LEISE: warmes Grau bei rund acht bis
   dreizehn Prozent Deckung, abgeleitet aus --text-primary. Das traegt in beiden
   Themes – im Hellmodus wird die dunkle Tinte zu hellem Grau, im Dunkelmodus die
   helle Tinte zu dunklem Grau, jeweils auf der Flaeche darunter. */

/* Der Grundbaustein. Jeder Platzhalter ist im Kern dieselbe Flaeche mit einem
   wandernden Lichtband. Das Band ist ein Verlauf, der doppelt so breit ist wie
   der Baustein und dessen Position animiert wird – so laeuft ein Glanz von links
   nach rechts, ohne dass ein zweites Element noetig waere. */
.skelett {
  --skelett-grund: color-mix(in srgb, var(--text-primary) 8%, transparent);
  --skelett-glanz: color-mix(in srgb, var(--text-primary) 13%, transparent);
  background-color: var(--skelett-grund);
  background-image: linear-gradient(
    100deg,
    transparent 30%,
    var(--skelett-glanz) 50%,
    transparent 70%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  /* Startet rechts ausserhalb, wandert nach links hinaus. Die Dauer ist laenger
     als die Token-Zeiten (--dur-*): jene sind fuer einzelne Uebergaenge gedacht,
     ein Ladeschimmer soll ruhig atmen, nicht flackern. */
  animation: skelett-schimmer 1400ms linear infinite;
  border-radius: 6px;
}

@keyframes skelett-schimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

/* Wer Bewegung abbestellt hat, bekommt die ruhende Flaeche ohne Wanderlicht.
   Sichtbar bleibt der Platzhalter in beiden Faellen – er traegt seine Aufgabe
   ueber die Form, nicht ueber die Animation. */
@media (prefers-reduced-motion: reduce) {
  .skelett {
    animation: none;
    /* Ohne Band braucht die Flaeche selbst etwas mehr Zeichnung, sonst wirkt sie
       wie ein Fehler statt wie ein Platzhalter. */
    background-image: none;
    background-color: color-mix(in srgb, var(--text-primary) 10%, transparent);
  }
}

/* --- Textstellen -------------------------------------------------------------
   Eine Zeile Text. Die Hoehe entspricht einer Textzeile, der Radius ist klein.
   Ueber Modifikatoren wird die Breite gesetzt, damit ein Absatz aus mehreren
   Zeilen nicht wie ein Block gleich langer Balken aussieht. */
.skelett-text {
  height: .72em;
  width: 100%;
}
.skelett-text.kurz { width: 45%; }
.skelett-text.mittel { width: 70%; }
.skelett-text.lang { width: 90%; }
/* Ein Titel ist hoeher und dunkler als Fliesstext – er soll auch im Skelett das
   schwerere Element sein. */
.skelett-text.titel {
  height: 1em;
  width: 60%;
  --skelett-grund: color-mix(in srgb, var(--text-primary) 11%, transparent);
  --skelett-glanz: color-mix(in srgb, var(--text-primary) 16%, transparent);
}

/* Ein runder Platzhalter: Avatar, Symbolkreis, Statuspunkt. */
.skelett-kreis {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* --- Zeile (Liste) -----------------------------------------------------------
   Eine Listenzeile: links ein Kreis, rechts zwei Textstellen. Das ist die Form,
   die eine Rapport- oder Dienstliste im Ist hat, darum deutet der Platzhalter
   genau sie an. */
.skelett-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.skelett-zeile:last-child { border-bottom: 0; }
.skelett-zeile > .skelett-spalte {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
}

/* --- Karte -------------------------------------------------------------------
   Eine Inhaltskarte mit Kopf, ein paar Textzeilen und einem Fusszeichen. Die
   Umrisse (Rand, Radius 8, Fuellung der Flaeche) kommen aus denselben Tokens wie
   die echten Karten, damit der Wechsel nicht springt. */
.skelett-karte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.skelett-karte .skelett-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Der Fuss traegt ein kurzes Zeichen (Datum, Status) und schiebt sich an den
   unteren Rand, wie in den echten Karten. */
.skelett-karte .skelett-fuss {
  margin-top: 4px;
  width: 35%;
  height: .72em;
}

/* Ein Kartenraster fuer skelett('karten', n). Dieselbe Rasterlogik wie bei den
   echten Karten: mitwachsende Spalten, die nie schmaler als lesbar werden. */
.skelett-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

/* --- Explorer (Ordner/Datei) -------------------------------------------------
   Ein Raster aus Kacheln fuer eine Ordner- oder Dateiansicht. Jede Kachel hat
   ein quadratisches Symbolfeld und darunter eine Beschriftung – die Form eines
   Ordner- oder Dateieintrags. Ordnerkacheln bekommen das Symbol mit Radius 6,
   Dateikacheln bleiben rechtwinkliger; der kleine Unterschied deutet an, dass
   hier zweierlei Dinge liegen. */
.skelett-explorer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 14px;
}
.skelett-kachel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding: 12px 8px;
}
.skelett-kachel .skelett-symbol {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
}
.skelett-kachel.ordner .skelett-symbol { border-radius: 6px; }
.skelett-kachel .skelett-text { height: .72em; }

/* --- Der duenne Balken beim Nachladen ----------------------------------------
   Gehoert zu warten() in skelett.js: Steht in der Box schon Inhalt, kommt KEIN
   Skelett - der Inhalt bleibt lesbar stehen und oben laeuft dieser Streifen.

   Er liegt IN der Box als erstes Kind und darf ihren Inhalt nicht verschieben:
   sticky haelt ihn beim Scrollen oben, der negative Unterrand nimmt seine eigene
   Hoehe wieder aus dem Fluss. Ein Balken, der den Inhalt um drei Pixel schiebt,
   erzeugt genau das Ruckeln, das er verhindern soll. */
.warten-balken {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 3px;
  margin-bottom: -3px;
  border-radius: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.warten-balken::after {
  content: "";
  display: block;
  height: 100%;
  width: 35%;
  border-radius: 3px;
  /* --accent ist der Token dieses Hauses (styles.css:62 hell, 172 dunkel).
     Der Rueckfall auf currentColor greift, falls der Balken einmal ausserhalb
     des Wurzelbereichs landet, in dem die Tokens gesetzt sind. */
  background: var(--accent, currentColor);
  animation: warten-lauf 1100ms cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes warten-lauf {
  from { transform: translateX(-100%); }
  to { transform: translateX(320%); }
}

/* Wer Bewegung abbestellt hat, bekommt einen ruhenden Streifen. Sichtbar bleibt
   er in beiden Faellen - die Aussage haengt nicht an der Animation. */
@media (prefers-reduced-motion: reduce) {
  .warten-balken::after { animation: none; width: 100%; opacity: .45; }
}