/*
 * Lumen Layout - Utilities
 * Kleine, wiederverwendbare Hilfsklassen.
 */

/* Textausrichtung (Bootstrap-Namen, von Bestands-Templates verwendet) */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* Zusammengehoerige Angaben nicht auseinanderreissen, z. B. "(Stand 01.01.2027)"
   hinter einem Dokumentnamen. Die Klasse kommt aus layoutunabhaengigem PHP
   (WssFieldDokumenteWebDarstellung.php) und aus geteilten Vorlagen
   (teilnehmer/punkte/beantrage_zertifikat_dialog.sgt); im klassischen Layout steht
   sie in style.css, im Lumen fehlte sie bisher ersatzlos.

   Sie ist zugleich der Notausgang fuer die Umbruchvorgabe in base.css: Wo nicht
   umbrochen wird, gibt es keine Umbruchgelegenheit - und damit haben overflow-wrap
   und hyphens dort keine Wirkung mehr.

   Bootstraps .text-nowrap wird bewusst NICHT nachgezogen: Sie wird in KuferTools
   nirgends ausgegeben. */
.nowrap {
  white-space: nowrap;
}

/* Bootstrap-Responsive-Helfer aus Bestands-Templates (z. B. download.sgt):
   visible-* ist nur auf schmalen Viewports sichtbar. Bootstraps hidden-xs wird
   bewusst NICHT definiert: Im klassischen Layout versteckt es Buttons hinter dem
   "Funktionen"-Umschalter (Bootstrap-Collapse), den es im Lumen-Layout nicht
   gibt - die Buttons sollen dort auf allen Breiten sichtbar bleiben.

   .hide-xs ist hingegen eine eigene Template-Klasse (nicht Bootstrap, siehe
   klassisches style.css) und das Gegenstueck zu .visible-xs: ein Element traegt
   die Desktop-Variante .hide-xs, eine Kopie davon .visible-xs (z. B. die
   Speichern/Abbrechen-Leiste in anwesenheitseingabe.sgt). Ohne die hier
   nachgezogene Regel zeigte das Lumen-Layout auf dem Smartphone BEIDE Kopien
   (doppelte Buttons). */
.visible-xs,
.visible-xs-inline {
  display: none !important;
}

@media (max-width: 47.9375em) {
  .visible-xs {
    display: block !important;
  }

  .visible-xs-inline {
    display: inline !important;
  }

  .hide-xs {
    display: none !important;
  }

  /* Auf schmalen Viewports nur für Screenreader (z. B. Aktionen-Spalte
     der Download-Tabelle, die dort als Extra-Karteneintrag dupliziert wird) */
  .hide-xs-show-screenreader {
    position: absolute !important;
    left: -9999px;
    top: -9999px;
    clip: rect(1px, 1px, 1px, 1px);
  }
}

/* Bootstrap-Float-Helfer */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* Nur für Screenreader sichtbar */
.screenreader-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-Link: springt sichtbar herein, wenn fokussiert */
.skip-link {
  position: absolute;
  left: 12px;
  /* Versteckt über dem Sichtbereich. Offset in rem (nicht px) und großzügig, damit
     der Link auch bei großer Browser-Schriftgröße (z. B. 200 %) komplett verborgen
     bleibt - dann wächst er mit, der Offset skaliert proportional mit. */
  top: -6rem;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--teal-d);
  color: #fff;
  font-weight: 700;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 12px;
  text-decoration: none;
}

/* Vorschaumodus-Banner */
.preview-banner {
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 10001;
  padding: 6px 14px;
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  background: var(--red-bg);
  color: var(--red);
  font-weight: 700;
}

/* JavaScript-Hinweis */
.noscript-warning {
  margin: 16px;
  padding: 14px 16px;
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  background: var(--red-bg);
  color: var(--red);
}