/* Auftritt Umi Sake Haus (umisake-admin.tuantrungngo.com), 03.10.2026.
   Wird nach styles.css geladen und stellt nur um, was die Marke trägt: Farben, Schrift der Wortmarke, das
   Markenfeld der Anmeldung und die Farbe der Hinweisleiste in der Vorschau (Reiter „Hinweis“).
   Werte von ihrer Webseite „Papier & Tusche“ (homepage-heroes/clients/umi-sake/neue-webseite/seite/stil.css):
   Papier #ece6da, Tinte #1e1d1a, Grün #2f3b2d (Knöpfe, Akzent), Rot #c1392b (Stempel, Hinweisleiste).
   Zeichen: der Fisch im Kreis (bilder/marke/logo-160.png), für hellen und dunklen Grund dieselbe Datei; der
   Kupferring hebt den dunklen Kreis auch vom dunklen Grund ab.
   Schriften wie auf ihrer Webseite: Newsreader (Production Type) und die Teilmenge 海酒 aus Noto Sans CJK SC
   (Adobe), beide SIL Open Font License 1.1, https://openfontlicense.org */

@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("newsreader-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Umi Zeichen"; font-weight: 400; font-display: swap;
  src: url("umi-zeichen.woff2") format("woff2");
}

:root {
  /* Akzent: aktive Reiter, Verweise, Fokus, Schalter, Linie im Verlauf */
  --brand-600: #2f3b2d;
  --brand-500: #4a5c47;
  --brand-50: #eceee6;
  /* dunkle Flächen: Knöpfe, Avatar, Speicherleiste */
  --navy-950: #1f271e;
  --navy-900: #2f3b2d;
  --navy-800: #36452f;
  --navy-700: #3e4d3b;
  --navy-600: #4d5f49;
  --auftritt-rot: #c1392b;
  --auftritt-tinte: #1e1d1a;
  /* Hinweisleiste der Webseite: rot mit weißer Schrift wie auf ihrer Seite (.hinweisleiste in stil.css) */
  --wh-leiste-grund: #c1392b;
  --wh-leiste-text: #fff;
}
/* Im Dunkelmodus muss der Akzent hell sein, sonst verschwindet er auf dunklem Grund */
.dark {
  --brand-600: #a9c4a0;
  --brand-500: #bcd3b4;
  --brand-50: #243024;
}

/* Seitengrund: ihr Papier statt des blauen Verlaufs. Der Dunkelmodus bleibt, wie er ist (.dark body in styles.css):
   Seine Flächen sind bläulich grau, ein getönter Grund dahinter sähe wie ein Versehen aus. */
body { background: linear-gradient(180deg, #fff 0%, #f3eee4 40%, #f8f5ef 75%, #fff 100%) fixed; }

/* Wortmarke in der Schrift ihrer Webseite */
.auftritt-name { font-family: "Newsreader", Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: -.015em; }
.marke-name.auftritt-name { font-size: 1.1875rem; line-height: 1.15; color: var(--auftritt-tinte); }
.dark .marke-name.auftritt-name { color: #f1ede4; }
.hph-logo.auftritt-logo { gap: .75rem; }
.hph-logo.auftritt-logo .auftritt-name { font-size: 1.5625rem; }
.hph-logo.auftritt-logo img { height: 2.75rem; }
.pw-logo .auftritt-name { font-size: 1.25rem; }
.pw-logo .auftritt-zusatz { margin-top: .3125rem; font-size: .5rem; }
/* Das Zeichen ist rund: in der Seitenleiste etwas kleiner als das hohe Zeichen von HomePageHeroes */
.marke-bild { height: 2.125rem; }

/* Kacheln und Plaketten, die fest auf Indigo standen */
.t-indigo { background: #eceee6; color: #2f3b2d; }
.dark .t-indigo { background: rgb(74 92 71 / .25); color: #bcd3b4; }
.dark .badge-indigo, .dark .s-geplant, .dark .wahl-knopf.wahl-projekt,
.dark .wahl-eintrag.gewaehlt, .dark .zeit-preset.aktiv { color: #bcd3b4; }

/* ------------------------------------------------------- Anmeldung
   Markenfeld auf Papier mit Tinte und rotem Stempel, wie ihre Webseite. Im Dunkelmodus ihr Grün statt des hellen
   Papiers, sonst stünde neben dem dunklen Formular eine grelle Fläche. */
.anmeldung-marke {
  color: #3b3934;
  border-right: 1px solid #cfc6b5;
  background:
    radial-gradient(70% 55% at 100% 0%, rgb(193 57 43 / .08), transparent 70%),
    linear-gradient(180deg, #f3eee4 0%, #ece6da 60%, #e2dbcd 100%);
}
.anmeldung-marke .hph-logo { color: var(--auftritt-tinte); }
.anmeldung-oberzeile { color: var(--auftritt-rot); }
.anmeldung-titel {
  color: var(--auftritt-tinte);
  font-family: "Newsreader", Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.02em; line-height: 1.08;
}
.anmeldung-satz { color: #3b3934; }
.anmeldung-punkte { color: #3b3934; border-top-color: rgb(30 29 26 / .14); }
.anmeldung-punkte svg { color: var(--auftritt-rot); }
/* statt der Wabe von HomePageHeroes der rote Stempel 海酒 ihrer Karte, senkrecht wie auf der Webseite */
.anmeldung-wabe { display: none; }
.anmeldung-marke::after {
  content: "海酒";
  content: "海酒" / "";
  position: absolute; z-index: -1; top: 2.25rem; right: 2.25rem;
  writing-mode: vertical-rl; padding: .5rem .375rem; border: 2px solid var(--auftritt-rot);
  font: 400 1.75rem/1 "Umi Zeichen", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", sans-serif;
  letter-spacing: .06em; color: var(--auftritt-rot);
}
.anmeldung-formular h1 { color: var(--auftritt-tinte); font-family: "Newsreader", Georgia, "Times New Roman", serif; font-weight: 600; }

.dark .anmeldung-marke {
  color: #d9dccf; border-right-color: transparent;
  background:
    radial-gradient(75% 55% at 100% 0%, rgb(193 57 43 / .22), transparent 70%),
    linear-gradient(180deg, #2f3b2d 0%, #273226 58%, #1c241b 100%);
}
.dark .anmeldung-marke .hph-logo, .dark .anmeldung-titel { color: #f3eee4; }
.dark .anmeldung-satz, .dark .anmeldung-punkte { color: #e2dbcd; }
.dark .anmeldung-punkte { border-top-color: rgb(255 255 255 / .14); }
.dark .anmeldung-oberzeile, .dark .anmeldung-punkte svg { color: #e9897d; }
.dark .anmeldung-marke::after { border-color: #e0685a; color: #f6d3cc; }
.dark .anmeldung-formular h1 { color: #f1ede4; }

@media (max-width: 760px) {
  .anmeldung-marke { border-right: 0; border-bottom: 1px solid #cfc6b5; }
  .dark .anmeldung-marke { border-bottom-color: transparent; }
  .anmeldung-marke::after { top: 1.25rem; right: 1.25rem; padding: .375rem .25rem; font-size: 1.25rem; }
}