/* Stil der Anmeldeseite — site/anmeldung.php.
   Sie ist die erste Seite, die jemand vom internen Bereich sieht, und darf
   deshalb eigenständiger sein als site/stil.css. Gleiche Mittel wie dort:
   Systemschriften, keine externe Schrift, kein Bild, kein CDN, hell und dunkel
   über prefers-color-scheme.

   Der Gedanke: eine Karte, die geprägt aussieht statt aufgeklebt. Deshalb
   nirgends ein weicher Schlagschatten aus dem Baukasten, sondern durchweg
   Kanten — eine dunkle Linie unten, eine helle Linie oben. Das ist alles, was
   ein Relief ausmacht, und es passt zu einem Betrieb, der prägt. Die
   Eingabefelder sind eingeprägt (Schatten innen), der Knopf ist erhaben
   (Lichtkante innen oben). */

:root {
  color-scheme: light dark;

  --grund: #f2f1ee;          /* Papier, nicht Bildschirmweiss */
  --karte: #fdfdfc;
  --feld: #f7f6f3;
  --rand: #e3e0da;
  --rand-stark: #cbc7bf;
  --kante-licht: #fff;       /* die Lichtkante der Prägung */
  --kante-tief: rgba(0, 0, 0, .13);
  --schatten: rgba(30, 25, 15, .16);

  --text: #1a1a1a;
  --text-leise: #57544e;
  --text-sehr-leise: #8b877f;

  --akzent: #1f4d8f;         /* derselbe Blauton wie in site/stil.css */
  --akzent-tief: #16386a;
  --akzent-text: #fff;

  --radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Im Dunkeln trägt eine Prägung nur, wenn beide Kanten wirklich zu sehen
       sind: die dunkle muss dunkler als die Karte sein, die helle heller. */
    --grund: #0e0e0d;
    --karte: #1e1e1c;
    --feld: #141413;
    --rand: #34332f;
    --rand-stark: #45433e;
    --kante-licht: rgba(255, 255, 255, .11);
    --kante-tief: #000;
    --schatten: rgba(0, 0, 0, .7);

    --text: #eceae6;
    --text-leise: #a6a199;
    --text-sehr-leise: #7c7770;

    --akzent: #6fa4ea;
    --akzent-tief: #4f83c6;
    --akzent-text: #0f1e35;
  }
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  padding: 2rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--grund);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

/* Wo dvh gilt, ist es genauer: die Adresszeile mobiler Browser zählt nicht mit. */
@supports (height: 100dvh) {
  body { min-height: 100dvh; }
}

.anmeldung {
  width: 100%;
  max-width: 23rem;
}

/* ------------------------------------------------------------------- Karte */

.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 2rem 1.75rem 1.75rem;
  display: grid;
  gap: 1rem;

  /* Die Prägung: Lichtkante innen oben, dunkle Kante unten, und ganz zuletzt
     ein sehr flacher, breiter Schatten, der die Karte hebt, ohne zu schweben. */
  box-shadow:
    inset 0 1px 0 var(--kante-licht),
    0 1px 0 var(--kante-tief),
    0 18px 36px -30px var(--schatten);
}

/* ------------------------------------------------------------------- Kopf */

.kopf {
  display: grid;
  justify-items: center;
  gap: .15rem;
  text-align: center;
}

.zeichen {
  color: var(--text-sehr-leise);
  margin-bottom: .5rem;
  /* Auch das Zeichen wirkt geprägt: eine Lichtkante direkt darunter. */
  filter: drop-shadow(0 1px 0 var(--kante-licht));
}

.kopf h1 {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.bereich {
  margin: 0;
  font-size: .8125rem;
  color: var(--text-sehr-leise);
  letter-spacing: .02em;
}

/* Die geprägte Linie. Kein Element mit Höhe, nur zwei Kanten übereinander:
   oben dunkel, unten hell — so liest das Auge eine Rille. */
.praegelinie {
  height: 0;
  margin: .35rem 0 .25rem;
  border-top: 1px solid var(--kante-tief);
  border-bottom: 1px solid var(--kante-licht);
}

/* ---------------------------------------------------------------- Meldung */

/* Ruhig gesetzt, kein roter Schreckbalken: eine Kante links, sonst nichts.
   Wer sich vertippt hat, hat nichts falsch gemacht, was eine Warnfarbe
   verdient. */
.meldung {
  margin: 0;
  padding: .55rem .8rem;
  border-left: 2px solid var(--rand-stark);
  background: var(--feld);
  border-radius: 0 6px 6px 0;
  font-size: .875rem;
  color: var(--text-leise);
}

/* ----------------------------------------------------------------- Felder */

.feld {
  display: grid;
  gap: .3rem;
}

.feld > span {
  font-size: .8125rem;
  color: var(--text-leise);
}

.feld input {
  font: inherit;
  font-size: 1rem;          /* nicht kleiner: sonst zoomt iOS beim Antippen */
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--rand-stark);
  border-radius: 8px;
  background: var(--feld);
  color: var(--text);
  /* Eingeprägt: der Schatten liegt innen oben. */
  box-shadow: inset 0 1px 2px var(--kante-tief);
}

.feld input:hover { border-color: var(--text-sehr-leise); }

.feld input:focus-visible,
.knopf:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

/* Chrome färbt ausgefüllte Felder gelb. Das passt hier nicht und lässt sich
   nur über den inneren Schatten übermalen. */
.feld input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: inset 0 0 0 100px var(--feld);
}

/* ------------------------------------------------------------------ Knopf */

.knopf {
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  width: 100%;
  margin-top: .25rem;
  padding: .65rem 1rem;
  border: 1px solid var(--akzent-tief);
  border-radius: 8px;
  background: var(--akzent);
  color: var(--akzent-text);
  cursor: pointer;
  /* Erhaben: Lichtkante innen oben, dunkle Kante darunter. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 1px 0 var(--kante-tief);
}

.knopf:hover { background: var(--akzent-tief); }

/* Beim Drücken sinkt der Knopf ein — dieselbe Prägung, nur umgekehrt. */
.knopf:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3);
  transform: translateY(1px);
}

/* --------------------------------------------------------------- Fusszeile */

.fuss {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--text-sehr-leise);
}

/* ------------------------------------------------------------ schmale Geräte */

@media (max-width: 22.5rem) {
  body { padding: 1.25rem .75rem; }
  .karte { padding: 1.5rem 1.15rem 1.25rem; }
  .kopf h1 { font-size: 1.0625rem; }
  .bereich { font-size: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .knopf:active { transform: none; }
}