/* Auftritt Das AbendMahl (abendmahl-admin.tuantrungngo.com), 06.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 seinem Schriftzug (Schild über der Tür, erstes Bild seiner alten Startseite): Braun #411900,
   Creme #f6eac4. Sein Logo IST der Name („Ristorante Italiano / Das AbendMahl“), deshalb steht der Name nicht noch
   einmal als Text daneben, und das Logo ist breit statt quadratisch. Eingeklappte Seitenleiste und Favicon zeigen
   das „A“ aus seinem Schriftzug (zeichen.png, favicon.ico; erzeugt aus homepage-heroes/clients/das-abendmahl/logo/).
   Schrift der Überschriften wie auf seiner Vorschau: Playfair Display (Claus Eggers Sørensen), SIL Open Font
   License 1.1, https://openfontlicense.org */

@font-face {
  font-family: "Playfair Display"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("playfair-normal-400-700.woff2") format("woff2");
}

:root {
  /* Akzent: aktive Reiter, Verweise, Fokus, Schalter */
  --brand-600: #8a3a1c;
  --brand-500: #a6532e;
  --brand-50: #f6ece3;
  /* dunkle Flächen: Knöpfe, Avatar, Speicherleiste */
  --navy-950: #1f0d03;
  --navy-900: #411900;
  --navy-800: #4f230b;
  --navy-700: #5e2d12;
  --navy-600: #6f3a1c;
  --auftritt-braun: #411900;
  --auftritt-creme: #f6eac4;
}
.dark {
  --brand-600: #e6b48c;
  --brand-500: #efc6a5;
  --brand-50: #3a2216;
}

/* Seitengrund: warmes Creme wie sein Schild. Der Dunkelmodus bleibt, wie er ist (.dark body in styles.css). */
body { background: linear-gradient(180deg, #fff 0%, #faf3e6 40%, #fcf8f0 75%, #fff 100%) fixed; }

/* ------------------------------------------------------- Seitenleiste
   Oben das Logo, darunter klein „Dashboard“. Eingeklappt nur das „A“. */
.marke { flex-direction: column; align-items: flex-start; gap: .375rem; }
.marke-bild { height: 1.875rem; }
.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;
}

/* 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.25rem; }
.hph-logo.auftritt-logo .auftritt-wortmarke,
.pw-logo .auftritt-wortmarke { display: none; }
.pw-logo img { height: 2rem; }

/* Kacheln und Plaketten, die fest auf Indigo standen */
.t-indigo { background: #f6ece3; color: #8a3a1c; }
.dark .t-indigo { background: rgb(166 83 46 / .22); color: #efc6a5; }
.dark .badge-indigo, .dark .s-geplant, .dark .wahl-knopf.wahl-projekt,
.dark .wahl-eintrag.gewaehlt, .dark .zeit-preset.aktiv { color: #efc6a5; }

/* ------------------------------------------------------- Anmeldung
   Markenfeld in Creme mit seinem Braun, wie das Schild. Im Dunkelmodus Braun mit Creme. */
.anmeldung-marke {
  color: #4a3527;
  border-right: 1px solid #e3d3b4;
  background:
    radial-gradient(70% 55% at 100% 0%, rgb(166 83 46 / .10), transparent 70%),
    linear-gradient(180deg, #fbf5e9 0%, #f6eac4 60%, #efdfb6 100%);
}
.anmeldung-marke .hph-logo { color: var(--auftritt-braun); }
.anmeldung-oberzeile { color: #8a3a1c; }
.anmeldung-titel {
  color: var(--auftritt-braun);
  font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: -.01em; line-height: 1.12;
}
.anmeldung-satz { color: #4a3527; }
.anmeldung-punkte { color: #4a3527; border-top-color: rgb(65 25 0 / .14); }
.anmeldung-punkte svg { color: #8a3a1c; }
.anmeldung-wabe { display: none; }
.anmeldung-formular h1 { color: var(--auftritt-braun); font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 600; }

.dark .anmeldung-marke {
  color: #ead9c4; border-right-color: transparent;
  background:
    radial-gradient(75% 55% at 100% 0%, rgb(230 180 140 / .14), transparent 70%),
    linear-gradient(180deg, #411900 0%, #341400 58%, #230d00 100%);
}
.dark .anmeldung-titel { color: var(--auftritt-creme); }
.dark .anmeldung-satz, .dark .anmeldung-punkte { color: #ead9c4; }
.dark .anmeldung-punkte { border-top-color: rgb(255 255 255 / .14); }
.dark .anmeldung-oberzeile, .dark .anmeldung-punkte svg { color: #e6b48c; }
.dark .anmeldung-formular h1 { color: #f6eac4; }

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