/* ═══════════════════════════════════════════════════════════════════════
   ZEYNAH — was den fünfzehn alten Seiten zur Gleichheit noch fehlt

   Nazannil am 11.08.2026: „Alle Seiten müssen gleich sein. Alle Seiten."

   Gemessen: Von den 50 Seiten der Kommandozentrale laden 35 die
   gemeinsame Grundlage `zeynah-glas.css` — und fünfzehn nicht, darunter
   `page.html`, das Haupt-Cockpit.

   ── Was NICHT hier steht, und warum ────────────────────────────────────
   Farben und Schachbrett macht `farben.css`. Diese Datei ist die
   etablierte zentrale Farbstelle der fünfzehn Seiten und regelt dort
   bereits, dass jede Kachel das Gegenteil ihres Bandes ist. Sie stand nur
   noch auf dem Stand vom 02.08.2026 (`--midnight:#36495f`, das
   abgewählte Blaugrau) und wurde am 11.08. auf die abgestimmte neutrale
   Reihe gebracht.

   Die Farben hier zu wiederholen hiesse: zwei Wahrheiten, von denen die
   Reihenfolge der `<link>`-Zeilen entscheidet, welche gilt. Wer später
   eine Farbe sucht, findet die falsche.

   ── Was hier steht ─────────────────────────────────────────────────────
   Drei Dinge, die es auf den alten Seiten überhaupt nicht gab und die
   `farben.css` nicht kennt:
     1. Glas — halbdurchsichtig mit Weichzeichnung dahinter
     2. Glas auch für Felder und Knöpfe
     3. Das atmende Logo, 85 % bis 115 % in 4,5 Sekunden

   Diese Datei wird NACH `farben.css` geladen. Sie setzt nichts, worüber
   `farben.css` entscheidet — die Reihenfolge ist trotzdem wichtig, falls
   später jemand hier doch eine Farbe ergänzt.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Glas für die alten Kacheln ──────────────────────────────────────────
   Die alten Seiten nennen ihre Kacheln `.card`, daneben gibt es `.karte`,
   `.kpi`, `.liste`, `.jetzt` und die Anmeldebox `.gate`. Wer nur `.card`
   abdeckt, lässt ganze Seiten flach — am 02.08. hat genau das die
   Überblicksseite auf 1,2:1 gebracht.

   Nur Weichzeichnung und Schatten, keine Fläche: Die Fläche kommt aus
   `farben.css` und dreht dort mit dem Band. */
.card, .karte, .kpi, .liste, .jetzt, .gate{
  border-radius:var(--radius, 16px);
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  transition:transform .42s cubic-bezier(.2,.8,.3,1),
             box-shadow .42s cubic-bezier(.2,.8,.3,1);
}
/* Schweben — der weiche Schatten, der die Kachel von der Fläche abhebt.
   Auf dunklem Grund trägt derselbe Schatten nicht; dort hebt ein heller
   Saum die Kante ab. */
.band.dark .card, .band.dark .karte, .band.dark .kpi,
.band.dark .liste, .band.dark .jetzt{
  box-shadow:0 14px 34px rgba(48,49,52,.13), 0 2px 6px rgba(48,49,52,.08);
}
.band.light .card, .band.light .karte, .band.light .kpi,
.band.light .liste, .band.light .jetzt,
.band:not(.dark) .card, .band:not(.dark) .karte, .band:not(.dark) .kpi,
.band:not(.dark) .liste, .band:not(.dark) .jetzt, .gate{
  box-shadow:0 14px 34px rgba(48,49,52,.24), 0 2px 6px rgba(48,49,52,.14);
}

/* ── Glas auch für Felder und Knöpfe ────────────────────────────────────
   Dieselbe Regel wie auf den neuen Seiten. Schweben nur bei Knöpfen: ein
   Eingabefeld, das beim Vorbeifahren hüpft, macht das Tippen unruhig. */
input, select, textarea, button{
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 6px 16px rgba(48,49,52,.10), 0 1px 3px rgba(48,49,52,.07);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),
             box-shadow .3s cubic-bezier(.2,.8,.3,1),
             border-color .3s ease;
}
button:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(48,49,52,.16), 0 2px 6px rgba(48,49,52,.10);
}
button:active{ transform:translateY(0) scale(.985) }

/* ── Das Logo lebt — auf jeder Seite ────────────────────────────────────
   85 % bis 115 % in 4,5 Sekunden, derselbe Wert wie überall. Frühere
   Fassungen liefen mit 87 bis 100 %; bei einem 34 Pixel grossen Logo sind
   das vier Pixel über viereinhalb Sekunden, und man sieht schlicht
   nichts. Erst ab etwa 25 % Amplitude nimmt das Auge die Bewegung wahr.

   Der Selektor greift über die Bildquelle, weil die fünfzehn Seiten ihr
   Logo unterschiedlich einbetten — mal in `.marke`, mal in `.logo`, mal
   nackt im Kopfbereich. */
img[src*="zeynah-z-logo"], .marke img, .logo img{
  animation:z-atem 4.5s ease-in-out infinite;
  transform-origin:center;
  margin:2px;
}
@keyframes z-atem{
  0%,100%{ transform:scale(.85) }
  50%    { transform:scale(1.15) }
}

@media (prefers-reduced-motion:reduce){
  img[src*="zeynah-z-logo"], .marke img, .logo img{ animation:none }
  .card, .karte, .kpi, .liste, .jetzt, .gate,
  input, select, textarea, button{ transition:none }
  button:hover{ transform:none }
}