/*
 * Mitglieder-Oberflaeche: mobil zuerst, gross und deutlich (CLAUDE.md Regel 6).
 * - Schrift mindestens 18 px (1.125rem), alle Groessen in rem: vergroesserte Systemschrift und
 *   Zoom bis 200 % wirken ueberall.
 * - Knoepfe mindestens 56 px hoch, am Handy volle Breite.
 * - Farbpaare mindestens WCAG AA; geprueft in tests-js/contrast.test.mjs (liest die Variablen hier).
 * Keine Inline-Stile (CSP style-src 'self'); Fortschrittsbreiten setzt das JS per CSSOM.
 */

:root {
  /* Farben – jedes Text/Hintergrund-Paar ist in tests-js/contrast.test.mjs aufgefuehrt */
  --color-bg: #ffffff;
  --color-text: #1b1b1b;
  --color-muted: #3f3f46;
  --color-surface: #f3f5f8;
  --color-border: #6b7280;
  --color-border-soft: #c9ced6;
  --color-primary: #0b4f8a;
  --color-primary-pressed: #073a66;
  --color-on-primary: #ffffff;
  --color-focus: #1d4ed8;
  --color-focus-on-dark: #ffffff; /* Fokusring auf dem dunklen Rueckgaengig-Hinweis */
  --color-selected-bg: #e6f0fa;
  --color-error: #b3261e;
  --color-error-bg: #fdecea;
  --color-error-text: #8c1d18;
  --color-success: #1b6b35;
  --color-success-bg: #e7f4eb;
  --color-success-text: #145228;
  --color-info-bg: #e7f0fa;
  --color-info-text: #0a3a66;
  --color-warning-bg: #fff3e0;
  --color-warning-text: #6a3a00;
  --color-track: #d5dbe3;
  --color-skeleton: #e3e7ed;
  --color-placeholder-bg: #dfe4ea;

  --radius: 0.75rem;
  --gap: 1rem;
  --button-height: max(3.5rem, 56px);
  --focus-ring: 3px solid var(--color-focus);
  color-scheme: light;
}

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

/*
 * iOS: Dynamic Type der Systemeinstellung uebernehmen ("vergroesserte Systemschrift"). Steht NACH
 * der Grundgroesse, sonst setzt font-size: 100% sie wieder auf 16 px. Nur iOS (-webkit-touch-callout):
 * Desktop-Safari wuerde sonst die kleinere macOS-Systemschrift (13 px) uebernehmen.
 */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
}

*, *::before, *::after { box-sizing: border-box; }

/* hidden gilt immer – auch fuer Elemente, deren Klasse display setzt (.button, .notice …) */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.125rem; /* 18 px – kleiner wird nichts */
  line-height: 1.55;
  overflow-wrap: anywhere;
}

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

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.75rem; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }

a { color: var(--color-primary); text-underline-offset: 0.2em; }
a:hover { color: var(--color-primary-pressed); }

:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
h1:focus, [tabindex="-1"]:focus { outline: none; }
h1:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }

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

/* ------------------------------------------------------------------ Seitengeruest */
.skip-link {
  position: absolute; left: 1rem; top: -10rem;
  background: var(--color-primary); color: var(--color-on-primary);
  padding: 1rem; border-radius: var(--radius); z-index: 10;
}
.skip-link:focus { top: 1rem; }

.page-wrap, #app, .site-header, .notices, .topbar, .help {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

.site-header {
  display: flex; align-items: center; gap: 0.75rem;
  padding-block: 1rem 0.5rem;
}
.site-header img { max-height: 3.5rem; width: auto; }
.site-title { margin: 0; font-weight: 700; font-size: 1.25rem; }

#app { padding-block: 0.5rem 2rem; min-height: 50vh; }

.noscript, .app-loading { padding: 1rem; }

/* ------------------------------------------------------------------ Kopf: Zurueck + Fortschritt */
.topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  padding-block: 0.25rem 0.75rem;
}
.topbar[hidden] { display: none; }
.progress { flex: 1 1 12rem; min-width: 0; }
.progress-text { margin: 0 0 0.375rem; font-weight: 600; }
.progress-bar {
  height: 0.75rem; border-radius: 999px; background: var(--color-track); overflow: hidden;
}
.progress-bar > span {
  display: block; height: 100%; width: 0; background: var(--color-primary); border-radius: inherit;
  transition: width 0.3s ease;
}

/* ------------------------------------------------------------------ Knoepfe */
.button {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: var(--button-height);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  border: 2px solid var(--color-primary);
  font: inherit; font-size: 1.25rem; font-weight: 600; line-height: 1.3;
  text-align: center; text-decoration: none;
  cursor: pointer;
  touch-action: manipulation; /* kein Doppeltipp-Zoom, sofortige Reaktion */
  transition: transform 0.06s ease, background-color 0.06s ease;
  -webkit-tap-highlight-color: transparent;
}
.button-primary { background: var(--color-primary); color: var(--color-on-primary); }
.button-secondary { background: var(--color-bg); color: var(--color-primary); }
.button-primary:hover { background: var(--color-primary-pressed); border-color: var(--color-primary-pressed); color: var(--color-on-primary); }
.button-secondary:hover { background: var(--color-selected-bg); color: var(--color-primary-pressed); }

/* Gedrueckt: sofort etwas dunkler und minimal kleiner (< 100 ms) */
.button:active, .button.is-pressed, .card:active, .card.is-pressed {
  transform: scale(0.98);
}
.button-primary:active, .button-primary.is-pressed { background: var(--color-primary-pressed); border-color: var(--color-primary-pressed); }
.button-secondary:active, .button-secondary.is-pressed { background: var(--color-selected-bg); }
.button[aria-disabled="true"] { cursor: progress; }

/* Alle Beschriftungen im selben Rasterfeld: Die Breite richtet sich nach der laengsten, nichts springt. */
.button-face { display: inline-grid; align-items: center; justify-items: center; }
.button-face > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.625rem; }
.button-busy, .button-done { visibility: hidden; }
/* Beschriftung nur durchsichtig: Sie bleibt der Name des Knopfs fuer Screenreader. */
.button.is-loading .button-label, .button.is-done .button-label { opacity: 0; }
.button.is-loading .button-busy { visibility: visible; }
.button.is-done .button-done { visibility: visible; }

.spinner {
  width: 1.25rem; height: 1.25rem; flex: none;
  border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.spinner-large { width: 3rem; height: 3rem; border-width: 5px; color: var(--color-primary); }
.check {
  width: 0.75rem; height: 1.25rem; flex: none;
  border: solid currentColor; border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-2px, -2px);
}
@keyframes spin { to { transform: rotate(360deg); } }

.actions { display: grid; gap: 0.75rem; margin-top: 1.5rem; }
.action-feedback { margin-top: 0.5rem; }
.action-slow { margin: 0.5rem 0 0; color: var(--color-muted); }
.action-message {
  margin-top: 0.5rem; padding: 0.75rem 1rem;
  background: var(--color-error-bg); color: var(--color-error-text);
  border-left: 0.375rem solid var(--color-error); border-radius: 0.5rem;
}
.action-message p { margin: 0 0 0.5rem; font-weight: 600; }
.action-message p:last-child { margin-bottom: 0; }

/* Zurueck oben: beschriftet, mit Pfeil davor (kein Symbol ohne Text); am Handy volle Breite */
.button-back .button-label::before { content: "\2190"; margin-right: 0.5rem; }

/* ------------------------------------------------------------------ Formulare */
.screen-help { color: var(--color-muted); }
.field { margin: 1.25rem 0; }
.field label, .field .label { display: block; font-weight: 600; margin-bottom: 0.375rem; }
.field-help { color: var(--color-muted); margin: 0 0 0.5rem; }
.input, select.input, textarea.input {
  width: 100%; min-height: var(--button-height);
  padding: 0.75rem 1rem;
  font: inherit; color: var(--color-text); background: var(--color-bg);
  border: 2px solid var(--color-border); border-radius: var(--radius);
}
textarea.input { min-height: 6rem; resize: vertical; }
.input[aria-invalid="true"] { border-color: var(--color-error); border-width: 3px; }
.field-error {
  display: block; margin-top: 0.5rem; padding: 0.5rem 0.75rem;
  color: var(--color-error-text); background: var(--color-error-bg);
  border-left: 0.375rem solid var(--color-error); border-radius: 0.5rem; font-weight: 600;
}
.field-error[hidden] { display: none; }
.field-success {
  margin-top: 0.75rem; padding: 0.75rem 1rem; font-weight: 600;
  background: var(--color-success-bg); color: var(--color-success-text); border-radius: 0.5rem;
}
.password-row { display: grid; gap: 0.75rem; }
@media (min-width: 30em) {
  .password-row { grid-template-columns: 1fr auto; }
  .password-row .button { width: auto; }
  /* Ab Tabletbreite neben Text bzw. Fortschritt; am Handy volle Breite (Regel 6) */
  .button-back { width: auto; min-width: 8rem; }
  .notice .button, .toast .button { width: auto; }
}

/* ------------------------------------------------------------------ Hinweise */
.notices:empty { display: none; }
.notice {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between;
  margin: 0.5rem 0; padding: 0.875rem 1rem;
  border-radius: var(--radius); border-left: 0.375rem solid currentColor;
}
.notice p { margin: 0; flex: 1 1 14rem; font-weight: 600; }
.notice-info { background: var(--color-info-bg); color: var(--color-info-text); }
.notice-success { background: var(--color-success-bg); color: var(--color-success-text); }
.notice-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.notice-error { background: var(--color-error-bg); color: var(--color-error-text); }

/* ------------------------------------------------------------------ Karten (Veranstaltungen) */
.cards { display: grid; gap: 0.75rem; margin: 1rem 0; padding: 0; list-style: none; }
.card {
  -webkit-appearance: none; appearance: none;
  display: grid; gap: 0.25rem; width: 100%;
  min-height: 4.5rem; padding: 1rem 1.25rem;
  font: inherit; text-align: left; color: var(--color-text);
  background: var(--color-surface);
  border: 2px solid var(--color-border-soft); border-radius: var(--radius);
  cursor: pointer; touch-action: manipulation;
  transition: transform 0.06s ease;
}
.card:hover { border-color: var(--color-primary); }
.card-title { font-size: 1.25rem; font-weight: 700; }
.card-sub { color: var(--color-muted); }
.card[aria-pressed="true"], .card[aria-expanded="true"] {
  background: var(--color-selected-bg); border: 3px solid var(--color-primary);
}
.card-status { display: none; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--color-primary); }
.card[aria-pressed="true"] .card-status { display: inline-flex; }
/* Unterzeile und Ladeworte im selben Rasterfeld: Beim Laden tauschen sie nur die Sichtbarkeit,
   die Karte waechst nicht und nichts darunter rutscht (PLAN.md: "nichts springt"). */
.card-detail { display: grid; }
.card-sub, .card-busy { grid-area: 1 / 1; }
.card-busy { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--color-primary); visibility: hidden; }
.card.is-loading .card-busy { visibility: visible; }
.card.is-loading .card-sub { visibility: hidden; }
.cards-divider { margin: 1.5rem 0 0.5rem; font-weight: 600; }

/* Platzhalter beim Laden in der Form des Inhalts */
.skeleton { background: var(--color-skeleton); border-radius: var(--radius); position: relative; overflow: hidden; }
.skeleton-card { height: 4.5rem; }
.skeleton-tile { aspect-ratio: 1; }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: translateX(-100%); animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

.loading-block { display: grid; justify-items: center; gap: 1rem; padding: 3rem 1rem; text-align: center; }

/* ------------------------------------------------------------------ Auswahl & Kacheln */
.drop-zone { border-radius: var(--radius); }
.drop-zone.is-dragover { outline: 3px dashed var(--color-primary); outline-offset: 6px; background: var(--color-selected-bg); }
.drop-hint { display: none; color: var(--color-muted); margin-top: 0.75rem; }
@media (hover: hover) and (pointer: fine) { .drop-hint { display: block; } }
.count { font-weight: 700; font-size: 1.25rem; margin: 1.25rem 0 0.75rem; }

.tiles {
  display: grid; gap: var(--gap); margin: 0 0 1rem; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
}
.tile {
  display: grid; gap: 0.5rem; align-content: start;
  padding: 0.5rem; background: var(--color-surface);
  border: 2px solid var(--color-border-soft); border-radius: var(--radius);
}
.tile.is-attention { border-color: var(--color-error); border-width: 3px; }
.thumb {
  position: relative; aspect-ratio: 1; width: 100%;
  border-radius: 0.5rem; overflow: hidden; background: var(--color-placeholder-bg);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-placeholder {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 0.25rem;
  text-align: center; padding: 0.5rem; color: var(--color-text); font-weight: 600;
  overflow-wrap: normal; hyphens: auto; /* nicht mitten im Wort umbrechen ("Kein / e") */
}
.thumb-badge {
  position: absolute; left: 0.375rem; bottom: 0.375rem;
  padding: 0.125rem 0.5rem; border-radius: 0.375rem;
  background: var(--color-text); color: var(--color-bg); font-weight: 700;
}
.tile-status { margin: 0; font-weight: 600; }
.tile-status.is-done { color: var(--color-success); }
.tile-status.is-failed { color: var(--color-error); }
.tile-bar { height: 0.5rem; border-radius: 999px; background: var(--color-track); overflow: hidden; }
.tile-bar > span { display: block; height: 100%; width: 0; background: var(--color-primary); }
.tile .button { font-size: 1.125rem; padding-inline: 0.5rem; }
.tile-message { margin: 0; font-weight: 600; color: var(--color-warning-text); }

/* ------------------------------------------------------------------ Bildschirm 5: Datum */
.summary-card {
  margin: 1rem 0; padding: 1rem 1.25rem;
  background: var(--color-surface); border: 2px solid var(--color-border-soft); border-radius: var(--radius);
}
.summary-card p { font-size: 1.25rem; font-weight: 600; }
.summary-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.summary-thumbs li { width: 4rem; }
.date-list { display: grid; gap: 1rem; margin: 1rem 0; padding: 0; list-style: none; }
.date-item {
  display: grid; gap: 0.75rem; grid-template-columns: 6rem 1fr; align-items: start;
  padding: 0.75rem; background: var(--color-surface);
  border: 2px solid var(--color-border-soft); border-radius: var(--radius);
}
.date-item.is-attention { border: 3px solid var(--color-error); }
.date-item > .thumb { width: 6rem; }
.date-item .fields { display: grid; gap: 0.75rem; min-width: 0; }
.date-item .field { margin: 0; }
@media (max-width: 24em) { .date-item { grid-template-columns: 1fr; } .date-item > .thumb { width: 100%; max-width: 12rem; } }
.date-value { font-weight: 700; }
.deviation {
  padding: 0.75rem; border-radius: 0.5rem; background: var(--color-warning-bg); color: var(--color-warning-text);
}
.deviation p { font-weight: 600; margin-bottom: 0.75rem; }
.deviation .actions { margin-top: 0; }

details.disclosure { margin: 1.25rem 0; }
details.disclosure > summary {
  display: flex; align-items: center; min-height: var(--button-height);
  padding: 0.5rem 1rem; border: 2px solid var(--color-primary); border-radius: var(--radius);
  color: var(--color-primary); font-weight: 600; cursor: pointer; list-style: none;
}
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::before { content: "\25B8"; margin-right: 0.75rem; }
details.disclosure[open] > summary::before { content: "\25BE"; }
details.disclosure > .disclosure-body { padding: 1rem 0.25rem 0; }

/* ------------------------------------------------------------------ Bildschirm 6: Einverstaendnis */
.consent {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  margin: 1.25rem 0; padding: 1rem 1.25rem;
  background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius);
  cursor: pointer; font-weight: 600;
}
.consent.is-invalid { border: 3px solid var(--color-error); }
.consent input[type="checkbox"] {
  width: 2.25rem; height: 2.25rem; margin: 0; accent-color: var(--color-primary); cursor: pointer;
}
.summary-line { font-size: 1.25rem; font-weight: 600; }

/* ------------------------------------------------------------------ Bildschirm 7/8 */
.big-progress { font-size: 2rem; font-weight: 800; margin: 1rem 0 0.5rem; }
.overall-bar { height: 1.25rem; border-radius: 999px; background: var(--color-track); overflow: hidden; margin-bottom: 0.75rem; }
.overall-bar > span { display: block; height: 100%; width: 0; background: var(--color-primary); transition: width 0.3s ease; }
.remaining { color: var(--color-muted); font-weight: 600; }
.keep-open { padding: 0.875rem 1rem; background: var(--color-info-bg); color: var(--color-info-text); border-radius: var(--radius); font-weight: 600; }
.send-list { display: grid; gap: 0.5rem; margin: 1rem 0; padding: 0; list-style: none; }
.send-row { display: grid; grid-template-columns: 3.5rem 1fr; gap: 0.75rem; align-items: center; }
.send-row .thumb { width: 3.5rem; }
.send-row .tile-status { margin: 0; }

.thanks-mark {
  width: 6rem; height: 6rem; margin: 1rem auto; border-radius: 50%;
  background: var(--color-success); display: grid; place-content: center;
}
.thanks-mark::after {
  content: ""; width: 1.5rem; height: 3rem; margin-top: -0.5rem;
  border: solid var(--color-bg); border-width: 0 0.5rem 0.5rem 0; transform: rotate(45deg);
}
.thanks { text-align: center; }
.thanks .actions { text-align: left; }

/* ------------------------------------------------------------------ Hilfe unten */
.help {
  margin-top: 2rem; padding-block: 1.5rem 7rem; /* Platz, damit der Rueckgaengig-Hinweis nichts verdeckt */
  border-top: 2px solid var(--color-border-soft);
}
.help-title { font-weight: 700; margin-bottom: 0.25rem; }
.help .actions { margin-top: 0.75rem; }
.help details.disclosure > summary { border-width: 0; padding-left: 0; text-decoration: underline; }

/* ------------------------------------------------------------------ Rueckgaengig-Hinweis */
.toast-region {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 0 1rem max(1rem, env(safe-area-inset-bottom));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  max-width: 38rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem;
  padding: 0.75rem 1rem; border-radius: var(--radius);
  background: var(--color-text); color: var(--color-bg);
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.3);
}
.toast p { margin: 0; flex: 1 1 8rem; font-weight: 700; }
.toast .button { background: var(--color-bg); color: var(--color-text); border-color: var(--color-bg); }
.toast :focus-visible { outline-color: var(--color-focus-on-dark); } /* blau auf fast schwarz: nur 2,6:1 */

/* ------------------------------------------------------------------ Sonderseiten */
#app.error-page { padding-block: 2rem; } /* #app setzt sonst 0.5rem oben (ID schlaegt Klasse) */

/* ------------------------------------------------------------------ Breitere Bildschirme */
@media (min-width: 48em) {
  h1 { font-size: 2rem; }
  #app { padding-block: 1rem 3rem; }
}

/* ------------------------------------------------------------------ Weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  .skeleton::after { animation: none; }
  .spinner { animation-duration: 2.4s; }
  .button:active, .button.is-pressed, .card:active, .card.is-pressed { transform: none; }
}

/* ------------------------------------------------------------------ Hoher Kontrast (Windows) */
@media (forced-colors: active) {
  .button, .card, .tile, .input { border: 2px solid ButtonText; }
  .progress-bar > span, .overall-bar > span, .tile-bar > span { background: Highlight; }
}