/* Auftritt Katomi Asian Fusion (katomi-admin.tuantrungngo.com), 09.10.2026.
   Wird nach styles.css geladen und stellt nur um, was die Marke trägt: Farben, das Logo, das Markenfeld der
   Anmeldung. Werte von ihrer neuen Webseite (Entwurf 05 „Feuer“, homepage-heroes/clients/katomi/neue-webseite/):
   Nachtblau #0b1219 (Kopf, Flächen), Rot #c8261e (Knöpfe, Akzent), Gold der Wortmarke. Ihr Logo IST der Name
   (KATOMI mit der Welle im O), deshalb steht der Name nicht noch einmal als Text daneben, und das Logo ist breit.
   Eingeklappte Seitenleiste: nur die Welle (zeichen.png, das Seitensymbol der Webseite); Favicon wie auf der
   Webseite. Dateien aus neue-webseite/medien/marke/ (wortmarke-tinte-2x, wortmarke-gold-2x, symbol-192). */

:root {
  /* Akzent: aktive Reiter, Verweise, Fokus, Schalter */
  --brand-600: #c8261e;
  --brand-500: #e0453c;
  --brand-50: #fdeceb;
  /* dunkle Flächen: Knöpfe, Avatar, Speicherleiste */
  --navy-950: #070b10;
  --navy-900: #0b1219;
  --navy-800: #141d27;
  --navy-700: #1d2935;
  --navy-600: #2a3846;
  --auftritt-rot: #c8261e;
  --auftritt-gold: #c9a35a;
}
/* Im Dunkelmodus muss der Akzent hell sein, sonst verschwindet er auf dunklem Grund */
.dark {
  --brand-600: #f0645a;
  --brand-500: #f48a82;
  --brand-50: #3a1513;
}

/* ------------------------------------------------------- Seitenleiste
   Oben die Wortmarke, darunter klein „Dashboard“. Eingeklappt nur die Welle. */
.marke { flex-direction: column; align-items: flex-start; gap: .375rem; }
.marke-bild { height: 1.75rem; width: auto; }
.marke-text .marke-name.auftritt-name { display: none; }
.marke-unter { padding-left: .125rem; letter-spacing: .02em; }
.seitenleiste.zu .marke-bild { display: none; }
.seitenleiste.zu .marke::before {
  content: ""; display: block; width: 2.25rem; height: 2.25rem; border-radius: .5rem;
  background: url("zeichen.png") center / cover no-repeat;
}

/* Logo in der Anmeldung und im Fenster „Eigenes Passwort wählen“: nur das Bild, der Name steht darin */
.hph-logo.auftritt-logo img { height: 2.75rem; width: auto; }
.hph-logo.auftritt-logo .auftritt-wortmarke,
.pw-logo .auftritt-wortmarke { display: none; }
.pw-logo img { height: 1.75rem; width: auto; }

/* Kacheln und Plaketten, die fest auf Indigo standen */
.t-indigo { background: #fdeceb; color: #c8261e; }
.dark .t-indigo { background: rgb(200 38 30 / .2); color: #f48a82; }
.dark .badge-indigo, .dark .s-geplant, .dark .wahl-knopf.wahl-projekt,
.dark .wahl-eintrag.gewaehlt, .dark .zeit-preset.aktiv { color: #f48a82; }

/* ------------------------------------------------------- Anmeldung
   Markenfeld dunkel wie die Bühne ihrer Webseite, oben ein roter Streifen, darin die goldene Wortmarke. */
.anmeldung-marke {
  color: #f4f1ec;
  border-top: 6px solid var(--auftritt-rot);
  background:
    radial-gradient(70% 55% at 100% 0%, rgb(200 38 30 / .24), transparent 70%),
    linear-gradient(180deg, #0b1219 0%, #111b26 100%);
}
.anmeldung-oberzeile { color: #f0645a; }
.anmeldung-titel { color: #f4f1ec; letter-spacing: -.01em; line-height: 1.12; }
.anmeldung-satz, .anmeldung-punkte { color: #cfd6de; }
.anmeldung-punkte { border-top-color: rgb(255 255 255 / .12); }
.anmeldung-punkte svg { color: #f0645a; }
.anmeldung-wabe { display: none; }
.anmeldung-formular h1 { color: var(--navy-900); }
.dark .anmeldung-formular h1 { color: #f4f1ec; }

@media (max-width: 760px) {
  .hph-logo.auftritt-logo img { height: 2.25rem; }
}