/* ============================================================
   TFCZ · eigenes.css (Ebene 3)
   Eigene Anpassungen, die über dem Kern liegen. Wird nach marke.css
   geladen und bei jedem Update unverändert übernommen.
   Nur Tokens verwenden (var(--…)), keine eigenen Farbwerte.

   Jede Regel hier ist eine TFCZ-Eigenheit und steht auch in
   eigenheiten.md. Vor jedem neuen Kern prüfen, ob sie noch greift.
   ============================================================ */

/* E3 · Überzeile mit Goldstrich (Brand Guide TFCZ, Sektion 14: «Kicker immer als Goldstrich
   plus Grossbuchstaben»). Die Schrift bleibt die der Überzeile im Kern (hell auf Blau, 5:1); der
   Strich ist Grafik und nimmt den Zweitakzent: Gold hell auf Blau (3.4:1), Gold auf Navy.
   Kräftiger und weiter gesperrt als im Kern, wie der Kicker vorher. */
.ueberzeile {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: fit-content;
  font-weight: var(--fw-extrabold);
  letter-spacing: .18em;
  margin: 0 0 var(--space-sm);
}
.ueberzeile::before {
  content: "";
  width: 28px;
  height: var(--border-w-stark);
  flex: none;
  background: var(--accent-2);
}

/* E11 · Knopf nur mit Zeichen immer rund, Schliessen beim Überfahren rot mit Quetsch-Animation
   (Brand Guide TFCZ, CTA-System: «Nur-Icon-Button, immer rund … Schliessen/X = Rot», bestätigt
   2026-10-19). Der Kern setzt den
   Symbolknopf eckig und leise; das gilt bei TFCZ nicht.
   Das Rot ist das TFCZ-Rot der Palette, kein Zustand: es steht nur hier. Das Zeichen darauf ist
   weiss (4.85:1). Gegen das Blau der Seite hebt sich die rote Fläche kaum ab (1.2:1); sie ist ein
   Zustand beim Überfahren, das weisse X trägt die Form. */
:root { --tfcz-rot: #da2929; }
.btn--symbol { border-radius: var(--r-pill); }
.btn--symbol:is(.fenster__zu, .lichtkasten__zu, .preisvergleich__zu, .hinweisband__schliessen, [command="close"], [aria-label$="schliessen" i]):hover:where(:not(:disabled, [aria-disabled="true"])) {
  background: var(--tfcz-rot);
  border-color: var(--tfcz-rot);
  color: #fff;
  animation: tfcz-quetschen .42s var(--ease);
}
@keyframes tfcz-quetschen {
  0%   { transform: scale(1, 1); }
  35%  { transform: scale(1.22, .78); }
  70%  { transform: scale(.92, 1.08); }
  100% { transform: scale(1, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .btn--symbol:hover { animation: none !important; }
}