/* Stylesheet der Loginseite. Nutzt dieselben Schriftdateien und Farben wie
   die Hauptseite und die Rechtsseiten, damit der Einstieg dazugehört. */

@font-face{font-family:"WS Serif";src:url(_assets/fonts/8dcc63e6bd4f6d41561f68dbc75529a1.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"WS Script";src:url(_assets/fonts/8e68c673f929a861181f97f19770379e.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"WS Sans";src:url(_assets/fonts/058961234c8923ca8739773a0fd671ff.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}

:root{
  --beige:#dfd9c9;
  --brown:#482117;
  --paper:#fff;
  --ink:#231f20;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(1.25rem,5vw,2.5rem);
  background:var(--beige);
  color:var(--ink);
  font-family:"WS Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
}

.karte{
  width:100%;
  max-width:26rem;
  background:var(--paper);
  padding:clamp(2rem,7vw,3.25rem) clamp(1.5rem,6vw,2.75rem);
  text-align:center;
  /* sehr weicher Schatten - die Karte soll auf dem Beige ruhen,
     nicht davor schweben */
  box-shadow:0 1px 2px rgba(35,31,32,.06),0 12px 32px rgba(35,31,32,.08);
}

.script{
  display:block;
  font-family:"WS Script",cursive;
  font-size:clamp(1.9rem,7vw,2.6rem);
  line-height:1;
  color:var(--brown);
  /* Die Schwünge der Schreibschrift ragen unter die Grundlinie - ohne
     Polsterung schneiden sie in die Zeile darunter. */
  padding-bottom:.34em;
}

h1{
  margin:.2em 0 0;
  font-family:"WS Serif",Georgia,serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:clamp(.82rem,3vw,.95rem);
  color:var(--brown);
}

.hinweis{
  margin:1.5em 0 1.9em;
  font-size:.95rem;
  color:#5c5450;
}

label{
  display:block;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#6b625d;
  margin-bottom:.45em;
}

input{
  width:100%;
  padding:.45em .2em;
  border:0;
  border-bottom:1px solid #c9c2b2;
  border-radius:0;           /* iOS rundet Felder sonst selbstständig ab */
  background:transparent;
  color:var(--ink);
  font-family:"WS Serif",Georgia,serif;
  font-size:1.25rem;
  letter-spacing:.06em;
  text-align:center;
  transition:border-color .2s;
}
input:focus{
  outline:none;
  border-bottom-color:var(--brown);
}

button{
  width:100%;
  margin-top:1.6em;
  padding:.9em 1em;
  border:0;
  border-radius:0;
  background:var(--brown);
  color:var(--beige);
  font-family:"WS Sans",system-ui,sans-serif;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  cursor:pointer;
  transition:background .2s;
}
button:hover,button:focus-visible{background:#5d2d20}

/* Fehlermeldung belegt ihren Platz dauerhaft, damit die Karte beim
   Einblenden nicht springt. */
.fehler{
  min-height:1.25em;
  margin:.85em 0 0;
  font-size:.85rem;
  color:#8c2f1d;
}
.fehler:empty{visibility:hidden}

@media (prefers-reduced-motion:no-preference){
  .karte.wackelt{animation:wackeln .4s}
}
@keyframes wackeln{
  25%{transform:translateX(-6px)}
  50%{transform:translateX(6px)}
  75%{transform:translateX(-3px)}
}