:root { color-scheme: light dark; }
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0; min-height: 100svh; overflow-x: hidden; display: grid; place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  font: 16px/1.5 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  background: Canvas; color: CanvasText;
}
.card {
  width: 100%; max-width: 26rem; padding: 1.5rem 1.25rem;
  border: 1px solid color-mix(in srgb, CanvasText 15%, transparent);
  border-radius: 14px;
}
h1 { font-size: 1.3rem; margin: 0 0 .5rem; }
p { margin: .5rem 0; }
label { display: block; margin: 1rem 0 .25rem; font-weight: 600; }
input[type=email] {
  width: 100%; padding: .7rem .8rem; font-size: 1rem; border-radius: 10px;
  border: 1px solid color-mix(in srgb, CanvasText 30%, transparent); background: Field; color: FieldText;
}
altcha-widget { display: block; margin: 1rem 0; }
/* ALTCHA visuell ausblenden, aber funktional im DOM lassen (auto="onsubmit" loest beim Absenden).
   Standard "visually-hidden"-Pattern — kein display:none, damit das Widget weiter rechnet. */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
button {
  width: 100%; padding: .8rem 1rem; font-size: 1rem; font-weight: 600;
  border: 0; border-radius: 10px; cursor: pointer; margin-top: .5rem;
  background: AccentColor; color: AccentColorText;
}
.hint { font-size: .85rem; opacity: .7; }
/* Button-Optik für einen Link (Admin-Handoff „Weiter zum Portal-Login"). Spiegelt `button`. */
.btn {
  display: block; width: 100%; padding: .8rem 1rem; font-size: 1rem; font-weight: 600;
  border-radius: 10px; margin-top: .5rem; text-align: center; text-decoration: none;
  background: AccentColor; color: AccentColorText;
}
.btn:active { filter: brightness(.92); }
.code-box {
  margin-top: 1.25rem; padding-top: .75rem;
  border-top: 1px solid color-mix(in srgb, CanvasText 12%, transparent);
}
.code-box summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.code-box input[type=text] {
  width: 100%; padding: .7rem .8rem; font-size: 1rem; border-radius: 10px; margin-top: .25rem;
  border: 1px solid color-mix(in srgb, CanvasText 30%, transparent); background: Field; color: FieldText;
}
button:active { filter: brightness(.92); }   /* iOS hat kein :hover — :active geben */
/* Sprachumschalter: kleine, dezente Zeile oben in der Card, umbruchfaehig auf schmalen Screens */
.lang-switcher {
  display: flex; flex-wrap: wrap; gap: .15rem .5rem; justify-content: flex-end;
  margin: -.25rem 0 .75rem; font-size: .8rem;
}
.lang-switcher a, .lang-switcher .lang-current { text-decoration: none; padding: .1rem .15rem; }
.lang-switcher a { color: inherit; opacity: .6; }
.lang-switcher a:active { opacity: 1; }
.lang-switcher .lang-current { font-weight: 600; opacity: 1; }
@media (hover: hover) { .lang-switcher a:hover { opacity: 1; text-decoration: underline; } }