/* Web forms. The accent colour comes from the settings of the app (Einstellungen → Module → Online-Formulare), see
   loadProfile in common.js; the default is the same as on the status page (StatusHelper.DefaultAccentColor).
   All colours are tokens here: light below, dark further down (only on their own page; inside the association's website
   the forms stay light, the page around them decides). */
:root {
  --accent: #1f6f78;
  --accent-dark: color-mix(in srgb, var(--accent) 80%, black);
  --accent-light: color-mix(in srgb, var(--accent) 6%, white);
  /* The accent as text (headline, buttons, *) — darker or lighter as the background needs. */
  --accent-text: var(--accent);
  --on-accent: #ffffff;
  --error: #c62828;
  --error-dark: #a11d1d;
  --error-background: #fff6f6;
  --text: #2f3131;
  --muted: #5f6363;
  --border: #d7d9d9;
  --background: #f6f5f2;
  --surface: #ffffff;
  --surface-sunken: #fcfcfb;
  --input-background: #ffffff;
  --input-border: #b9bcbc;
  --focus: #1d6fd6;
  --ok: #2e7d32;
  --ok-background: #e7f4e8;
  --warn: #a15c00;
  --warn-background: #fff2dc;
  --neutral-background: #f1f1f1;
  --shadow: rgba(0, 0, 0, 0.15);
  --radius: 8px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not(.embedded) {
    --accent-dark: color-mix(in srgb, var(--accent) 75%, white);
    --accent-light: color-mix(in srgb, var(--accent) 22%, #1f2322);
    --accent-text: color-mix(in srgb, var(--accent) 55%, white);
    --error: #ef6b6b;
    --error-dark: #ff9b93;
    --error-background: #3a2020;
    --text: #e8e7e3;
    --muted: #a6aaa8;
    --border: #3a403f;
    --background: #141716;
    --surface: #1f2322;
    --surface-sunken: #191c1b;
    --input-background: #161918;
    --input-border: #4c5352;
    --focus: #7cb2ff;
    --ok: #86cf89;
    --ok-background: #1f3523;
    --warn: #e8ad55;
    --warn-background: #3b2e17;
    --neutral-background: #2b302f;
    --shadow: rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

/* hidden must win over display rules of .grid/.field. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.embedded body { background: transparent; }

.page { max-width: 820px; margin: 0 auto; padding: 24px 16px 48px; }

.embedded .page { padding-top: 8px; }

header.site { text-align: center; margin-bottom: 24px; }
header.site img { width: auto; height: auto; max-width: min(220px, 70%); max-height: 140px; }
.embedded header.site { display: none; }

/* Until the profile is loaded, nothing is shown (no empty header, no default colour flashing up). */
.loading .page { visibility: hidden; }

/*
 * Headline font of the settings, e.g. Amatic SC. The font comes from our own server (no request to Google, works on every
 * current browser; licence: fonts/OFL-AmaticSC.txt). "block": the headline waits briefly for the font instead of flashing another one.
 */
@font-face {
  font-family: "Amatic SC";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("fonts/amatic-sc-700-latin.woff2") format("woff2");
}

/* Links in the colour of the association (readable in light and dark). */
a { color: var(--accent-text); }
a:hover { color: var(--text); }

h1 { color: var(--accent-text); font-weight: 700; font-size: 2.2rem; line-height: 1.15; margin: 8px 0 4px; }
.headline-amatic h1 { font-family: "Amatic SC", "Segoe Print", "Bradley Hand", cursive; font-size: 3.2rem; line-height: 1.05; letter-spacing: 0.01em; }
h2 { font-size: 1.25rem; margin: 0 0 12px; }
h3 { font-size: 1.05rem; margin: 0; }

.lead { color: var(--muted); margin: 0 0 24px; }

section.block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}

.hint { color: var(--muted); font-size: 0.92rem; margin: -4px 0 12px; }

.grid { display: grid; gap: 12px 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid.two { grid-template-columns: 1fr 1fr; }
  .grid.three { grid-template-columns: 2fr 1fr 2fr; }
  .span-all { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

label, legend { font-weight: 600; font-size: 0.95rem; }
.req::after { content: " *"; color: var(--accent-text); }

input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number], select, textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  padding: 10px 12px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: var(--input-background);
  min-height: 44px;
}

textarea { min-height: 88px; resize: vertical; }

/* Filled in by the form (BIC from the IBAN). */
input[readonly] { background: var(--background); color: var(--muted); }

input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible, .choice input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

[aria-invalid=true] { border-color: var(--error) !important; background: var(--error-background); }

.field-error { color: var(--error-dark); font-size: 0.9rem; margin: 2px 0 0; font-weight: 600; }

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

.choice { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; cursor: pointer; padding: 6px 0; }
.choice input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }

.events { display: grid; gap: 8px; }
.event {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; cursor: pointer; font-weight: 400;
}
.event:has(input:checked) { border-color: var(--accent); background: var(--accent-light); }
.event input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.event .name { font-weight: 600; }
.event .meta { color: var(--muted); font-size: 0.9rem; display: block; }

.badge { display: inline-block; font-size: 0.78rem; font-weight: 700; border-radius: 99px; padding: 1px 8px; margin-left: 6px; vertical-align: 1px; }
.badge.frei { background: var(--ok-background); color: var(--ok); }
.badge.wenige { background: var(--warn-background); color: var(--warn); }
.badge.warteliste { background: var(--neutral-background); color: var(--muted); }

.card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; background: var(--surface-sunken); }

@media (max-width: 480px) {
  .page { padding: 16px 12px 40px; }
  section.block { padding: 14px; }
  .card { padding: 12px; }
  h1 { font-size: 2.6rem; }
}
.card > h3 { margin: 0 0 6px; }
.card h3 + .grid, .card .grid + h3 { margin-top: 12px; }
.card > h3:not(:first-child) { margin-top: 20px; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 8px; }

button {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: 6px; min-height: 44px; padding: 8px 16px;
  border: 1px solid var(--accent-text); background: var(--surface); color: var(--accent-text);
}
button:hover { background: var(--accent-light); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); width: 100%; font-size: 1.1rem; padding: 14px; }
button.primary:hover { background: var(--accent-dark); }
button.link { border: 0; background: none; color: var(--muted); padding: 4px 8px; min-height: 0; font-weight: 400; text-decoration: underline; }
button[disabled] { opacity: 0.6; cursor: progress; }

.error-summary {
  border: 2px solid var(--error); border-radius: var(--radius); background: var(--surface); padding: 16px 20px; margin-bottom: 20px;
}
.error-summary h2 { color: var(--error-dark); }
.error-summary a { color: var(--error-dark); }

.notice { border-left: 4px solid var(--accent); background: var(--surface); padding: 12px 16px; border-radius: 4px; margin-bottom: 20px; }

.visually-hidden, .hp {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.done { text-align: center; }
.done h2 { color: var(--ok); font-size: 1.5rem; }
.summary { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-top: 16px; }
.summary dt { font-weight: 600; margin-top: 8px; }
.summary dd { margin: 0; }

footer.site { text-align: center; color: var(--muted); font-size: 0.85rem; margin-top: 32px; }
footer.site a { color: var(--muted); }

@media print {
  body { background: #fff; color: #000; }
  form, footer.site, .no-print, .lang-switch { display: none !important; }
}

/* Room for "IBAN geprüft" so the page doesn't jump while clicking the next field. */
.iban-status { min-height: 1.5em; margin: 0; }

.card .grid + fieldset { margin-top: 16px; }

/* ---------- Steps (holiday care registration) ---------- */
.stepper ol { list-style: none; display: flex; gap: 4px; margin: 0 0 20px; padding: 0; counter-reset: none; }
.stepper li { flex: 1 1 0; min-width: 0; }
.stepper li > span, .stepper li > button {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%;
  border: 0; background: none; padding: 4px 2px; min-height: 0; color: var(--muted); font-weight: 600; font-size: 0.85rem; text-align: center;
}
.stepper li > button { cursor: pointer; }
.stepper li > button:hover { background: none; color: var(--text); }
.stepper .number {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--surface); color: var(--muted); font-size: 0.95rem;
}
.stepper li.done .number { border-color: var(--accent-text); color: var(--accent-text); }
.stepper li.current .number { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.stepper li.current .title { color: var(--text); }
.stepper .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.stepper-caption { display: none; margin: -12px 0 20px; text-align: center; font-weight: 600; }
@media (max-width: 480px) {
  .stepper .title { display: none; }
  .stepper-caption { display: block; }
}
.step .substep { margin: 0 0 4px; color: var(--muted); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

.step h2:focus { outline: none; }
.step-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; }
.step-nav button.primary { width: auto; min-width: 160px; }
.step-nav > button:only-child { margin-left: auto; }
@media (max-width: 480px) {
  .step-nav { flex-direction: column-reverse; align-items: stretch; }
  .step-nav button, .step-nav button.primary { width: 100%; }
  .step-nav > span:empty { display: none; }
}

.list-title { margin: 24px 0 6px; }
.choice-hint { margin: -4px 0 6px 30px; }
/* „Fähigkeiten & Kontakte“: the explanation between the question and the field. */
.skills-field .hint { margin: 0 0 2px; }

/* Suggestions from the registration in the membership application. */
.suggestions { margin: 0 0 16px; }
.suggestions .hint { margin: 0 0 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
button.chip { min-height: 36px; padding: 4px 12px; border-radius: 99px; font-weight: 600; font-size: 0.92rem; }

/* Review before sending. */
.review { display: grid; gap: 12px; margin-bottom: 20px; }
.review-block { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; background: var(--surface-sunken); }
.review-block .card-head { margin-bottom: 6px; }
.review-block dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0; font-size: 0.95rem; }
.review-block dt { color: var(--muted); }
/* pre-line: texts of several lines (important information) keep their lines. */
.review-block dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
@media (max-width: 480px) { .review-block dl { grid-template-columns: 1fr; } .review-block dd { margin-bottom: 6px; } }

/* An option that can't be chosen right now (e.g. "not a member" for families from outside the area). */
.choice:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.step .notice { margin: 4px 0 16px; }

/* Age next to a date of birth: a wrong year stands out at once. */
.with-age { display: flex; align-items: center; gap: 12px; }
.with-age input { flex: 1 1 auto; min-width: 0; }
.with-age .age { flex: 0 0 auto; min-width: 5.5em; font-weight: 700; font-size: 1.05rem; color: var(--text); white-space: nowrap; }
.with-age .age.warn { color: var(--error); }

/* Documents shown in the forms (Teilnahmebedingungen as PDF, Datenschutzerklärung). */
.document { margin: 8px 0 20px; }
.document-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.document-head h3 { margin: 0; }
.document-view { max-height: min(60vh, 520px); overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 12px 16px; }
.document-view:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pdf-view { padding: 8px; background: var(--background); }
/* A PDF page stays white in dark mode too: it's paper. */
.pdf-page { display: block; width: 100%; height: auto; margin: 0 0 8px; background: #fff; box-shadow: 0 1px 3px var(--shadow); }
.legal h2 { font-size: 1.15rem; }
.legal h3 { font-size: 1rem; margin: 18px 0 6px; }
.legal p, .legal li { line-height: 1.5; }
.legal ul { padding-left: 20px; }
.legal-meta { color: var(--muted); }
@media print {
  .document-view { max-height: none; overflow: visible; border: 0; }
}


/* ---------- Language switch: top right, stays in view while scrolling; small on phones ---------- */
.lang-switch {
  position: fixed; z-index: 30;
  top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
  display: flex; align-items: center; gap: 2px; padding: 3px 3px 3px 9px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 99px; box-shadow: 0 2px 10px var(--shadow);
}
.lang-switch svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.6; margin-right: 3px; flex: none; }
.lang-switch button {
  min-height: 32px; min-width: 42px; padding: 4px 10px; border: 0; border-radius: 99px;
  background: transparent; color: var(--muted); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em;
}
.lang-switch button:hover { background: var(--accent-light); color: var(--text); }
.lang-switch button[aria-pressed=true] { background: var(--accent); color: var(--on-accent); cursor: default; }
@media (max-width: 480px) {
  .lang-switch { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); padding: 2px; }
  .lang-switch svg { display: none; }
  .lang-switch button { min-width: 38px; min-height: 30px; padding: 4px 8px; }
  /* Room above the logo, so the switch doesn't cover it. */
  body:has(.lang-switch:not([hidden])) .page { padding-top: 52px; }
}
/* Inside the association's website: at the top right of the form (the website scrolls, not the frame). */
.embedded .lang-switch { position: absolute; top: 4px; right: 4px; box-shadow: none; }
.embedded body:has(.lang-switch:not([hidden])) .page { padding-top: 48px; }

/* "Only available in German": shown in other languages only (empty in German). */
.german-only:empty { display: none; }

/* ---------- Veranstaltungen (/fest/ and /fest/status/) ---------- */
.fest-when { font-weight: 600; margin: 0 0 8px; }
/* Texts of the event, news and lists keep their line breaks (plain text from the app). */
.fest-text { white-space: pre-line; overflow-wrap: anywhere; margin: 0 0 8px; }
.fest-contact { margin: 8px 0 0; }
.fest-news-item + .fest-news-item { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
.fest-news-item h3 { margin-bottom: 4px; }
.fest-section-title { margin: 28px 0 12px; }
.meta { color: var(--muted); font-size: 0.9rem; }

.fest-filters { margin: 0 0 16px; }
button.chip[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
button.chip .station-dot { margin-right: 6px; }
.station-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; vertical-align: 1px;
  background: var(--station, var(--accent)); box-shadow: 0 0 0 1px var(--surface);
}

.fest-day + .fest-day { margin-top: 20px; }
.fest-day h3 { margin: 0 0 8px; }
.fest-shifts { display: grid; gap: 8px; }
@media (min-width: 640px) { .fest-shifts { grid-template-columns: 1fr 1fr; } }
.shift-card { min-width: 0; }
.shift-card .shift { height: 100%; }
.shift-card.readonly .shift { cursor: default; background: var(--surface-sunken); }
.shift-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.shift-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; font-size: 1rem; }
.shift-head .station-dot { align-self: center; }
.shift-head .name { font-weight: 700; }
.shift-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.shift-places { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.shift-places .badge { margin-left: 0; }
.shift-optional { font-style: italic; }
.shift-card .field-error { margin: 4px 2px 0; }

.fest-pool { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 12px; }
.fest-pool .field { margin: 4px 0 0 30px; }

/* The chosen shifts and "Eintragen": stays at the bottom of the screen while the shifts are in view. In the association's
   website (iframe) it sits after the shifts, as the frame has no screen bottom of its own. */
.fest-bar {
  position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 16px -20px -20px; padding: 12px 20px; background: var(--surface); border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 -4px 12px var(--shadow);
}
.fest-bar span { font-weight: 600; }
.fest-bar .warn { color: var(--error-dark); }
.fest-bar button.primary { width: auto; min-width: 140px; }
.embedded .fest-bar { position: static; box-shadow: none; margin-bottom: 0; border-radius: 0; }
@media (max-width: 480px) {
  .fest-bar { margin: 16px -14px -14px; padding: 10px 14px; flex-wrap: wrap; }
  .fest-bar button.primary { flex: 1 1 100%; }
}

/* Sign-up form: a modal dialog on the page itself, in the flow of the page inside an iframe. */
.fest-dialog {
  width: min(680px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; background: var(--surface); color: var(--text);
  box-shadow: 0 8px 32px var(--shadow);
}
.fest-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.embedded .fest-dialog { position: static; width: 100%; margin: 16px 0 0; box-shadow: none; max-height: none; }
.dialog-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
@media (max-width: 480px) {
  .fest-dialog:modal { width: 100%; max-width: 100%; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; padding: 16px 14px; }
}
.fest-chosen { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; }
.fest-chosen li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; background: var(--surface-sunken);
}
.fest-chosen li.has-problem { border-color: var(--error); background: var(--error-background); }
.fest-chosen .chosen-label { font-weight: 600; flex: 1 1 auto; }
.fest-chosen .field-error { flex-basis: 100%; }
.fest-chosen button.link { margin-left: auto; }
.fest-email-hint { margin: 8px 0 12px; }
.fest-result h2 { color: var(--ok); }
.fest-result h2:focus { outline: none; }

/* Lists ("Wer bringt was mit?"). */
.fest-progress { display: flex; align-items: center; gap: 10px; font-weight: 600; margin: 4px 0 10px; }
.fest-progress progress { flex: 1 1 auto; max-width: 260px; height: 10px; accent-color: var(--accent); }
.fest-entries { list-style: none; padding: 0; margin: 0 0 12px; }
.fest-entries li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.fest-entries li:last-child { border-bottom: 0; }
.fest-entries .entry-text { font-weight: 600; overflow-wrap: anywhere; }
.fest-entries .entry-name { color: var(--muted); }
.fest-entries .entry-name::before { content: "– "; }
.fest-entries button.link { margin-left: auto; }
.fest-list h3:focus { outline: none; }
.fest-list .notice { margin: 8px 0 0; }
.fest-list-form { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.fest-list-message:empty { display: none; }
.fest-list-message { color: var(--ok); font-weight: 600; }

/* Status page. */
.fest-person { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 8px 0 12px; }
.fest-person dt { color: var(--muted); }
.fest-person dd { margin: 0; overflow-wrap: anywhere; }
.fest-message:focus { outline: none; }
.fest-signups { display: grid; gap: 12px; }
.signup-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--surface-sunken); }
.signup-card.inactive { opacity: 0.7; }
.signup-card h3 { margin: 0 0 2px; }
.signup-card p { margin: 2px 0; }
.signup-card .signup-status { margin: 6px 0; }
.signup-card .badge { margin-left: 0; }
.signup-card > button { margin-top: 6px; }
.badge.status-pending { background: var(--warn-background); color: var(--warn); }
.badge.status-confirmed { background: var(--ok-background); color: var(--ok); }
.badge.status-standby, .badge.status-declined, .badge.status-cancelled { background: var(--neutral-background); color: var(--muted); }
.fest-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.fest-confirm p { flex-basis: 100%; font-weight: 600; }
button.danger { border-color: var(--error); color: var(--error-dark); }
.fest-change { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; display: grid; gap: 10px; }
.fest-change .step-nav { margin-top: 4px; }
.fest-request { margin: 8px 0 0; }
.fest-request button { margin-top: 6px; }
@media (max-width: 480px) { .fest-person { grid-template-columns: 1fr; } .fest-person dd { margin-bottom: 4px; } }