/* ============================================================
   Bock Maschinenbau GmbH – Utilities & Layout-Helfer
   (zentrale Schicht für früheres inline style="…")
   ============================================================
   Diese Datei nimmt das STATISCHE Styling auf, das früher als
   inline style="…"-Attribut über die Templates (alle 19 Sprachen)
   verstreut war. Eine Klasse hier ändern → jede Seite zieht nach.

   REGELN
     • Werte kommen IMMER aus variables.css (var(--…)). KEIN Raw-Hex,
       -rem, -px hier — das ist die Aufgabe der Tokens (SSOT).
     • Templates tragen KEINE statischen inline style="…" mehr.
       Nur dynamische CSS-Variablen bleiben inline:
         style="--delay: 3"            (Animations-Stagger)
         style="--page-hero-h: {{…}}"  (pro Seite berechnet)
       Erzwungen durch tests/styling/test_no_inline_styles.py.
     • Geladen NACH main.css (siehe base.html.jinja) → Utilities
       gewinnen den Quell­reihenfolge-Tiebreak gegen Basis-Klassen
       gleicher Spezifität, ohne !important.

   Aufbau: 1) Spacing-Utilities  2) Maß/Lesebreiten
           3) Text-Utilities     4) Layout-Utilities
           5) Komponenten (semantische, wiederkehrende Muster)
   ============================================================ */

/* ── 1 · Spacing-Utilities (an die --space-Skala gebunden) ──── */
.u-mt-2  { margin-top: var(--space-2); }
.u-mt-4  { margin-top: var(--space-4); }
.u-mt-6  { margin-top: var(--space-6); }
.u-mt-8  { margin-top: var(--space-8); }
.u-mt-10 { margin-top: var(--space-10); }
.u-mt-12 { margin-top: var(--space-12); }
.u-mb-4  { margin-bottom: var(--space-4); }
.u-mb-10 { margin-bottom: var(--space-10); }
.u-mb-12 { margin-bottom: var(--space-12); }

/* ── 2 · Maß-/Lesebreiten (zentrierter Fließtext) ───────────── */
/* Konsolidiert die früher driftenden Inline-Breiten 640/660/680px. */
.u-measure      { max-width: var(--measure);      margin-inline: auto; }
.u-measure-text { max-width: var(--measure-text); }

/* ── 3 · Text-Utilities ─────────────────────────────────────── */
.u-text-accent  { color: var(--color-accent-text); }
.u-text-inverse { color: var(--color-text-inverse); }
.u-text-muted   { color: var(--color-text-muted); }
.u-text-sm      { font-size: var(--text-sm); }
.u-text-5xl     { font-size: var(--text-5xl); }
.u-link-inherit { color: inherit; text-decoration: underline; }

/* ── 4 · Layout-Utilities ───────────────────────────────────── */
.u-w-full        { width: 100%; }
.u-inline-flex   { display: inline-flex; }
.u-justify-start { justify-content: flex-start; }

/* ── 5 · Komponenten (semantisch, wiederkehrende Muster) ─────── */

/* Fehlerseite (404): vertikal zentrierte Bühne über volle Höhe. */
.error-stage {
  min-height: 60vh; /* genuiner Viewport-Wert (kein Token) */
  display: flex;
  align-items: center;
}

/* ── Rubrik-Kopf ──────────────────────────────────────────────
   Titel (+ optionale Meta-Zeile) mit auslaufender Trennlinie — gliedert eine
   lange Seite in benannte Pakete, statt Blöcke tabellenartig aneinanderzureihen.

   War `.gallery-category-header` (nur /einblicke/). Look unverändert, aber der
   Name ist jetzt frei: nutzbar für JEDE Rubrik (Galerie-Kategorie, Sektion,
   Maschinen-Paket …). `.section-head`/`.section-header` sind in main.css bereits
   anders belegt — daher `.rubric`.

   Markup:
     <div class="rubric">
       <div class="rubric__text">
         <h3 class="rubric__title">Betrieb &amp; Einrichtungen</h3>
         <p class="rubric__meta">12 Bilder</p>   <!-- optional -->
       </div>
       <div class="rubric__rule"></div>
     </div>
*/
.rubric {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-3);
  border-bottom: 2px solid var(--color-gray-200);
  animation: fadeInUp 0.5s ease-out;
}

.rubric__text {
  flex: 0 0 auto;
  min-width: 0;
}

/* Verlaufs-Text (background-clip): components/effects.css `.u-text-gradient` —
   der Titel ist dort als Konsument gelistet. `color` bleibt als Fallback. */
.rubric__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin: 0 0 var(--space-1) 0;
}

.rubric__meta {
  font-size: 13px; /* zwischen --text-xs (12) und --text-sm (14): bewusst token-los */
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: var(--tracking-snug);
}

/* Linie läuft vom Titel bis zum Zeilenende aus (Akzent in der Mitte). */
.rubric__rule {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg,
    var(--color-gray-200) 0%,
    var(--color-accent-light) 50%,
    var(--color-gray-200) 100%);
  opacity: 0.6;
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}