/* Ventura Club – Stylesheet
   Grundlage: Designsystem «Ventura Club» (Farben, Schriften, Signet) und die «Designsystem-Spezifikation und
   UX-Implementierungshandbuch»: Tokens als einzige Quelle, 8-px-Raster (4 und 12 px nur für Mikro-Abstände),
   Grid mit 12 Spalten (Desktop, Rinne 20 px, Arbeitsbereich 1240 px) bzw. 6 Spalten (Handy, Rand 16 px, Rinne 8 px),
   zwei Schatten-Presets, Typo-Skala H1 48 / H2 32 / H3 24 / Text 16 / Link 17 (am Handy nach der Material-Skala),
   Buttons und Felder mit klar unterscheidbaren Zuständen. Mobile first. */

/* =====================================================================
   1. Tokens
   ===================================================================== */
:root {
  /* Farben (Designsystem Ventura Club) */
  --gold: #d5a15f;
  --gold-end: #d4ca6f;            /* Verlauf: Farbton +20° (HSL), vermeidet graue Übergänge */
  --gold-hover: #ddac6e;          /* Hover: Helligkeit leicht angehoben */
  --gold-pressed: #c98f45;        /* Gedrückt: abgedunkelt */
  --gold-tint: rgba(213, 161, 95, 0.12);
  --gold-tint-strong: rgba(213, 161, 95, 0.2);
  --gold-line: rgba(213, 161, 95, 0.5);
  --bronze: #a68053;
  --bronze-deep: #625240;
  --sand-100: #eedeca;
  --sand-200: #e1c4a1;
  --black: #000000;
  --white: #ffffff;
  --ink: #111111;
  --page: #1f1b18;                /* Seitengrund, warm (Bronze-Familie) */
  --card: #2c2622;                /* abgesetzte Fläche */
  --card-hover: #36302a;
  --card-inset: #241f1c;
  --line: rgba(255, 255, 255, 0.08);
  --field: #ffffff;
  --field-ink: #1a1714;           /* kein reines Schwarz */
  --field-border: #8a7f73;
  --success: #7ddb98;
  --success-end: #8cdbbd;         /* Verlauf: Farbton +20° */
  --danger: #c8322b;
  --danger-hover: #b02a24;
  --danger-text: #ff8a80;         /* Rot als Text auf dunklem Grund (Kontrast ≥ 4.5:1) */
  --focus-ring: rgba(213, 161, 95, 0.45);

  /* Abstände: 8-px-Raster; 4 und 12 nur für Mikro-Abstände, 20 nur für Grid-Rinne und inneres Padding */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  /* Grid und Layout (Spezifikation Kapitel 1 und 2) */
  --grid-desktop-artboard: 1440px;
  --grid-desktop-columns: 12;
  --grid-desktop-gutter: 20px;
  --grid-desktop-margin: 100px;   /* ergibt sich bei 1440 px aus dem zentrierten Arbeitsbereich */
  --grid-working-space: 1240px;
  --grid-inner-padding: 20px;
  --grid-mobile-columns: 6;
  --grid-mobile-gutter: 8px;
  --grid-mobile-margin: 16px;

  /* Grössen */
  --control-height: 48px;         /* Buttons und Felder: Vielfaches von 8, Touch-Ziel ≥ 48 */
  --tabbar-height: 64px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-lg-inner: calc(var(--radius-lg) - 1px); /* Innenkante einer Karte mit 1-px-Rand */
  --radius-full: 999px;

  /* Schatten: genau zwei Presets (Spezifikation Kapitel 4), nicht mischen */
  --elevation-soft-depth: 0px 3px 6px rgba(0, 0, 0, 0.16);
  --elevation-elevated-depth: 0px 3px 30px rgba(0, 0, 0, 0.10);

  /* Typografie: Ventura-Schriften (Roboto für Titel, Open Sans für Text) mit der Skala der Spezifikation.
     Am Handy nach der Material-Skala (H4 34, H5 24, H6 20) */
  --font-heading: Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --h1-size: 34px;
  --h2-size: 24px;
  --h3-size: 20px;
  --text-body: 16px;
  --text-link: 17px;
  --text-small: 14px;
  --ease: 160ms ease;
}
@media (min-width: 900px) {
  :root { --h1-size: 48px; --h2-size: 32px; --h3-size: 24px; }
}

/* =====================================================================
   2. Grundlagen und Typografie
   ===================================================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 var(--text-body)/1.5 var(--font-body);
  color: var(--white);
  /* Radialer Verlauf: dezente Tiefe hinter flachen Elementen (Spezifikation 3.2) */
  background: radial-gradient(120% 60% at 50% -10%, rgba(166, 128, 83, 0.16), transparent 60%), var(--page);
  background-attachment: fixed;
}
body.with-tabbar { padding-bottom: calc(var(--tabbar-height) + var(--space-16) + env(safe-area-inset-bottom)); }
a { color: var(--gold); font-weight: 500; text-underline-offset: 3px; }
a:hover { color: var(--gold-hover); }
p { margin: 0 0 var(--space-12); }
img { max-width: 100%; }
strong { font-weight: 700; }

/* H1 Hauptüberschrift (Bold, 1.2), H2 Sektion (Semi-Bold, 1.25), H3 Container-Titel (Light, 1.3).
   Normale Schreibweise statt Versalien; grosse Titel mit leicht verringertem Buchstabenabstand */
h1, h2, h3 { font-family: var(--font-heading); margin: 0; }
h1 { font-size: var(--h1-size); font-weight: 700; line-height: 1.2; letter-spacing: -0.5px; color: var(--gold); }
h2 { font-size: var(--h2-size); font-weight: 600; line-height: 1.25; letter-spacing: -0.2px; color: var(--gold); margin: var(--space-32) 0 var(--space-12); }
h3 { font-size: var(--h3-size); font-weight: 300; line-height: 1.3; color: var(--white); margin: var(--space-12) 0 var(--space-4); }
.card h2:first-child, .card h3:first-child, .zone h2:first-child { margin-top: 0; }
/* Akzent: kurzer goldener Balken über dem Seitentitel */
h1.accent::before, .page-title h1::before { content: ""; display: block; width: 48px; height: 4px; border-radius: var(--radius-full); background: var(--gold); margin-bottom: var(--space-12); }
.title-plain { overflow-wrap: break-word; }
.label { font-weight: 700; }
.muted { color: var(--sand-200); }
.small { font-size: var(--text-small); line-height: 1.5; }
.nowrap { white-space: nowrap; }
.empty { color: var(--sand-200); font-style: italic; }
.description { font-size: 17px; line-height: 1.65; max-width: 70ch; }
.description p:last-child { margin-bottom: 0; }
code { background: var(--card-inset); color: var(--sand-100); padding: 0 var(--space-4); border-radius: var(--space-4); }

/* =====================================================================
   3. Seitenrahmen: Kopfzeile, Navigation, Arbeitsbereich
   ===================================================================== */
/* Testsystem: schmaler, gestreifter Hinweis (keine Schaltfläche, deshalb nicht flächig gefüllt) */
.test-banner { background: repeating-linear-gradient(45deg, var(--black) 0 12px, var(--card) 12px 24px); color: var(--gold); border-bottom: 1px solid var(--gold);
  text-align: center; padding: var(--space-4) var(--space-16); font: 400 12px/16px var(--font-heading); letter-spacing: 2px; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Kopfzeile: Signet mit Schutzzone von 50 % der Logohöhe (32 px Logo → 16 px rundum) */
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  padding: var(--space-16) var(--grid-mobile-margin); background: rgba(10, 9, 8, 0.97); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: var(--space-16); min-height: 32px; color: var(--white); text-decoration: none; }
.brand:hover { color: var(--white); }
.brand .logo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.brand span { font: 300 18px/1 var(--font-heading); letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }
.logout { margin: 0; }
.linkbtn { min-height: var(--control-height); padding: 0 var(--space-8); border: 0; background: none; color: var(--gold); font: 500 var(--text-link)/1.4 var(--font-body); cursor: pointer; }
.linkbtn:hover { color: var(--gold-hover); text-decoration: underline; }

/* Navigation: am Handy fest unten (Daumenbereich, Symbol mit Beschriftung), am Desktop in der Kopfzeile */
.icon { width: 18px; height: 18px; vertical-align: -3px; flex-shrink: 0; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; padding-bottom: env(safe-area-inset-bottom);
  background: rgba(28, 24, 21, 0.97); border-top: 1px solid var(--gold-line); }
.tabbar a { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4);
  min-height: var(--tabbar-height); color: var(--white); text-decoration: none; font: 400 12px/1.2 var(--font-heading); letter-spacing: 1px; text-transform: uppercase; }
.tabbar a .icon { width: 24px; height: 24px; position: relative; }
.tabbar a span { position: relative; }
.tabbar a.active { color: var(--gold); }
.tabbar a.active::before { content: ""; position: absolute; top: var(--space-8); left: 50%; width: 56px; height: 32px; transform: translateX(-50%); border-radius: var(--radius-full); background: var(--gold-tint-strong); }

main { max-width: var(--grid-working-space); margin: 0 auto; padding: var(--space-24) var(--grid-mobile-margin) var(--space-40); }
main.narrow { max-width: 560px; }

@media (min-width: 900px) {
  /* Kopfzeile und Inhalt auf denselben Arbeitsbereich ausgerichtet (1240 px, inneres Padding 20 px) */
  .topbar { justify-content: flex-start; gap: var(--space-32); padding: var(--space-20) max(var(--grid-inner-padding), calc((100% - var(--grid-working-space)) / 2 + var(--grid-inner-padding))); }
  .brand .logo { width: 40px; height: 40px; }
  .brand { gap: var(--space-20); }
  .brand span { font-size: 22px; }
  .topbar .tabbar { position: static; flex: 1; justify-content: center; gap: var(--space-8); padding: 0; background: transparent; border: 0; }
  .tabbar a { flex: 0 0 auto; flex-direction: row; gap: var(--space-8); min-height: var(--control-height); padding: 0 var(--space-20); border-radius: var(--radius-full);
    font-size: 16px; letter-spacing: 1.5px; transition: background var(--ease), color var(--ease); }
  .tabbar a .icon { width: 20px; height: 20px; }
  .tabbar a:hover { background: var(--gold-tint); color: var(--white); }
  .tabbar a.active { background: var(--card); box-shadow: var(--elevation-soft-depth); }
  .tabbar a.active::before { content: none; }
  .topbar .logout { margin-left: auto; }
  body.with-tabbar { padding-bottom: 0; }
  main { padding: var(--space-32) var(--grid-inner-padding) var(--space-64); }
}

/* Fusszeile: Vereinsname, Versionsnummer, Release Notes */
.site-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4) var(--space-16); max-width: var(--grid-working-space); margin: 0 auto;
  padding: var(--space-16) var(--grid-mobile-margin) var(--space-24); border-top: 1px solid var(--line); color: var(--sand-200); font-size: 13px; }
.site-footer a { color: var(--sand-200); }
.site-footer a:hover { color: var(--gold); }
@media (min-width: 900px) { .site-footer { padding: var(--space-20) var(--grid-inner-padding) var(--space-32); } }

/* Seitenkopf */
.page-head { margin: 0 0 var(--space-24); }
.page-title { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-16); }
.back { display: inline-flex; align-items: center; min-height: var(--control-height); margin-bottom: var(--space-8); text-decoration: none;
  font: 400 15px/1 var(--font-heading); letter-spacing: 2px; text-transform: uppercase; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }

/* =====================================================================
   4. Grid und Container
   ===================================================================== */
/* Container-Karten: festes inneres Padding (16 Handy / 24 Desktop), Soft-Depth-Schatten */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--elevation-soft-depth);
  padding: var(--space-24) var(--space-16); margin-bottom: var(--space-16); }
@media (min-width: 700px) { .card { padding: var(--space-24); margin-bottom: var(--space-20); } }
.card-link { display: block; color: inherit; text-decoration: none; transition: transform var(--ease), box-shadow var(--ease), background var(--ease); }
.card-link:hover { color: inherit; background: var(--card-hover); transform: translateY(-2px); box-shadow: var(--elevation-elevated-depth); }
/* Zone: direkt auf dem Seitengrund */
.zone { margin: 0 0 var(--space-16); }
.grid { display: grid; gap: var(--space-16); }
.grid > .card { margin-bottom: 0; } /* Abstand nur über die Rinne des Rasters */
@media (min-width: 700px) { .grid { gap: var(--grid-desktop-gutter); } .grid-2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } }
.row-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8); }

/* =====================================================================
   5. Buttons: drei Gewichte, Zustände Default / Hover / Gedrückt / Fokus
   ===================================================================== */
.btn, button.btn, a.btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: var(--control-height); padding: var(--space-12) var(--space-24); border: 0; border-radius: var(--radius-full);
  /* Haupt-Button: linearer Verlauf (Spezifikation 3.2: Standard für CTAs) */
  background: linear-gradient(135deg, var(--gold), var(--gold-end)); color: var(--ink);
  font: 500 var(--text-link)/1.4 var(--font-body); text-decoration: none; cursor: pointer;
  transition: filter var(--ease), transform var(--ease), background var(--ease), color var(--ease);
}
/* Hover: Schattenebene auf 80 % der Breite, unten ausgerichtet (70–80-%-Regel), Helligkeit leicht angehoben */
.btn::after { content: ""; position: absolute; z-index: -1; left: 10%; bottom: -4px; width: 80%; height: 100%; border-radius: inherit;
  background: inherit; filter: blur(12px); opacity: 0; transition: opacity var(--ease); pointer-events: none; }
.btn:hover { color: var(--ink); filter: brightness(1.06); }
.btn:hover::after { opacity: 0.4; }
/* Gedrückt: leicht komprimiert und abgedunkelt */
.btn:active { transform: scale(0.98); filter: brightness(0.92); }
.btn:active::after { opacity: 0; }
.btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

.btn-success, a.btn-success, button.btn-success { background: linear-gradient(135deg, var(--success), var(--success-end)); color: var(--ink); }
.btn-danger, a.btn-danger, button.btn-danger { background: var(--danger); color: var(--white); }
.btn-danger:hover { color: var(--white); }
/* Neben-Button: umrandet, ohne Schattenebene */
.btn-secondary, a.btn-secondary, button.btn-secondary { background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.btn-secondary:hover { background: var(--gold-tint); color: var(--gold); filter: none; }
.btn-danger-outline, a.btn-danger-outline, button.btn-danger-outline { background: transparent; color: var(--danger-text); box-shadow: inset 0 0 0 1.5px var(--danger); }
.btn-danger-outline:hover { background: rgba(200, 50, 43, 0.14); color: var(--danger-text); filter: none; }
/* Tertiär: unterstrichener Text (Wiederholtes in Listen, zurückhaltende Aktionen) */
.btn-tertiary, a.btn-tertiary, button.btn-tertiary { background: transparent; color: var(--gold); text-decoration: underline; padding-left: var(--space-12); padding-right: var(--space-12); }
.btn-tertiary:hover { background: var(--gold-tint); color: var(--gold); filter: none; }
.btn-secondary::after, .btn-danger-outline::after, .btn-tertiary::after { content: none; }
.btn.btn-block { width: 100%; }
.btn-small, a.btn-small, button.btn-small { min-height: var(--control-height); padding: var(--space-8) var(--space-16); font-size: 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-16); margin: var(--space-24) 0; }
.btn-row > * { flex: 1 1 auto; }
@media (min-width: 700px) { .btn-row > * { flex: 0 0 auto; } }
/* Am Handy untereinander, volle Breite, wichtigster zuerst */
.btn-stack { flex-direction: column; align-items: stretch; gap: var(--space-12); }
.btn-stack > * { width: 100%; }
@media (min-width: 700px) { .btn-stack { flex-direction: row; align-items: center; } .btn-stack > * { width: auto; } }
/* Schritt-Navigation: Zurück links, Weiter rechts */
.btn-nav { justify-content: space-between; }
.btn-nav > * { flex: 0 1 auto; }
.btn-nav .btn-next { margin-left: auto; }
@media (max-width: 480px) {
  .btn-nav > * { flex: 1 1 0; }
  form:not(.search) > button.btn[type=submit]:last-child { width: 100%; }
}
form.inline { display: inline; margin: 0; }
/* Destruktives abgesetzt am Ende, nicht über die ganze Breite */
.danger-zone { margin-top: var(--space-8); padding-top: var(--space-16); border-top: 1px solid var(--line); }
.danger-zone > * { flex: 0 0 auto; }
/* Zurückgenommene Links (Archiv, Kalender) */
.btn-muted { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--control-height); padding: var(--space-4) var(--space-16);
  border: 1px solid var(--line); border-radius: var(--radius-full); color: var(--sand-200); text-decoration: none; font-size: 15px; font-weight: 500; }
.btn-muted:hover { color: var(--white); background: var(--card-hover); }
.btn-muted .icon { width: 16px; height: 16px; }
.btn-muted:focus-visible, .filter-btn:focus-visible, .map-link:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

/* =====================================================================
   6. Formulare: Beschriftung, Hinweis, Fehler, dann Feld; Zustände Default / Hover / Gedrückt / Eingabe
   ===================================================================== */
.field { max-width: 44rem; margin: 0 0 var(--space-24); padding: 0; border: 0; }
.field label, .field legend { display: block; margin-bottom: var(--space-8); font-weight: 700; color: var(--white); }
/* Pflichtfelder: rotes Sternchen direkt am Label */
.req { color: var(--danger-text); }
.optional { font-weight: 400; color: var(--sand-200); }
.field .hint { margin: 0 0 var(--space-8); }
.hint { color: var(--sand-200); font-size: 15px; line-height: 1.5; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=time],
input[type=number], input[type=url], input[type=search], select, textarea {
  width: 100%; min-height: var(--control-height); padding: var(--space-12) var(--space-16);
  border: 1px solid var(--field-border); border-radius: var(--radius-sm);
  background: var(--field); color: var(--field-ink); font: 400 var(--text-body)/1.5 var(--font-body);
  transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--gold); }
input:active, select:active, textarea:active { background: #f6f0e8; }
/* Eingabe (Fokus): goldener Rand und Ring */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px var(--focus-ring); background: var(--field); }
textarea { min-height: 112px; resize: vertical; }
/* Fehler: Liste oben, beim Feld Text mit rotem Symbol und roter Rand */
.error { display: flex; gap: var(--space-8); align-items: baseline; margin: 0 0 var(--space-8); color: var(--white); font-weight: 700; }
.error::before { content: "!"; flex: 0 0 18px; height: 18px; border-radius: 50%; background: var(--danger); color: var(--white); font-size: 13px; line-height: 18px; text-align: center; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(200, 50, 43, 0.45); }
.error-summary ul { margin: var(--space-8) 0 0; padding-left: var(--space-20); font-weight: 400; }
.error-summary li { margin: var(--space-4) 0; }
.error-summary a { color: var(--white); }
.error-summary:focus { outline: 2px solid var(--white); outline-offset: 2px; }
.form-row { display: grid; gap: 0 var(--space-16); }
@media (min-width: 600px) { .form-row { grid-template-columns: 1fr 1fr; gap: 0 var(--grid-desktop-gutter); } .form-row-3 { grid-template-columns: 1fr 1fr 1fr; } }
.form-row-zip { grid-template-columns: 7.5rem 1fr; }
.form-page { max-width: 760px; }
/* Auswahlknöpfe und Kontrollkästchen */
.radios { display: grid; gap: var(--space-8); }
.radio, .check, .field label.radio, .field label.check { display: flex; align-items: flex-start; gap: var(--space-12); cursor: pointer; font-weight: 400; }
.radio { min-height: 56px; padding: var(--space-12) var(--space-16); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card-inset);
  transition: border-color var(--ease), background var(--ease); }
.radio:hover { border-color: var(--gold-line); }
.radio:has(input:checked) { border-color: var(--gold); background: var(--card-hover); }
.radio input, .check input { width: 24px; height: 24px; margin: 0; flex-shrink: 0; accent-color: var(--gold); }
.radio small, .check small { display: block; color: var(--sand-200); font-size: var(--text-small); font-weight: 400; }
.radio span, .check span { font-weight: 400; }
.check { padding: var(--space-8) 0; }
.checks { margin: var(--space-16) 0; }
.checks .check { padding: var(--space-4) 0; }
.checks-inline { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); }
.board-functions[hidden] { display: none; }
/* Auswahl mit zugehörigen Feldern (Ort wählen oder neu erfassen) */
.choice .choice-body { margin-top: -2px; padding: var(--space-16) var(--space-16) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card-inset); }
@supports selector(:has(*)) {
  .choice .choice-body { display: none; }
  .choice:has(> label input:checked) .choice-body { display: block; }
}
/* Passwort anzeigen */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 104px; }
.pw-toggle { position: absolute; top: 50%; right: var(--space-4); transform: translateY(-50%); min-height: 40px; padding: 0 var(--space-12); border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--bronze-deep); font: 700 15px/1 var(--font-body); cursor: pointer; }
.pw-toggle:hover { color: var(--ink); }
/* Dateiauswahl: eigener Button, das Feld liegt unsichtbar darüber (bleibt per Tastatur bedienbar) */
input[type=file] { width: 100%; min-height: var(--control-height); padding: var(--space-8) 0; color: var(--white); font: inherit; }
.file-pick { position: relative; overflow: hidden; }
.file-pick .file-input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; opacity: 0; cursor: pointer; }
.file-pick:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.file-name { display: block; margin-top: var(--space-8); color: var(--sand-200); font-size: 15px; overflow-wrap: anywhere; }
.file-name.file-chosen { color: var(--white); font-weight: 700; }
@media (max-width: 480px) { .file-pick { width: 100%; } }
/* Suche: ein Feld mit Button rechts */
.search { display: flex; gap: var(--space-8); margin-bottom: var(--space-24); }
.search input { flex: 1; }
/* Bild zuschneiden */
.cropper { margin: var(--space-8) 0; }
.cropper-frame { position: relative; width: 240px; height: 240px; margin: 0 auto var(--space-8); overflow: hidden; border-radius: 50%; background: var(--card-inset); touch-action: none; cursor: grab; }
.cropper-frame img { position: absolute; top: 0; left: 0; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.cropper input[type=range] { width: 100%; min-height: var(--control-height); accent-color: var(--gold); }

/* =====================================================================
   7. Status, Hinweise, Rückmeldungen, Dialoge
   ===================================================================== */
/* Status: rundes Icon in der Statusfarbe und Text – keine farbige Fläche (Flächen sind Buttons vorbehalten) */
.status { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--white); font: 400 14px/1.3 var(--font-heading); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.status-icon { width: 24px; height: 24px; flex-shrink: 0; }
.status-disc { fill: var(--card-hover); }
.status-glyph { stroke: var(--white); }
.status-attending .status-disc { fill: var(--success); }
.status-absent .status-disc, .status-cancelled .status-disc, .status-failed .status-disc { fill: var(--danger); }
.status-published .status-disc, .status-sent .status-disc, .status-registered .status-disc, .status-open .status-disc,
.status-free .status-disc, .status-role .status-disc, .status-today .status-disc { fill: var(--gold); }
.status-waitlist .status-disc, .status-paused .status-disc { fill: var(--bronze); }
.status-attending .status-glyph, .status-published .status-glyph, .status-sent .status-glyph, .status-registered .status-glyph, .status-open .status-glyph,
.status-free .status-glyph, .status-role .status-glyph, .status-today .status-glyph, .status-waitlist .status-glyph, .status-paused .status-glyph { stroke: var(--ink); }
.status-today .status-glyph { fill: var(--ink); }
.status-open span, .status-today span { color: var(--gold); }

/* Rückmeldung nach dem Speichern */
.flash { margin-bottom: var(--space-24); padding: var(--space-12) var(--space-24); border: 1px solid var(--line); border-left: 8px solid var(--gold); border-radius: var(--radius-md);
  background: var(--card); color: var(--white); font-weight: 700; box-shadow: var(--elevation-soft-depth); }
.flash-success { border-left-color: var(--success); }
.flash-info { border-left-color: var(--gold); }
.flash-error { border-left-color: var(--danger); }
.flash-warning { border-left-color: var(--bronze); }
/* Schwebender Hinweis (Seite bleibt an der alten Position) */
.flash-toast { position: fixed; left: var(--space-16); right: var(--space-16); bottom: calc(var(--tabbar-height) + var(--space-24) + env(safe-area-inset-bottom)); z-index: 50; max-width: 520px; margin: 0 auto;
  box-shadow: var(--elevation-elevated-depth); transition: opacity 600ms ease, transform 600ms ease; }
.flash-toast-hide { opacity: 0; transform: translateY(12px); }
@media (min-width: 900px) { .flash-toast { bottom: var(--space-24); } }
/* Hinweis: Farbe nur als Balken links */
.notice { margin: var(--space-12) 0; padding: var(--space-12) var(--space-24); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius-md);
  background: var(--card-inset); color: var(--white); }
.zone .notice, main > .notice { background: var(--card); }
.notice a { color: var(--gold); font-weight: 700; }
.notice-info { border-left-color: var(--bronze); }
.notice-board { display: flex; align-items: center; gap: var(--space-8); color: var(--gold); }
.notice-board .icon { width: 16px; height: 16px; }
/* Wichtige Zusatzinformation: auffällig (kräftiger Rahmen, Warn-Icon), aber nicht gefüllt wie ein Button */
.important-note { display: flex; align-items: flex-start; gap: var(--space-12); margin: 0 0 var(--space-16); padding: var(--space-16);
  border: 2px solid var(--gold); border-left-width: 8px; border-radius: var(--radius-lg); background: var(--gold-tint-strong); color: var(--white); }
.important-note > .icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--gold); }
.important-note-body { min-width: 0; }
.important-note-title { display: block; color: var(--gold); font-size: 15px; letter-spacing: 1px; text-transform: uppercase; }
.important-note p { margin: var(--space-4) 0 0; font-size: 17px; line-height: 1.5; font-weight: 600; overflow-wrap: break-word; }
/* Countdown bis zum Anmeldeschluss: Hinweis ohne Rahmen (kein Button); kurz vor Schluss rot */
.countdown { display: inline-block; margin-left: var(--space-8); padding: 0 var(--space-8); border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.08);
  color: var(--sand-100); font-size: 13px; font-weight: 600; line-height: 20px; white-space: nowrap; vertical-align: 1px; }
.countdown-soon { background: rgba(200, 50, 43, 0.25); color: var(--danger-text); }

/* Dialoge: erhöhte Ebene (Elevated Depth) */
dialog { width: min(544px, calc(100vw - 32px)); max-height: 90vh; overflow: auto; padding: var(--space-24); border: 0; border-radius: var(--radius-lg);
  background: var(--card); color: var(--white); box-shadow: var(--elevation-elevated-depth); }
dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
dialog.result-dialog { position: relative; padding: var(--space-32) var(--space-24) var(--space-24); text-align: center; }
dialog.result-dialog:not([open]) { display: none; }
dialog.result-dialog[open]:not(:modal) { margin: var(--space-16) auto; } /* ohne JavaScript: als Hinweis oben auf der Seite */
.result-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto var(--space-12); border-radius: 50%;
  background: var(--success); color: var(--ink); font-size: 28px; font-weight: 700; }
.result-icon.result-warning, .result-icon.result-error { background: var(--bronze); }
.result-text { margin: 0 0 var(--space-8); font-size: 18px; line-height: 1.5; }
.result-next { margin: 0 0 var(--space-4); color: var(--sand-200); }
dialog.result-dialog .btn-row { flex-direction: column-reverse; gap: var(--space-12); margin-bottom: 0; }
dialog.result-dialog .btn-row > .btn { width: 100%; }
.dialog-close { position: absolute; top: var(--space-4); right: var(--space-4); width: var(--control-height); height: var(--control-height); border: 0; border-radius: 50%;
  background: none; color: var(--sand-200); font-size: 28px; line-height: 1; cursor: pointer; }
.dialog-close:hover { color: var(--white); background: var(--card-hover); }
dialog.confirm-dialog { max-width: 424px; padding: var(--space-32) var(--space-24) var(--space-24); text-align: center; }
.confirm-text { margin: 0 0 var(--space-16); font-size: 18px; line-height: 1.5; }
dialog.confirm-dialog .btn-row { flex-wrap: wrap; margin: 0; }
dialog.confirm-dialog .btn-row > .btn { flex: 1 1 140px; }
/* Personenbild gross */
dialog.lightbox { width: fit-content; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); padding: var(--space-12); overflow: visible; text-align: center; }
dialog.lightbox::backdrop { background: rgba(0, 0, 0, 0.85); }
.lightbox figure { margin: 0; }
.lightbox img { display: block; width: min(560px, calc(100vw - 56px)); max-height: calc(100vh - 120px); margin: 0 auto; object-fit: contain; border-radius: var(--radius-md); background: var(--card-inset); }
.lightbox figcaption { margin-top: var(--space-12); color: var(--gold); font: 300 18px/1.3 var(--font-heading); letter-spacing: 1.5px; text-transform: uppercase; }
.lightbox-close { position: absolute; top: -16px; right: -16px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--gold); color: var(--ink);
  font-size: 26px; line-height: 1; cursor: pointer; box-shadow: var(--elevation-soft-depth); }
.lightbox-close:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.preview-frame { width: 100%; min-height: 900px; border: 0; border-radius: var(--radius-md); background: #201e1e; }
@media (max-width: 600px) { .preview-frame { min-height: 1500px; } }
.placeholder-list code { background: var(--card-inset); }

/* =====================================================================
   8. Listen, Tabellen, Kennzahlen, Reiter, Schritte
   ===================================================================== */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: var(--space-12) 0; border-bottom: 1px solid var(--line); }
.list > li:last-child { border-bottom: 0; }
.list .sub { padding-left: var(--space-20); color: var(--sand-200); }
.list .sub.row-between { padding-top: var(--space-4); }
dl.details { display: grid; grid-template-columns: 1fr; gap: var(--space-4) var(--space-20); margin: 0; }
dl.details dt { margin-top: var(--space-12); color: var(--sand-200); font: 400 14px/1.5 var(--font-heading); letter-spacing: 1.5px; text-transform: uppercase; }
dl.details dd { margin: 0; }
@media (min-width: 600px) { dl.details { grid-template-columns: 200px 1fr; } dl.details dt { margin-top: 2px; } }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.table { width: 100%; border-collapse: collapse; }
table.table th, table.table td { padding: var(--space-12) var(--space-8); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.table th { color: var(--sand-200); font: 400 14px/1.4 var(--font-heading); letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; }
/* Tabellen am Handy: jede Zeile als Karte mit beschrifteten Werten */
@media (max-width: 699px) {
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { padding: var(--space-12) 0; border-bottom: 1px solid var(--line); }
  .table-stack tr:last-child { border-bottom: 0; }
  .table-stack td { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); padding: var(--space-4) 0; border: 0; }
  .table-stack td::before { content: attr(data-label); color: var(--sand-200); font-size: var(--text-small); }
  .table-stack td:first-child { display: block; padding-bottom: var(--space-8); }
  .table-stack td:first-child::before { content: none; }
}
/* Kennzahlen: gleich hohe Karten auf einer Linie (Spezifikation 2.4) */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-mobile-gutter); align-items: stretch; }
@media (min-width: 600px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-12); } }
.stat { padding: var(--space-12) var(--space-16); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card-inset); }
.stat strong { display: block; color: var(--gold); font: 300 32px/1.2 var(--font-heading); }
.stat span { color: var(--white); font-size: 15px; }
.stats-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-compact .stat { padding: var(--space-8) var(--space-4); text-align: center; }
.stats-compact .stat strong { font-size: 24px; }
.stats-compact .stat span { font-size: 13px; }
/* Reiter */
.tabs { display: flex; gap: var(--space-8); margin: var(--space-16) 0; padding-bottom: var(--space-4); overflow-x: auto; }
.tabs a { display: inline-flex; align-items: center; min-height: var(--control-height); padding: var(--space-8) var(--space-16); white-space: nowrap; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--card); color: var(--white);
  font: 400 15px/1 var(--font-heading); letter-spacing: 1px; text-transform: uppercase; transition: background var(--ease), color var(--ease); }
.tabs a:hover { background: var(--card-hover); color: var(--white); }
.tabs a.active { border-color: var(--gold); background: var(--gold-tint); color: var(--gold); }
/* Schrittanzeige als Fortschrittsleiste (nicht klickbar, deshalb ohne Fläche) */
.steps { display: flex; gap: var(--space-8); margin: var(--space-16) 0 var(--space-24); padding: 0; list-style: none; }
.steps li { position: relative; flex: 1; padding: var(--space-4) var(--space-4) var(--space-12); text-align: center; color: var(--sand-200);
  font: 400 14px/1.3 var(--font-heading); letter-spacing: 1px; text-transform: uppercase; }
.steps li::after { content: ""; position: absolute; left: var(--space-4); right: var(--space-4); bottom: 0; height: 4px; border-radius: var(--radius-full); background: var(--card-hover); }
.steps li.current { color: var(--gold); }
.steps li.current::after { background: var(--gold); }
.steps li.done { color: var(--white); }
.steps li.done::after { background: var(--bronze); }
@media (max-width: 599px) {
  .steps.many li { flex: 0 0 48px; }
  .steps.many li.current { flex: 1 1 auto; }
  .steps.many li:not(.current) .step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* Gäste bei der Anmeldung */
.guest { margin-bottom: var(--space-12); padding: var(--space-16); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card-inset); }
.guest-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-8); }
.guest-title { color: var(--gold); font: 400 18px/1.2 var(--font-heading); letter-spacing: 1.5px; text-transform: uppercase; }

/* =====================================================================
   9. Personen
   ===================================================================== */
.avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.avatar:not(.avatar-empty) { box-shadow: 0 0 0 2px rgba(213, 161, 95, 0.45); }
.avatar-sm { width: 40px; height: 40px; font-size: 15px; }
.avatar-md { width: 64px; height: 64px; font-size: 20px; }
.avatar-lg { width: 120px; height: 120px; font-size: 32px; }
.avatar-bday { width: 40px; height: 40px; font-size: 15px; }
.avatar-empty { background: linear-gradient(135deg, var(--bronze-deep), var(--card-hover)); color: var(--white); font-family: var(--font-heading); font-weight: 300; letter-spacing: 1px; }
.avatar-zoom { display: inline-flex; flex-shrink: 0; border-radius: 50%; cursor: zoom-in; transition: transform var(--ease); }
.avatar-zoom:hover { transform: scale(1.05); }
.avatar-zoom:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.member { display: flex; align-items: flex-start; gap: var(--space-16); }
.member .info { flex: 1; min-width: 0; }
.member h3 { margin: 0 0 var(--space-4); }
.member dl, .member-details dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4) var(--space-12); margin: 0; }
.member dt, .member-details dt { color: var(--sand-200); }
.member dd, .member-details dd { margin: 0; overflow-wrap: anywhere; }
.contact-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-12); }
/* Mitgliederliste: aufklappbare Karten */
.member-list { align-items: start; }
.member-card { padding: 0; }
.member-card > summary { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-16) var(--space-20); list-style: none; cursor: pointer;
  /* Rundung ausdrücklich: «inherit» greift bei <summary> nicht (der Browser hängt es in <details> an einen Slot) */
  border-radius: var(--radius-lg-inner); }
.member-card > summary::-webkit-details-marker { display: none; }
.member-card > summary:hover { background: var(--card-hover); }
.member-card > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.member-card > summary h3 { margin: 0; }
/* Vorstand: feiner goldener Rand */
.member-card-board { border-color: var(--gold); }
.member-card[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--radius-lg-inner) var(--radius-lg-inner) 0 0; }
.member-toggle { flex-shrink: 0; width: 12px; height: 12px; margin: -6px var(--space-4) 0 0; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg); transform-origin: 50% 50%; transition: transform .2s ease; }
.member-card[open] .member-toggle { transform: rotate(225deg); margin-top: 6px; }
.member-details { padding: var(--space-16) var(--space-20) var(--space-20); }
.member-role { display: block; margin-top: 2px; color: var(--sand-200); font-size: var(--text-small); }
.member-former { align-items: center; align-self: start; }
.member-former h3 { margin: 0; }
/* Runder Anruf-Button direkt auf der Karte */
.call-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--control-height); height: var(--control-height); border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-end)); color: var(--ink); box-shadow: var(--elevation-soft-depth); transition: transform var(--ease), filter var(--ease); }
.call-btn:hover { color: var(--ink); filter: brightness(1.06); }
.call-btn:active { transform: scale(0.98); filter: brightness(0.92); }
.call-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.call-btn .icon { width: 20px; height: 20px; }
@media (max-width: 480px) {
  .member-details dl { grid-template-columns: 1fr; gap: 0; }
  .member-details dt { margin-top: var(--space-12); font-size: var(--text-small); }
  .member-details dd a { display: inline-block; margin: -12px 0; padding: var(--space-12) 0; }
  .member-card > summary { padding: var(--space-12) var(--space-16); }
}
/* Social Media: kleine Karten mit Markenfarbe, Netzwerk und Profilname (6-Spalten-Raster am Handy, sonst nach Breite) */
.social-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--grid-mobile-gutter); margin-top: var(--space-8); }
.social-card { --brand: var(--bronze); display: flex; align-items: center; gap: var(--space-12); min-height: 56px; min-width: 0; padding: var(--space-8) var(--space-12) var(--space-8) var(--space-8);
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card-inset); color: var(--white); text-decoration: none;
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease); }
.social-card:hover { border-color: var(--brand); background: var(--card-hover); color: var(--white); box-shadow: var(--elevation-soft-depth); }
.social-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.social-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--brand); color: var(--white); }
.social-icon .icon { width: 20px; height: 20px; }
.social-text { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.3; }
.social-text strong { font-size: 15px; }
.social-text span { overflow: hidden; color: var(--sand-200); font-size: var(--text-small); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.social-ext { flex-shrink: 0; color: var(--sand-200); }
.social-ext .icon { width: 16px; height: 16px; }
.social-linkedin { --brand: #0a66c2; }
.social-instagram { --brand: #e4405f; }
.social-facebook { --brand: #1877f2; }
.social-x, .social-tiktok, .social-threads { --brand: #000000; }
.social-x .social-icon, .social-tiktok .social-icon, .social-threads .social-icon { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.social-youtube { --brand: #ff0000; }
.social-xing { --brand: #006567; }
.social-github { --brand: #24292f; }
.social-github .social-icon { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.social-bluesky { --brand: #1185fe; }
.social-pinterest { --brand: #e60023; }
.social-website { --brand: var(--bronze); }
/* Aufgeklappte Mitgliederkarte: Zwischentitel für «Über mich», Hobbies und Social Media */
.detail-title { margin: var(--space-16) 0 0; color: var(--sand-200); font: 400 14px/1.5 var(--font-heading); letter-spacing: 1.5px; text-transform: uppercase; }
.member-about p { margin: var(--space-4) 0 0; overflow-wrap: anywhere; }
.member-about p + p { margin-top: var(--space-8); }
.more-link { font-weight: 600; white-space: nowrap; }
/* Ganzer Text «Über mich» im Overlay: Titel oben, nur der Text scrollt, «Schliessen» bleibt am unteren Rand stehen.
   Ohne JavaScript öffnet der Sprunglink es als feste Einblendung */
dialog.text-dialog { position: relative; padding-top: var(--space-32); }
dialog.text-dialog[open], dialog.text-dialog:target { display: flex; flex-direction: column; overflow: hidden; }
dialog.text-dialog h2 { flex-shrink: 0; margin: 0 var(--space-40) var(--space-12) 0; }
.text-dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
dialog.text-dialog .btn-row { flex-shrink: 0; margin: var(--space-16) 0 0; padding-top: var(--space-16); border-top: 1px solid var(--line); }
dialog.text-dialog:target:not([open]) { position: fixed; top: 5vh; left: 0; right: 0; z-index: 100; margin: 0 auto; }
a.dialog-close { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.hobby-chips { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: var(--space-8) 0 0; padding: 0; list-style: none; }
.hobby-chips li { max-width: 100%; padding: var(--space-4) var(--space-12); border: 1px solid var(--gold-line); border-radius: var(--radius-full);
  background: var(--gold-tint); color: var(--white); font-size: var(--text-small); line-height: 1.4; overflow-wrap: anywhere; }
/* Verwalten im Profil: Karte, daneben Pfeile (Reihenfolge), Ändern und Entfernen */
.social-manage { display: grid; gap: var(--space-12); margin: var(--space-16) 0 var(--space-24); padding: 0; list-style: none; }
.social-item { position: relative; display: grid; gap: var(--space-8); padding-bottom: var(--space-12); border-bottom: 1px solid var(--line); }
.social-item:last-child { padding-bottom: 0; border-bottom: 0; }
.social-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-8); }
.icon-btn, .icon-btn-space { display: inline-flex; align-items: center; justify-content: center; width: var(--control-height); height: var(--control-height); flex-shrink: 0; }
.icon-btn { border: 1px solid var(--gold-line); border-radius: 50%; background: transparent; color: var(--gold); cursor: pointer; transition: background var(--ease), transform var(--ease); }
.icon-btn:hover { background: var(--gold-tint); }
.icon-btn:active { transform: scale(0.98); }
.icon-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
/* Ändern: kleines Feld über dem Inhalt darunter (am Handy volle Breite, am Desktop rechts) */
.social-edit > summary { display: inline-flex; list-style: none; cursor: pointer; }
.social-edit > summary::-webkit-details-marker { display: none; }
.social-edit[open] form { position: absolute; top: calc(100% - var(--space-4)); left: 0; right: 0; z-index: 5; padding: var(--space-16);
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); box-shadow: var(--elevation-elevated-depth); }
.social-edit .field { margin-bottom: var(--space-12); }
@media (min-width: 700px) {
  .social-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .social-edit[open] form { left: auto; width: min(420px, 80vw); }
}
.release-list { margin: var(--space-8) 0 var(--space-12); padding-left: var(--space-20); }
.release-list li { margin: var(--space-4) 0; }

/* Profil: eigene Person oben, E-Mail und Passwort aufklappbar */
.profile-head .member { align-items: center; }
.profile-head h2 { margin: 0 0 var(--space-4); color: var(--white); font-size: 24px; font-weight: 600; }
.profile-head .info p { margin: 0; }
.profile-image { margin-top: var(--space-24); }
.visibility-note { margin: 0 0 var(--space-16); }
.card.accordion { padding: 0; }
.accordion > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); min-height: 64px; padding: var(--space-16); list-style: none; cursor: pointer; border-radius: var(--radius-lg-inner); }
.accordion[open] > summary { border-radius: var(--radius-lg-inner) var(--radius-lg-inner) 0 0; }
.accordion > summary::-webkit-details-marker { display: none; }
.accordion > summary > span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.accordion > summary::after { content: ""; flex-shrink: 0; width: 10px; height: 10px; margin: -4px 8px 0 0; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg); transition: transform .2s ease; }
.accordion[open] > summary::after { transform: rotate(225deg); margin-top: 8px; }
.accordion > summary:hover { background: var(--card-hover); }
.accordion > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.accordion-body { padding: 0 var(--space-16) var(--space-24); }
@media (min-width: 700px) { .accordion > summary { padding: var(--space-20) var(--space-24); } .accordion-body { padding: 0 var(--space-24) var(--space-24); } }
.logout-profile { margin: var(--space-24) 0; }
/* Login: grosses Signet mit Schutzzone (50 % der Logohöhe) */
.login-brand { margin: var(--space-48) 0; text-align: center; }
.login-brand img { width: 96px; height: 96px; border-radius: 50%; }
@media (min-width: 600px) { .login-brand { margin: var(--space-64) 0; } .login-brand img { width: 128px; height: 128px; } }
@media (max-width: 600px) {
  /* Ausloggen wird selten gebraucht: am Handy im Profil statt im Kopf */
  body.with-tabbar .topbar .logout { display: none; }
}

/* =====================================================================
   10. Events
   ===================================================================== */
/* Startseite: am Handy Geburtstage, Titel, Filter, Eventliste, Links;
   am Desktop Filter-Spalte links (3 von 12 Spalten = 25 %), Eventliste rechts (9 Spalten) */
.home-layout { display: flex; flex-direction: column; }
.home-side, .home-main { display: contents; }
.home-layout .birthdays { order: 1; }
.home-layout .list-head { order: 2; }
.home-layout .home-note { order: 3; }
.home-layout .filter-bar { order: 4; }
.home-layout .event-list, .home-layout .home-main > .empty { order: 5; }
.home-layout .archive-link { order: 6; }
.list-head { margin: var(--space-8) 0 0; }
.list-head h1 { margin: 0; }
.filter-title { display: none; }
/* Filter: am Handy eine wischbare Reihe, aktiver Filter als Auswahl (Rand), Anzahl als Index */
.filter-bar { display: flex; flex-wrap: nowrap; gap: var(--grid-mobile-gutter); margin: var(--space-12) calc(-1 * var(--grid-mobile-margin)) var(--space-24);
  padding: var(--space-4) var(--grid-mobile-margin) var(--space-8); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.filter-bar::-webkit-scrollbar { display: none; }
.filter-btn { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--space-8); min-height: var(--control-height); padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); text-decoration: none; white-space: nowrap; font-weight: 600;
  transition: background var(--ease), color var(--ease); }
.filter-btn:hover { background: var(--gold-tint); color: var(--gold); }
.filter-btn.active { background: var(--gold-tint-strong); box-shadow: inset 0 0 0 2px var(--gold); }
.filter-btn .count { min-width: 24px; padding: 0 var(--space-4); border-radius: var(--radius-full); background: var(--gold-tint-strong); font-size: 13px; line-height: 24px; text-align: center; }
.filter-btn.active .count { background: var(--gold); color: var(--ink); }
.archive-link { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-12); margin: var(--space-24) 0; }
@media (min-width: 1000px) {
  .home-layout { display: grid; grid-template-columns: minmax(240px, 3fr) minmax(0, 9fr); column-gap: var(--grid-desktop-gutter); align-items: start; }
  .home-side { display: flex; flex-direction: column; gap: var(--grid-desktop-gutter); position: sticky; top: 120px; }
  /* In der Filter-Spalte stehen die Filter zuoberst */
  .home-side .filter-bar { order: 1; }
  .home-side .birthdays { order: 2; }
  .home-side .archive-link { order: 3; }
  .home-main { display: block; min-width: 0; }
  .home-layout .archive-link { flex-direction: column; align-items: stretch; margin: 0; }
  .filter-title { display: block; margin: 0 0 var(--space-12); color: var(--sand-200); font: 400 14px/1.5 var(--font-heading); letter-spacing: 1.5px; text-transform: uppercase; }
  .home-side .filter-bar, .list-side .filter-bar { flex-direction: column; margin: 0; padding: var(--space-20); overflow: visible; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--elevation-soft-depth); }
  .home-side .filter-btn, .list-side .filter-btn { justify-content: space-between; border-radius: var(--radius-md); box-shadow: none; color: var(--white); }
  .home-side .filter-btn:hover, .list-side .filter-btn:hover { background: var(--card-hover); color: var(--white); }
  .home-side .filter-btn.active, .list-side .filter-btn.active { background: var(--gold-tint-strong); box-shadow: inset 3px 0 0 var(--gold); color: var(--gold); }
  /* Liste mit Filter-Spalte (Mitglieder): links Suche und Filter (3 von 12 Spalten), rechts der Inhalt */
  .side-layout { display: grid; grid-template-columns: minmax(240px, 3fr) minmax(0, 9fr); column-gap: var(--grid-desktop-gutter); align-items: start; }
  .list-side { display: flex; flex-direction: column; gap: var(--grid-desktop-gutter); position: sticky; top: 120px; }
  .list-side .search { flex-direction: column; margin: 0; }
  .list-side .search .btn { width: 100%; }
  .list-main { min-width: 0; }
  .list-head { margin: 0 0 var(--space-24); }
}

/* Eventliste: ein Event pro Zeile (Liste, keine Kacheln nebeneinander) */
.event-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16); margin-bottom: var(--space-24); }
.event-card { position: relative; padding-right: 64px; margin-bottom: 0; }
.event-card .date { display: flex; align-items: flex-start; gap: var(--space-8); color: var(--white); font: 700 16px/1.4 var(--font-body); }
.event-card .date .icon { margin-top: 3px; color: var(--gold); }
.date-lines { display: flex; flex-direction: column; }
.date-time { color: var(--sand-200); font-size: 15px; font-weight: 400; }
.event-type { display: block; width: fit-content; margin-top: var(--space-12); color: var(--sand-200); font: 500 13px/1.3 var(--font-heading); letter-spacing: 1.5px; text-transform: uppercase; }
.radio small.event-type, li .event-type { margin-top: 2px; }
.event-card h3 { margin: var(--space-8) 0; }
.event-card h3 a.card-main-link { color: inherit; font-weight: inherit; text-decoration: none; }
.event-card h3 a.card-main-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.event-card h3 a.card-main-link:focus { outline: none; }
.event-card:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.event-card .meta { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-20); color: var(--white); }
.event-card .meta .icon { color: var(--gold); }
.event-card .foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8); margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--line); }
.card-chevron { display: inline-flex; margin-left: auto; color: var(--gold); }
.card-chevron .icon { width: 24px; height: 24px; }
.my-meal { color: var(--white); font-size: 15px; }
.my-meal strong { color: var(--white); font-weight: 700; }
/* Art-Symbol oben rechts: dekorativ, deshalb ohne Fläche und Rahmen */
.type-icon { position: absolute; top: var(--space-16); right: var(--space-16); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--bronze); }
.type-icon .icon { width: 24px; height: 24px; }
/* Vorstandsevents: goldener Rahmen und Schloss */
.event-card-board { border-color: var(--gold); background: linear-gradient(135deg, rgba(213, 161, 95, 0.16), rgba(213, 161, 95, 0.03) 60%), var(--card); }
.event-type-board { display: inline-flex; align-items: center; gap: var(--space-8); padding: 2px var(--space-8); border: 1px solid var(--gold); border-radius: var(--radius-full); color: var(--gold); }
.event-type-board .icon { width: 14px; height: 14px; }
/* Karten-Links (Google Maps) */
.map-links { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--grid-mobile-gutter); margin-top: var(--space-16); }
.map-link { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--control-height); padding: var(--space-8) var(--space-16) var(--space-8) var(--space-12);
  border-radius: var(--radius-full); background: var(--gold-tint-strong); color: var(--gold); text-decoration: none; font-size: 15px; font-weight: 600; transition: background var(--ease); }
.map-link:hover { background: rgba(213, 161, 95, 0.3); color: var(--gold); }
.map-link .icon { width: 18px; height: 18px; }
.map-link-inline { margin-top: var(--space-8); }
@media (max-width: 480px) {
  .event-card { padding-right: var(--space-16); }
  .event-card .date { margin-right: 48px; }
  /* Karten-Links als drei gleich breite Kacheln (6-Spalten-Raster: je 2 Spalten) */
  .event-card .map-links { display: grid; grid-template-columns: repeat(3, 1fr); }
  .event-card .map-link { flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: var(--space-8) var(--space-4); text-align: center; font-size: 14px; }
  .event-card .map-link .icon { width: 20px; height: 20px; }
}
/* Desktop: jede Zeile mit Datum links, Inhalt in der Mitte und Status rechts – leicht zu überfliegen */
@media (min-width: 900px) {
  .event-list { gap: var(--space-12); }
  .event-card { display: grid; grid-template-columns: 152px minmax(0, 1fr) 200px; column-gap: var(--grid-desktop-gutter); align-items: start; padding: var(--space-20) 56px var(--space-20) var(--space-24); }
  .event-card > * { grid-column: 2; }
  .event-card .date { grid-column: 1; grid-row: 1; }
  .event-card .type-icon { position: static; grid-column: 1; grid-row: 2 / span 4; justify-content: flex-start; width: auto; height: auto; margin-top: var(--space-12); }
  .event-card .event-type { margin-top: 0; }
  .event-card h3 { margin-top: var(--space-4); }
  .event-card .foot { grid-column: 3; grid-row: 1 / span 5; align-self: stretch; flex-direction: column; align-items: flex-start; justify-content: center; flex-wrap: nowrap;
    margin: 0; padding: 0 0 0 var(--grid-desktop-gutter); border-top: 0; border-left: 1px solid var(--line); }
  .card-chevron { position: absolute; top: 50%; right: var(--space-16); margin: 0; transform: translateY(-50%); }
}

/* Eventseite: Kopf, Status-Bereich, Inhalte; am Desktop 8 + 4 Spalten mit mitlaufendem Status */
.event-layout { display: flex; flex-direction: column; }
.event-head { position: relative; padding-right: 64px; }
.event-head .event-type { margin: 0 0 var(--space-4); }
.event-head h1 { margin: 0; overflow-wrap: break-word; }
.event-head-actions { margin: var(--space-12) 0 0; }
.event-head-actions .btn { padding-left: 0; }
.event-facts { display: grid; gap: var(--space-8); margin: var(--space-16) 0 0; padding: 0; list-style: none; }
.event-facts li { display: flex; align-items: flex-start; gap: var(--space-12); font-size: 17px; line-height: 1.4; }
.event-facts .icon { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; color: var(--gold); }
.event-facts .event-cost { color: var(--gold); font-weight: 700; }
.status-block { padding: var(--space-16) var(--space-20); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px rgba(166, 128, 83, 0.45); }
.status-block p { margin: var(--space-8) 0 0; }
@media (min-width: 1000px) {
  .event-layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--grid-desktop-gutter); align-items: start; }
  .event-layout > * { grid-column: 1; min-width: 0; }
  .event-layout > .status-block { grid-column: 2; grid-row: 1 / span 12; position: sticky; top: 120px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(166, 128, 83, 0.45), var(--elevation-soft-depth); }
  .event-layout > .status-block .btn-stack { flex-direction: column; align-items: stretch; }
  .event-layout > .status-block .btn-stack > * { width: 100%; }
}
.speakers .member + .member, .speaker-item + .speaker-item { margin-top: var(--space-16); padding-top: var(--space-16); border-top: 1px solid var(--line); }
.speaker-rows .field { margin-bottom: var(--space-8); }
/* «Anmelden» bleibt am Handy im Daumenbereich erreichbar (erhöhte Ebene) */
.sticky-cta { position: fixed; left: var(--space-12); right: var(--space-12); bottom: calc(var(--tabbar-height) + var(--space-16) + env(safe-area-inset-bottom)); z-index: 30;
  display: flex; align-items: center; gap: var(--space-12); padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16);
  border: 1px solid var(--gold-line); border-radius: var(--radius-lg); background: rgba(44, 38, 34, 0.97); box-shadow: var(--elevation-elevated-depth); }
.sticky-cta[hidden] { display: none; }
.sticky-cta-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sticky-cta-text strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cta-text span { color: var(--sand-200); font-size: var(--text-small); }
.sticky-cta .btn { flex-shrink: 0; padding-left: var(--space-20); padding-right: var(--space-20); }
.event-layout:has(+ .sticky-cta) { padding-bottom: 96px; }
@media (min-width: 1000px) { .sticky-cta { display: none !important; } .event-layout:has(+ .sticky-cta) { padding-bottom: 0; } }

/* Geburtstage: schmale Zeile (Handy) bzw. Liste in der Seitenspalte (Desktop); keine Buttons, deshalb ohne Fläche */
.birthdays { margin: 0 0 var(--space-16); }
.birthdays-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-12); }
.birthdays-head h2 { display: inline-flex; align-items: center; gap: var(--space-8); margin: 0; font-size: 18px; }
.birthdays-head h2 .icon { width: 20px; height: 20px; vertical-align: 0; color: var(--gold); }
.birthdays-head .carousel-nav { margin-left: auto; align-self: center; }
.carousel-nav { display: flex; gap: var(--space-8); }
.carousel-btn { width: var(--control-height); height: var(--control-height); border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-end)); color: var(--ink);
  font-size: 24px; line-height: 1; cursor: pointer; }
.carousel-btn:disabled { background: transparent; color: var(--sand-200); box-shadow: inset 0 0 0 1px var(--line); cursor: default; opacity: .6; }
.carousel-static .carousel-nav { display: none; }
.bday-track { display: flex; gap: var(--space-8); margin: 0; padding: var(--space-8) 2px var(--space-4); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.bday-track::-webkit-scrollbar { display: none; }
.bday-track:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--radius-md); }
.bday { display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-12); max-width: 232px; padding: 2px var(--space-12) 2px 0; scroll-snap-align: start; }
.bday .avatar-zoom, .bday .avatar { flex-shrink: 0; }
.bday-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.bday-name { overflow: hidden; font-size: 15px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.bday-date { color: var(--sand-200); font-size: var(--text-small); }
.bday-today .avatar { box-shadow: 0 0 0 3px var(--gold); }
.bday-today .bday-date { color: var(--gold); font-weight: 700; }
@media (max-width: 599px) { .birthdays .carousel-nav { display: none; } }
@media (min-width: 1000px) {
  .home-side .birthdays, .list-side .birthdays { margin: 0; padding: var(--space-20); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--elevation-soft-depth); }
  .home-side .birthdays .carousel-nav, .list-side .birthdays .carousel-nav { display: none; }
  .home-side .bday-track, .list-side .bday-track { flex-direction: column; padding: var(--space-12) 0 0; overflow: visible; }
  .home-side .bday, .list-side .bday { max-width: none; padding: var(--space-4) 0; }
}

/* «Heute»: Anfahrt während eines Events auf einen Tipp erreichbar (auch auf der Login-Seite) */
.live-events { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); margin: var(--space-12) 0 var(--space-24); }
.login-brand + .card + .live-events { margin-top: var(--space-32); }
.live-event { min-width: 0; max-width: 100%; padding: var(--space-20); border: 1px solid var(--gold); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(213, 161, 95, 0.2), var(--card) 65%); box-shadow: var(--elevation-soft-depth); }
.live-badge { display: inline-block; padding: 2px var(--space-12); border-radius: var(--radius-full); background: var(--gold); color: var(--ink); font: 700 13px/20px var(--font-body); letter-spacing: 1px; text-transform: uppercase; }
.live-event h2 { margin: var(--space-12) 0 var(--space-4); color: var(--white); font-size: 22px; line-height: 1.25; overflow-wrap: break-word; }
.live-time { display: flex; align-items: center; gap: var(--space-8); margin: 0 0 var(--space-16); color: var(--sand-100); font-size: 17px; }
.live-time .icon { width: 18px; height: 18px; color: var(--gold); }
.live-event .important-note { margin: 0 0 var(--space-16); }
/* Ein Ort pro Zeile: Button, darunter Adresse mit «Kopieren» */
.live-buttons { display: grid; grid-template-columns: minmax(0, 1fr); }
.live-place { display: grid; gap: var(--space-8); min-width: 0; max-width: 100%; padding: var(--space-12) 0; }
.live-place + .live-place { border-top: 1px solid rgba(213, 161, 95, 0.25); }
.live-place:first-child { padding-top: 0; }
.live-place:last-child { padding-bottom: 0; }
.btn.live-btn { display: flex; justify-content: flex-start; gap: var(--space-12); min-width: 0; max-width: 100%; min-height: 64px; padding: var(--space-8) var(--space-16); text-align: left; }
.live-btn .icon { width: 24px; height: 24px; flex-shrink: 0; }
.live-btn span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.live-btn small { font-size: var(--text-small); opacity: .8; overflow-wrap: break-word; }
.live-address { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding: 2px 2px 0 var(--space-4); }
.live-address-text { min-width: 0; color: var(--sand-100); font-size: 16px; line-height: 1.4; overflow-wrap: break-word; user-select: text; -webkit-user-select: text; }
.copy-btn { display: inline-flex; flex-shrink: 0; align-items: center; gap: var(--space-8); min-height: var(--control-height); padding: 0 var(--space-12);
  border: 1px solid var(--gold-line); border-radius: var(--radius-full); background: transparent; color: var(--gold); font: 700 14px/1 var(--font-body); cursor: pointer; }
.copy-btn .icon { width: 18px; height: 18px; }
.copy-btn:hover { background: var(--gold-tint); }
.copy-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.copy-btn.copied { border-color: var(--success); background: var(--success); color: var(--ink); }
.copy-btn.copy-btn-large { min-height: var(--control-height); padding: 0 var(--space-20); border-radius: var(--radius-full); font-size: 16px; }

/* Kalender abonnieren */
.calendar-url { margin: var(--space-12) 0; padding: var(--space-12); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card-inset); }
.calendar-url code { display: block; padding: 0; background: none; color: var(--sand-100); font-size: var(--text-small); line-height: 1.5; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.calendar-link .btn .icon { width: 18px; height: 18px; }
.calendar-help h3 { margin: var(--space-16) 0 var(--space-4); }
.calendar-help ul { margin: 0; padding-left: var(--space-20); }
.calendar-help li { margin: var(--space-4) 0; }

/* =====================================================================
   11. Druck
   ===================================================================== */
@media print {
  .topbar, .tabbar, .btn, .actions, form, .sticky-cta { display: none !important; }
  body { background: var(--white); color: var(--ink); }
  .card { padding: 0; border: 0; background: none; box-shadow: none; }
  h1, h2, h3, a { color: var(--ink); }
}