:root {
  --bg: #f4f5f7; --card: #fff; --ink: #1f2430; --muted: #6b7280; --line: #e5e7eb;
  --brand: #2b5fb3; --brand-dark: #22497f; --ok: #15803d; --ok-dark: #126730; --danger: #b91c1c; --danger-dark: #991b1b;
  --radius: 8px;
  /* Abstands-Skala – einzige Quelle für vertikale/horizontale Abstände in Views.
     Statt inline 6/8/10/12/14/20px immer auf die nächste Stufe runden. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  /* Textgrößen unterhalb der Basis (body = 12px). */
  --text-sm: 11px; --text-xs: 10px;
}
* { box-sizing: border-box; }
body { margin: 0; font: 12px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--ink); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 18px; margin: 0; }
h2 { font-size: 14px; margin: 0 0 12px; }

.topbar { position: relative; z-index: 1200; background: var(--brand-dark); color: #fff; display: flex; align-items: center; gap: 20px; padding: 0 20px; height: 56px; }
.topbar .brand { font-weight: 700; font-size: 14px; color: #fff; }
.topbar nav { display: flex; gap: 16px; flex: 1; }
.topbar nav a { color: #dbe6f5; padding: 6px 2px; }
.topbar nav a.active, .topbar nav a:hover { color: #fff; text-decoration: none; border-bottom: 2px solid #fff; }
.nav-badge { display: inline-block; min-width: 17px; padding: 0 5px; margin-left: 5px; border-radius: 9px; background: #e11d48; color: #fff; font-size: 9px; font-weight: 700; line-height: 17px; text-align: center; vertical-align: top; }
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-trigger { background: none; border: 0; color: #dbe6f5; font: inherit; cursor: pointer; padding: 6px 2px; }
.nav-trigger.active, .nav-dropdown:hover .nav-trigger { color: #fff; }
.nav-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 170px; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); padding: 6px 0; z-index: 1210; }
.nav-dropdown:hover .nav-menu, .nav-dropdown:focus-within .nav-menu { display: block; }
/* Höhere Spezifität als ".topbar nav a", damit die dunkle Schrift im weißen Dropdown gewinnt. */
.topbar nav .nav-menu a { display: block; color: var(--ink); padding: 8px 14px; border-bottom: 0; }
.topbar nav .nav-menu a:hover,
.topbar nav .nav-menu a.active { color: var(--brand); background: #eef3fb; border-bottom: 0; text-decoration: none; }
.topbar .user { display: flex; align-items: center; gap: 12px; color: #dbe6f5; font-size: 11px; }
.dash-search { display: flex; gap: 10px; margin: 4px 0 20px; }
.dash-search input {
  flex: 1; height: 48px; margin: 0; padding: 0 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 13px; background: var(--card); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.dash-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(43, 95, 179, .15); }
.dash-search .btn { height: 48px; padding: 0 22px; }

/* Live-Suche: Vorschlags-Dropdown */
.dash-search-wrap { position: relative; margin: 4px 0 20px; }
.dash-search-wrap .dash-search { margin: 0; }
.search-suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 300;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12); max-height: 60vh; overflow-y: auto; padding: 4px 0; }
.search-suggest .ss-group { padding: 8px 14px 2px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); }
.search-suggest .ss-item { display: flex; flex-direction: column; padding: 7px 14px; color: var(--ink); text-decoration: none; }
.search-suggest .ss-item:hover, .search-suggest .ss-item.is-active { background: #eef3fb; text-decoration: none; }
.search-suggest .ss-label { font-weight: 600; }
.search-suggest .ss-meta { font-size: 11px; color: var(--muted); }
.search-suggest .ss-more { display: block; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--brand); font-weight: 600; font-size: 12px; text-decoration: none; }
.search-suggest .ss-more:hover, .search-suggest .ss-more.is-active { background: #eef3fb; }
.search-suggest .ss-empty { padding: 12px 14px; color: var(--muted); font-size: 13px; }

/* Tag-Eingabe (Chips) */
.tag-input { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.tag-input:focus-within { outline: 2px solid #bfd3f2; border-color: var(--brand); }
.tag-input input[type="text"] { flex: 1; min-width: 140px; width: auto; border: 0; padding: 4px 6px; outline: none; }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; background: #eef3fb; color: var(--brand-dark); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 11px; font-weight: 600; }
.tag-chip .tag-x { border: 0; background: transparent; color: var(--brand-dark); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; border-radius: 999px; }
.tag-chip .tag-x:hover { background: rgba(0, 0, 0, .08); }
.placeholder-panel { margin-top: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 0 12px 10px; background: #fafbfc; }
.placeholder-panel > summary { cursor: pointer; font-weight: 700; color: var(--brand); padding: 10px 0 0; }
.placeholder-picker { display: grid; gap: 12px; margin-top: 8px; }
.placeholder-group { min-width: 0; }
.placeholder-group-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.placeholder-group-head strong { font-size: 11px; }
.placeholder-group-head span { color: var(--muted); font-size: 10px; }
.placeholder-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.placeholder-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 1px solid var(--line); background: #fff; color: var(--brand-dark); border-radius: 999px; padding: 4px 8px; cursor: pointer; }
.placeholder-chip code { font: 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--brand-dark); background: transparent; }
.placeholder-chip span { color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.placeholder-chip:hover { border-color: var(--brand); background: #eef3fb; }

.container { max-width: 1400px; margin: 24px auto; padding: 0 24px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.view-as-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; padding: 12px 14px; border: 1px solid #f5d08a; border-radius: var(--radius); background: #fff8e8; color: #7a4a00; }
.view-as-banner strong { display: block; font-size: 12px; }
.view-as-banner span { display: block; font-size: 11px; }
.event-todos { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; padding: 14px; border: 1px solid #f5d08a; border-radius: var(--radius); background: #fff8e8; color: #7a4a00; }
.event-todos.is-clean { border-color: #cfe8d8; background: #f4fbf6; color: var(--ok); }
.event-todos strong { display: block; font-size: 13px; }
.event-todos span { font-size: 11px; }
.event-todo-list { display: flex; flex-wrap: wrap; gap: 8px; }
.event-todo { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 8px; border-radius: 6px; background: rgba(255, 255, 255, .65); }
.event-todo > span:last-child { overflow-wrap: anywhere; }
.contact-preview { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); font-size: 11px; }
.template-preview { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.template-preview summary { cursor: pointer; font-weight: 600; color: var(--brand); }
.template-preview-form { margin-top: 10px; }
.template-preview-result { margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.template-preview-result pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0 10px; padding: 8px; border-radius: 6px; background: #fff; border: 1px solid var(--line); font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.template-group { border: 1px solid var(--line); border-radius: var(--radius); padding: 0 12px; margin-bottom: 10px; }
.template-group > summary { cursor: pointer; font-weight: 700; padding: 10px 0; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
tbody tr:hover td { background: #fafbfc; }

.btn { display: inline-block; background: var(--brand); color: #fff; border: 0; border-radius: 6px; padding: 9px 14px; font-size: 11px; cursor: pointer; }
.btn:hover { background: var(--brand-dark); text-decoration: none; }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.25); }
.btn:disabled:hover, .btn[disabled]:hover { background: var(--brand); }
.btn.secondary { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn.secondary:hover { background: #f4f5f7; }
.btn.secondary:disabled:hover, .btn.secondary[disabled]:hover { background: #fff; }
/* Semantik: success = Speichern/Bestätigen/Senden (grün), danger = Löschen/Destruktiv (rot),
   Standard-.btn (blau) = Bearbeiten/Navigation. */
.btn.success { background: var(--ok); }
.btn.success:hover { background: var(--ok-dark); }
.btn.success:disabled:hover, .btn.success[disabled]:hover { background: var(--ok); }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: var(--danger-dark); }
.btn.danger:disabled:hover, .btn.danger[disabled]:hover { background: var(--danger); }
.btn.sm { padding: 5px 9px; font-size: 10px; }
.btn-block { display: block; width: 100%; text-align: center; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

label { display: block; font-size: 10px; color: var(--muted); margin: 12px 0 4px; }
input, select, textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid #bfd3f2; border-color: var(--brand); }
select[multiple] { min-height: 140px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 18px; }

.meta-label { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 2px; }

/* Detailseiten-Layout: zwei Spalten nebeneinander (Karten stapeln je Spalte). */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
/* Eventseite auf breiten Bildschirmen: Die Arbeitsspalte traegt die breiten Formulare und
   Tabellen, die Nachschlagespalte kommt mit weniger aus. Erst ab 1280px, darunter bleibt es
   haelftig - sonst wird die rechte Spalte zu schmal fuer die Kontaktzeilen. */
@media (min-width: 1280px) {
  .cols.cols-work { grid-template-columns: 1.4fr 1fr; }
}
.col-span-all { grid-column: 1 / -1; }   /* Grid-Item über alle Spalten (z. B. breiter Baustein) */
.event-overview { padding-bottom: 16px; }
.event-facts { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 14px 24px; }
.event-fact { min-width: 0; }
.event-fact strong { overflow-wrap: anywhere; }
.event-lineup-overview { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--line); min-width: 0; }
.event-lineup-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.event-lineup-list { display: grid; gap: 8px; margin-top: 10px; }
.event-lineup-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.4fr); gap: 8px 16px; align-items: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fafbfc; }
.event-lineup-main { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.event-lineup-main strong { overflow-wrap: anywhere; }
.event-lineup-meta { display: flex; gap: 6px 12px; justify-content: flex-end; flex-wrap: wrap; min-width: 0; color: var(--muted); font-size: 11px; }
.event-lineup-meta span { overflow-wrap: anywhere; }
.lineup-status { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; background: #eef0f3; color: #555; }
.lineup-status.zugesagt { background: #e7f5ec; color: var(--ok); }
.lineup-status.abgesagt { background: #fdeaea; color: var(--danger); }
.lineup-status.angefragt { background: #fef3c7; color: #92600a; }
.event-location-tools { min-width: 0; }
.location-tool-grid { display: grid; grid-template-columns: minmax(280px, 1.15fr) minmax(240px, .85fr); gap: 14px; margin-top: 10px; }
.location-tool-section { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #fafbfc; }
.location-tool-section h3 { margin: 0 0 8px; font-size: 11px; }
.event-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.event-progress-step { border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; background: var(--bg); }
.event-progress-step.done { background: #f4fbf6; border-color: #cfe8d8; }
.compact-details { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.compact-details summary { cursor: pointer; font-weight: 600; color: var(--brand); }
.compact-block { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.compact-title { font-size: 11px; margin: 0 0 8px; }
.event-list-row { display: flex; align-items: center; gap: 8px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.event-row-note { flex-basis: 100%; font-size: 10px; }
.event-comment { padding: 9px 0; border-bottom: 1px solid var(--line); }
.event-comment p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.danger-text { color: var(--danger); }
.mail-log-entry { padding: 14px 0; border-bottom: 1px solid var(--line); }
.mail-log-entry:first-child { padding-top: 0; }
.mail-log-entry:last-child { border-bottom: 0; padding-bottom: 0; }
.mail-log-meta { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 10px 18px; margin-top: 12px; }
.mail-log-meta-item { min-width: 0; }
.mail-log-meta-item strong { display: block; overflow-wrap: anywhere; font-size: 12px; }
.mail-log-body { margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #fafbfc; white-space: pre-wrap; overflow-wrap: anywhere; }
.mail-action { padding: 12px 0; border-bottom: 1px solid var(--line); }
.mail-action-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.mail-action-grid { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr); gap: 0 14px; }
.mail-action-grid-full { grid-template-columns: 1fr; gap: 10px; }
.mail-action-free { display: grid; grid-template-columns: auto minmax(140px, 1fr) minmax(180px, 1fr) auto; gap: 8px; align-items: end; margin-top: 8px; }
.mail-action-free-label { color: var(--muted); font-size: 11px; font-weight: 600; padding-bottom: 10px; white-space: nowrap; }
.mail-preview-summary { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 10px 18px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #fafbfc; }
.event-contract-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.event-contract-actions form { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #fafbfc; }
.signature-status-card { margin: 8px 0 12px; padding: 12px; border: 1px solid #cfe8d8; border-radius: 6px; background: #f4fbf6; }
.signature-status-card.is-closed { border-color: #f3c6c6; background: #fff6f6; }
.signature-status-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.signature-status-head strong { font-size: 13px; }
.signature-steps { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: 8px; margin-top: 10px; }
.signature-step { min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted); }
.signature-step strong { display: block; color: inherit; font-size: 11px; }
.signature-step span { display: block; margin-top: 2px; font-size: 10px; }
.signature-step.is-done { border-color: #bfe3cb; background: #fff; color: var(--ok); }
.signature-step.is-active { box-shadow: inset 3px 0 0 var(--ok); font-weight: 700; }
.ticket-summary { margin-top: 16px; padding: 12px; border-radius: 8px; background: var(--bg); }
.ticket-summary-head { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ticket-summary-head strong { display: block; font-size: 13px; }
.ticket-summary-head .muted,
.ticket-summary-head .danger-text { display: block; margin-top: 2px; }
.ticket-channel-list { display: grid; gap: 6px; margin-top: 10px; }
.ticket-channel { display: grid; grid-template-columns: minmax(160px, 1fr) repeat(3, minmax(70px, .32fr)); gap: 8px 12px; align-items: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.ticket-channel > div { min-width: 0; }
.ticket-channel strong { display: inline-block; overflow-wrap: anywhere; }
.ticket-channel .muted { display: block; font-size: 10px; }
.ticket-primary-link { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.ticket-primary-link a { overflow-wrap: anywhere; }
.artist-overview { padding-bottom: 16px; }
.artist-facts { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 14px 24px; }
.artist-fact { min-width: 0; }
.artist-fact strong { overflow-wrap: anywhere; }
.artist-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); white-space: pre-wrap; }
.role-legend { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 10px; margin: -6px 0 18px; }
.role-legend-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-width: 0; }
.role-legend-item strong { display: block; margin-top: 8px; font-size: 12px; }
.role-legend-item p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.artist-assignment { min-width: 0; }
.assignment-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.assignment-search { max-width: 420px; margin-bottom: 10px; }
.assignment-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; max-height: 320px; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: #fafbfc; }
.assignment-list.is-disabled { opacity: .62; background: #f1f3f7; }
.assignment-option { display: flex; align-items: flex-start; gap: 9px; min-width: 0; margin: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); cursor: pointer; }
.assignment-option:hover { border-color: #bfd3f2; background: #f7faff; }
.assignment-list.is-disabled .assignment-option { cursor: default; }
.assignment-list.is-disabled .assignment-option:hover { border-color: var(--line); background: #fff; }
.assignment-option.is-selected { border-color: #bfe3cb; background: #f4fbf6; }
.assignment-option input { width: auto; margin-top: 3px; flex: 0 0 auto; }
.assignment-option span { min-width: 0; }
.assignment-option strong { display: block; overflow-wrap: anywhere; }
.assignment-option small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.event-overview-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Die Eventliste ist bewusst nicht paginiert – ohne festen Kopf weiß man nach ein paar Dutzend
   Zeilen nicht mehr, welche Spalte welche ist (bis zu 14 wählbare Spalten). Die Topbar scrollt
   mit (position: relative), deshalb genügt top: 0 ohne Versatz. Wegen border-collapse: collapse
   verschwindet der Rahmen einer sticky-Zelle – daher box-shadow statt border-bottom. */
.event-overview-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card);
  box-shadow: inset 0 -1px 0 var(--line);
}
.event-column-settings { position: relative; }
.event-column-settings > summary { list-style: none; cursor: pointer; }
.event-column-settings > summary::-webkit-details-marker { display: none; }
.event-column-settings-panel { position: absolute; z-index: 20; right: 0; top: calc(100% + 6px); width: min(440px, calc(100vw - 32px)); padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: 0 10px 24px rgba(32, 40, 55, .16); }
.event-column-fixed { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; margin-top: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.event-column-list { display: grid; gap: 5px; padding: 0; margin: 8px 0 0; list-style: none; }
.event-column-option { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.event-column-option.is-selected { border-color: #bcd0ee; background: #f4f8ff; }
.event-column-option.is-dragging { opacity: .45; }
.event-column-option label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); cursor: pointer; }
.event-column-option input { width: auto; margin: 0; }
.event-column-grip { color: var(--muted); cursor: grab; font-size: 15px; line-height: 1; }
.event-column-move { display: flex; gap: 2px; }
.event-column-move button { width: 26px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); cursor: pointer; }
.event-column-move button:hover { border-color: var(--brand); color: var(--brand); }
.booking-flow-compact { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.booking-flow-compact strong { color: var(--brand); }
.link-block { padding: 0 0 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.link-block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.presskit-section { padding: 0 0 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.presskit-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.press-text { padding: 10px 0; border-bottom: 1px solid var(--line); }
.press-text summary { cursor: pointer; font-weight: 600; color: var(--ink); }
@media (max-width: 880px) {
  .cols, .grid, .grid-3, .event-facts, .event-progress, .artist-facts, .role-legend { grid-template-columns: 1fr; }
  .event-lineup-row { grid-template-columns: 1fr; }
  .event-lineup-meta { justify-content: flex-start; }
  .location-tool-grid { grid-template-columns: 1fr; }
  .ticket-summary-head, .ticket-channel, .event-contract-actions, .mail-log-meta, .mail-action-grid, .mail-action-free, .mail-preview-summary { grid-template-columns: 1fr; }
  .mail-action-free-label { padding-bottom: 0; }
}

/* Mobil-Feinschliff: kompaktere Ränder, stapelnde Kopfzeilen, scrollbare Tabellen. */
@media (max-width: 760px) {
  .container { padding: 0 12px; margin: 14px auto; }
  .card { padding: 16px; }
  /* Titel + Aktionsbutton der Seite untereinander, Buttons volle Breite (gut tippbar). */
  .page-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-head .actions { width: 100%; }
  .page-head .btn { width: 100%; text-align: center; }
  .page-head form { width: 100%; }
  .page-head form .btn { width: 100%; }
  .view-as-banner { flex-direction: column; align-items: stretch; }
  .view-as-banner .btn { width: 100%; }
  /* Breite Listen-Tabellen horizontal scrollbar (Karte = Scroll-Container).
     Schmale Key/Value-Tabellen auf Detailseiten bleiben unangetastet. */
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.list-table { min-width: 620px; }
  /* Aktions-Buttons in Tabellenzeilen dürfen umbrechen. */
  td.actions { white-space: normal; }
}
@media (max-width: 460px) {
  h1 { font-size: 16px; }
}

/* Hamburger-Menü: nur auf kleinen Screens sichtbar. */
.nav-toggle { display: none; }
@media (max-width: 960px) {
  .topbar { flex-wrap: wrap; height: auto; min-height: 56px; padding: 8px 16px; gap: 12px; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
    width: 42px; height: 36px; border: 1px solid rgba(255,255,255,.35); border-radius: 6px;
    color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
  /* Nav + Nutzerbereich einklappen, bis der Haken gesetzt ist. */
  .topbar nav { display: none; flex-direction: column; width: 100%; gap: 0; order: 3; flex-basis: 100%; }
  .topbar .user { display: none; width: 100%; order: 4; justify-content: space-between;
    padding-top: 10px; border-top: 1px solid rgba(255,255,255,.15); }
  .nav-toggle-cb:checked ~ nav { display: flex; }
  .nav-toggle-cb:checked ~ .user { display: flex; }
  .topbar nav > a { padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .topbar nav > a.active, .topbar nav > a:hover { border-bottom: 1px solid #fff; }
  /* Dropdowns werden auf Mobil zu einfachen, immer sichtbaren Untergruppen. */
  .nav-dropdown { flex-direction: column; align-items: stretch; }
  .nav-trigger { text-align: left; padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav-menu { display: block; position: static; min-width: 0; background: transparent;
    border: 0; box-shadow: none; padding: 2px 0 6px 16px; }
  .topbar nav .nav-menu a { color: #dbe6f5; padding: 8px 2px; border-bottom: 0; }
  .topbar nav .nav-menu a:hover, .topbar nav .nav-menu a.active { color: #fff; background: transparent; }
}

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 600; }
/* Buchungs-Pipeline-Stufen */
.badge.anfrage { background: #eef0f3; color: #555; }
.badge.angebot { background: #dbe7fb; color: #1e40af; }
.badge.option { background: #fef3c7; color: #92600a; }        /* gelb = optioniert */
.badge.vertrag_raus { background: #ffedd5; color: #9a3412; }  /* orange */
.badge.fix { background: #e7f5ec; color: var(--ok); }         /* grün = fix */
.badge.durchgefuehrt { background: #dcfce7; color: #166534; }
.badge.abgesagt { background: #fdeaea; color: var(--danger); }
/* Zeilentönung in Übersichten je Pipeline-Status */
tr.row-option > td { background: #fffdf5; }
tr.row-vertrag_raus > td { background: #fff8f1; }
tr.row-fix > td, tr.row-durchgefuehrt > td { background: #f4fbf6; }
tr.row-abgesagt > td { background: #fdf5f5; color: var(--muted); }

.alert { padding: 12px 14px; border-radius: 6px; margin-bottom: 18px; }
.alert.success { background: #e7f5ec; color: var(--ok); border: 1px solid #bfe3cb; }
.alert.error { background: #fdeaea; color: var(--danger); border: 1px solid #f3c4c4; }
/* gelb wie .badge.option: Hinweis, der eine Eingabe erwartet – kein Fehler */
.alert.warn { background: #fef3c7; color: #92600a; border: 1px solid #f6dd9a; }
.card.request-info { background: #fff8e8; border-color: #f3dca0; border-left: 4px solid #e0a800; }
.card.request-info h2 { margin-top: 0; }
.card.request-info .pre-wrap { color: var(--ink); overflow-wrap: anywhere; }
.field-error { color: var(--danger); font-size: 10px; margin-top: 4px; }
.muted { color: var(--muted); }

.copylink { display: flex; gap: 8px; align-items: center; }
.copylink input { font-family: ui-monospace, monospace; font-size: 10px; }

.login-wrap { max-width: 380px; margin: 8vh auto; padding: 0 20px; }
.login-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.login-card h1 { text-align: center; margin-bottom: 6px; }
.login-sub { text-align: center; color: var(--muted); margin-bottom: 20px; font-size: 11px; }
.inline-form { display: inline; }

.stat { display: flex; gap: 18px; flex-wrap: wrap; }
.stat .box { flex: 1; min-width: 140px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.stat .box .n { font-size: 22px; font-weight: 700; }
.stat .box .l { color: var(--muted); font-size: 10px; }

/* Aufgaben / Status */
.status-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 600; }
.status-open { background: #eef0f3; color: #555; }
.status-in_progress { background: #fef3c7; color: #92600a; }
.status-done { background: #e7f5ec; color: var(--ok); }
.status-failed { background: #fdeaea; color: var(--danger); }
.inline-status { display: inline; }
.dt-field { display: flex; gap: 6px; align-items: center; }
.dt-field input { flex: 1; min-width: 0; }
.dt-clear { flex: 0 0 auto; background: #fff; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; cursor: pointer; font-size: 10px; line-height: 1; }
.dt-clear:hover { color: var(--danger); border-color: var(--danger); }

/* Crew-Mobilansicht (Abhaksystem) */
.crew-wrap { max-width: 560px; margin: 0 auto; padding: 16px; }
.crew-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.crew-top .brand { font-weight: 700; font-size: 14px; }
.event-group-title { font-size: 10px; color: var(--muted); margin: 20px 0 8px; text-transform: uppercase; letter-spacing: .03em; }
.task-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.task-card h3 { margin: 0 0 4px; font-size: 14px; }
.task-card .meta { color: var(--muted); font-size: 11px; margin-bottom: 12px; }
.btn-big { display: block; width: 100%; text-align: center; padding: 14px; font-size: 13px; font-weight: 600; border: 0; border-radius: 8px; cursor: pointer; color: #fff; background: var(--brand); }
.btn-big.done { background: var(--ok); }
.btn-big.reset { background: #fff; color: var(--muted); border: 1px solid var(--line); font-weight: 500; padding: 10px; font-size: 11px; margin-top: 8px; }

/* Künstler-Kalender (Monatsraster) */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 10px; font-weight: 600; color: var(--muted); padding: 4px 0; }
.cal-cell { min-height: 92px; border: 1px solid var(--line); border-radius: 6px; padding: 4px; background: #fff; position: relative; }
.cal-cell.out { background: #fafafa; color: #b6bcc6; }
.cal-cell.today { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.cal-daynum { font-size: 10px; font-weight: 600; }
.cal-add { position: absolute; top: 3px; right: 5px; font-size: 10px; color: #c2c8d0; text-decoration: none; line-height: 1; }
.cal-cell:hover .cal-add { color: var(--brand); }
.cal-chip { display: block; font-size: 9px; line-height: 1.3; padding: 1px 4px; margin-top: 2px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip.gig { background: #dbe7fb; color: var(--brand-dark); white-space: normal; }
.cal-chip.blocked { background: #fde4e4; color: #991b1b; }
.cal-chip.tentative { background: #fef3c7; color: #92400e; }
/* Auftritts-Chip: Venue-Stadt, Status, dann Timeline (Ankunft/Soundcheck, Einlass/Beginn). */
.cal-chip .chip-l1, .cal-chip .chip-status, .cal-chip .chip-times { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip .chip-l1 { font-weight: 600; }
.cal-chip .chip-status { opacity: .75; }
.cal-chip .chip-times { opacity: .7; font-size: 8px; }
.cal-chip.gig.is-cancelled .chip-l1 { text-decoration: line-through; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 10px; color: var(--muted); }
.cal-legend span::before { content: ''; display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.cal-legend .lg-gig::before { background: #dbe7fb; }
.cal-legend .lg-blocked::before { background: #fde4e4; }
.cal-legend .lg-tentative::before { background: #fef3c7; }
@media (max-width: 720px) { .cal-cell { min-height: 64px; } .cal-chip { font-size: 8px; } }

/* Künstler-Kalender: Jahresübersicht (12 Mini-Monate) */
.cal-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.cal-toggle a { padding: 5px 12px; font-size: 10px; color: var(--muted); text-decoration: none; background: #fff; }
.cal-toggle a.on { background: var(--brand); color: #fff; }
.cal-year { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cal-mini h3 { font-size: 10px; margin: 0 0 6px; text-align: center; }
.cal-mini h3 a { text-decoration: none; color: var(--ink); }
.cal-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-mini-dow { font-size: 7px; text-align: center; color: var(--muted); }
.cal-mini-day { font-size: 8px; text-align: center; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 3px; color: var(--ink); text-decoration: none; position: relative; }
.cal-mini-day.out { color: #d1d5db; }
.cal-mini-day.today { outline: 1px solid var(--brand); }
/* Auftritt: farblich gefüllt (wie Sperrungen), damit er auch in der Jahresübersicht auffällt. */
.cal-mini-day.d-gig { background: #dbe7fb; color: var(--brand-dark); font-weight: 600; }
.cal-mini-day.d-blocked { background: #fde4e4; color: #991b1b; font-weight: 600; }
.cal-mini-day.d-tentative { background: #fef3c7; color: #92400e; font-weight: 600; }
/* Auftritt UND Sperrung/Option am selben Tag: Sperrfarbe gewinnt, Punkt markiert den Auftritt. */
.cal-mini-day.d-gig.d-blocked::after, .cal-mini-day.d-gig.d-tentative::after { content: ''; position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--brand-dark); }
@media (max-width: 1100px) { .cal-year { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .cal-year { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Design-Raster: Utilities statt Inline-Styles.
   In Views KEINE style="…"-Attribute mehr für Abstände, Textgrößen
   und Flex-Zeilen – stattdessen diese Klassen (Abstände nur über
   die --s-Skala). Bestehende Inline-Styles werden schrittweise
   hierauf umgestellt.
   ============================================================ */

/* Abstände (Skala: 1=4px 2=8px 3=12px 4=16px 5=24px) */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.ml-auto { margin-left: auto; }

/* Vertikaler Rhythmus: Kinder eines .stack stehen im Skalenabstand
   untereinander – ersetzt einzelne mt-Klassen auf jedem Kind. */
.stack > * + * { margin-top: var(--s-3); }
.stack-sm > * + * { margin-top: var(--s-2); }

/* Flex-Zeilen (immer mit gap, nie inline display:flex) */
.row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.flex-1 { flex: 1; min-width: 0; }

/* Typografie */
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.nowrap { white-space: nowrap; }
.break-any { overflow-wrap: anywhere; word-break: break-all; }

/* Kleinkram, der bisher inline gelöst war */
.w-auto { width: auto; }                     /* Checkboxen/Radios im Formular-Kontext */
.link-plain { color: inherit; text-decoration: none; white-space: nowrap; }
.summary-link { cursor: pointer; font-weight: 600; color: var(--brand); }
.list-line { padding: 6px 0; border-bottom: 1px solid var(--line); }
.list-line:last-child { border-bottom: 0; }

/* Abstände nach unten (gleiche Skala wie .mt-*) */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--s-1); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }

/* Text-Utilities */
.dim { opacity: .3; }                        /* inaktive Sortierpfeile u. Ä. */
.text-brand { color: var(--brand); }
.text-strong { font-weight: 600; color: var(--ink); }
.fw-normal { font-weight: 400; }
.pre-wrap { white-space: pre-wrap; }

/* Layout-Komponenten für wiederkehrende Muster */
.col-min { flex: 1; min-width: 280px; }      /* umbruchfähige Spalte in .row-cols */
.flex-lg { flex: 1.4; min-width: 0; }        /* breiterer Partner neben .flex-1 (z. B. Datum vor Uhrzeit) */
.row-cols { display: flex; gap: var(--s-5); flex-wrap: wrap; align-items: flex-start; }
.row-inline { display: inline-flex; align-items: center; gap: var(--s-2); }
.row-center { justify-content: center; }     /* Modifier zu .row */
.check-row { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); color: var(--ink); }
.list-tight { margin: var(--s-2) 0 0; padding-left: 18px; }

/* Empfänger-Auswahl (Event-Info): gruppierte, linksbündige Checkbox-Liste */
.recipient-picker { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; background: #fff; margin-top: 6px; }
.recipient-group-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
.recipient-option { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: 12px; color: var(--ink); cursor: pointer; }
.recipient-option input { width: auto; margin: 0; flex: 0 0 auto; }
.recipient-tag-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.recipient-tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.recipient-tag { display: inline-flex; align-items: center; max-width: 100%; gap: 6px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: #eef3fb; font-size: 11px; color: var(--ink); }
.recipient-tag span { overflow-wrap: anywhere; }
.recipient-tag button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 1px; }
.recipient-tag button:hover { color: var(--danger); }
.tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; text-align: center; background: var(--bg); }

/* Leerzustand: einheitlich für Listen/Tabellen (bei Tabellen aufs <td colspan> setzen) */
.empty-state { padding: 24px 16px; text-align: center; color: var(--muted); }
.empty-state .btn { margin-top: var(--s-3); }

/* Kunden/Mandanten bearbeiten: klar getrennte Aktionsgruppen im Bearbeiten-Panel */
.settings-head { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.settings-group { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.settings-actions { margin-top: 12px; }
/* Logo-Vorschau (zeigt exakt das Bild, das ins PDF eingebettet wird) */
.logo-preview { display: inline-flex; align-items: center; justify-content: center; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; max-width: 240px; }
.logo-preview img { max-height: 60px; max-width: 100%; display: block; }