/* Startseite: Anmeldezeile, Impressum/Datenschutz, Statusmeldung */

/* Rahmen fester Hoehe – die Panels sitzen darin freigestellt,
   damit der Kopf beim Umschalten nicht springt */
.panelwrap{position:relative; margin:64px auto 0; max-width:440px; height:32px}
.panelwrap.wide{max-width:none}

.loginline{display:flex; align-items:center; gap:9px; width:100%}
.loginline[hidden]{display:none}
.arrow{
  width:9px; flex-shrink:0; color:var(--ink);
  font-size:12px; line-height:1; opacity:0; user-select:none;
}
.loginline:focus-within .arrow{opacity:1; animation:blink .85s step-end infinite}
.loginline label{flex-shrink:0; font-size:13px; font-weight:700; letter-spacing:.1em}

.ctl{
  flex:1; min-width:0; font-family:inherit; font-size:14px; color:var(--ink);
  background:transparent; padding:5px 2px 6px;
  border:0; border-radius:0; outline:none;
  caret-color:transparent;                      /* kein Cursor, solange leer */
}
.ctl::placeholder{color:#9a978c; opacity:1}
.ctl:not(:placeholder-shown){caret-color:var(--ink)}

/* ---------- Impressum / Datenschutz ---------- */
.imprint{
  position:absolute; top:0; left:0; right:0;    /* traegt nicht zur Hoehe bei */
  font-size:12px; line-height:1.7; color:var(--ink2);
}
.imprint[hidden]{display:none}
.imprint h2{
  margin:0 0 14px; font-size:12px; font-weight:700; letter-spacing:.12em;
  color:var(--ink); text-transform:uppercase;
}
.imprint b{color:var(--ink); font-weight:700}
.imprint .block{margin-bottom:13px}
.imprint a{color:inherit; text-decoration:underline; text-underline-offset:2px}

/* Datenschutz: Beschriftung links, Text rechts, je eine Zeile */
#privacy{
  font-size:11.5px; line-height:1.6;
  left:50%; right:auto; transform:translateX(-50%);
  width:max-content; max-width:96vw;
}
#privacy dl{
  display:grid; grid-template-columns:max-content 1fr;
  column-gap:26px; row-gap:9px; margin:0;
}
#privacy dt{font-weight:700; color:var(--ink); white-space:nowrap}
#privacy dd{margin:0; white-space:nowrap}
@media (max-width:1100px){          /* zu schmal fuer eine Zeile -> umbrechen */
  #privacy{width:auto; left:0; right:0; transform:none; max-width:100%}
  #privacy dd{white-space:normal}
}
@media (max-width:640px){
  #privacy dl{grid-template-columns:1fr; row-gap:3px}
  #privacy dd{margin-bottom:7px}
}

/* ---------- Statusmeldung ---------- */
.status{
  margin:20px 0 0; text-align:center; font-size:13px; font-weight:700;
  letter-spacing:.14em; min-height:19px; visibility:hidden;
}
.status.on{
  visibility:visible;
  animation:flash .5s step-end 3,            /* dreimal blinken   */
            fadeout 1.4s ease 4.5s forwards; /* 3s stehen, dann weg */
}
.status.denied {color:#b3121f}
.status.retry  {color:#9a6b00}
.status.granted{color:#1f7a3d; animation:none}
@keyframes flash{50%{opacity:0}}
@keyframes fadeout{to{opacity:0}}

.toggle{
  position:fixed; left:50%; bottom:10px; transform:translateX(-50%); z-index:10;
  display:flex; gap:16px; font-size:10px; letter-spacing:.09em; user-select:none;
}
.toggle span{color:var(--ink2); cursor:pointer}
.toggle span:hover{color:var(--ink)}
.toggle span.on{color:var(--ink); font-weight:700}

@media (max-width:600px){
  /* Die Startseite traegt nur Kopf und eine Zeile – sie darf tiefer sitzen
     als das Menue. vh bezieht sich auf iOS aufs grosse Fenster, die Seite
     springt beim Aufklappen der Tastatur also nicht. */
  body.centered{padding-top:22vh}
  .panelwrap{margin:56px auto 0}
  /* 16px verhindert, dass iOS beim Antippen hineinzoomt */
  .ctl{font-size:16px; padding:8px 2px}
  .loginline label{font-size:14px}
  .imprint{font-size:11.5px; line-height:1.75}
  .status{font-size:12px; letter-spacing:.1em}
  .toggle{font-size:11px; gap:22px; bottom:12px}
}