/* Klarsteg Cockpit – Anmeldung und Einrichtung. Ruhig, dunkel, nur das Nötigste. */
:root {
  --tuerkis: #6FD0C1;          /* exakt der mittlere Punkt im Logo */
  --tuerkis-hell: #8EDDD1;
  --tuerkis-text: #0B2530;
  --grund: #112C39;            /* Randfarbe des Hintergrundbilds */
  --feld: rgba(6, 22, 30, .55);
  --feld-rand: rgba(255, 255, 255, .16);
  --text: #F2F6F7;
  --text-leise: rgba(242, 246, 247, .62);
  --rot: #E5A3A3;              /* gedämpftes Rot */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body.anmeldeseite {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--grund);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Hintergrundbild: wird per Skript so platziert, dass Logo, Schriftzug und Anmeldefeld
   immer vollständig sichtbar sind. Ohne Skript: einfach bildschirmfüllend. */
.hg {
  position: fixed;
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  object-fit: cover; object-position: center;
  user-select: none; pointer-events: none;
}
/* Wenn das Bild nicht ganz füllt, verlaufen die Ränder weich in die Grundfarbe */
body.hg-klein .hg {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%);
}

/* Das schwebende Feld */
.panel {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translateX(-50%);
  width: min(360px, calc(100vw - 32px));
  background: rgba(14, 38, 50, .58);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .2);
  overflow: hidden;
  opacity: 0;
  transition: opacity .4s ease;
}
.panel.bereit { opacity: 1; }
.panel.breit { width: min(420px, calc(100vw - 32px)); }
.panel-innen { transition: height .4s cubic-bezier(.2, .8, .2, 1); }

/* Stufen gleiten nebeneinander */
.stufen {
  display: flex;
  align-items: flex-start;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.stufe { flex: 0 0 100%; min-width: 0; padding: 26px 24px 24px; }  /* min-width: Inhalt darf die Stufe nicht verbreitern */
@media (prefers-reduced-motion: reduce) {
  .stufen, .panel-innen, .panel { transition: none; }
}

form { display: flex; flex-direction: column; gap: 12px; margin: 0; }

.feld {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  font: inherit;
  font-size: 17px;               /* ab 16 px zoomt das iPhone nicht hinein */
  color: var(--text);
  background: var(--feld);
  border: 1px solid var(--feld-rand);
  border-radius: 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.feld::placeholder { color: rgba(242, 246, 247, .42); }
.feld:focus { border-color: var(--tuerkis); box-shadow: 0 0 0 3px rgba(111, 208, 193, .18); }
.feld:-webkit-autofill,
.feld:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px #0b2029 inset;
  caret-color: var(--text);
}

.code-feld {
  min-height: 68px;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: .42em;
  text-indent: .42em;            /* gleicht den Abstand nach der letzten Ziffer aus */
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.code-feld.notfall { font-size: 24px; letter-spacing: .12em; text-indent: .12em; }
.code-feld::placeholder { letter-spacing: .42em; color: rgba(242, 246, 247, .25); }

.knopf-tuerkis {
  min-height: 52px;
  margin-top: 4px;
  font: inherit;
  font-size: 17px;
  font-weight: 650;
  color: var(--tuerkis-text);
  background: var(--tuerkis);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color .15s, transform .05s;
  touch-action: manipulation;
}
.knopf-tuerkis:hover { background: var(--tuerkis-hell); }
.knopf-tuerkis:active { transform: scale(.99); }
.knopf-tuerkis:disabled { opacity: .6; cursor: default; }
.knopf-tuerkis:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.knopf-dezent {
  min-height: 44px; font: inherit; font-size: 15px; color: var(--text);
  background: transparent; border: 1px solid var(--feld-rand); border-radius: 10px; cursor: pointer;
}
.knopf-dezent:hover { border-color: rgba(255, 255, 255, .4); }

.link-knopf {
  align-self: center;
  min-height: 40px;
  padding: 4px 8px;
  font: inherit;
  font-size: 14px;
  color: var(--text-leise);
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-knopf:hover { color: var(--text); }

.hinweis-text { margin: 0 0 2px; text-align: center; font-size: 15px; color: var(--text-leise); }
.titel { margin: 0 0 4px; font-size: 18px; font-weight: 650; text-align: center; }
.klein { font-size: 13px; color: var(--text-leise); margin: 0; line-height: 1.45; }

.meldung-fehler {
  margin: 0;
  padding: 2px 2px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--rot);
  text-align: center;
  animation: einblenden .25s ease;
}
@keyframes einblenden { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.wackeln { animation: wackeln .35s ease; }
@keyframes wackeln {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Einrichtung */
.qr {
  align-self: center;
  width: 184px; height: 184px;
  padding: 10px;
  background: #fff;
  border-radius: 12px;
}
.qr svg { display: block; width: 100%; height: 100%; }
details.schluessel { text-align: center; font-size: 14px; color: var(--text-leise); }
details.schluessel summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.schluessel-text {
  margin: 8px 0 0; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 15px;
  color: var(--text); letter-spacing: .04em; word-break: break-all; user-select: all;
}
.codeliste {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px;
  margin: 4px 0; padding: 14px 16px; list-style: none;
  background: var(--feld); border: 1px solid var(--feld-rand); border-radius: 12px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 17px; letter-spacing: .04em;
  text-align: center; user-select: all;
}
.knopfreihe { display: flex; gap: 8px; }
.knopfreihe > * { flex: 1; }
.bestaetigung { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; cursor: pointer; line-height: 1.4; }
.bestaetigung input { width: 22px; height: 22px; flex: 0 0 auto; margin: 0; accent-color: var(--tuerkis); }

.fusszeile {
  position: fixed;
  left: 0; right: 0;
  bottom: max(10px, env(safe-area-inset-bottom));
  text-align: center;
  font-size: 12px;
  letter-spacing: .03em;
  color: rgba(242, 246, 247, .38);
  pointer-events: none;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

/* Beim Ausdrucken der Notfallcodes nur die Codes zeigen */
@media print {
  body.anmeldeseite { background: #fff; color: #000; overflow: visible; }
  .hg, .fusszeile, .nicht-drucken { display: none !important; }
  .panel { position: static; transform: none; opacity: 1; background: none; box-shadow: none; border: none;
           -webkit-backdrop-filter: none; backdrop-filter: none; width: auto; }
  .stufen { transform: none !important; }
  .stufe:not(.aktiv) { display: none; }
  .codeliste { background: none; border: 1px solid #000; color: #000; }
  .klein, .titel { color: #000; }
}