/* ======================================================================
   seite-anmelden.css — was die Anmeldeseite von music.neverglade.de für sich braucht.

   Dritte und letzte Stilquelle dieser Seite: grund.css, bauteile.css,
   dann diese. Bis zum 09.09.2026 stand alles davon in einem <style>
   mitten im Markup – auf fünf Seiten zusammen 4.552 von 6.213 Zeilen
   CSS. Reys Urteil: „Ganz fatal ist dann inline CSS in HTML. Wofür CSS
   auslagern, wenn du es mal so mal so machst."

   Was hier steht, gehört dieser einen Seite. Was mehr als eine Seite
   braucht, gehört in bauteile.css.
   ====================================================================== */

/* Die Tuer vor dem Suno-Prompt-Generator. Wer ohne Sitzung oder als
   Gast auf music.neverglade.de kommt, sieht diese Seite: dasselbe
   Bild wie die Startseite, der Rahmen, ein Satz, ein Knopf. Sie sagt,
   wo man ist und was fehlt - und fuehrt zur Anmeldung auf der
   Hauptdomain, denn nur dort kennt Blizzard eine Rueckadresse. */
:root {



  --frame-color: #DE9B72; --frame-inset: 2.8vmin;--cnr-u: 1.6vmin;
  --frame-mid: rgba(222, 155, 114, .15); --frame-faint: rgba(222, 155, 114, 0);
  --menue-schatten: 0 1px 3px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .55);
}
html, body { height: 100%; }
body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--font-body);
  font-size: 1rem; line-height: 1.6; overflow: hidden; }
video.bg { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.schleier { position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(23,18,15,.30) 0%, rgba(23,18,15,.14) 45%, rgba(23,18,15,.55) 100%); }

/* Der Rahmen selbst steht in /rahmen.css - eine Datei fuer alle
   Seiten. Hier bleibt nur, was dieser Seite gehoert. */
.rahmen { position: fixed; inset: var(--frame-inset); z-index: 7; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }

.buehne { position: fixed; inset: var(--frame-inset); display: grid; place-items: center; text-align: center; }
.karte { max-width: 34em; padding: 2rem; text-shadow: var(--menue-schatten); }
.marke { font-family: var(--font-btn); font-weight: 700; font-size: 1.2rem; letter-spacing: .3em;
  text-indent: .3em; text-transform: uppercase; color: var(--bone); margin: 0 0 .4rem; }
.strich { position: relative; width: 9rem; height: var(--line); margin: 1rem auto 1.8rem;
  background: linear-gradient(to right, transparent, var(--frame-color) 30%, var(--frame-color) 70%, transparent); }
.strich::after { content: ""; position: absolute; left: 50%; top: -3px; width: 7px; height: 7px;
  background: var(--frame-color); transform: translateX(-50%) rotate(45deg); }
p { margin: 0 0 1.2rem; }
.leise { color: var(--muted); font-size: .9rem; }
.warn { color: var(--warn); }
.knopf { display: inline-block; margin-top: .6rem; padding: .7rem 2.2rem;
  font-family: var(--font-btn); font-weight: 700; font-size: .9rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--bone); text-decoration: none;
  border-top: var(--line) solid var(--frame-color); border-bottom: var(--line) solid var(--frame-color);
  background: linear-gradient(to right, rgba(var(--deckung), 0), rgba(var(--deckung), .6) 25%, rgba(var(--deckung), .6) 75%, rgba(var(--deckung), 0));
  transition: color .3s; }
.knopf:hover { color: var(--copper-bright); }
a.zurueck { color: var(--copper); text-decoration: none; letter-spacing: .08em; }
a.zurueck:hover { color: var(--bone); }
/* Telefon: Rahmen mit festen Massen am Rand, Karte mit Luft. */
@media (max-width: 700px) {
  :root { --frame-inset: 8px; --cnr-u: 11px; }
  .karte { padding: 1.4rem 1.2rem; }
  .marke { font-size: 1rem; letter-spacing: .22em; }
}