/* ============================================================
   TRAININGSWOCHENENDE/STYLE.CSS - Seitenspezifische Styles
   (Badges, Belegung, Einladung: assets/trainingshaus.css .th-*;
    Relations-Auswahl und Chips: ortsgemeinschaft/style.css .og-*)
   ============================================================ */

/* ---------- Kleine Buttons ---------- */
.tw-btn-small {
  padding: 6px 12px;
  font-size: 13px;
}

.tw-btn-small .material-icons {
  font-size: 18px;
}

.tw-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  overflow: hidden;
}

.tw-mini-btn:hover {
  border-color: var(--line);
  background: var(--paper);
  color: var(--danger, var(--pal-rot));
}

.tw-mini-btn .material-icons {
  font-size: 18px;
}

.tw-link-einheit {
  font-weight: 600;
  margin-right: 6px;
}

/* ---------- Programm (Leseansicht) ---------- */
.tw-tag-titel {
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--accent-dark, var(--gold-mittel));
}

.tw-plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tw-plan-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.tw-plan-table .tw-zeit {
  width: 110px;
  font-weight: 700;
  white-space: nowrap;
}

.tw-plan-table .tw-trainer {
  width: 30%;
  color: var(--ink-soft);
}

.tw-plan-table tr.tw-art-mahlzeit td,
.tw-plan-table tr.tw-art-pause td {
  color: var(--ink-soft);
  background: var(--surface);
}

.tw-art-icon {
  display: inline-block;
  width: 18px;
  margin-right: 6px;
  overflow: hidden;
  font-size: 16px;
  vertical-align: -3px;
  color: var(--ink-faint);
}

.tw-art-lektion .tw-art-icon {
  color: var(--accent-dark, var(--gold-mittel));
}

.tw-leer {
  padding: 12px 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.tw-offen-hinweis,
.tw-offen {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--pal-senf-dunkel);
}

.tw-offen:empty {
  display: none;
}

.tw-offen-hinweis .material-icons,
.tw-offen .material-icons {
  flex-shrink: 0;
  width: 18px;
  overflow: hidden;
  font-size: 18px;
}

/* ---------- Detailansicht: Programm & Anmeldungen (Stil wie Ortsgemeinschaft) ---------- */
.tw-adresse,
.tw-pre {
  white-space: pre-line;
}

.tw-boxen {
  margin-top: 22px;
}

.tw-box.multi-select {
  max-height: 300px;
  margin-bottom: 8px;
}

/* ---------- Namensschilder ---------- */
dialog.tw-ns-dialog {
  max-width: 640px;
}

.tw-ns-optionen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 2px 16px;
  margin-bottom: 10px;
}

.tw-check.tw-ns-leer input {
  order: 2;
  width: 70px;
  height: auto;
  padding: 4px 8px;
}

.tw-ns-liste .ns-person[hidden] {
  display: none;
}

.ns-n,
.ns-rolle {
  font-style: normal;
  font-size: 13px;
  color: var(--ink-soft);
}

.tw-ns-liste.multi-select {
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.tw-ns-liste .ns-person {
  margin: 2px 6px;
}

.tw-ns-vorschau img {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto 12px;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

/* Unsichtbarer Rahmen zum Drucken des PDFs (muss gerendert werden, daher 1 px statt versteckt) */
.tw-druck-frame {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Zeitfilter (Kommende / Vergangene / Alle) in der Werkzeugleiste neben der Suche */
.tw-toolbar-chips {
  flex-wrap: nowrap;
  flex-shrink: 0;
}

/* Reiter „Allgemein“: Angaben und Notiz im gleichen Rahmen wie das Programm, ohne Höhenbegrenzung */
.tw-box.tw-box-allgemein {
  max-height: none;
  overflow: visible;
  margin-bottom: 14px;
}

.tw-box-allgemein .detail-grid {
  margin: 4px 8px 8px;
}

.tw-box-allgemein .detail-description {
  margin: 4px 8px 8px;
}

.tw-box-tag {
  margin: 8px 8px 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--accent-dark, var(--gold-mittel));
}

.tw-box-tag:first-of-type {
  margin-top: 2px;
}

.tw-box-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  font-size: 14px;
  border-radius: 8px;
}

.tw-box-zeile:hover {
  background: var(--surface);
}

.tw-box-zeile.is-lektion .tw-box-text {
  font-weight: 600;
}

.tw-box-zeit {
  width: 44px;
  flex-shrink: 0;
  font-weight: 700;
  color: var(--ink-soft);
}

.tw-box-text {
  flex: 1;
  min-width: 0;
}

.tw-box-neben {
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.tw-box-hinweis {
  padding: 0 8px 4px 62px;
  font-size: 12px;
  color: var(--ink-faint);
}

.tw-box-ok {
  width: 18px;
  overflow: hidden;
  font-size: 18px;
  color: var(--pal-gruen-dunkel);
}

.tw-aktionen {
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
}

.tw-aktionen .tw-aktion {
  flex: 1;
}

/* ---------- Detailansicht: Reiter ---------- */
.tw-ov-tabs {
  margin: 0 0 1.25rem;
}

.tw-tab-zahl {
  display: inline-block;
  min-width: 20px;
  margin-left: 4px;
  padding: 0 6px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
}

.tab-button.active .tw-tab-zahl {
  background: var(--accent-tint, var(--gold-tint));
  color: var(--accent-dark, var(--gold-mittel));
}

[data-ov-pane] .tw-box.multi-select {
  max-height: none;
}

/* ---------- Ablaufplan: Dialog mit Vorschau (wie Aufkleber) ---------- */
dialog.tw-plan-dialog {
  max-width: 620px;
}

.tw-plan-dialog h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tw-plan-count {
  margin: -6px 0 14px;
  font-size: 14px;
  color: var(--ink-soft);
}

.tw-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 14px;
  cursor: pointer;
}

.tw-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-dark, var(--gold-mittel));
}

.tw-plan-preview {
  display: flex;
  justify-content: center;
  max-height: 55vh;
  margin: 12px 0 8px;
  padding: 16px;
  overflow: auto;
  border-radius: 12px;
  background: var(--surface);
}

.tw-plan-preview .tw-sheet {
  flex-shrink: 0;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
  border-radius: 2mm;
}

/* Halter für die PDF-Erstellung des Ablaufplans (außerhalb des Bildschirms) */
.tw-plan-pdf-host {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 210mm;
}

.tw-plan-actions {
  flex-wrap: wrap;
}

/* ---------- Ablaufplan: A4-Blatt (Vorschau & Druck) ---------- */
.tw-sheet {
  width: 210mm;
  min-height: 297mm;
  padding: 14mm 14mm 12mm;
  box-sizing: border-box;
  font-family: "Dosis", -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--neutral-800);
  background: #fff;
}

.tw-sh-top {
  display: flex;
  align-items: center;
  gap: 2.5mm;
  padding-bottom: 3mm;
  margin-bottom: 5mm;
  border-bottom: 0.4mm solid var(--neutral-200);
}

.tw-sh-logo {
  height: 9mm;
  width: auto;
}

.tw-sh-org {
  font-size: 4mm;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sh-dunkel, var(--pal-senf-dunkel));
}

.tw-sh-art {
  margin-left: auto;
  font-size: 3.8mm;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pal-anthrazit-mittel);
}

.tw-sh-titel {
  display: inline-block;
  padding: 0.8mm 3mm;
  font-size: 11mm;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.01em;
  background: var(--sh-farbe, var(--pal-gold-hell));
  color: var(--sh-text, inherit);
  border-radius: 1.8mm;
}

.tw-sh-untertitel {
  margin-top: 1.5mm;
  font-size: 4.2mm;
  font-weight: 600;
  color: var(--pal-grau-dunkel);
}

.tw-sh-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2mm 9mm;
  margin: 5mm 0 6mm;
}

.tw-sh-meta dt {
  font-size: 3.2mm;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pal-anthrazit-mittel);
}

.tw-sh-meta dd {
  margin: 0.5mm 0 0;
  font-size: 4.3mm;
  font-weight: 600;
}

.tw-sh-tag {
  margin-bottom: 5mm;
  break-inside: avoid;
  page-break-inside: avoid;
}

.tw-sh-tag h3 {
  margin: 0 0 1.5mm;
  padding: 1.2mm 3mm;
  font-size: 4.6mm;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--neutral-800);
  background: var(--sh-hell, var(--gold-tint));
  border-left: 1.4mm solid var(--sh-farbe, var(--gold));
  border-radius: 0 1.2mm 1.2mm 0;
}

.tw-sh-tag table {
  width: 100%;
  border-collapse: collapse;
}

.tw-sh-tag td {
  padding: 1.8mm 3mm;
  font-size: 4.1mm;
  vertical-align: top;
  border-bottom: 0.25mm solid var(--pal-anthrazit-hell);
}

.tw-sh-zeit {
  width: 30mm;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tw-sh-zeit span {
  font-weight: 600;
  color: var(--pal-grau);
}

.tw-sh-lektion .tw-sh-titel-zeile {
  font-weight: 700;
}

.tw-sh-trainer {
  width: 45mm;
  font-weight: 600;
  color: var(--neutral-700);
}

.tw-sh-mahlzeit td,
.tw-sh-pause td {
  color: var(--pal-grau);
  font-size: 3.7mm;
}

.tw-sh-mahlzeit .tw-sh-zeit,
.tw-sh-pause .tw-sh-zeit {
  font-weight: 600;
}

.tw-sh-klein {
  margin-top: 0.4mm;
  font-size: 3.3mm;
  font-weight: 500;
  color: var(--pal-grau);
}

.tw-sh-fuss {
  margin-top: 6mm;
  font-size: 3mm;
  color: var(--pal-anthrazit-mittel);
  text-align: right;
}

/* ---------- Formular: Veranstaltungsort ---------- */
.tw-ort {
  margin: 0 0 14px;
  padding: 10px 12px 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.tw-ort legend {
  padding: 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Programm-Editor ---------- */
dialog.tw-programm-dialog {
  max-width: 1040px;
}

.tw-programm-dialog .dialog-inner {
  overflow-y: auto;
  max-height: calc(100vh - 80px);
}

.tw-kicker {
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--accent-dark, var(--gold-mittel));
}

.tw-tag {
  margin-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.tw-zeile {
  display: grid;
  grid-template-columns: 210px 140px minmax(0, 1fr) 200px 32px;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  margin-bottom: 4px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.tw-zeile.tw-art-mahlzeit {
  background: var(--neutral-50);
  border-color: var(--pal-senf-mittel);
}

.tw-zeile.tw-art-pause {
  background: var(--surface);
}

.tw-zeiten {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tw-bis {
  color: var(--ink-faint);
}

.tw-in {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.tw-in:focus {
  outline: none;
  border-color: var(--login-background, var(--gold));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pal-gold) 25%, transparent);
}

.tw-in:disabled {
  color: var(--ink-faint);
  background: transparent;
  border-style: dashed;
}

.tw-time {
  width: 96px;
}

.tw-add {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.tw-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: 1px dashed var(--line);
  border-radius: 999px;
  cursor: pointer;
}

.tw-add-btn:hover {
  color: var(--accent-dark, var(--gold-mittel));
  border-color: var(--accent-dark, var(--gold-mittel));
}

.tw-add-btn .material-icons {
  width: 16px;
  overflow: hidden;
  font-size: 16px;
}

/* ---------- Mobil ---------- */
@media (max-width: 768px) {
  /* Suche volle Breite, Zeitfilter darunter */
  .toolbar-left:has(> .tw-toolbar-chips) {
    flex-wrap: wrap;
    gap: 8px;
  }

  .toolbar-left:has(> .tw-toolbar-chips) .suchfeld-container {
    flex: 1 1 100%;
  }
}

@media (max-width: 768px) {
  .tw-zeile {
    grid-template-columns: minmax(0, 1fr) 32px;
  }

  .tw-zeiten {
    grid-column: 1;
  }

  .tw-zeile .tw-mini-btn {
    grid-column: 2;
    grid-row: 1;
  }

  .tw-art,
  .tw-inhalt,
  .tw-trainer-in {
    grid-column: 1 / -1;
  }

  .tw-time {
    width: auto;
    flex: 1;
  }

  /* Trainer nur bei Lektion/Andacht zeigen */
  .tw-trainer-in:disabled {
    display: none;
  }

  .tw-plan-table .tw-trainer {
    width: auto;
  }

  .tw-aktionen {
    flex-direction: column;
  }

  .tw-box-hinweis {
    padding-left: 8px;
  }
}

/* ============================================================
   FLYER (105 × 105 mm) – Vorlage + eingesetzte Felder
   Positionen passend zum Canva-Entwurf „Vision entdecken“
   ============================================================ */
.tw-flyer-box.multi-select {
  max-height: none;
}

.tw-vorlage-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.tw-vorlage-info strong {
  color: var(--ink);
}

.tw-vorlage-info .material-icons {
  flex-shrink: 0;
  width: 22px;
  overflow: hidden;
  font-size: 20px;
  color: var(--accent-dark, var(--gold-mittel));
}

.tw-vorlage-info a {
  margin-left: 4px;
  font-weight: 600;
  white-space: nowrap;
}

.tw-flyer-laden {
  grid-column: 1 / -1;
  padding: 40px 0;
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
}

.tw-flyer-vorschau {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 4px 0 14px;
}

.tw-flyer-vorschau figure {
  margin: 0;
  min-width: 0;
}

.tw-flyer-vorschau figcaption {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--ink-soft);
}

.fl-rahmen {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
  line-height: 0;
}

.tw-flyer-reset {
  margin-top: 8px;
}

.tw-flyer-check {
  margin: 4px 0 0;
}

/* ---------- Die Flyer-Seite ---------- */
.fl-seite {
  position: relative;
  width: 105mm;
  height: 105mm;
  overflow: hidden;
  box-sizing: border-box;
  font-family: "Dosis", -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--fl-schrift, var(--pal-senf-dunkel));
  background: var(--fl-farbe, var(--pal-gold));
  line-height: 1.3;
}

.fl-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fl-datum-box,
.fl-text-box,
.fl-kontakt-box {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
}

/* Vorderseite: Datum & Ort */
.fl-datum-box {
  left: 15.6%;
  top: 42.7%;
  width: 69.1%;
  height: 24.7%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5mm 3mm;
  background: #fff;
  border-radius: 1.2mm;
}

.fl-datum-box .fl-fit {
  font-size: 8.4mm;
  text-align: center;
  white-space: nowrap;
  line-height: 1.12;
}

.fl-datum {
  font-weight: 700;
}

.fl-ort {
  font-weight: 400;
  text-transform: uppercase;
}

/* Rückseite: Einladungstext */
.fl-text-box {
  left: 7.6%;
  top: 8.1%;
  width: 84.8%;
  height: 42.7%;
  padding: 3mm 3.4mm;
  background: #fff;
  border-radius: 1.6mm;
}

.fl-text {
  font-size: 2.75mm;
  font-weight: 400;
  line-height: 1.45;
  text-align: justify;
  hyphens: auto;
}

.fl-text p {
  margin: 0 0 1.1em;
}

.fl-text p:last-child {
  margin-bottom: 0;
}

.fl-text .fl-kopf {
  text-transform: uppercase;
  text-align: left;
}

/* Rückseite: Anmeldung mit QR-Code */
.fl-kontakt-box {
  left: 50%;
  top: 62.9%;
  width: 42.4%;
  height: 29.3%;
  padding: 1.8mm 2mm 1.6mm;
  background: var(--pal-anthrazit-tint);
  display: flex;
  flex-direction: column;
}

.fl-kontakt-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2mm;
  flex: 0 0 auto;
}

.fl-qr {
  width: 12mm;
  height: 12mm;
  padding: 0.6mm;
  background: #fff;
  image-rendering: pixelated;
}

.fl-anmeldung {
  padding: 0.6mm 1.6mm;
  font-size: 3.4mm;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fl-schrift, var(--pal-senf-dunkel));
  background: var(--fl-farbe, var(--pal-gold));
}

.fl-kontakt-zeilen {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: hidden;
  margin-top: 1.2mm;
}

.fl-kontakt {
  font-size: 2.3mm;
  line-height: 1.38;
  text-align: right;
  white-space: nowrap;
}

.fl-kontakt-name {
  font-weight: 700;
  text-transform: uppercase;
}

/* Ohne Vorlage: einfacher Ersatz im gleichen Stil */
.fl-ohne-vorlage .fl-ersatz-titel {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 8%;
  height: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9mm;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.fl-ohne-vorlage .fl-ersatz-titel img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.fl-ohne-vorlage .fl-ersatz-logo {
  position: absolute;
  left: 33%;
  width: 34%;
  top: 76%;
  height: 16%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5mm;
  background: #fff;
  box-sizing: border-box;
}

.fl-ohne-vorlage .fl-ersatz-logo img {
  max-width: 100%;
  max-height: 100%;
}

/* Halter für die PDF-Erstellung (außerhalb des Bildschirms, volle Größe) */
.fl-pdf-host {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 105mm;
}

@media (max-width: 768px) {
  .tw-flyer-vorschau {
    grid-template-columns: 1fr;
  }
}

/* Dialoge „Flyer bearbeiten“ und „Flyer als PDF“ */
dialog.tw-flyer-dialog {
  max-width: 720px;
}

.tw-flyer-dialog .dialog-inner {
  overflow-y: auto;
  max-height: calc(100vh - 80px);
}

/* ---------- HTML-Mail-Vorschau (Einladung & Ablaufplan) ---------- */
.tw-mail-scroll {
  max-height: 460px;
  overflow-y: auto;
  background: var(--neutral-100);
}

.th-mail-frame {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
  background: var(--neutral-100);
}

.tw-mail-details {
  margin: 4px 0 14px;
}

.tw-mail-details summary {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
}

/* ---------- Reiter „E-Mail Flyer“ / „E-Mail Ablauf“ ---------- */
/* !important nötig: components.css setzt auf dem Handy .dialog-inner mit !important */
#record-overview .tw-mail-pane > .dialog-inner {
  padding: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.tw-mail-pane h2,
.tw-mail-pane #btn-invite-close,
.tw-mail-pane #am-close {
  display: none;
}

.tw-mail-pane .dialog-tabs {
  margin-top: 4px;
}

/* Übersicht breiter, damit alle sechs Reiter nebeneinander passen.
   Die Reiter selbst sehen aus wie im Adressbuch (Standard aus components.css). */
dialog#record-overview {
  max-width: 980px;
}

.tw-ov-tabs {
  margin: 0 0 2rem;
}

/* Reiter „E-Mail Flyer“: Text, Vorschau und Empfänger untereinander
   (wie „E-Mail Ablauf“) – die Unter-Reiter entfallen hier */
.tw-mail-pane .dialog-tabs {
  display: none;
}

.tw-mail-pane .tab-content {
  display: block;
}

.tw-mail-abschnitt {
  display: none;
}

.tw-mail-pane .tw-mail-abschnitt {
  display: block;
  margin: 22px 0 10px;
  padding-top: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}

.tw-am-leer[hidden] {
  display: none;
}

.tw-am-leer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: 12px;
}

.tw-am-leer .material-icons {
  color: var(--accent-dark, var(--gold-mittel));
}

/* Statusmeldung beim Versand direkt über den Knöpfen */
.tw-mail-status:not(:empty) {
  margin-top: 14px;
}

/* Farbe (Einstellungen → Layout) in Formular und Übersicht */
.tw-farbe {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tw-farbe select {
  flex: 1 1 auto;
  min-width: 0;
}

.tw-farbe-muster {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.tw-farbfeld {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: -3px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.tw-farbe-herkunft {
  font-size: 13px;
  color: var(--ink-soft);
}

/* ============================================================
   VERANSTALTUNGEN: Vorlage (Veranstaltungsart) & Termin
   ============================================================ */
.va-merksatz {
  /* gleiches Aussehen und gleiche Abstände wie die Hinweise bei den Spenden */
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 24px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--accent-tint);
  border: 1px solid color-mix(in srgb, var(--accent-dark, var(--gold-mittel)) 25%, transparent);
  border-radius: 8px;
}
.va-merksatz .material-icons { color: var(--accent-dark); font-size: 20px; flex: none; }
.va-merksatz strong { color: var(--ink); }

.va-hinweis {
  margin: 4px 0 10px;
  font-size: 14px;
  color: var(--ink-soft);
}

.va-icons { display: flex; flex-wrap: wrap; gap: 4px; }
.va-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--accent-dark);
  background: var(--accent-tint);
  border-radius: 8px;
}
.va-icon .material-icons { font-size: 16px; }

.va-vorlage-zahl {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.va-vorlage-zahl .material-icons { font-size: 16px; }

/* Schalter-Liste in der Detailansicht */
.va-schalter-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px 14px;
}
.va-schalter-zeile {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--ink-faint);
}
.va-schalter-zeile .material-icons { font-size: 18px; }
.va-schalter-zeile.is-an { color: var(--ink); }
.va-schalter-zeile.is-an .material-icons { color: var(--pal-gruen); }

/* Formular: Abschnitte und Schalter */
.va-form-box {
  margin: 0 0 14px;
  padding: 10px 14px 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.va-form-box > legend {
  padding: 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.va-schalter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}
.va-schalter-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.va-schalter-check input { width: 16px; height: 16px; accent-color: var(--accent-dark); }
.va-schalter-check .material-icons { font-size: 18px; color: var(--ink-faint); }
.va-schalter-check:has(input:checked) { background: var(--accent-tint); border-color: var(--accent-dark); }
.va-schalter-check:has(input:checked) .material-icons { color: var(--accent-dark); }

.va-editor-aktionen {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

/* Standard-Ablauf */
.va-ab-zeile {
  display: grid;
  grid-template-columns: 62px 96px 92px 150px minmax(0, 1fr) 96px 32px;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  margin-bottom: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.va-ab-zeile.tw-art-mahlzeit { background: var(--neutral-50); border-color: var(--pal-senf-mittel); }
.va-ab-zeile.tw-art-pause { background: var(--surface); }
.va-ab-zeile.tw-art-lektion { border-color: var(--accent-dark); }
.va-ab-pfeile { display: flex; gap: 2px; }
.va-ab-dauer { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-faint); }
.va-ab-zeit { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Checklisten-Vorlage */
.va-au-kopf, .va-au-zeile {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 100px 32px;
  gap: 8px;
  align-items: center;
}
.va-au-kopf { padding: 0 8px 4px; font-size: 12px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; }
.va-au-zeile { padding: 4px 8px; margin-bottom: 4px; border: 1px solid var(--line); border-radius: 8px; }

/* Checkliste der Veranstaltung */
.va-cl-fortschritt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--ink-soft);
}
.va-cl-bar { flex: 1; height: 8px; background: var(--surface); border-radius: 999px; overflow: hidden; }
.va-cl-bar span { display: block; height: 100%; background: var(--pal-gruen); }
.va-cl-bereich {
  margin: 12px 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.va-cl-zeile {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 140px 190px 32px;
  gap: 8px;
  align-items: center;
  padding: 4px 8px;
  margin-bottom: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.va-cl-zeile input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--pal-gruen); }
.va-cl-zeile.is-erledigt { background: var(--surface); }
.va-cl-zeile.is-erledigt .va-cl-text { text-decoration: line-through; color: var(--ink-faint); }
.va-cl-zeile.is-faellig input[type="date"] { color: var(--danger); border-color: var(--danger); }

@media (max-width: 768px) {
  .va-ab-zeile { grid-template-columns: 62px 1fr 1fr 32px; }
  .va-ab-zeile > input[data-ab="Titel"] { grid-column: 1 / -1; }
  .va-ab-zeile > .va-ab-zeit { display: none; }
  .va-au-kopf { display: none; }
  .va-au-zeile { grid-template-columns: 1fr 80px 32px; }
  .va-au-zeile > [data-au="Aufgabe"] { grid-column: 1 / -1; grid-row: 1; }
  .va-cl-zeile { grid-template-columns: 28px 1fr 32px; }
  .va-cl-zeile > .va-cl-datum, .va-cl-zeile > .va-cl-person { grid-column: 2 / 3; }
}
.va-ueberfaellig { color: var(--danger); }
.va-monate { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.va-monate label {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 6px 0; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.va-monate label:has(input:checked) { background: var(--accent-tint); border-color: var(--accent-dark); }
.va-monate input { accent-color: var(--accent-dark); }
@media (max-width: 768px) { .va-monate { grid-template-columns: repeat(4, 1fr); } }
.va-monate label { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink); margin: 0; }
.va-monate input { width: auto; margin: 0; }

/* Feinablauf je Einheit */
.va-fein-bereich { margin-top: 22px; padding-top: 8px; border-top: 1px solid var(--line); }
.va-fb-zeile, .va-fd-zeile {
  display: grid;
  grid-template-columns: 62px 56px 92px minmax(0, 1fr) 140px 32px;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  margin-bottom: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.va-fd-zeile { grid-template-columns: 62px 56px 92px minmax(0, 1fr) 130px 190px 32px; }
.va-fd-zeile.is-offen .va-fd-person { border-color: var(--danger); }
.tw-box-zeile.is-einheit { cursor: pointer; }
.tw-box-zeile.is-einheit:hover .tw-box-text { text-decoration: underline; }
.va-fein-mini { display: block; margin: 2px 0 0 0; font-size: 12px; color: var(--ink-soft); }
.va-fein-mini .is-offen { color: var(--danger); font-weight: 600; }

/* Team-Übersicht */
.va-team-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.va-team-tabelle th, .va-team-tabelle td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.va-team-tabelle th { font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: var(--ink-faint); }
.va-team-tabelle td.is-offen { color: var(--danger); font-weight: 600; }
.va-team-tabelle td.is-leer { color: var(--ink-faint); }
.va-team-person { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; }
.va-team-person-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; }
.va-team-person ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink-soft); }
.va-team-scroll { overflow-x: auto; }

@media (max-width: 768px) {
  .va-fb-zeile, .va-fd-zeile { grid-template-columns: 62px 1fr 1fr 32px; }
  .va-fb-zeile > input[data-fb="Titel"], .va-fd-zeile > input[data-fd="Titel"] { grid-column: 1 / -1; }
  .va-fb-zeile > .va-ab-zeit, .va-fd-zeile > .va-ab-zeit { display: none; }
}

/* Regieplan (Druck) */
.va-regie { width: 100%; margin: 4px 0 2px; border-collapse: collapse; font-size: 12px; }
.va-regie td { padding: 2px 6px 2px 0 !important; border: 0 !important; border-top: 1px dotted var(--neutral-300) !important; }
.va-regie-zeit { width: 78px; white-space: nowrap; color: var(--neutral-600); }
.va-regie-aufgabe { width: 80px; color: var(--neutral-600); }
.va-regie-person { width: 120px; font-weight: 600; }
.va-regie tr.is-offen .va-regie-person { color: var(--pal-rot); }

/* Veranstaltung: viele Reiter – in einer Zeile, bei Bedarf waagerecht scrollen */
.tw-ov-tabs { overflow-x: auto; scrollbar-width: thin; }
.tw-ov-tabs .tab-button { flex: 0 0 auto; padding: 12px 16px; white-space: nowrap; }
.va-fd-einheit { margin: 0 0 10px; }

/* Feinablauf in Abschnitten (Blick zurück / nach oben / nach vorne) */
.va-fb-zeile { grid-template-columns: 62px 56px 92px minmax(0, 1fr) 130px 140px 32px; }
.va-fd-zeile { grid-template-columns: 62px 70px 92px minmax(0, 1fr) 120px 170px 130px 32px; }
.va-abschnitt { margin: 0 0 12px; padding: 8px 10px 4px; background: var(--surface); border-radius: 12px; }
.va-abschnitt-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--accent-dark);
}
.va-abschnitt-kopf span { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.va-regie tr.va-regie-abschnitt td {
  padding-top: 5px !important; font-size: 11px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--pal-kupfer); border-top: 0 !important;
}
@media (max-width: 768px) {
  .va-fb-zeile, .va-fd-zeile { grid-template-columns: 62px 1fr 1fr 32px; }
}
.va-fein-btn { justify-content: center; white-space: nowrap; border-style: solid; color: var(--accent-dark); border-color: var(--accent-dark); }

/* Feinablauf: Beschreibung unter dem Titel, Leitung je Abschnitt */
.va-titel-notiz { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.va-titel-notiz .va-notiz-in { font-size: 13px; padding: 3px 8px; color: var(--ink-soft); }
.va-abschnitt-leitung { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; color: var(--ink-soft); text-transform: none; letter-spacing: 0; font-weight: 500; }
.va-abschnitt-leitung select { max-width: 240px; }
.va-regie-notiz { color: var(--pal-grau); font-size: 11px; }
.va-team-schritt { white-space: nowrap; }
.va-team-schritt.is-offen strong { color: var(--danger); }

/* Checklisten-Bereiche: Farben und Erklärung */
.va-bereiche { margin: 0 0 14px; padding: 8px 12px; background: var(--surface); border-radius: 12px; }
.va-bereiche summary { cursor: pointer; font-size: 13px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--ink-soft); }
.va-bereiche-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 10px; }
.va-bereich-karte { padding: 6px 10px; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid; border-radius: 8px; }
.va-bereich-name { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.va-bereich-name .material-icons { font-size: 16px; }
.va-bereich-text { margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--ink-soft); }
.va-cl-bereich { display: flex; align-items: center; gap: 6px; }
.va-cl-bereich .material-icons { font-size: 16px; }
.va-cl-zahl { font-size: 11px; font-weight: 600; color: var(--ink-faint); letter-spacing: 0; }
.va-cl-zeile, .va-au-zeile { border-left-width: 4px; }
.va-cl-zeile { grid-template-columns: 28px minmax(0, 1fr) 150px 140px 190px 32px; }
@media (max-width: 768px) {
  .va-cl-zeile { grid-template-columns: 28px 1fr 32px; }
  .va-cl-zeile > .va-cl-bereich-in { grid-column: 2 / 3; }
}

/* Anmeldungen: Altersgruppe, Tage */
.an-alter { display: inline-block; padding: 1px 8px; font-size: 12px; font-weight: 600; border-radius: 999px; }
.an-erw { color: var(--pal-grau-dunkel); background: var(--pal-anthrazit-tint); }
.an-jugend { color: var(--pal-violett-dunkel); background: var(--pal-violett-hell); }
.an-kind { color: var(--pal-beere); background: var(--pal-beere-hell); }
.an-bett { font-size: 14px; vertical-align: -2px; }
.an-tage { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; }
.an-tage legend { padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.an-tag { display: flex; align-items: center; gap: 6px; font-size: 14px; }

/* Essen & Schlafen */
.va-essen-tabelle td, .va-essen-tabelle th { white-space: nowrap; }
.va-essen-tabelle td:first-child { white-space: normal; }
.va-essen-summe td { font-weight: 600; border-top: 2px solid var(--line); }
.va-essen-liste { display: grid; gap: 4px; font-size: 14px; }
.va-zimmer-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-bottom: 10px; }
.va-zimmer { padding: 8px 10px; border: 1px solid var(--line); border-left: 4px solid var(--pal-indigo); border-radius: 8px; font-size: 14px; }
.va-zimmer-kopf { display: flex; align-items: center; gap: 8px; }
.va-zimmer-kopf strong { flex: 1; }
.va-zimmer ul { margin: 4px 0 0; padding-left: 18px; }
.va-zimmer-neu { display: grid; grid-template-columns: minmax(0, 1fr) 90px 220px auto; gap: 6px; align-items: center; }
.va-zuteilung { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
@media (max-width: 768px) {
  .va-zimmer-neu, .va-zuteilung { grid-template-columns: 1fr; }
}

/* Essenstabelle (Veranstaltungsart) */
.va-essen-probe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 14px; }
.va-essen-probe label { display: flex; align-items: center; gap: 6px; }
.va-essen-probe input { width: 70px; }
.va-es-ablauf { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; font-size: 13px; color: var(--ink-faint); }
.va-verpf { padding: 1px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); }
.va-verpf.is-einkauf { background: var(--pal-gruen-hell); border-color: var(--pal-gruen-mittel); color: var(--pal-gruen); font-weight: 600; }
.va-es-zeile {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 100px 124px 66px 64px 76px 66px 90px 84px 28px;
  gap: 6px; align-items: center; padding: 3px 6px; margin-bottom: 3px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
}
.va-es-zeile .tw-in { padding: 4px 6px; font-size: 13px; }
.va-es-kopf { border: 0; background: none; font-size: 12px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .03em; padding-bottom: 0; }
.va-es-ergebnis { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; line-height: 1.25; }
.va-titel-verpf { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 6px; min-width: 0; }
@media (max-width: 900px) {
  .va-es-zeile { grid-template-columns: 1fr 1fr 1fr 32px; }
  .va-es-zeile > [data-es="Artikel"] { grid-column: 1 / 4; }
  .va-es-kopf { display: none; }
  .va-titel-verpf { grid-template-columns: 1fr; }
}

/* Mahlzeiten & Einkaufsliste (Veranstaltung) */
.va-verpf-select { min-width: 130px; padding: 4px 6px; font-size: 13px; }
.va-verpf-zeile.va-verpf-catering td:first-child { box-shadow: inset 4px 0 var(--pal-blau); }
.va-verpf-zeile.va-verpf-einkauf td:first-child { box-shadow: inset 4px 0 var(--pal-gruen); }
.va-verpf-zeile.va-verpf-mitbringen td:first-child { box-shadow: inset 4px 0 var(--pal-kupfer-mittel); }
.va-verpf-zeile.va-verpf-gastfamilie td:first-child { box-shadow: inset 4px 0 var(--pal-violett-dunkel); }
.va-verpf-zeile.va-verpf-offen td:first-child { box-shadow: inset 4px 0 var(--neutral-400); }
.va-gerichte { display: flex; flex-direction: column; font-size: 13px; color: var(--ink-soft); white-space: normal; }
.va-ek-quellen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 10px; font-size: 13px; color: var(--ink-soft); }
.va-ek-leer { opacity: .55; text-decoration: line-through; }
.va-ek-gruppe { margin-bottom: 12px; }
.va-ek-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) 240px; gap: 10px; align-items: center; padding: 4px 8px; border-bottom: 2px solid var(--line); margin-bottom: 4px; }
.va-ek-kopf .tw-in { padding: 4px 6px; font-size: 13px; }
.va-ek-zeile { display: grid; grid-template-columns: 24px minmax(0, 1fr) 150px 240px; gap: 10px; align-items: center; padding: 4px 8px; border-bottom: 1px solid var(--line); font-size: 14px; }
.va-ek-zeile .tw-in { padding: 4px 6px; font-size: 13px; }
.va-ek-zeile.is-erledigt .va-ek-artikel, .va-ek-zeile.is-erledigt .va-ek-menge { opacity: .5; text-decoration: line-through; }
.va-ek-artikel small, .va-ek-menge small { display: block; font-size: 12px; color: var(--ink-faint); }
.va-ek-menge { font-variant-numeric: tabular-nums; }
@media (max-width: 768px) {
  .va-ek-kopf { grid-template-columns: 1fr auto; }
  .va-ek-kopf .tw-in { grid-column: 1 / -1; }
  .va-ek-zeile { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .va-ek-zeile .tw-in { grid-column: 2 / -1; }
}

/* ============================================================
   FLYER-LAYOUT „NETZWERK“ (Maße wie das Original, pt auf 105 mm)
   Positionen kommen als Inline-Stil (Prozent der Seite) aus
   veranstaltung.js (NW); Schriftgrößen hier in pt / em.
   ============================================================ */
.fl-nw { color: var(--pal-kupfer-dunkel); line-height: 1.2; }
.fl-nw .nw-datum-box,
.fl-nw .nw-text-box,
.fl-nw .nw-feld,
.fl-nw .nw-qr { position: absolute; box-sizing: border-box; overflow: hidden; }
.fl-nw .nw-datum-box {
  display: flex; align-items: center; justify-content: center;
  padding: 2pt 6pt; background: #fff; color: var(--gold-dunkel);
}
.fl-nw .nw-datum-fit { font-size: 25pt; text-align: center; white-space: nowrap; }
.fl-nw .nw-datum { font-weight: 600; line-height: 1.206; }
.fl-nw .nw-ort { font-size: 1.04em; font-weight: 400; line-height: 1.16; text-transform: uppercase; }

.fl-nw .nw-text-box { padding: 3.8pt 7.4pt 4pt; background: #fff; }
.fl-nw .nw-text-fit { font-size: 7pt; }
.fl-nw .nw-kopf {
  font-size: 1.693em; font-weight: 700; line-height: 1.222;
  text-align: center; text-transform: uppercase;
}
.fl-nw .nw-unter { letter-spacing: 0.01em; margin-top: 0.08em; font-size: 1.223em; font-weight: 500; line-height: 1.203; text-align: center; }
.fl-nw .nw-linie { width: 10.83em; height: 0; margin: 0.91em auto 0; border-top: 0.5pt solid currentColor; }
.fl-nw .nw-text { letter-spacing: 0.005em; margin: 0.61em 0.3em 0 0; font-weight: 500; line-height: 1.2857; text-align: left; }
.fl-nw .nw-text p { margin: 0 0 0.57em; }
.fl-nw .nw-text p:last-child { margin-bottom: 0; }

.fl-nw .nw-zeiten { letter-spacing: 0.01em; font-size: 7pt; font-weight: 500; line-height: 1.143; white-space: nowrap; }
.fl-nw .nw-zeit { position: relative; height: 1.143em; }
.fl-nw .nw-zeit > span { position: absolute; top: 0; }
.fl-nw .nw-zeit .nw-uhr { right: calc(100% - 8.1em); }
.fl-nw .nw-zeit .nw-teil { left: 10.286em; }

.fl-nw .nw-ort-block { letter-spacing: 0.01em; font-size: 7pt; font-weight: 500; line-height: 1.143; white-space: nowrap; }
.fl-nw .nw-label { letter-spacing: -0.008em; font-size: 1.286em; font-weight: 700; line-height: 1.222; text-transform: uppercase; margin-bottom: 0.05em; }

.fl-nw .nw-infos { letter-spacing: 0.01em; font-size: 7pt; font-weight: 500; line-height: 1.2857; }
.fl-nw .nw-punkt { padding-left: 1.214em; text-indent: -1.214em; }
.fl-nw .nw-punkt::before { content: "→ "; }
.fl-nw .nw-weiter { padding-left: 1.214em; margin-top: -0.143em; }

.fl-nw .nw-kontakt { letter-spacing: 0.01em; font-size: 7pt; font-weight: 500; line-height: 1.2857; white-space: nowrap; }
.fl-nw .nw-qr { background: #fff; }
.fl-nw .nw-qr img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

/* Bearbeiten-Dialog: Felder je Layout */
.tw-flyer-dialog:not(.ist-netzwerk) .fe-nw { display: none; }
.tw-flyer-dialog.ist-netzwerk .fe-std { display: none; }

/* Flyer bearbeiten: Felder automatisch aus der Veranstaltung */
.fe-auto { display: flex; flex-direction: column; gap: 6px; }
.fe-auto-wert {
  padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px;
  background: var(--paper); color: var(--ink); white-space: pre-wrap; font-size: 14px; line-height: 1.45;
}
.fe-auto-wert.ist-leer { color: var(--ink-soft); font-style: italic; }
.fe-auto-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 6px; }
.fe-auto-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.fe-auto-chip .material-icons { font-size: 16px; }
.fe-auto-chip.is-eigen { color: var(--accent-dark, var(--pal-senf-dunkel)); }
.fe-auto-knopf { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent-dark, var(--pal-senf-dunkel)); text-decoration: underline; cursor: pointer; }
[data-flyer-feld][hidden] { display: none !important; }

/* Schlafplatz anlegen: Felder und Knopf in einer Höhe */
.va-zimmer-neu > .tw-in,
.va-zimmer-neu > .tw-add-btn { box-sizing: border-box; height: 36px; min-height: 36px; margin: 0; }
.va-zimmer-neu > select.tw-in { padding-top: 0; padding-bottom: 0; line-height: 34px; }
.va-zimmer-neu > .tw-add-btn { justify-content: center; padding: 0 12px; white-space: nowrap; }