/* Auftritt Nui Sushi & Ramenbar (nui-admin.tuantrungngo.com), 07.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 seiner Webseite https://nui-luebeck.de/: Lila #941c7f (Flächen, „nui“ im Logo #901078),
   Magenta #e6007e (Kopfleiste, Knöpfe), dunkles Lila #771466 (Fuß). Sein Logo IST der Name („nui® SUSHI & RAMENBAR“),
   deshalb steht der Name nicht noch einmal als Text daneben, und das Logo ist breit statt quadratisch. Eingeklappte
   Seitenleiste: nur „nui“ (zeichen.png); Favicon: sein eigenes Symbol von nui-luebeck.de. Dateien erzeugt mit
   homepage-heroes/clients/nui-sushi-ramenbar/werkzeug/hub_dateien.py. Keine eigene Schrift. */

:root {
  /* Akzent: aktive Reiter, Verweise, Fokus, Schalter */
  --brand-600: #941c7f;
  --brand-500: #b02497;
  --brand-50: #f8edf5;
  /* dunkle Flächen: Knöpfe, Avatar, Speicherleiste */
  --navy-950: #22091d;
  --navy-900: #3d1036;
  --navy-800: #4d1544;
  --navy-700: #5e1a53;
  --navy-600: #771466;
  --auftritt-lila: #941c7f;
  --auftritt-magenta: #e6007e;
}
.dark {
  --brand-600: #f59bd6;
  --brand-500: #f8b6e1;
  --brand-50: #3a1433;
}

/* Seitengrund: ein Hauch seines Lila. Der Dunkelmodus bleibt, wie er ist (.dark body in styles.css). */
body { background: linear-gradient(180deg, #fff 0%, #fbf4f9 40%, #fdf8fc 75%, #fff 100%) fixed; }

/* ------------------------------------------------------- Seitenleiste
   Oben das Logo, darunter klein „Dashboard“. Eingeklappt nur „nui“. */
.marke { flex-direction: column; align-items: flex-start; gap: .375rem; }
.marke-bild { height: 2.25rem; }
.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;
  background: url("zeichen.png") center / contain no-repeat;
}
.dark .seitenleiste.zu .marke::before { filter: brightness(1.9) saturate(.8); }

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

/* Kacheln und Plaketten, die fest auf Indigo standen */
.t-indigo { background: #f8edf5; color: #941c7f; }
.dark .t-indigo { background: rgb(148 28 127 / .25); color: #f8b6e1; }
.dark .badge-indigo, .dark .s-geplant, .dark .wahl-knopf.wahl-projekt,
.dark .wahl-eintrag.gewaehlt, .dark .zeit-preset.aktiv { color: #f8b6e1; }

/* ------------------------------------------------------- Anmeldung
   Markenfeld hell mit seinem Lila, oben ein magentafarbener Streifen wie seine Kopfleiste. */
.anmeldung-marke {
  color: #3d1036;
  border-right: 1px solid #ecd6e6;
  border-top: 6px solid var(--auftritt-magenta);
  background:
    radial-gradient(70% 55% at 100% 0%, rgb(230 0 126 / .10), transparent 70%),
    linear-gradient(180deg, #fff 0%, #fbf1f8 60%, #f6e4f1 100%);
}
.anmeldung-marke .hph-logo { color: var(--auftritt-lila); }
.anmeldung-oberzeile { color: #b0006a; }
.anmeldung-titel { color: var(--auftritt-lila); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
.anmeldung-satz { color: #4a2943; }
.anmeldung-punkte { color: #4a2943; border-top-color: rgb(148 28 127 / .16); }
.anmeldung-punkte svg { color: var(--auftritt-magenta); }
.anmeldung-wabe { display: none; }
.anmeldung-formular h1 { color: var(--auftritt-lila); }

/* Im Dunkelmodus bleibt das Markenfeld hell: Das Logo darin (logo.png, Lila und Schwarz) bliebe auf dunklem Grund
   unsichtbar, und die Ansicht hat nur ein Bild für das Feld. */
.dark .anmeldung-formular h1 { color: #f8b6e1; }

@media (max-width: 760px) {
  .anmeldung-marke { border-right: 0; border-bottom: 1px solid #ecd6e6; }
  .hph-logo.auftritt-logo img { height: 3rem; }
}