/* ══════════════════════════════════════════════════════════════════════
   MONEY BIN · Anmeldung
   Nachttresor-Look: schwarzer Marmor, glühendes Gold, tiefes Rot als
   Kontrast. Regeln aus der Cinematic Web Engine: keine Plastik-Pills,
   Buttons nie als nackte Kästen, Icons als eigene SVGs, Daumen-Ergonomie.
   Alle Deko-Animationen laufen nur ohne "Bewegung reduzieren".
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --gold:       #d4af37;
  --gold-tief:  #9a7b1f;
  --gold-hell:  #f0dc9a;
  --gruen:      #2ecc8f;
  --nacht:      #0d0b07;
  --nacht-2:    #17130d;
  --elfenbein:  #f3ecdc;
  --elfenbein-60: rgba(243, 236, 220, .62);
  --glas:       rgba(23, 19, 13, .58);
  --linie:      rgba(212, 175, 55, .38);
  --rot:        #e04236;
  --rot-tief:   #8f1f18;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* hidden-Attribut muss IMMER gewinnen - sonst überstimmt jedes
   display:grid/flex einer Klasse das Ausblenden (genau so lag der
   Verspätungs-Stempel beim ersten Test sichtbar über dem Login). */
[hidden] { display: none !important; }

html, body { height: 100%; }
/* dvh statt %: sonst rechnet iOS Safari die Adressleiste nicht mit
   und unten fehlt ein Streifen. Alte Browser bleiben beim Fallback. */
body { min-height: 100dvh; }

body {
  font-family: ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  color: var(--elfenbein);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background: var(--nacht);
  overflow-x: hidden;
}

/* Der Geldspeicher bei Nacht liegt als eigene Ebene HINTER allem und
   fährt in Zeitlupe (Ken-Burns). Nur transform wird animiert - das
   läuft auch auf alten Handys butterweich. Kein background-attachment:
   fixed, das ruckelt auf iOS. */
.nachtBild {
  position: fixed;
  inset: -6%;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(13, 11, 7, .5), rgba(13, 11, 7, .28) 42%, rgba(13, 11, 7, .14) 80%, rgba(13, 11, 7, .3)),
    url("assets/nacht-szene2.jpg") center bottom / cover no-repeat,
    var(--nacht);
  will-change: transform;
}

/* Goldstaub: kleine Funken steigen langsam auf und glimmen. Positionen
   und Takte stehen fest im CSS (keine Inline-Styles, IDE-Regel). */
.funkenFeld { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.funkenFeld span {
  position: absolute;
  bottom: -12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d8, var(--gold) 55%, rgba(212, 175, 55, 0) 75%);
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, .9));
}
.funkenFeld span:nth-child(1)  { left: 6%;  width: 4px; height: 4px; }
.funkenFeld span:nth-child(2)  { left: 14%; width: 6px; height: 6px; }
.funkenFeld span:nth-child(3)  { left: 23%; width: 3px; height: 3px; }
.funkenFeld span:nth-child(4)  { left: 31%; }
.funkenFeld span:nth-child(5)  { left: 42%; width: 4px; height: 4px; }
.funkenFeld span:nth-child(6)  { left: 51%; width: 6px; height: 6px; }
.funkenFeld span:nth-child(7)  { left: 60%; width: 3px; height: 3px; }
.funkenFeld span:nth-child(8)  { left: 68%; }
.funkenFeld span:nth-child(9)  { left: 76%; width: 4px; height: 4px; }
.funkenFeld span:nth-child(10) { left: 84%; width: 6px; height: 6px; }
.funkenFeld span:nth-child(11) { left: 91%; width: 3px; height: 3px; }
.funkenFeld span:nth-child(12) { left: 97%; }

@media (prefers-reduced-motion: no-preference) {
  .nachtBild { animation: nachtFahrt 46s ease-in-out infinite alternate; }
  @keyframes nachtFahrt {
    from { transform: scale(1) translateY(0); }
    to   { transform: scale(1.07) translateY(-1.6%); }
  }
  .funkenFeld span { animation: funkeln 11s linear infinite; }
  .funkenFeld span:nth-child(2n)  { animation-duration: 14s; animation-delay: 2.5s; }
  .funkenFeld span:nth-child(3n)  { animation-duration: 17s; animation-delay: 5s; }
  .funkenFeld span:nth-child(4n)  { animation-delay: 8s; }
  .funkenFeld span:nth-child(5n)  { animation-duration: 12s; animation-delay: 3.5s; }
  @keyframes funkeln {
    0%   { transform: translateY(0) scale(.6); opacity: 0; }
    8%   { opacity: .9; }
    55%  { opacity: .55; }
    100% { transform: translateY(-105vh) scale(1.15); opacity: 0; }
  }
}

.buehne {
  min-height: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 34px 18px calc(22px + env(safe-area-inset-bottom));
}

/* ── Marke ──────────────────────────────────────────────────────────── */

.marke { text-align: center; }

.muenze {
  color: var(--gold);
  display: inline-block;
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, .65));
}
@media (prefers-reduced-motion: no-preference) {
  /* Die Münze dreht sich alle paar Sekunden einmal um die eigene Achse. */
  .muenze { animation: muenzDreh 7s ease-in-out infinite; }
  @keyframes muenzDreh {
    0%, 72% { transform: rotateY(0); }
    88%     { transform: rotateY(360deg); }
    100%    { transform: rotateY(360deg); }
  }
}

.marke h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(38px, 7vw, 54px);
  font-weight: 700;
  letter-spacing: .14em;
  margin-top: 6px;
  background: linear-gradient(105deg, var(--gold-tief) 15%, var(--gold) 38%, #fdf3c8 50%, var(--gold) 62%, var(--gold-tief) 85%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 34px rgba(212, 175, 55, .35);
}
@media (prefers-reduced-motion: no-preference) {
  /* Glanzlauf über die Wortmarke - wie Licht über poliertes Gold. */
  .marke h1 { animation: goldGlanz 5.5s ease-in-out infinite; }
  @keyframes goldGlanz {
    0%, 100% { background-position: 0% 0; }
    50%      { background-position: 100% 0; }
  }
}

.untertitel {
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--elfenbein-60);
}

/* ── Glas-Karte ─────────────────────────────────────────────────────── */

.karte {
  width: min(430px, 100%);
  background: var(--glas);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(212, 175, 55, .28);
  outline: 1px solid rgba(212, 175, 55, .16);
  outline-offset: -5px;
  border-radius: 22px;
  box-shadow:
    0 30px 70px -24px rgba(0, 0, 0, .85),
    0 0 46px -14px rgba(212, 175, 55, .28),
    inset 0 1px 0 rgba(243, 236, 220, .12);
  padding: 30px 26px 26px;
}

.frage {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 24px;
  text-align: center;
  margin-bottom: 22px;
  letter-spacing: .02em;
  color: var(--gold-hell);
}

/* ── Avatar-Gitter ──────────────────────────────────────────────────── */

.gitter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 10px;
}

.operator {
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 2px;
  border-radius: 14px;
  transition: transform .16s ease;
  touch-action: manipulation;
}
.operator:active { transform: scale(.94); }
.operator[disabled] { cursor: default; opacity: .4; }

@media (prefers-reduced-motion: no-preference) {
  /* Auftritt: die Medaillons steigen nacheinander aus dem Dunkel.
     fill "backwards": unsichtbar während der Wartezeit, danach gibt die
     Animation den transform wieder frei (sonst stürbe der :active-Druck). */
  .operator { animation: auftritt .55s cubic-bezier(.2, .9, .3, 1.15) backwards; }
  .operator:nth-child(2) { animation-delay: .07s; }
  .operator:nth-child(3) { animation-delay: .14s; }
  .operator:nth-child(4) { animation-delay: .21s; }
  .operator:nth-child(5) { animation-delay: .28s; }
  .operator:nth-child(6) { animation-delay: .35s; }
  @keyframes auftritt {
    from { opacity: 0; transform: translateY(16px) scale(.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  /* Danach schweben sie ganz leicht - jede Ente in eigenem Takt. */
  .operator .medaillon { animation: schweben 5s ease-in-out infinite; }
  .operator:nth-child(2) .medaillon { animation-delay: .8s; }
  .operator:nth-child(3) .medaillon { animation-delay: 1.6s; }
  .operator:nth-child(4) .medaillon { animation-delay: 2.4s; }
  .operator:nth-child(5) .medaillon { animation-delay: 3.2s; }
  .operator:nth-child(6) .medaillon { animation-delay: 4s; }
  @keyframes schweben {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -4px; }
  }
}

.medaillon {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 27px;
  font-weight: 700;
  color: var(--gold-hell);
  background: radial-gradient(circle at 32% 28%, #2a2318, #17130d 70%);
  border: 2px solid var(--gold);
  box-shadow:
    0 0 0 3px rgba(13, 11, 7, .8),
    0 0 18px -2px rgba(212, 175, 55, .55),
    0 12px 26px -10px rgba(0, 0, 0, .9);
  overflow: hidden;
}
.medaillon img { width: 100%; height: 100%; object-fit: cover; }
.medaillon.klein { width: 62px; height: 62px; font-size: 22px; }

/* Goldener Lichtlauf auf dem Ring: ein schmaler Glanz kreist über der
   Kante des Medaillons - wie eine frisch geprägte Münze im Licht. */
.medaillon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    rgba(255, 246, 216, 0) 0deg,
    rgba(255, 246, 216, .95) 24deg,
    rgba(255, 246, 216, 0) 58deg,
    rgba(255, 246, 216, 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 3.5px));
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .medaillon::after { animation: ringLauf 4.2s linear infinite; }
  @keyframes ringLauf {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
  }
}

.operator.frei .medaillon {
  background: rgba(23, 19, 13, .5);
  border-style: dashed;
  border-color: rgba(212, 175, 55, .4);
  color: var(--elfenbein-60);
  font-size: 30px;
  font-weight: 500;
  box-shadow: none;
}
.operator.frei .medaillon::after { content: none; }

.opName {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
  color: var(--elfenbein);
}
.opRolle {
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--elfenbein-60);
}

.operator.gesperrtOp .medaillon { filter: grayscale(.7) brightness(.8); }
.schloss {
  position: absolute;
  right: -2px;
  bottom: -2px;
  color: var(--rot);
  background: var(--nacht-2);
  border-radius: 999px;
  padding: 3px;
  line-height: 0;
  border: 1px solid rgba(224, 66, 54, .55);
  box-shadow: 0 0 10px rgba(224, 66, 54, .5);
  z-index: 1;
}

/* ── PIN-Ansicht ────────────────────────────────────────────────────── */

.zurueck {
  border: 0;
  background: none;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--elfenbein-60);
  cursor: pointer;
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.zurueck:hover { color: var(--gold); border-bottom-color: var(--linie); }

.pinKopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 14px 0 4px;
}
.pinName {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--gold-hell);
}
.pinHinweis {
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--elfenbein-60);
}

.punkte {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 18px 0 6px;
}
.punkte span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.6px solid rgba(212, 175, 55, .55);
  transition: background .15s, transform .15s, box-shadow .2s, border-color .15s;
}
/* Gefüllter Punkt: glühendes Gold mit kurzem Aufpoppen. */
.punkte span.voll {
  background: radial-gradient(circle at 35% 30%, #fff6d8, var(--gold) 55%, var(--gold-tief));
  border-color: var(--gold-hell);
  transform: scale(1.15);
  box-shadow: 0 0 14px rgba(212, 175, 55, .85), 0 0 30px rgba(212, 175, 55, .35);
}
@media (prefers-reduced-motion: no-preference) {
  .punkte span.voll { animation: punktPop .28s cubic-bezier(.2, 1.6, .4, 1); }
  @keyframes punktPop {
    0%   { transform: scale(.5); }
    60%  { transform: scale(1.35); }
    100% { transform: scale(1.15); }
  }
}
/* Fehler: die Punkte schlagen rot aus und das ganze Feld glüht kurz. */
.punkte.fehler span {
  border-color: var(--rot);
  box-shadow: 0 0 12px rgba(224, 66, 54, .55);
}
.punkte.fehler span.voll { background: radial-gradient(circle at 35% 30%, #ffd9d5, var(--rot) 55%, var(--rot-tief)); }
.punkte.wackeln { animation: wackeln .4s ease; }

@keyframes wackeln {
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}

.meldung {
  text-align: center;
  font-size: 13px;
  color: var(--rot);
  min-height: 18px;
  margin-top: 4px;
  text-shadow: 0 0 12px rgba(224, 66, 54, .4);
}

/* ── Tastenfeld ─────────────────────────────────────────────────────── */

.tastenfeld {
  display: grid;
  grid-template-columns: repeat(3, 72px);
  justify-content: center;
  gap: 13px;
  margin-top: 16px;
}

.tastenfeld button {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, .35);
  background: radial-gradient(circle at 34% 26%, rgba(58, 48, 30, .85), rgba(23, 19, 13, .9) 72%);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 27px;
  font-weight: 600;
  color: var(--gold-hell);
  cursor: pointer;
  box-shadow:
    0 8px 18px -8px rgba(0, 0, 0, .9),
    inset 0 1px 0 rgba(243, 236, 220, .14);
  transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease;
  touch-action: manipulation;
  display: grid;
  place-items: center;
}
/* Druck: die Taste sinkt ein und glüht golden auf. */
.tastenfeld button:active {
  transform: scale(.9);
  border-color: var(--gold-hell);
  box-shadow:
    0 0 18px rgba(212, 175, 55, .8),
    0 0 44px rgba(212, 175, 55, .3),
    inset 0 0 0 2px var(--gold);
}
.tastenfeld .loeschen { color: var(--elfenbein-60); }
.tastenfeld .leer { width: 72px; height: 72px; }
.tastenfeld[data-gesperrt] button { opacity: .35; pointer-events: none; }
/* Während der Sperre pulsiert das Feld leise rot - unmissverständlich. */
.tastenfeld[data-gesperrt] { animation: sperrPuls 1.6s ease-in-out infinite; }
@keyframes sperrPuls {
  0%, 100% { filter: none; }
  50%      { filter: drop-shadow(0 0 14px rgba(224, 66, 54, .5)); }
}

/* ── Install-Leiste (PWA) ───────────────────────────────────────────── */

.installLeiste {
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #1c1608;
  background: linear-gradient(120deg, var(--gold-tief), var(--gold) 55%, #e7c95c);
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  cursor: pointer;
  box-shadow: 0 0 26px -6px rgba(212, 175, 55, .75), inset 0 1px 0 rgba(255, 253, 244, .55);
  transition: transform .1s;
}
.installLeiste:active { transform: scale(.96); }
@media (prefers-reduced-motion: no-preference) {
  .installLeiste { animation: installPuls 2.8s ease-in-out infinite; }
  @keyframes installPuls {
    0%, 100% { box-shadow: 0 0 16px -6px rgba(212, 175, 55, .6), inset 0 1px 0 rgba(255, 253, 244, .55); }
    50%      { box-shadow: 0 0 32px -4px rgba(212, 175, 55, .95), inset 0 1px 0 rgba(255, 253, 244, .55); }
  }
}

.installHinweis {
  max-width: 320px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--elfenbein-60);
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: rgba(23, 19, 13, .6);
  padding: 10px 14px;
}
.installHinweis strong { color: var(--gold-hell); }

/* ── Fuß & Stempel ──────────────────────────────────────────────────── */

.copyright {
  display: inline-block;
  margin-top: 4px;
  color: var(--gold);
  letter-spacing: .18em;
}

.fuss {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--elfenbein-60);
  opacity: .75;
  text-align: center;
  max-width: 100%;
}

.stempelDecke {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(13, 11, 7, .78);
  backdrop-filter: blur(4px);
  z-index: 40;
}

.stempel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 34px;
  border: 4px solid var(--rot);
  border-radius: 10px;
  color: var(--rot);
  transform: rotate(-9deg);
  box-shadow: 0 0 0 2px rgba(224, 66, 54, .3) inset, 0 0 60px rgba(224, 66, 54, .35);
  animation: stempeln .5s cubic-bezier(.2, 1.6, .4, 1) both;
  background: rgba(23, 19, 13, .8);
  text-shadow: 0 0 18px rgba(224, 66, 54, .6);
}
.stempelGross {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: .1em;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.stempelKlein {
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
@keyframes stempeln {
  0% { transform: rotate(-9deg) scale(2.4); opacity: 0; }
  100% { transform: rotate(-9deg) scale(1); opacity: 1; }
}

@media (max-width: 420px) {
  .gitter { gap: 14px 6px; }
  .medaillon { width: 68px; height: 68px; }
  .tastenfeld { grid-template-columns: repeat(3, 66px); gap: 11px; }
  .tastenfeld button, .tastenfeld .leer { width: 66px; height: 66px; }
}

/* ══════════════════════════════════════════════════════════════════════
   HELLES THEMA (Umschalter): der alte Carrara-Marmor-Look mit dem
   hellen Geldspeicher-Bild. html.hell wird VOR dem ersten Malen
   gesetzt (Mini-Script im <head>), Wahl liegt in localStorage.
   ══════════════════════════════════════════════════════════════════════ */

html.hell {
  --gruen: #00a86b;
  --nacht: #f4f1ea;
  --nacht-2: #fffdf4;
  --elfenbein: #2b2721;
  --elfenbein-60: rgba(43, 39, 33, .6);
  --glas: rgba(255, 255, 255, .58);
  --linie: rgba(154, 123, 31, .35);
  --rot: #b3261e;
  --gold-hell: #9a7b1f;
}

html.hell .nachtBild {
  background:
    linear-gradient(180deg, rgba(247, 244, 238, .84), rgba(244, 241, 234, .87) 45%, rgba(236, 231, 219, .9)),
    url("assets/tresor-bg.jpg") center top / cover no-repeat,
    #f4f1ea;
}
html.hell .funkenFeld { display: none; }

html.hell .karte {
  border: 1px solid rgba(255, 255, 255, .8);
  outline-color: var(--linie);
  box-shadow:
    0 24px 60px -24px rgba(60, 50, 25, .35),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}
html.hell .frage, html.hell .pinName { color: var(--elfenbein); }
html.hell .marke h1 { text-shadow: none; }
html.hell .muenze { filter: drop-shadow(0 2px 6px rgba(154, 123, 31, .35)); }

html.hell .medaillon {
  background: radial-gradient(circle at 32% 28%, #fffdf6, #f3ead0 62%, #e5d5a4);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, .75),
    0 0 0 4px var(--linie),
    0 10px 22px -10px rgba(154, 123, 31, .55);
}
html.hell .operator.frei .medaillon {
  background: rgba(255, 255, 255, .4);
  border-color: rgba(154, 123, 31, .5);
}
html.hell .schloss { background: #fff; box-shadow: none; }

html.hell .punkte span { border-color: var(--gold-hell); box-shadow: none; }
html.hell .punkte span.voll {
  background: linear-gradient(145deg, #f0dc9a, var(--gold) 60%, #9a7b1f);
  border-color: #9a7b1f;
  box-shadow: 0 0 10px rgba(212, 175, 55, .55);
}

html.hell .tastenfeld button {
  background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .55) 70%);
  color: var(--elfenbein);
  border-color: var(--linie);
  box-shadow:
    0 6px 14px -8px rgba(60, 50, 25, .45),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}
html.hell .tastenfeld button:active {
  border-color: var(--gold);
  box-shadow: 0 2px 6px -4px rgba(60, 50, 25, .5), inset 0 0 0 2px #f0dc9a;
}

html.hell .stempelDecke { background: rgba(244, 241, 234, .72); }
html.hell .stempel { background: rgba(255, 255, 255, .5); text-shadow: none; box-shadow: 0 0 0 2px rgba(179, 38, 30, .25) inset; }
html.hell .installHinweis { background: rgba(255, 255, 255, .6); }
html.hell .meldung { text-shadow: none; }

/* ── Umschalt-Knopf (Sonne/Mond, oben rechts) ───────────────────────── */

.designSchalter {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: 14px;
  z-index: 25;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: var(--glas);
  color: var(--gold);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6);
  transition: transform .12s ease;
  touch-action: manipulation;
}
.designSchalter:active { transform: scale(.9) rotate(20deg); }
.designSchalter .mond { display: none; }
html.hell .designSchalter .mond { display: block; }
html.hell .designSchalter .sonne { display: none; }
html.hell .designSchalter { color: var(--gold-hell); box-shadow: 0 6px 14px -8px rgba(60, 50, 25, .45); }

/* ── Info-Knopf (oben links) + Info-Blatt ───────────────────────────── */

.infoKnopf {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  left: 14px;
  z-index: 25;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: var(--glas);
  color: var(--gold);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6);
  transition: transform .12s ease;
  touch-action: manipulation;
}
.infoKnopf:active { transform: scale(.9); }
html.hell .infoKnopf { color: var(--gold-hell); box-shadow: 0 6px 14px -8px rgba(60, 50, 25, .45); }

.infoDecke {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 20px;
}
.infoBlatt {
  width: min(430px, 100%);
  max-height: 84vh;
  overflow: auto;
  background: linear-gradient(180deg, #1c1710, #14100a);
  border: 1px solid rgba(212, 175, 55, .4);
  border-radius: 22px;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
}
.infoTitel {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 23px;
  font-weight: 700;
  color: var(--gold-hell);
  text-align: center;
}
.infoPunkt {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--elfenbein, #f3ecdc);
  border-left: 2px solid rgba(212, 175, 55, .45);
  padding-left: 12px;
}
.infoPunkt b { color: var(--gold-hell); }
.infoZu {
  font: inherit;
  font-weight: 700;
  font-size: 14.5px;
  margin-top: 4px;
  color: #1c1608;
  background: linear-gradient(120deg, var(--gold-tief, #9a7b1f), var(--gold) 55%, #e7c95c);
  border: 0;
  border-radius: 999px;
  padding: 12px 26px;
  cursor: pointer;
  align-self: center;
}
html.hell .infoBlatt { background: #faf7f0; border-color: rgba(154, 123, 31, .35); }
html.hell .infoPunkt { color: #2b2721; }
html.hell .infoZu { color: #fff; }