/* Estate Art: Anmelden und neues Passwort. Eine Galeriewand bei Nacht: links das gerahmte Aquarell der Gartenstraße 8
   unter einer Bilderleuchte, daneben die Karte wie ein Bildschild. Beim Anmelden dreht sich der goldene Schlüssel
   und eine Blende öffnet den Partnerbereich. Regeln in estateart/DESIGN.md, Abschnitt Anmelden. */

.wand {
  --licht: 0;
  position: relative; min-height: 100svh; overflow: hidden; isolation: isolate;
  display: grid; grid-template-rows: auto 1fr; padding: 28px var(--rand) 40px;
  background-color: var(--nacht);
  background-image:
    radial-gradient(ellipse 52% 46% at 38% 12%, rgba(255, 222, 168, calc(.13 * var(--licht))) 0%, rgba(255, 222, 168, 0) 70%),
    var(--dunkel-licht);
  color: var(--auf-dunkel);
}
/* Feine Struktur der Wand, damit sie nicht wie eine Fläche aus dem Rechner wirkt */
.wand::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1.2px);
  background-size: 3px 3px;
}
.wand-kopf { display: flex; align-items: center; justify-content: space-between; }
.wand-kopf .marke-zeichen { width: 132px; }
.wand-kopf a { color: var(--auf-dunkel-weich); font-size: var(--t-klein); text-decoration: none; }

.galerie {
  align-self: center; justify-self: center; width: min(1180px, 100%);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .9fr); align-items: start; gap: clamp(40px, 5vw, 88px);
  padding-top: clamp(28px, 5vh, 64px);
}

/* ---------- Das Bild mit Leuchte ---------- */
.bild { position: relative; margin: 0; }
.leuchte {
  position: absolute; left: 50%; top: -34px; width: 42%; height: 13px; transform: translateX(-50%); z-index: 2; border-radius: 7px;
  background: linear-gradient(180deg, #E7CB93 0%, #B48C55 46%, #6E5332 100%);
  box-shadow: inset 0 1px 0 rgba(255, 246, 222, .7), 0 6px 14px -6px rgba(0, 0, 0, .7);
}
.leuchte::before, .leuchte::after { /* Halter, die hinter dem Rahmen verschwinden */
  content: ""; position: absolute; top: 10px; width: 3px; height: 26px; background: linear-gradient(90deg, #6E5332, #B48C55); border-radius: 2px;
}
.leuchte::before { left: 18%; } .leuchte::after { right: 18%; }
.bild .rahmen { aspect-ratio: 7 / 5; }
.bild .pp { height: 100%; display: grid; align-content: center; }
.bild .aq { height: 100%; min-height: 0; aspect-ratio: auto; }
/* Licht der Leuchte auf dem Bild: oben hell, nach unten weich */
.bild .rahmen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: var(--licht);
  background: radial-gradient(ellipse 70% 60% at 50% -8%, rgba(255, 236, 200, .32), rgba(255, 236, 200, 0) 72%);
  mix-blend-mode: soft-light;
}

/* ---------- Die Karte ---------- */
.karte {
  position: relative; display: grid; gap: 22px; padding: clamp(28px, 3vw, 40px);
  background: linear-gradient(180deg, #FBFAF6 0%, var(--papier) 100%); color: var(--tinte);
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 1px 2px rgba(0, 0, 0, .25), 0 30px 60px -30px rgba(0, 0, 0, .75);
}
#ansichtAnmelden, #ansichtVergessen { display: grid; gap: 22px; }
.karte h1 { font: 400 clamp(2.6rem, 1.9rem + 2.2vw, 3.6rem)/1 var(--serif); letter-spacing: -.025em; margin: 0; }
.karte h1 em { font-style: italic; }
.karte h1:focus { outline: none; }   /* Ziel beim Umschalten, kein sichtbarer Rahmen */
.karte .lead { margin: -6px 0 0; color: var(--grau); font-size: 1rem; line-height: 1.55; max-width: 34ch; }
.karte form { display: grid; gap: 16px; }
.karte .feld input { background: #FFFFFF; border-color: #CFCCC4; }
.karte .feld input:focus { border-color: #B4925E; box-shadow: 0 0 0 4px rgba(200, 166, 118, .28); }
.karte .feld input[aria-invalid="true"] { border-color: var(--warnung); }

/* Passwortfeld mit Knopf zum Zeigen */
.pw { position: relative; }
.pw input { padding-right: 56px; }
.pw button {
  position: absolute; right: 6px; top: 50%; width: 44px; height: 44px; transform: translateY(-50%);
  display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--grau); cursor: pointer;
}
.pw button svg { width: 20px; height: 20px; }
.pw button:focus-visible { outline: 2px solid #B4925E; outline-offset: 0; }
.pw button .zu { display: none; }
.pw button[aria-pressed="true"] .auf { display: none; }
.pw button[aria-pressed="true"] .zu { display: block; }

.zeile-klein { display: flex; justify-content: flex-end; margin-top: -6px; }
.leise-link {
  border: 0; background: none; padding: 6px 0; font: 500 var(--t-klein)/1.3 var(--sans); color: var(--tanne); cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(27, 42, 68, .3); text-underline-offset: 4px;
}
.leise-link:focus-visible { outline: 2px solid #B4925E; outline-offset: 3px; border-radius: 4px; }
.karte .meldung:not(:empty) { margin: -4px 0 0; }

/* Knopf mit Schlüssel. Der Schlüssel dreht sich beim Erfolg und hakt bei einem Fehler. */
.karte .knopf { width: 100%; }
.schluessel { width: 26px; height: 26px; flex: none; color: var(--knopf-gold-hell); transform-origin: 30% 50%; }
.knopf[aria-busy="true"] { cursor: progress; }
.schluessel.dreht { transition: transform 300ms var(--ease-in-out); transform: rotate(90deg); }
.schluessel.hakt { animation: haken 380ms var(--ease-out); }
@keyframes haken { 0% { transform: rotate(0); } 30% { transform: rotate(16deg); } 62% { transform: rotate(-7deg); } 100% { transform: rotate(0); } }

.karte .fuss-zeile { margin: 2px 0 0; padding-top: 18px; border-top: 1px solid #DCD9D1; font-size: var(--t-klein); color: var(--grau); }
.karte .fuss-zeile a { color: var(--tanne); font-weight: 560; text-underline-offset: 4px; }
.gesendet { display: grid; gap: 14px; }
.gesendet p { margin: 0; line-height: 1.55; }
[hidden] { display: none !important; }

/* Blende: öffnet sich vom Knopf aus in die helle Fläche des Partnerbereichs */
.blende { position: fixed; inset: 0; z-index: 50; background: #F6F6F3; pointer-events: none; clip-path: circle(0 at var(--bx, 50%) var(--by, 50%)); }
.blende.auf { transition: clip-path 620ms var(--ease-in-out); clip-path: circle(150vmax at var(--bx, 50%) var(--by, 50%)); }

/* Licht geht beim Laden an */
.wand.an { --licht: 1; }
@property --licht { syntax: "<number>"; inherits: true; initial-value: 0; }
.wand { transition: --licht 900ms var(--ease-out); }

/* ---------- Handy ---------- */
@media (max-width: 860px) {
  .wand { padding: 20px 16px 32px; }
  .galerie { grid-template-columns: 1fr; gap: 28px; padding-top: 44px; }
  .bild { width: min(440px, 100%); justify-self: center; }
  .leuchte { top: -26px; height: 11px; }
  .karte { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .wand, .wand.an { transition: none; --licht: 1; }
  .schluessel.dreht, .blende.auf { transition: none; }
  .schluessel.hakt { animation: none; }
}