/*
 * Gastgeberbereich (Plan C1) nach den Entwürfen `Host*`. Nur Variablen aus
 * design/system/tokens.css (CLAUDE.md §1b). Gebaut für das Telefon; breiter wird nur die Spalte.
 */

.fw-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.fw-center-text {
  text-align: center;
}

/* ---------- Kopfleiste ---------- */

.fw-host-header {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-height: var(--space-8);
  padding: var(--space-2) max(var(--space-4), calc((100% - var(--app-column-width)) / 2));
  border-bottom: 1px solid var(--color-line);
  box-sizing: border-box;
}

.fw-host-header > svg {
  flex-shrink: 0;
}

.fw-host-back {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  margin-left: calc(-1 * var(--space-2));
  border-radius: var(--radius-control-small);
  color: var(--color-text);
}

.fw-host-header-text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.fw-host-header-title {
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
}

.fw-host-header-subtitle {
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.fw-host-icon-button {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-control-small);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

/* ---------- Seite ---------- */

.fw-host-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--app-column-width);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-8);
}

.fw-host-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fw-host-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-title-2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.fw-host-subtitle {
  margin: 0;
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
}

.fw-host-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-control);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.fw-label {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.fw-hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.fw-hint strong {
  color: var(--color-text);
}

.fw-button {
  gap: var(--space-2);
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.fw-button.fw-button-outline {
  border: 1px solid var(--color-line-strong);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: none;
}

.fw-soft-button {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-control-small);
  background: var(--color-accent-soft);
  color: var(--color-accent-ink);
  font: inherit;
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  text-decoration: none;
  cursor: pointer;
}

.fw-host-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.fw-host-info {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--color-accent-soft);
  color: var(--color-accent-ink);
  font-size: var(--text-small);
}

.fw-host-info svg,
.fw-form-summary > svg,
.fw-field-error svg {
  flex-shrink: 0;
}

.fw-host-test-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--color-neutral-soft);
  color: var(--color-neutral-ink);
  font-size: var(--text-small);
}

.fw-host-tag {
  align-self: flex-start;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ---------- Formulare ---------- */

.fw-host-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.fw-field,
.fw-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.fw-field > label,
.fw-field-label {
  padding: 0;
  font-weight: var(--weight-bold);
}

.fw-host-form input:not([type='radio'], [type='checkbox']),
.fw-package-billing input {
  width: 100%;
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  box-sizing: border-box;
}

/* Code aus der Mail: gleich breite Ziffern und Abstand, damit man beim Abtippen mitzählen kann. */
/* `input.` im Selektor: sonst gewinnt die allgemeine Regel für Eingabefelder oben (`font: inherit`). */
.fw-host-form input.fw-code-input {
  font-size: var(--text-title-3);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-label);
}

.fw-host-form [aria-invalid='true'],
.fw-package-billing [aria-invalid='true'] {
  border-color: var(--color-danger);
  box-shadow: inset 0 0 0 1px var(--color-danger);
}

.fw-field-error {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: 0;
  color: var(--color-danger-ink);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
}

.fw-field-error svg {
  margin-top: 2px;
}

.fw-form-summary {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
}

.fw-form-summary p,
.fw-form-summary ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fw-form-summary a {
  color: inherit;
}

.fw-form-success {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--color-success-soft);
  color: var(--color-success-ink);
  font-weight: var(--weight-semibold);
}

.fw-host-form-foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
  text-align: center;
}

.fw-host-form > .fw-button {
  margin-top: var(--space-4);
}

/* Anlass als Chips: echte Radioknöpfe, nur unsichtbar – Tastatur und Screenreader bleiben. */
.fw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.fw-chip {
  position: relative;
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.fw-chip input,
.fw-theme input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.fw-chip svg {
  display: none;
}

.fw-chip:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-ink);
}

.fw-chip:has(input:checked) svg {
  display: block;
}

.fw-chip:has(input:focus-visible),
.fw-theme:has(input:focus-visible),
.fw-choice:has(input:focus-visible) {
  box-shadow: var(--focus-ring);
}

.fw-date {
  position: relative;
  display: block;
}

/*
 * Safari auf dem iPhone gibt Datumsfeldern eine eigene Mindestbreite nach dem Inhalt und ignoriert
 * dabei `width: 100%`. Nach dem Antippen steht dort „Fr., 16. Okt. 2026“, und das Feld ragt über
 * den Bildschirmrand. Ohne eigenes Aussehen des Systems hält es sich an die Spalte.
 */
.fw-date input {
  display: block;
  min-width: 0;
  max-width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.fw-date input::-webkit-date-and-time-value {
  text-align: left;
}

.fw-date svg {
  position: absolute;
  top: 50%;
  right: var(--space-4);
  color: var(--color-text-muted);
  pointer-events: none;
  translate: 0 -50%;
}

/* Das eingebaute Kalendersymbol liegt unsichtbar über dem eigenen – tippen öffnet trotzdem. */
.fw-date input::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--control-height);
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ---------- Karten und Zeilen ---------- */

.fw-host-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
}

.fw-host-card-head {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.fw-host-card-head h2 {
  margin: 0;
  font-size: var(--text-body);
}

.fw-host-rows {
  gap: 0;
  padding: 0;
}

.fw-host-row,
.fw-toggle {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-height: var(--space-8);
  padding: var(--space-3) var(--space-4);
  color: inherit;
  text-decoration: none;
}

.fw-host-rows > * + * {
  border-top: 1px solid var(--color-line);
}

.fw-host-row > svg {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.fw-host-row-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-control-small);
  background: var(--color-neutral-soft);
  color: var(--color-text);
}

.fw-host-row-text,
.fw-choice-text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.fw-event-title {
  font-weight: var(--weight-bold);
}

/* ---------- Meine Events ---------- */

.fw-host-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.fw-event-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fw-event-card-head {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.fw-event-card-photo {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-1) var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-photo);
  background: var(--color-photo-frame);
  rotate: -3deg;
}

.fw-event-card-photo span {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-photo-inner);
  background: linear-gradient(165deg, var(--site-art-sand), var(--site-art-plum));
}

.fw-event-card-text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.fw-event-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  justify-content: space-between;
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.fw-event-card-foot strong {
  color: var(--color-text);
}

.fw-phase {
  display: inline-flex;
  flex-shrink: 0;
  gap: var(--space-1);
  align-items: center;
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-neutral-soft);
  color: var(--color-neutral-ink);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.fw-phase-running {
  background: var(--color-success-soft);
  color: var(--color-success-ink);
}

.fw-phase-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-coral);
}

.fw-host-progress {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-line);
}

.fw-host-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
}

.fw-host-empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  padding-top: var(--space-6);
  text-align: center;
}

.fw-host-empty .fw-button {
  align-self: stretch;
}

.fw-host-stack {
  position: relative;
  width: 232px;
  height: 152px;
}

.fw-host-stack span {
  position: absolute;
  top: 12px;
  width: 128px;
  height: 136px;
  padding: var(--space-2) var(--space-2) var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-photo);
  background: var(--color-photo-frame);
  box-shadow: var(--shadow-photo);
  box-sizing: border-box;
}

.fw-host-stack span::before {
  content: '';
  display: block;
  height: 100%;
  border-radius: var(--radius-photo-inner);
  background: linear-gradient(200deg, var(--site-art-sage), var(--site-art-forest));
}

.fw-host-stack span:first-child {
  left: 0;
  rotate: -4deg;
}

.fw-host-stack span:last-child {
  top: 0;
  right: 0;
  rotate: 3deg;
}

.fw-host-stack span:last-child::before {
  background: linear-gradient(165deg, var(--site-art-peach), var(--site-art-plum));
}

/* ---------- Event-Seite ---------- */

.fw-host-status-head {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}

.fw-host-status-count {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
}

.fw-host-status-count span {
  font-weight: var(--weight-bold);
}

.fw-guest-link {
  margin: 0;
  font-weight: var(--weight-bold);
  text-align: center;
  overflow-wrap: anywhere;
}

.fw-guest-link a {
  color: var(--color-accent-strong);
}

.fw-qr {
  align-self: center;
  width: min(100%, 220px);
  padding: var(--space-3);
  border-radius: var(--radius-control);
  /* QR-Codes brauchen dunkle Module auf hellem Grund – auch im dunklen Modus. */
  background: #ffffff;
  color: #000000;
}

.fw-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Einstellungen ---------- */

.fw-choice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  cursor: pointer;
}

.fw-choice:has(input:checked) {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.fw-choice input {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--color-accent);
}

.fw-toggle {
  cursor: pointer;
}

.fw-toggle-state {
  color: var(--color-text-muted);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
}

.fw-toggle-on,
.fw-toggle:has(input:checked) .fw-toggle-off {
  display: none;
}

.fw-toggle:has(input:checked) .fw-toggle-on {
  display: inline;
}

.fw-toggle input {
  appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 30px;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--color-line-strong);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.fw-toggle input::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  transition: translate var(--duration-fast) var(--ease-standard);
}

.fw-toggle input:checked {
  background: var(--color-accent);
}

.fw-toggle input:checked::before {
  translate: 18px 0;
}

.fw-toggle input:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}

.fw-themes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.fw-theme {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 6px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  cursor: pointer;
}

.fw-theme:has(input:checked) {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.fw-theme-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-1) var(--space-1);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
}

.fw-theme-name svg {
  visibility: hidden;
  color: var(--color-accent);
}

.fw-theme:has(input:checked) .fw-theme-name svg {
  visibility: visible;
}

/* Vorschau jedes Diashow-Themes in seinen eigenen Farben (`data-show-theme` setzt sie). */
.fw-theme-preview {
  position: relative;
  display: block;
  aspect-ratio: 1.6;
  overflow: hidden;
  border-radius: var(--radius-control-small);
  background: var(--show-bg);
}

.fw-theme-preview span {
  position: absolute;
  inset: 16% 36% 16% 10%;
  border-radius: var(--radius-photo-inner);
  background: linear-gradient(165deg, var(--site-art-peach), var(--site-art-plum));
}

.fw-theme-preview-klassisch::after {
  content: '';
  position: absolute;
  top: 16%;
  right: 10%;
  bottom: 16%;
  width: 16%;
  border-radius: var(--radius-photo-inner);
  background: var(--color-photo-frame);
}

.fw-theme-preview-album span {
  inset: 14% 32% 12%;
  border: 3px solid var(--color-photo-frame);
  border-bottom-width: 8px;
  background: linear-gradient(170deg, var(--site-art-sand), var(--site-art-ink));
  rotate: -5deg;
}

.fw-theme-preview-party {
  background: linear-gradient(140deg, var(--show-surface), var(--show-live) 90%);
}

.fw-theme-preview-party span {
  inset: auto 8% 10% auto;
  width: 16%;
  aspect-ratio: 1;
  background: var(--show-accent);
}

/* ---------- Druckvorlage ---------- */

.fw-print-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
}

.fw-print-actions > .fw-hint {
  max-width: var(--app-column-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.fw-print-sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--app-column-width);
  margin: 0 auto var(--space-8);
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  text-align: center;
}

.fw-print-date,
.fw-print-lead,
.fw-print-link,
.fw-print-title {
  margin: 0;
}

.fw-print-title {
  font-family: var(--font-display);
  font-size: var(--text-title-2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-title);
}

.fw-print-lead {
  font-size: var(--text-title-3);
  font-weight: var(--weight-semibold);
}

.fw-print-qr {
  width: min(100%, 320px);
}

.fw-print-link {
  font-weight: var(--weight-semibold);
}

.fw-print-steps {
  display: flex;
  gap: var(--space-5);
  margin: 0;
  padding-left: var(--space-5);
  text-align: left;
}

/* Druck (Plan C1-16): nur das Blatt, ohne Navigation und Testmodus-Hinweis, QR-Code groß. */
@media print {
  .fw-print-actions,
  .fw-test-mode {
    display: none;
  }

  body {
    background: #ffffff;
    color: #000000;
  }

  .fw-print-sheet {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .fw-print-qr {
    width: 90mm;
  }
}

/* ---------- Leinwand-Steuerung (Entwurf HostLeinwand) ---------- */

.fw-screen-control {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.fw-screen-control h2 {
  margin: 0;
  font-size: var(--text-body);
}

.fw-screen-control:not([data-state='running']) [data-when='running'],
.fw-screen-control:not([data-state='paused']) [data-when='paused'],
.fw-screen-control:not([data-state='empty']) [data-when='empty'] {
  display: none;
}

.fw-screen-form {
  display: flex;
  margin: 0;
}

.fw-screen-form > button {
  flex-grow: 1;
}

.fw-screen-halt .fw-screen-icon-play,
.fw-screen-halt.is-paused .fw-screen-icon-pause {
  display: none;
}

.fw-screen-halt.is-paused .fw-screen-icon-play {
  display: flex;
}

.fw-screen-halt span {
  display: flex;
}

.fw-screen-halt.is-paused {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-ink);
}

.fw-screen-head {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}

.fw-screen-chip {
  display: inline-flex;
  flex-shrink: 0;
  gap: var(--space-2);
  align-items: center;
  align-self: flex-start;
  min-height: var(--space-6);
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
}

.fw-screen-head .fw-screen-chip {
  align-self: center;
}

.fw-screen-chip-ok {
  background: var(--color-success-soft);
  color: var(--color-success-ink);
}

.fw-screen-chip-accent {
  background: var(--color-accent-soft);
  color: var(--color-accent-ink);
}

.fw-screen-control .fw-screen-title {
  font-family: var(--font-display);
  font-size: var(--text-title-3);
  line-height: var(--leading-title);
}

.fw-screen-paused {
  border: 2px solid var(--color-accent);
}

.fw-screen-paused p {
  margin: 0;
  font-size: var(--text-small);
}

/* Die Vorschau trägt die Farben des gewählten Stils (data-show-theme), wie die echte Leinwand. */
.fw-screen-preview {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: center;
  height: var(--show-preview-height);
  overflow: hidden;
  border-radius: var(--radius-control-small);
  background: var(--show-bg);
  color: var(--show-text);
}

.fw-screen-preview-photo img {
  display: block;
  max-width: 100%;
  height: calc(var(--show-preview-height) - var(--space-7));
  border: var(--space-2) solid var(--color-photo-frame);
  border-bottom-width: var(--space-5);
  border-radius: var(--radius-photo-inner);
  object-fit: cover;
  transform: rotate(var(--show-album-tilt));
}

.fw-screen-board-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.fw-screen-board-text strong {
  font-family: var(--show-font-display);
  font-size: var(--text-title-3);
  line-height: var(--leading-title);
}

.fw-screen-board-text span {
  color: var(--show-text-muted);
  font-size: var(--text-small);
}

.fw-screen-board-qr {
  display: flex;
  padding: var(--space-2);
  border-radius: var(--radius-control-small);
  background: var(--color-photo-frame);
}

.fw-screen-board-qr svg {
  width: var(--show-mobile-qr);
  height: var(--show-mobile-qr);
}

.fw-screen-empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.fw-screen-empty .fw-host-badge {
  margin-bottom: 0;
}

.fw-screen-empty .fw-screen-title,
.fw-screen-empty > p {
  margin: 0;
}

.fw-screen-steps {
  gap: var(--space-4);
  margin: var(--space-2) 0;
  list-style: none;
  counter-reset: fw-step;
}

.fw-screen-steps li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  counter-increment: fw-step;
}

.fw-screen-steps li::before {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-ink);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  content: counter(fw-step);
}

.fw-screen-lock {
  background: var(--color-neutral-soft);
  color: var(--color-neutral-ink);
}

.fw-screen-links {
  display: grid;
  gap: var(--space-2);
}

.fw-screen-links [hidden] {
  display: none;
}

/* Läuft schon eine Leinwand, sind Öffnen und Kopieren Nebensache: leise und ans Ende. */
.fw-screen-control:not([data-state='empty']) .fw-screen-links {
  order: 1;
}

.fw-screen-control:not([data-state='empty']) .fw-screen-links .fw-button:not([data-copied]) {
  border: 1px solid var(--color-line-strong);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: none;
}

.fw-screen-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.fw-screen-actions .fw-button {
  padding-inline: var(--space-2);
  white-space: nowrap;
}

.fw-screen-segment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-1);
  border-radius: var(--radius-control-small);
  background: var(--color-neutral-soft);
}

.fw-screen-segment button {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  border: 0;
  border-radius: var(--radius-control-small);
  background: transparent;
  color: var(--color-neutral-ink);
  font: inherit;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.fw-screen-segment button svg {
  display: none;
}

.fw-screen-segment [aria-pressed='true'] {
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-raised);
}

.fw-screen-segment [aria-pressed='true'] svg {
  display: block;
}

.fw-screen-motion .fw-toggle {
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--color-line);
}

.fw-screen-list {
  margin: 0;
  list-style: none;
}

.fw-screen-list[hidden],
.fw-screen-preview[hidden],
.fw-screen-chip[hidden],
.fw-screen-alert[hidden] {
  display: none;
}

.fw-screen-chip-lost {
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

/* Entwurf „Verbindung verloren“: steht über allem, weil der Gastgeber hier handeln muss. */
.fw-screen-alert {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-control);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
  font-size: var(--text-small);
}

.fw-screen-control .fw-screen-alert h2 {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin: 0;
  font-family: inherit;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-bold);
}

.fw-screen-alert p {
  margin: 0;
}

.fw-screen-alert-tip {
  font-weight: var(--weight-semibold);
}

.fw-screen-feedback:empty {
  display: none;
}

.fw-screen-control > .fw-center-text {
  order: 2;
}

/* ---------- Event-Seiten: Reiter unten, „angehalten“ (Entwürfe HostEvent, Mod*, HostLinks) ---------- */

/*
 * Wer zu einem Element scrollt – Fokus per Tastatur, Sprung zu einem Anker –, landet sonst
 * hinter der festen Reiterleiste (WCAG 2.4.11).
 */
html:has(.fw-host-with-tabs) {
  scroll-padding-bottom: calc(var(--space-8) + var(--space-4) + env(safe-area-inset-bottom));
}

.fw-host-with-tabs .fw-host-main {
  /* Platz für die Reiterleiste, damit nichts dahinter verschwindet. */
  padding-bottom: calc(var(--space-8) + var(--space-8) + env(safe-area-inset-bottom));
}

.fw-host-tabs {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0 max(0px, calc((100% - var(--app-column-width)) / 2)) env(safe-area-inset-bottom);
  border-top: 1px solid var(--color-line);
  background: var(--color-surface);
}

.fw-host-tab {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: center;
  justify-content: center;
  min-height: var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}

.fw-host-tab-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  min-height: 28px;
  border-radius: var(--radius-pill);
}

.fw-host-tab[aria-current='page'] {
  color: var(--color-accent-ink);
  font-weight: var(--weight-bold);
}

.fw-host-tab[aria-current='page'] .fw-host-tab-icon {
  background: var(--color-accent-soft);
}

.fw-host-tab-badge {
  position: absolute;
  top: calc(-1 * var(--space-1));
  right: var(--space-1);
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  line-height: 20px;
  box-sizing: border-box;
}

.fw-host-paused {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent-soft);
  color: var(--color-accent-ink);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  text-align: center;
}

/* ---------- Fotos und Moderation (Entwürfe ModEmpfehlung*) ---------- */

.fw-mod {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.fw-mod h2 {
  margin: 0;
  font-size: var(--text-body);
}

.fw-mod-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-control);
  background: var(--color-neutral-soft);
}

.fw-mod-tabs a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--space-7);
  border: 1px solid transparent;
  border-radius: var(--radius-control-small);
  color: var(--color-neutral-ink);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  text-decoration: none;
}

.fw-mod-tabs a span {
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
}

.fw-mod-tabs a[aria-current='page'] {
  border-color: var(--color-line-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: var(--weight-bold);
}

.fw-mod-hint {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  margin: 0;
  color: var(--color-success-ink);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
}

.fw-mod-hint:empty {
  display: none;
}

.fw-mod-hint.is-error {
  color: var(--color-danger-ink);
}

.fw-mod-order {
  margin: 0;
  text-align: right;
}

.fw-mod-queue {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fw-mod-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.fw-mod-card-photo {
  position: relative;
  display: block;
}

/* Weitere wartende Fotos liegen als Stapel hinter dem ersten (Entwurf „Mehrere Fotos warten“). */
.fw-mod-stack .fw-mod-card-photo::before,
.fw-mod-stack .fw-mod-card-photo::after {
  content: '';
  position: absolute;
  inset: var(--space-4) var(--space-4) var(--space-1);
  border-radius: var(--radius-photo);
  background: var(--color-photo-frame);
  box-shadow: var(--shadow-raised);
  transform: rotate(-2deg);
}

.fw-mod-stack .fw-mod-card-photo::after {
  inset: var(--space-5) var(--space-5) 0;
  transform: rotate(3deg);
}

.fw-mod-photo {
  position: relative;
  z-index: 1;
  display: block;
  padding: var(--photo-frame) var(--photo-frame) var(--photo-frame-bottom);
  border-radius: var(--radius-photo);
  background: var(--color-photo-frame);
  box-shadow: var(--shadow-photo);
}

.fw-mod-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  border-radius: var(--radius-photo-inner);
  background: var(--color-neutral-soft);
  object-fit: contain;
}

.fw-mod-meta {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
}

.fw-mod-meta .fw-screen-chip {
  align-self: center;
}

.fw-mod-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.fw-mod-form {
  display: flex;
}

.fw-mod-form .fw-button,
.fw-mod-actions > .fw-button {
  flex-grow: 1;
  padding: 0 var(--space-3);
  white-space: nowrap;
}

.fw-mod-delete {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  align-self: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-control-small);
  color: var(--color-danger-ink);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.fw-mod-empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-5) 0;
  text-align: center;
}

.fw-mod-empty .fw-hint {
  margin: 0;
}

.fw-mod-approval-head {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  margin: 0;
}

.fw-mod-approval-head > span {
  display: flex;
  flex-direction: column;
}

.fw-mod-approval form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fw-mod-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}

.fw-mod-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fw-mod-thumb {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-photo);
  background: var(--color-neutral-soft);
}

.fw-mod-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fw-mod-running {
  display: grid;
  grid-template-columns: var(--space-9) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}

.fw-mod-running-photo img {
  display: block;
  width: var(--space-9);
  height: var(--space-9);
  border-radius: var(--radius-photo);
  object-fit: cover;
}

.fw-mod-running-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.fw-mod-running .fw-mod-form {
  grid-column: 1 / -1;
}

.fw-mod-live {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: currentColor;
}

.fw-mod-chip-hidden {
  background: var(--color-neutral-soft);
  color: var(--color-neutral-ink);
}

.fw-mod-held {
  border-color: var(--color-accent);
}

.fw-mod-held p {
  margin: 0;
}

.fw-mod-quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control-small);
  background: var(--color-neutral-soft);
  font-size: var(--text-small);
}

.fw-mod-feedback {
  gap: var(--space-1);
  border-color: var(--color-line-strong);
}

.fw-mod-question {
  border-color: var(--color-danger);
}

.fw-mod-question p {
  margin: 0;
}

.fw-button.fw-button-danger {
  background: var(--color-danger);
  box-shadow: none;
}

.fw-button.fw-button-danger:hover {
  background: var(--color-danger-ink);
}

.fw-mod-question form {
  display: flex;
  flex-direction: column;
}

.fw-mod-offline {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
  font-size: var(--text-small);
}

.fw-mod-offline strong {
  display: block;
}

.fw-mod-offline[hidden] {
  display: none;
}

.fw-mod-failed {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4);
  border-radius: var(--radius-control);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
  font-size: var(--text-small);
}

.fw-mod-failed strong {
  font-size: var(--text-body);
}

/* Rückfrage „Neuen Galerie-Link erzeugen?“ in der Karte (Plan C5-2) */
.fw-links-renew {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-danger);
}

.fw-links-renew h3,
.fw-links-renew p,
.fw-links-renew form {
  margin: 0;
}

.fw-links-renew-button {
  width: 100%;
}

/* Moderationslink (E-045): zwei leise Wege auf der Karte, Hinweis oben für den Moderator */
.fw-mod-link-choices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
}

.fw-mod-link.fw-mod-link-danger {
  color: var(--color-danger);
}

.fw-mod-role {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--color-accent-soft);
  color: var(--color-accent-ink);
  font-size: var(--text-small);
}

/* Das Schild schrumpft nicht, wenn der Text umbricht. */
.fw-mod-role > :first-child {
  flex-shrink: 0;
}

.fw-mod-role strong {
  display: block;
  font-size: var(--text-body);
}

/* ---------- Pakete (Entwürfe PaketEmpfehlung*, Plan C6-Z) ---------- */

/* Noch nicht festgelegte Werte sind sichtbar Platzhalter, nie „0 €“ (CLAUDE.md §5). */
.fw-placeholder {
  padding: 2px 6px;
  border-radius: var(--radius-photo);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
}

.fw-test-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-neutral-soft);
  color: var(--color-neutral-ink);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.fw-package-label {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
}

.fw-package-label .fw-label {
  margin: 0;
}

.fw-package-chip {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  min-height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-neutral-soft);
  color: var(--color-neutral-ink);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.fw-package-chip[data-kind='accent'] {
  background: var(--color-accent-soft);
  color: var(--color-accent-ink);
}

.fw-package-chip[data-kind='success'] {
  background: var(--color-success-soft);
  color: var(--color-success-ink);
}

.fw-package-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-title-3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
}

.fw-package-count {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
}

.fw-package-held,
.fw-package-hint p,
.fw-package-notice,
.fw-package-promise {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: 0;
}

.fw-package-held {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--color-accent-soft);
  color: var(--color-accent-ink);
  font-size: var(--text-small);
}

.fw-package-held p {
  margin: 0;
}

.fw-package-held > :first-child,
.fw-package-notice > :first-child,
.fw-package-promise > :first-child,
.fw-package-hint p > :first-child {
  flex-shrink: 0;
  margin-top: 2px;
}

.fw-package-dates {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  color: var(--color-text-muted);
  font-size: var(--text-small);
  list-style: none;
}

.fw-package-dates li {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.fw-package-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fw-package-next {
  border: 2px solid var(--color-accent);
}

.fw-package-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
}

.fw-package-price {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
}

.fw-package-row {
  flex-direction: row;
  align-items: center;
  min-height: 72px;
  padding: var(--space-3) var(--space-4);
}

.fw-package-row .fw-host-row-text {
  flex-grow: 1;
  min-width: 0;
}

.fw-package-row > :last-child {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.fw-package-return {
  align-items: flex-start;
}

.fw-package-return p {
  margin: 0;
}

.fw-package-return .fw-host-badge {
  margin-bottom: 0;
}

.fw-host-badge[data-kind='success'] {
  background: var(--color-success-soft);
  color: var(--color-success-ink);
}

.fw-host-badge[data-kind='danger'] {
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.fw-package-return[data-payment-status='failed'] {
  border-color: var(--color-danger);
}

.fw-package-waiting {
  color: var(--color-accent);
}

.fw-package-notice {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
  font-size: var(--text-small);
}

.fw-package-promise {
  line-height: var(--leading-body);
}

.fw-package-hint {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
}

.fw-package-table {
  gap: 0;
  padding: 0;
}

.fw-package-row-change {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.fw-package-row-change:last-child {
  border-bottom: 0;
}

.fw-package-row-change dt {
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.fw-package-row-change dd {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin: 0;
  text-align: right;
}

/* Pfeil zwischen „vorher“ und „nachher“ */
.fw-package-row-change dd > :nth-child(2):not(:last-child) {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.fw-package-pay {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.fw-package-widget {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* `hidden` gegen `display` von `.fw-button` und `.fw-package-widget` durchsetzen. */
.fw-package-pay > [hidden] {
  display: none;
}

.fw-package-message {
  margin: 0;
  color: var(--color-danger-ink);
  font-size: var(--text-small);
}

.fw-package-message:empty {
  display: none;
}

.fw-package-other {
  align-self: center;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-control-small);
  color: var(--color-accent-strong);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.fw-package-fake-banner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
}

.fw-package-fake {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fw-package-fake .fw-label,
.fw-package-fake .fw-hint {
  margin: 0;
}

.fw-package-fake-choice {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  justify-content: center;
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.fw-package-fake-choice > :last-child {
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.fw-package-fake-choice.is-primary {
  border-color: transparent;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  box-shadow: var(--shadow-accent);
}

.fw-package-fake-choice.is-primary > :last-child {
  color: var(--color-accent-soft);
}

.fw-package-stripe {
  min-height: 120px;
}

/* Rechnungen auf der Paketseite (Plan Rechnungen) – Zeilen wie in der Übersicht. */
.fw-package-invoices ul {
  list-style: none;
}

.fw-package-invoice {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-4);
  /* Das Symbol nimmt die Farbe des Links, der Text seine eigene. */
  color: var(--color-accent-strong);
  text-decoration: none;
}

.fw-package-invoice-text {
  display: flex;
  flex-direction: column;
  color: var(--color-text);
}

/* Freiwillige Rechnungsanschrift: zugeklappt, damit der Weg zur Zahlung kurz bleibt. */
.fw-package-billing {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.fw-package-billing > summary {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-accent-strong);
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
}

.fw-package-billing[open] > summary {
  margin-bottom: var(--space-2);
}

.fw-package-billing > .fw-field + .fw-field {
  margin-top: var(--space-3);
}

/* ---------- Gäste zum Mitmachen bringen (Plan MITMACHEN, E-043) ---------- */

.fw-host-participation {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  background: var(--color-accent-soft);
  color: var(--color-accent-ink);
  font-weight: var(--weight-semibold);
}

/* Nur Schmuck in den Farben der Leinwand-Kreise – keine echten Gäste. */
.fw-host-participation-dots {
  display: flex;
  flex-shrink: 0;
}

.fw-host-participation-dots span {
  width: var(--space-5);
  height: var(--space-5);
  border: 2px solid var(--color-accent-soft);
  border-radius: var(--radius-pill);
  background: var(--color-coral);
}

.fw-host-participation-dots span + span {
  margin-left: calc(var(--space-2) * -1);
  background: var(--color-accent);
}

.fw-host-participation-dots span + span + span {
  background: var(--color-success);
}

.fw-host-tips h2 {
  margin: 0;
}

.fw-host-tips-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fw-host-tips-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.fw-host-tip-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.fw-host-tip-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: var(--tap-min);
  color: var(--color-accent-strong);
  font-weight: var(--weight-bold);
}

/* Druck: Umschalter Plakat / Tischkarten. */
.fw-print-switch {
  display: flex;
  align-self: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.fw-print-switch a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.fw-print-switch a[aria-current='page'] {
  background: var(--color-text);
  color: var(--color-surface);
}

/*
 * Tischkarten nach Entwurf HostDruckTischkarte: vier A6-Karten (105 × 148,5 mm) auf A4, mit
 * gestrichelten Schnittlinien. Maße in cqi des Blatts (100cqi = 210 mm), damit Vorschau und Druck
 * gleich aussehen – eine Karte ist 50cqi breit.
 */
.fw-print-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: min(100% - 2 * var(--space-4), 210mm);
  aspect-ratio: 210 / 297;
  margin: 0 auto var(--space-8);
  border: 1px solid var(--color-line);
  /* Papier ist immer hell, auch wenn das Gerät dunkel eingestellt ist (wie .fw-qr). */
  background: #ffffff;
  color: #1e1d1b;
  box-shadow: var(--shadow-raised);
  page: tischkarten;
  container-type: inline-size;
}

.fw-print-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2cqi;
  min-width: 0;
  padding: 4cqi 3cqi 3cqi;
  text-align: center;
}

.fw-print-card:nth-child(odd of .fw-print-card) {
  border-right: 1px dashed #8c857a;
}

.fw-print-card:nth-child(-n + 3 of .fw-print-card) {
  border-bottom: 1px dashed #8c857a;
}

.fw-print-card:nth-child(3 of .fw-print-card) {
  border-bottom: 0;
}

.fw-print-card p {
  margin: 0;
}

.fw-print-card-title {
  color: #67635c;
  font-size: 2cqi;
  font-weight: var(--weight-semibold);
}

.fw-print-card-lead {
  font-family: var(--font-display);
  font-size: 4cqi;
  font-weight: var(--weight-bold);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  text-wrap: balance;
}

.fw-print-card-qr svg {
  display: block;
  width: 25cqi;
  height: 25cqi;
}

.fw-print-card-steps {
  display: flex;
  flex-direction: column;
  gap: 0.5cqi;
  font-size: 2cqi;
  overflow-wrap: anywhere;
}

.fw-print-card .fw-print-card-foot {
  margin-top: auto;
  color: #67635c;
  font-size: 1.5cqi;
}

@page tischkarten {
  size: A4 portrait;
  margin: 0;
}

@media print {
  .fw-print-cards {
    width: 210mm;
    height: 297mm;
    margin: 0;
    border: 0;
    box-shadow: none;
  }
}

/* Gesperrtes Event (E-044): die Kontaktadresse in Akzentfarbe statt Browser-Blau. */
.fw-host-blocked-contact a {
  color: var(--color-accent-ink);
}

.fw-host-blocked-invoices {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fw-host-blocked-invoices a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

/* ---------- Partner-Kontingent (E-051) ---------- */

.fw-package-notice[data-tone='ok'] {
  background: var(--color-success-soft);
  color: var(--color-success-ink);
}

.fw-package-code {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.fw-package-code > summary {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-accent-strong);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.fw-package-code input {
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* Zugeklappt zeichnet Chrome den Inhalt nicht – ein dort begonnener Übergang endet nie und hält
   jede Prüfung auf, die auf Animationen wartet (wie .fw-operator-action). */
.fw-package-code:not([open]) .fw-pressable {
  transition: none;
}

.fw-package-code input::placeholder {
  letter-spacing: normal;
  text-transform: none;
}

.fw-package-partner {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin: 0;
}

.fw-partner-mark {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.fw-partner-logo {
  flex-shrink: 0;
  max-width: 7rem;
  max-height: 2.5rem;
  object-fit: contain;
}

.fw-print-partner {
  margin-top: var(--space-3);
}

/* Code-Karten der Location: je Karte ein Code, zum Ausschneiden. */
.fw-partner-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-4);
  width: min(100% - 2 * var(--space-4), 210mm);
  margin: 0 auto var(--space-8);
}

.fw-partner-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-5) var(--space-4);
  border: 1px dashed #8c857a;
  border-radius: var(--radius-control);
  /* Papier ist immer hell, auch wenn das Gerät dunkel eingestellt ist (wie .fw-print-cards). */
  background: #ffffff;
  color: #1e1d1b;
  text-align: center;
  break-inside: avoid;
}

.fw-partner-card p {
  margin: 0;
}

.fw-partner-card-logo {
  max-width: 60%;
  max-height: 3rem;
  object-fit: contain;
}

.fw-partner-card-name,
.fw-partner-card-lead {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-title);
}

.fw-partner-card-code {
  font-size: var(--text-title-3);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
}

.fw-partner-card-hint {
  color: #67635c;
  font-size: var(--text-small);
}

.fw-partner-code {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

@media print {
  .fw-partner-cards {
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin: 0;
  }
}

.fw-partner-code-list {
  margin: 0;
  padding: 0 var(--space-4);
  list-style: none;
}

.fw-partner-code-list li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  justify-content: space-between;
  min-height: var(--tap-min);
  padding: var(--space-2) 0;
}

.fw-partner-code-list li + li {
  border-top: 1px solid var(--color-line);
}