/* Auftritt Le Beauty Studio (admin.lebeautystudio.de), 20.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 Webseite (lebeautystudio/web/src/styles/global.css): Tinte #191a1c und #2c2c2c,
   Gold #deb658. Ihre Wortmarke IST der Name (Trang Le Beauty Studio mit dem Schwan), deshalb steht der Name nicht
   noch einmal als Text daneben, wie bei Katomi. Eingeklappte Seitenleiste: nur der Schwan (zeichen.png).

   Das Gold der Webseite ist als Schriftfarbe auf Weiß zu blass (1,9 : 1). Verweise und aktive Reiter tragen im
   hellen Modus deshalb ein tieferes Gold im selben Farbton (#8e7027, 4,7 : 1), im dunklen Modus das echte Gold
   (#deb658, 7,6 : 1 auf den Flächen des Hubs). Gemessen am 20.10.2026, nicht geschätzt. */

:root {
  /* Akzent: aktive Reiter, Verweise, Fokus, Schalter */
  --brand-600: #8e7027;
  --brand-500: #a8842e;
  --brand-50: #faf5e8;
  /* dunkle Flächen: Knöpfe, Avatar, Speicherleiste */
  --navy-950: #0f1012;
  --navy-900: #191a1c;
  --navy-800: #222326;
  --navy-700: #2c2c2c;
  --navy-600: #3a3b3e;
  --auftritt-gold: #deb658;
}
/* Im Dunkelmodus muss der Akzent hell sein, sonst verschwindet er auf dunklem Grund */
.dark {
  --brand-600: #deb658;
  --brand-500: #e8c878;
  --brand-50: #2a2416;
}

/* Seitengrund: warmes Weiß wie ihre Preisliste statt des blauen Verlaufs. Der Dunkelmodus bleibt, wie er ist. */
body { background: linear-gradient(180deg, #fff 0%, #faf7f1 40%, #fcfaf6 75%, #fff 100%) fixed; }

/* ------------------------------------------------------- Seitenleiste
   Oben die Wortmarke, darunter klein „Dashboard“. Eingeklappt nur der Schwan. */
.marke { flex-direction: column; align-items: flex-start; gap: .375rem; }
/* Ihr Signet ist kompakt (Schrift und Schwan), nicht einzeilig wie bei Katomi: erst ab etwa 52 px Höhe ist die
   Zeile „Beauty Studio“ darin lesbar, gemessen am 20.10.2026 (bei 36 px rund 6 px Schrift). */
.marke-bild { height: 3.25rem; 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: 4rem; width: auto; }
.hph-logo.auftritt-logo .auftritt-wortmarke,
.pw-logo .auftritt-wortmarke { display: none; }
.pw-logo img { height: 2.75rem; width: auto; }

/* Kacheln und Plaketten, die fest auf Indigo standen */
.t-indigo { background: #faf5e8; color: #8e7027; }
.dark .t-indigo { background: rgb(222 182 88 / .16); color: #e8c878; }
.dark .badge-indigo, .dark .s-geplant, .dark .wahl-knopf.wahl-projekt,
.dark .wahl-eintrag.gewaehlt, .dark .zeit-preset.aktiv { color: #e8c878; }

/* ------------------------------------------------------- Anmeldung
   Markenfeld in ihrer Tinte wie der Umschlag ihrer Preisliste, oben ein goldener Streifen, darin die Wortmarke. */
.anmeldung-marke {
  color: #f4efe6;
  border-top: 6px solid var(--auftritt-gold);
  background:
    radial-gradient(70% 55% at 100% 0%, rgb(222 182 88 / .16), transparent 70%),
    linear-gradient(180deg, #23242a 0%, #16171a 58%, #101114 100%);
}
.anmeldung-oberzeile { color: #deb658; }
.anmeldung-titel { color: #faf7f0; letter-spacing: -.01em; line-height: 1.12; }
.anmeldung-satz, .anmeldung-punkte { color: #d6d1c7; }
.anmeldung-punkte { border-top-color: rgb(222 182 88 / .22); }
.anmeldung-punkte svg { color: #deb658; }
.anmeldung-wabe { display: none; }
.anmeldung-formular h1 { color: var(--navy-900); }
.dark .anmeldung-formular h1 { color: #f4efe6; }

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