/*
 * Skelett: dünne dunkelblaue Linie um jeden Bereich, damit die Struktur
 * erkennbar ist. Eigene Ebene unter Basis, Layout und Komponenten (siehe
 * tokens.css); sie setzt ausschließlich `outline`, nie Größe, Farbe oder
 * Abstand. Der Strich liegt innen und verschiebt deshalb nichts.
 *
 * Das Logo im Kopf der Startseite steht bewusst nicht in der Liste: es liegt
 * frei auf der Farbfläche, nie in einem Kasten. Ebenso wenig der Signetkreis
 * und die Einträge und der Menüknopf in der Navbar.
 *
 * Abschalten, ohne das Design anzufassen: das Attribut `data-skeleton` am
 * <html> entfernen (Block `html_attributes` in cast/ggs/base.html) oder diese
 * Datei nicht mehr laden. Das Design baut auf den anderen Dateien auf.
 */
@layer skeleton {
  html[data-skeleton] :is(
    .site-header,
    .menu-chapter__panel,
    .breadcrumbs,
    .site-main,
    .news,
    .gallery,
    .reel,
    .next-steps,
    .next-steps__item,
    .site-footer,
    .footer-chapter,
    .footer-meta,
    .service,
    .service-list li,
    .placeholder,
    .tile,
    .page-intro,
    .article-section,
    .box,
    .post,
    .gallery-figure,
    .gallery-modal-content,
    .block-table,
    .section-head,
    .news-item,
    .pill,
    .card,
    .card__body,
    .empty,
    .bento,
    .search-form,
    .pagination-link
  ) {
    outline: var(--skeleton-line);
    outline-offset: calc(var(--skeleton-line-width) * -1);
  }
}