/* ============================================================
   Öffentliche Seiten in der Optik der Website.

   Aufnahmeantrag, Kontoeinrichtung und Anmeldung gehören für die
   Besucher zum Auftritt des Vereins, nicht zur Verwaltung. Sie lagen
   aber auf jan.css - der Oberfläche des Vorstands: blauer Akzent statt
   Grün, Instrument Sans statt Segoe UI, eckige Knöpfe statt runder. Der
   Wechsel von der Website ins Formular war deutlich sichtbar.

   Die Werte hier stammen WÖRTLICH aus dem Website-Theme
   (deploy/grav/inhalte/user/themes/janbibian/css/style.css). Ändert
   sich dort etwas, muss es hier nachgezogen werden - ein Test hält
   beide Seiten zusammen (test_oeffentliche_seiten_in_website_optik).
   ============================================================ */

:root {
  /* --- Wörtlich aus dem Website-Theme --- */
  --green: #1e7a3f;
  --green-dark: #155c2f;
  --green-light: #e6f2ea;
  --red: #c8102e;
  --red-dark: #9d0c24;
  --ink: #1c2430;
  --ink-soft: #4a5568;
  --paper: #ffffff;
  --bg: #f6f8f7;
  --line: #e2e8e4;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(28, 36, 48, 0.08);
  --shadow-sm: 0 2px 10px rgba(28, 36, 48, 0.06);
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* --- Brücke zu den Namen, die das Formular bereits benutzt ---
     Damit nicht rund 250 Stellen umgeschrieben werden müssen (jede
     davon eine Gelegenheit für einen Fehler), zeigen die alten Namen
     auf die neuen Werte. */
  --accent: var(--green);
  --accent-soft: var(--green-light);
  --surface: var(--paper);
  --surface2: #eef2ef;
  --border: var(--line);
  --text: var(--ink);
  --text2: var(--ink-soft);
  --text3: #7a8593;
  --green-soft: var(--green-light);
  --red-soft: #fdeaed;
  --amber: #b45309;
  --amber-soft: #fef3e2;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dark); }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
h2 { font-size: clamp(1.3rem, 2.6vw, 1.6rem); }

/* ---------- Karten ---------- */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
}

/* ---------- Knöpfe ---------- */
/* Rund und fett wie auf der Website - dort ist jeder Knopf eine Pille. */

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  border: 2px solid var(--green);
  background: transparent;
  color: var(--green-dark);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn:hover { background: var(--green-light); }
.btn:active { transform: translateY(1px); }

.btn.primary,
.btn-primary {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn.primary:hover,
.btn-primary:hover { background: var(--green-dark); color: #fff; }

.btn.sm { padding: 0.5rem 1.1rem; font-size: 0.85rem; }

.btn:disabled { opacity: 0.55; cursor: default; transform: none; }

/* ---------- Formularfelder ---------- */
/* Die Website hat kaum eigene Felder (nur die Suche); Radius, Linie und
   Grün stammen von dort, die Maße sind auf ein langes Formular
   abgestimmt: genug Höhe zum Tippen, ohne dass die Seite ausufert. */

.fld {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink);
}

.f {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.f:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(30, 122, 63, 0.14);
}

.f:disabled, .f[readonly] { background: var(--bg); color: var(--ink-soft); }

textarea.f { resize: vertical; min-height: 4.5rem; line-height: 1.55; }

select.f { cursor: pointer; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--green); }

/* ---------- Kleinteile ---------- */

.hint {
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

.pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

/* Kurzmeldung unten am Rand (toast). */
#toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%) translateY(1rem);
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 200;
}

#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.err { background: var(--red); }
#toast.ok { background: var(--green); }

/* ---------- Portal-Kopfbalken ---------- */
/* Der grüne Balken über Antrag und Portal. Die Werte kommen aus jan.css,
   wo er entstanden ist - dieselben Farben wie das Website-Grün. */

.portal-hero {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color: #fff;
  padding: 1.4rem 1rem 1.1rem;
}

.portal-hero-innen {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.portal-logo {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: #fff;
  padding: 4px;
  object-fit: contain;
  flex: none;
}

.portal-hallo { font-weight: 700; font-size: 1.15rem; line-height: 1.25; }
.portal-unter { font-size: 0.75rem; opacity: 0.85; margin-top: 0.15rem; }

.portal-abmelden {
  font: inherit; font-size: 0.78rem; font-weight: 700;
  color: #fff; background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px; padding: 0.35rem 0.9rem; cursor: pointer;
}
.portal-abmelden:hover { background: rgba(255, 255, 255, 0.28); }

/* Das Schewiza-Band unter dem Balken - dasselbe Muster wie die Website. */
.portal-schewiza {
  height: 12px;
  background-image: url('/static/img/shevitsa.svg');
  background-repeat: repeat-x;
  background-size: auto 100%;
}

/* ---------- Kleinteile des Formulars ---------- */

.brand-logo {
  width: 2.4rem; height: 2.4rem; border-radius: 10px; background: var(--paper);
  border: 1px solid var(--line); display: grid; place-items: center;
  font-weight: 700; color: var(--green-dark); flex: none;
}

.warnbox {
  display: flex; gap: 0.5rem; font-size: 0.82rem; color: var(--red);
  background: var(--red-soft); border-radius: 10px; padding: 0.6rem 0.8rem;
  line-height: 1.55;
}

.iconbtn {
  border: none; background: none; color: var(--text3);
  font-size: 1rem; padding: 0.15rem; cursor: pointer;
}
.iconbtn:hover { color: var(--ink); }

.spacer { flex: 1; }
.dash { color: var(--text3); }

/* ---------- Sprachwahl (DE / БГ) ---------- */

.sprach-wahl { display: flex; gap: 2px; flex: none; }

.sprach-btn {
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1;
}

.sprach-btn:first-child { border-radius: 999px 0 0 999px; padding-left: 0.8rem; }
.sprach-btn:last-child { border-radius: 0 999px 999px 0; padding-right: 0.8rem; margin-left: -1px; }
.sprach-btn:hover { background: var(--green-light); color: var(--green-dark); }

.sprach-btn.aktiv {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}