/*
 * Tafel – ergänzende Bausteine.
 * Grundlage ist das unveränderte Stylesheet von loge-beethoven.de (public/site/chunks/*.css):
 * Farben, Schriften, Header, Footer, Typografie und Utilities kommen von dort.
 * Hier stehen nur Tafel-eigene Komponenten (Präfix tafel-), gebaut aus denselben Tokens.
 */

:root {
  --tafel-danger: #8a2f2a;
  --tafel-ok: #3d5b3a;
  --tafel-field: #fffdf8;
}

/* ── Tafel im Hauptmenü: Abmelden als Menüpunkt, Abschnitt im Vollbild-Menü ── */
.tafel-sublink-button { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; background: none; border: 0; }
.tafel-mobile-section { margin: 2.5rem 0 2.5rem; padding-top: 2rem; border-top: 1px solid color-mix(in oklab, var(--color-parchment) 20%, transparent); }
.tafel-mobile-section button { cursor: pointer; }
#mobile-menu > div { overflow-y: auto; }

.tafel-lead { white-space: pre-line; }
.tafel-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }

/* ── Buttons wie auf loge-beethoven.de (Kontaktseite): eckig, h-12, Navy ── */
.tafel-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 3rem; padding: 0 1.75rem;
  background: var(--color-navy); color: var(--color-parchment); border: 0; cursor: pointer; text-decoration: none;
  font: inherit; white-space: nowrap; transition: background-color .2s var(--ease-out-refined);
}
.tafel-btn:hover, .tafel-btn:focus-visible { background: var(--color-navy-deep); }
.tafel-btn-gilt { background: var(--color-gilt); color: var(--color-ink); }
.tafel-btn-gilt:hover, .tafel-btn-gilt:focus-visible { background: color-mix(in oklab, var(--color-gilt) 85%, var(--color-ink) 15%); }
.tafel-danger { color: var(--tafel-danger); cursor: pointer; }
button.link-underline { cursor: pointer; }

/* ── Kasten wie die Adress-Box der Kontaktseite ── */
.tafel-panel { border: 1px solid var(--color-line); background: color-mix(in oklab, var(--color-parchment) 40%, transparent); padding: 2rem; }
@media (min-width: 48rem) { .tafel-panel { padding: 2.5rem; } }
.tafel-narrow { max-width: 42rem; }
.tafel-login { max-width: 32rem; }

/* ── Meldungen ── */
.tafel-alert { margin-bottom: 2rem; padding: 1rem 1.25rem; border-left: 2px solid var(--color-gilt);
  background: color-mix(in oklab, var(--color-parchment) 45%, transparent); color: var(--color-ink-soft); }
.tafel-alert ul { margin: .5rem 0 0; padding-left: 1.25rem; list-style: disc; }
.tafel-alert-ok { border-left-color: var(--tafel-ok); }
.tafel-alert-error { border-left-color: var(--tafel-danger); color: var(--tafel-danger); }
.tafel-panel .tafel-alert { margin: 1.5rem 0 0; }
.tafel-secret { display: inline-block; margin-left: .25rem; padding: .25rem .6rem; border: 1px dashed var(--color-gilt);
  background: var(--tafel-field); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.1rem; letter-spacing: .04em; user-select: all; }

/* ── Formulare ── */
.tafel-form { display: grid; gap: 1.5rem; }
.tafel-panel > .eyebrow + .tafel-form, .tafel-panel .tafel-alert + .tafel-form { margin-top: 1.5rem; }
.tafel-field { display: grid; gap: .5rem; align-content: start; }
.tafel-field label, .tafel-label { font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: var(--color-stone); }
.tafel-hint { font-size: .875rem; color: var(--color-stone); }
.tafel-input {
  width: 100%; height: 3rem; padding: 0 1rem; border: 1px solid var(--color-line); border-radius: 0;
  background: var(--tafel-field); color: var(--color-ink); font: inherit; font-size: 1rem;
  transition: border-color .15s var(--ease-out-refined), box-shadow .15s var(--ease-out-refined);
}
textarea.tafel-input { height: auto; min-height: 7rem; padding: .75rem 1rem; resize: vertical; line-height: 1.6; }
.tafel-input::placeholder { color: color-mix(in oklab, var(--color-stone) 80%, transparent); }
.tafel-input:focus { outline: none; border-color: var(--color-gilt); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-gilt) 22%, transparent); }
.tafel-input-short { max-width: 9rem; }
.tafel-input-sm { height: 2.5rem; padding: 0 .75rem; }
.tafel-check { display: inline-flex; align-items: flex-start; gap: .75rem; cursor: pointer; color: var(--color-ink-soft); }
.tafel-check input { flex-shrink: 0; width: 1.1rem; height: 1.1rem; margin-top: .25rem; accent-color: var(--color-navy); }
.tafel-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.tafel-row { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) {
  .tafel-row { grid-template-columns: 1fr 1fr; }
  .tafel-row-action { grid-template-columns: 1fr 1fr auto; align-items: end; }
}
.tafel-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.tafel-inline .tafel-input-sm { width: 14rem; max-width: 100%; }
.tafel-inline .tafel-check { align-items: center; }
.tafel-inline .tafel-check input { margin-top: 0; }

/* ── Auswahlliste „Was bringen Sie mit?“ ── */
.tafel-combo { position: relative; }
.tafel-combo-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); max-height: 18rem; overflow-y: auto;
  margin: 0; padding: .5rem; list-style: none; background: var(--color-paper); border: 1px solid var(--color-line); box-shadow: var(--shadow-raise); }
.tafel-combo-list li { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .55rem .75rem; cursor: pointer; }
.tafel-combo-list li[aria-selected="true"], .tafel-combo-list li:hover { background: color-mix(in oklab, var(--color-parchment) 70%, transparent); }
.tafel-combo-list mark { background: none; color: var(--color-navy); font-weight: 600; }
.tafel-combo-list .alt { font-size: .8125rem; color: var(--color-stone); }
.tafel-combo-list .taken { flex-shrink: 0; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-gilt); }
.tafel-combo-list .new { color: var(--color-navy); font-style: italic; border-top: 1px solid var(--color-line); margin-top: .25rem; }
.tafel-combo-list .none { color: var(--color-stone); font-style: italic; cursor: default; }
.tafel-dup-hint { font-size: .875rem; padding: .6rem .8rem; border-left: 2px solid var(--color-gilt);
  background: color-mix(in oklab, var(--color-parchment) 60%, transparent); color: var(--color-ink-soft); }
.tafel-dup-hint strong { font-weight: 600; }

/* ── Termin: Eckdaten und Beitragsliste (wie „Ablauf der Zusammenkünfte“) ── */
.tafel-facts { display: grid; gap: 2rem; margin: 0; }
@media (min-width: 48rem) { .tafel-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tafel-facts dd { margin: .75rem 0 0; }
.tafel-contribs { padding: 0; list-style: none; }
.tafel-contribs li { display: grid; grid-template-columns: 5rem 1fr auto; gap: 1rem; align-items: baseline; padding: 1.25rem 0;
  border-top: 1px solid color-mix(in oklab, var(--color-gilt) 40%, transparent); }
.tafel-contribs li:last-child { border-bottom: 1px solid color-mix(in oklab, var(--color-gilt) 40%, transparent); }
.tafel-contribs .tafel-kz { letter-spacing: .06em; }
.tafel-contribs li.is-mine .tafel-kz { color: var(--color-gilt); }
@media (max-width: 40rem) {
  .tafel-contribs li { grid-template-columns: 4rem 1fr; }
  .tafel-contribs .tafel-ops { grid-column: 2; justify-content: flex-start; }
}
.tafel-ops { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: .5rem 1.25rem; font-size: .875rem; }
.tafel-ops form { display: inline; }

.tafel-badge { display: inline-block; padding: .1rem .5rem; border: 1px solid var(--color-line); font-size: .6875rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-stone); vertical-align: middle; }
.tafel-badge-ok { border-color: color-mix(in oklab, var(--tafel-ok) 60%, transparent); color: var(--tafel-ok); }
.tafel-badge-auto { border-color: var(--color-gilt); color: var(--color-gilt); cursor: help; }
.tafel-past { opacity: .6; }
.tafel-sub { font-family: var(--font-body), Georgia, serif; }

/* ── Verwaltungstabellen ── */
.tafel-list-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.tafel-table .tafel-ops { justify-content: flex-end; }
.tafel-dish-form { gap: .75rem; }
.tafel-dish-field { display: inline-flex; align-items: center; gap: .5rem; }
@media (max-width: 47.99rem) {
  /* Tabellen als kompakte Blöcke (wie die mobile Liste im Arbeitskalender) */
  .tafel-table thead { display: none; }
  .tafel-table, .tafel-table tbody { display: block; width: 100%; }
  .tafel-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; padding: 1.25rem 0; }
  .tafel-table td { display: block; padding: 0 !important; min-width: 0; }
  .tafel-table td:first-child, .tafel-table td:has(> .tafel-inline) { flex: 1 1 100%; }
  .tafel-table td:last-child { margin-left: auto; }
  .tafel-inline .tafel-input-sm, .tafel-dish-field { flex: 1 1 12rem; width: auto; }
  .tafel-dish-field .tafel-input-sm { flex: 1 1 auto; width: 0; min-width: 8rem; }
}