/* ── Formulare der bisherigen Website in der neuen Gestaltung ───────────────
   Das Anlegen eines Vereins (Overlay, Edge Function self-signup) und das
   Kontaktformular (contact-form) laufen ueber dieselbe script.js wie auf der
   bisherigen Seite. Die Regeln dort lesen ihre Farben aus Tokens (--bg-card,
   --fg, --brand …); hier werden diese Tokens auf die Palette von style.css
   gelegt, damit die Formulare zur neuen Seite passen. */
:root {
  --bg-card: #ffffff;
  --bg-soft: #fbfcfd;
  --fg: var(--ink);
  --fg-muted: var(--muted);
  --brand: var(--blue);
  --brand-soft: #2569a6;
  --brand-ink: #ffffff;
  --bg: var(--cream);
  --radius: 20px;
}

/* Die alte Seite kennt .btn-primary, die neue .primary. */
.btn-primary { background: var(--yellow); color: var(--navy); cursor: pointer; font: inherit; font-weight: 950; }
.btn-primary:disabled { opacity: .6; cursor: default; }
.btn[hidden] { display: none; }

/* ── Verein anlegen: Overlay ─────────────────────────────────────────────── */
.signup-captcha:not(:empty) { margin-top: 4px; }
.signup-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 20px;
  background: rgba(16, 42, 67, .62); overflow-y: auto;
}
.signup-overlay[hidden] { display: none; }
.signup-box {
  position: relative; width: min(36rem, 100%);
  background: var(--bg-card); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px 22px; box-shadow: var(--shadow);
}
.signup-box h2 { margin: 0 0 8px; font-size: 1.4rem; letter-spacing: -.02em; }
.signup-lead { margin: 0 0 16px; color: var(--fg-muted); font-size: 1rem; }
.signup-x {
  position: absolute; top: 10px; right: 12px; width: 34px; height: 34px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--bg-soft);
  color: var(--fg); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.signup-x:hover { border-color: var(--brand); color: var(--brand); }
.signup-box label { display: block; margin-bottom: 12px; font-size: 1rem; font-weight: 700; }
.signup-box input {
  display: block; width: 100%; margin-top: 5px; padding: 10px 12px;
  font: inherit; font-weight: 400; color: var(--fg); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 10px;
}
.signup-box input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.signup-hint { display: block; margin-top: 4px; color: var(--fg-muted); font-size: .875rem; font-weight: 400; }
.signup-pw { position: relative; display: block; }
.signup-pw input { width: 100%; padding-right: 2.75rem; }
.signup-eye {
  position: absolute; top: 50%; right: .35rem; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; padding: 0; background: none; border: 0;
  border-radius: 50%; cursor: pointer; color: var(--muted);
}
.signup-eye:hover { background: rgba(127, 127, 127, .12); }
.signup-eye svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.signup-eye.is-on { color: var(--brand); }
.signup-pwbar { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.signup-pwbar[hidden] { display: none; }
.signup-pwbar__track { display: flex; flex: 1; gap: 3px; }
.signup-pwbar__track i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); transition: background-color .15s ease; }
.signup-pwbar__level { font-size: .875rem; font-weight: 700; white-space: nowrap; }
.signup-pwbar.is-weak   .signup-pwbar__track i.on { background: #c2543f; }
.signup-pwbar.is-medium .signup-pwbar__track i.on { background: #b37700; }
.signup-pwbar.is-good   .signup-pwbar__track i.on { background: #3d8b3d; }
.signup-pwbar.is-strong .signup-pwbar__track i.on { background: #2e7d32; }
.signup-pwbar.is-weak   .signup-pwbar__level { color: #c2543f; }
.signup-pwbar.is-medium .signup-pwbar__level { color: #b37700; }
.signup-pwbar.is-good   .signup-pwbar__level { color: #3d8b3d; }
.signup-pwbar.is-strong .signup-pwbar__level { color: #2e7d32; }
.signup-pwtips[hidden], .signup-pwmatch[hidden] { display: none; }
.signup-pwmatch.is-bad { color: #c2543f; font-weight: 700; }
.signup-pwmatch.is-ok  { color: #3d8b3d; }
.signup-msg:empty { display: none; }
.signup-msg { margin: 4px 0 14px; padding: 10px 12px; border-radius: 10px; font-size: 1rem; border: 1px solid var(--line); background: var(--bg-soft); }
.signup-msg.is-ok { border-color: var(--green); }
.signup-msg.is-error { border-color: #c2543f; }
.signup-box .btn { width: 100%; }
.signup-legal { margin: 12px 0 0; color: var(--fg-muted); font-size: .875rem; text-align: center; }
.signup-legal a { text-decoration: underline; }

/* ── Kontaktformular ─────────────────────────────────────────────────────── */
.contact-form {
  display: grid; gap: 14px; max-width: 760px;
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 26px; box-shadow: 0 10px 30px #102a430b;
}
.contact-form[hidden] { display: none; }
.cf-row { display: grid; gap: 14px; }
.cf-row--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .cf-row--2 { grid-template-columns: 1fr; } }
.cf-field { display: grid; gap: 6px; font-size: 1rem; font-weight: 700; }
.cf-field > span { color: var(--ink); }
.cf-field em { font-style: normal; font-weight: 400; color: var(--muted); }
.cf-field input, .cf-field select, .cf-field textarea {
  font: inherit; font-weight: 400; color: var(--ink); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%;
}
.cf-field textarea { resize: vertical; min-height: 140px; }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus {
  outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand);
}
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-captcha:empty { display: none; }
.cf-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cf-msg { margin: 0; font-size: 1rem; color: var(--muted); }
.cf-msg--ok { color: var(--green); font-weight: 700; }
.cf-msg--fehler { color: #c2543f; font-weight: 700; }
.cf-note { margin: 0; color: var(--muted); font-size: .875rem; }
.cf-note a { text-decoration: underline; }

/* ── Formulare auf dem Smartphone ──────────────────────────────────────────
   Gewuenscht (02.10.2026): „Die Formulare muessen fuer Smartphone optimiert
   werden."

   * 16 px Schrift in jedem Feld: Darunter zoomt das iPhone beim Antippen in
     die Seite hinein und bleibt dort.
   * Tippflaechen von 44 px fuer Schliessen und das Passwort-Auge — 32 bis
     34 px trifft man mit dem Daumen nicht sicher.
   * Ein angetipptes Feld rutscht nicht unter die feste Kopfzeile. */
input, select, textarea { scroll-margin-top: 100px; }
@media (max-width: 600px) {
  .signup-box input, .cf-field input, .cf-field select, .cf-field textarea { font-size: 16px; }
  .signup-box input, .cf-field input, .cf-field select { min-height: 48px; }

  /* Verein anlegen: ein Blatt ueber den ganzen Schirm statt einer Karte mit
     Rand — jeder Pixel Breite gehoert den Feldern. Das Kreuz bleibt beim
     Rollen oben stehen. */
  /* Block statt Raster: Im Raster blieb das Blatt bildschirmhoch, und was
     darueber hinausging, lag auf der durchscheinenden Seite. */
  .signup-overlay { padding: 0; display: block; }
  .signup-overlay[hidden] { display: none; }
  .signup-box {
    width: 100%; min-height: 100%; border: 0; border-radius: 0; box-shadow: none;
    padding: 14px 17px calc(28px + env(safe-area-inset-bottom));
  }
  .signup-x {
    position: sticky; top: 8px; float: right; z-index: 2;
    width: 44px; height: 44px; margin: 0 -6px 0 10px;
  }
  .signup-box h2 { margin-top: 6px; }
  .signup-eye { width: 44px; height: 44px; right: 2px; }
  .signup-box .btn { min-height: 52px; }

  /* Kontakt: Karte schmaler gerandet, Knopf ueber die volle Breite. */
  .contact-form { padding: 18px 16px; border-radius: 16px; }
  .cf-actions { display: grid; gap: 10px; }
  .cf-actions .btn, .cf-actions button { width: 100%; min-height: 52px; }
}

/* ── Formularseiten: Abo, Passwort zuruecksetzen, Bestaetigungen ──────────
   Sie liefen bis 04.10.2026 mit dem Stylesheet der alten Website
   (styles.css) und einer Huelle darueber (v2-shell.css). Ihre eigenen Regeln
   stehen in den Seiten selbst und lesen Farben aus Tokens (oben); von der
   alten Datei brauchten sie nur Knoepfe, Verweise und die Bestaetigungs-
   karte. Das steht jetzt hier — styles.css und v2-shell.css sind entfallen. */
.formseite { padding-top: 8px; padding-bottom: 48px; }
.formseite section { padding: 0; }
.formseite h1 { letter-spacing: -.03em; color: var(--navy); line-height: 1.15; }
.formseite a:not(.btn) { color: var(--blue); }
.formseite p a:not(.btn), .formseite li a:not(.btn) { text-decoration: underline; text-underline-offset: .15em; }
.formseite button { font-family: inherit; }
.abo-card, .confirm-card, .reset-card { border-radius: 20px !important; box-shadow: 0 10px 30px #102a430b; }
/* Hauptaktionen: gelbe Pille mit dunkler Schrift, wie „Jetzt starten". */
.formseite .btn-primary,
.abo-card button.primary,
.rung button,
.formseite button[type="submit"],
.done-btn {
  background: var(--yellow) !important; color: var(--navy) !important; border: 0 !important;
  border-radius: 999px !important; font-weight: 900 !important; box-shadow: none !important;
}
.formseite .btn-primary:hover,
.abo-card button.primary:hover,
.rung button:hover,
.formseite button[type="submit"]:hover,
.done-btn:hover { filter: brightness(1.04); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; }
.btn-ghost:hover { border-color: var(--blue); }
.formseite input:focus, .formseite select:focus, .formseite textarea:focus {
  outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue);
}
.formseite input, .formseite select, .formseite textarea { scroll-margin-top: 100px; }
.cycle button, .who button { border-radius: 999px !important; }
.rung, .who, .current { border-radius: 16px !important; }
.reset-hint { margin: 6px 0 0; font-size: 14px; color: var(--fg-muted); }

/* Bestaetigungskarte (Verein bestaetigt, Weiterleitungs-Stummel). */
.confirm-card {
  width: min(34rem, calc(100% - 24px)); margin: 64px auto; background: var(--bg-card);
  border: 1px solid var(--line); padding: 30px 26px 26px; text-align: center;
}
.confirm-mark { font-size: 2.2rem; line-height: 1; margin-bottom: 10px; }
.confirm-card h1 { margin: 0 0 10px; font-size: 1.35rem; }
.confirm-card p { margin: 0 0 10px; }
.confirm-muted { color: var(--fg-muted); font-size: 1rem; }
.confirm-muted:empty { display: none; }
.confirm-card .btn { margin-top: 14px; }
.confirm-card a:not(.btn) { color: var(--blue); text-decoration: underline; }

@media (max-width: 600px) {
  /* 16 px in jedem Feld (sonst zoomt das iPhone hinein), Tippflaechen von
     44 px, Karten bis an den Rand. */
  .formseite input, .formseite select, .formseite textarea { font-size: 16px !important; }
  .formseite input:not([type="checkbox"]):not([type="radio"]) { min-height: 48px; }
  .abo-card .pw-eye, .reset-card .pw-toggle { width: 44px !important; height: 44px !important; }
  .formseite button[type="submit"], .abo-card button.primary, .rung button, .done-btn { min-height: 52px; }
  .cycle button { min-height: 44px; }
  .abo-card, .reset-card, .confirm-card { padding: 22px 18px !important; }
}

/* Abo-Seite: style.css kennt .amount als grosse Preiszahl der Tarifkarten —
   in der Tarifliste hier ist es eine gewoehnliche Zeile. */
.rung .amount { font-size: 16px; font-weight: 700; letter-spacing: 0; }
/* Smartphone: Preis und „Buchen" unter den Text statt daneben. Nebeneinander
   blieben dem Text 120 px, und der Knopf ragte ueber den Rand (gefunden beim
   Umstellen, 04.10.2026). */
@media (max-width: 600px) {
  .rung { flex-wrap: wrap; }
  .rung .body { flex: 1 1 100%; }
  .rung .amount { margin-right: auto; align-self: center; }
}