@font-face {
  font-family: 'Open Sans';
  src: url('/static/OpenSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url('/static/OpenSans-Bold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Open Sans', sans-serif;
  background: #F0EEE6;
  color: #2E2F2F;
  min-height: 100vh;
  overflow-y: scroll;
}

/* ── Header ── */
header {
  background: #2E2F2F;
  color: #fff;
  width: min(calc(1400px - 3rem), calc(100% - 6rem));
  margin: 0 auto;
  padding: 0 1.5rem;
  border-radius: 0 0 12px 12px;
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 75px;

  position: sticky; top: 0; z-index: 100;
}
.logo {
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: .5px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.logo svg { width: 22px; height: 22px; }
nav {
  display: flex;
  gap: .25rem;
  margin-left: auto;
  position: relative;
  background: rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 4px;
}
.nav-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: 0;
  border-radius: 6px;
  background: #D97757;
  transition: left .25s ease, width .25s ease;
  z-index: 0;
}
nav button {
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.65);
  padding: .5rem 1.21rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 400;
  transition: color .2s;
  display: flex;
  align-items: center;
  gap: .4rem;
}
nav button:hover { color: #fff; }
nav button.active {
  color: #fff;
  background: transparent;
}
nav button img { width: 16px; height: 16px; filter: brightness(0) invert(1); }

/* ── Layout ── */
main { width: min(1400px, calc(100% - 3rem)); margin: 2rem auto; padding: 0 1.5rem; }

/* ── Karte ── */
.card {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
}
.card-title {
  font-size: 1.1rem;
  font-weight: 400;
  color: #2E2F2F;
  margin-bottom: 1.5rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid #E2D9CA;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ── Formular ── */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem 1.5rem;
}
.form-group { display: flex; flex-direction: column; gap: .35rem; }
.form-group.full { grid-column: 1 / -1; }
.section-label {
  font-size: 1.56rem; font-weight: 400; color: #2E2F2F;
  margin-bottom: .75rem;
}
.section-label + .form-grid,
.section-label + .form-grid-kontakt,
.section-label + .form-grid-unternehmen,
.section-label + .form-grid-meta { margin-top: 0; }

/* ── Allgemeine Projektdaten-Grid ── */
.form-grid-allgemein {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "titel       titel       titel       letzte"
    "beschreib   beschreib   beschreib   projektnummer"
    "beschreib   beschreib   beschreib   startdatum"
    "beschreib   beschreib   beschreib   enddatum"
    "beschreib   beschreib   beschreib   ort"
    "beschreib   beschreib   beschreib   bundesland"
    "beschreib   beschreib   beschreib   ."
    "schlagworte schlagworte schlagworte  link"
    "bemerkung   bemerkung   bemerkung     bew-sterne";
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}
.fga-titel          { grid-area: titel; }
.fga-letzte         { grid-area: letzte; }
.fga-beschreib      { grid-area: beschreib; align-self: stretch; display: flex; flex-direction: column; }
.fga-projektnummer  { grid-area: projektnummer; }
.fga-startdatum     { grid-area: startdatum; }
.fga-enddatum       { grid-area: enddatum; }
.fga-ort            { grid-area: ort; }
.fga-bundesland     { grid-area: bundesland; }
.fga-schlagworte    { grid-area: schlagworte; align-self: start; }
.fga-bemerkung      { grid-area: bemerkung; align-self: start; display: flex; flex-direction: column; }
.fga-bemerkung textarea { resize: vertical; min-height: 70px; }
.fga-zielgruppe     { display: flex; flex-direction: column; }
.fga-ausrichtung    { }
.fga-bew-sterne     { grid-area: bew-sterne; display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; justify-content: center; }
.fga-link           { grid-area: link; }
/* Rückwärtskompatibilität für andere Sektionen */
.fga-letzte         { grid-area: letzte; }

/* ── Investition – Radio/Checkbox ── */
.inv-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: .4rem;
}
.inv-radio-col {
  flex-direction: column;
  gap: .35rem;
}
.inv-radio-option,
.inv-checkbox-option {
  display: inline-flex;
  align-items: flex-start;
  gap: .45rem;
  font-size: .95rem;
  font-weight: 400;
  color: #4a5568;
  cursor: pointer;
  line-height: 1.4;
}
.inv-radio-option input[type="radio"],
.inv-checkbox-option input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: #D97757;
  cursor: pointer;
  flex-shrink: 0;
}
/* View-Modus: Radio/Checkbox nicht anklickbar */
#partner-form.view-mode .inv-radio-option input[type="radio"],
#partner-form.view-mode .inv-checkbox-option input[type="checkbox"] {
  pointer-events: none;
  cursor: default;
}

.fga-beschreib textarea {
  flex: 1;
  min-height: 240px;
  resize: vertical;
}
.section-label + .form-grid-allgemein { margin-top: 0; }

/* ── Meta-Daten-Grid (Projekt als Referenz → Panel 1: Marketing-Texte) ── */
.form-grid-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "marketing   bewertung"
    "projektziel bew-notizen"
    "projektziel bew-notizen"
    "projektziel bew-notizen"
    "projektziel bew-notizen"
    "projektziel bew-notizen"
    "herausford  zitat"
    "herausford  zitat"
    "herausford  zitat";
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

/* ── Projekt Status Reporting Grid ── */
.form-grid-reporting {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1rem 1.5rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

/* ── Kontaktperson-Grid ── */
.form-grid-kontakt {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "anrede  titel    beruf           status"
    "vorname nachname .               statusgeaendert"
    "email   telefon  .               .";
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

/* ── Unternehmensinformationen-Grid ── */
.form-grid-unternehmen {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "firma   firma   branche  kategorie"
    "strasse strasse notizen  notizen"
    "plz     stadt   notizen  notizen"
    "land    partner-rolle  notizen  notizen"
    "hp-schlagworte  hp-schlagworte  hp-schlagworte  hp-schlagworte";
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  align-items: start;
}

/* ── Ansprechpartner:in-Grid ── */
.form-grid-ansprechpartner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "ap-anrede  ap-titel   ap-beruf  ."
    "ap-vorname ap-nachname .         ."
    "ap-email   ap-telefon  .         .";
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

/* ── Zwischenüberschrift ── */
.form-subheading {
  font-size: .98rem;
  font-weight: 400;
  color: #2E2F2F;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 1.2rem 0 .6rem 0;
  padding-bottom: .3rem;
  border-bottom: 1px solid #E2D9CA;
}
label { font-size: .82rem; font-weight: 600; color: #2E2F2F; }
input, select, textarea {
  padding: .55rem .8rem;
  border: none;
  border-radius: 4px;
  font-family: 'Open Sans', sans-serif;
  font-size: .95rem;
  transition: .2s;
  background: #F0EEE6;
  color: #2E2F2F;
}
/* Referenzhöhe für Formularfelder – Buttons übernehmen diese Höhe (siehe .btn). */
input, select {
  height: 2.4rem;
}
/* line-height gezielt nur auf input (nicht select), sonst wird der Text im
   nativen Dropdown-Rendering nach unten verschoben und abgeschnitten. */
input {
  line-height: 2.4rem;
}
/* iOS rendert input[type=date] sonst mit abweichender, oft größerer Eigenhöhe. */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2.2rem;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 1.5px #D97757;
}
textarea { resize: vertical; min-height: 80px; }

/* ── View-Modus (Detailansicht als Formular) ── */
#partner-form.view-mode input,
#partner-form.view-mode select,
#partner-form.view-mode textarea {
  background: #F0EEE6;
  color: #2E2F2F;
  cursor: default;
  opacity: 1;
}
#partner-form.view-mode select {
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
  background-image: none;
  padding-right: .8rem;
}

/* ── Buttons (alle gleiche Farbe #D97757) ── */
.btn {
  height: 2.4rem;
  padding: 0 1.4rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.5;
  transition: all .2s;
  background: #D97757;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
.btn:hover { background: #E4A089; transform: translateY(-1px); }
.btn-danger { background: #2E2F2F; color: #fff; }
.btn-danger:hover { background: #45473F; transform: translateY(-1px); }
.btn-sm { height: 2.4rem; padding: 0 .83rem; font-size: .9rem; line-height: 1.5; }
.btn img { width: 15px; height: 15px; filter: brightness(0) invert(1); }

/* ── Icon-Button (nur Icon, kein Text) ── */
.btn-icon {
  background: #F0EEE6;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: .38rem .55rem;
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.btn-icon:hover { background: #EDE6D6; transform: translateY(-1px); }
.btn-icon img { width: 17px; height: 17px; display: block; filter: brightness(0) saturate(100%) invert(44%) sepia(8%) saturate(400%) hue-rotate(130deg); }
.btn-icon svg { width: 17px; height: 17px; stroke: #93897A; }
.btn-icon-outline { border: 1px solid #2E2F2F !important; }

.form-actions { margin-top: 1.75rem; display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
/* Als eigenständige Karte (Layout-Ebene) übernimmt sie bereits den Standard-Kartenabstand
   von der vorherigen Karte – das zusätzliche margin-top hier würde den Abstand verdoppeln. */
.card.form-actions { margin-top: 0; }
.form-actions-spacer { flex: 1; }

/* ── Toast ── */
#toast {
  position: fixed; bottom: 2rem; right: 2rem;
  padding: .8rem 1.5rem; border-radius: 10px;
  font-weight: 400; font-size: .9rem;
  opacity: 0; transform: translateY(10px);
  transition: all .3s; z-index: 9999; pointer-events: none;
}
#toast.show { opacity: 1; transform: translateY(0); }
#toast.success { background: #00AF12; color: #FFFFFF; }
#toast.error   { background: #FF0000; color: #FFFFFF; }
#toast.info    { background: #DB8300; color: #FFFFFF; }

/* ── Filter ── */
.filter-bar { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; align-items: center; }
.filter-bar > button:last-child { margin-left: auto; }
.filter-bar input, .filter-bar select { flex: 1; min-width: 160px; max-width: 260px; background: #F0EEE6; }
.filter-bar select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-color: #F0EEE6;
  padding-right: 2.2rem;
}
.search-wrap input { background: #F0EEE6; }
.filter-bar input.filter-active,
.filter-bar select.filter-active,
.search-wrap input.filter-active { background: #F0EEE6; }
.search-wrap { position: relative; }
.search-wrap input { width: 100%; padding-left: 2.1rem; }
.search-icon { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; opacity: .45; pointer-events: none; }

/* ── Tabelle ── */
.table-wrap { overflow-x: auto; min-height: 600px; }
table { width: 100%; border-collapse: separate; border-spacing: 0 5px; font-size: .9rem; table-layout: fixed; }
th {
  background: transparent; color: #555;
  font-size: .82rem; font-weight: 600;
  padding: .6rem 1rem; text-align: left;
  border-bottom: 1px solid #E2DCC9;
}
td { padding: .72rem 1rem; border-bottom: none; vertical-align: middle; background: #F0EEE6; }
tbody tr td:first-child { border-radius: 6px 0 0 6px; }
tbody tr td:last-child  { border-radius: 0 6px 6px 0; }
tbody tr:hover td { background: #EAE4D6; }

/* ── Spaltenbreiten (7 Spalten) ── */
table th:nth-child(1), table td:nth-child(1) { width: 24%; }  /* Titel der Veranstaltung */
table th:nth-child(2), table td:nth-child(2) { width: 8%;  }  /* Datum (schmal) */
table th:nth-child(3), table td:nth-child(3) { width: 15%; }  /* Ort / Land */
table th:nth-child(4), table td:nth-child(4) { width: 16%; overflow: hidden; text-overflow: ellipsis; }  /* Ausrichtung */
table th:nth-child(5), table td:nth-child(5) { width: 15%; }  /* Checkliste / Status */
table th:nth-child(6), table td:nth-child(6) { width: 16%; }  /* Organisation */
table th:nth-child(7), table td:nth-child(7) { width: 6%; overflow: hidden; }  /* Kebab */

.badge {
  display: inline-block; padding: .2rem .65rem;
  border-radius: 20px; font-size: .75rem; font-weight: 200; letter-spacing: .3px;
}
.badge-aktiv     { background: #F0EEE6; color: #2E2F2F; }
.badge-inaktiv   { background: #F0EEE6; color: #2E2F2F; }
.badge-branche   { background: #F0EEE6; color: #2E2F2F; }
.badge-kategorie { background: #F0EEE6; color: #2E2F2F; }

.actions-cell { display: flex; gap: .4rem; }

/* ── Kebab-Menü ── */
.kebab-btn {
  background: none; border: none; cursor: pointer;
  font-size: 1.7rem; line-height: 1; color: #888;
  padding: .2rem .55rem; border-radius: 4px;
  letter-spacing: .05em;
  transition: background .15s, color .15s;
}
.kebab-btn:hover { background: #EAE4D6; color: #333; }
.kebab-menu {
  display: none;
  background: #F0EEE6; border: 1px solid #E2DCC9; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12); min-width: 140px; z-index: 9999;
  overflow: hidden;
}
.kebab-menu.open { display: block; }
.kebab-menu button {
  display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: .55rem 1rem; font-size: .88rem; color: #333;
  transition: background .12s;
}
.kebab-menu button:hover { background: #EAE4D6; }

.no-data { text-align: center; padding: 3rem; color: #A79E8E; font-size: 1rem; }

/* ── Pagination ── */
.pagination-bar {
  display: flex;
  align-items: center;
  padding: .65rem 1rem;
  margin-top: .75rem;
  border-top: 1px solid #E2D9CA;
  font-size: .85rem;
  color: #93897A;
  gap: .5rem;
}
.pagination-left select {
  width: auto;
  padding: .3rem 1.8rem .3rem .6rem;
  font-size: .85rem;
  background-color: #F0EEE6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .5rem center;
}
.pagination-center { flex: 1; text-align: center; }
.pagination-right { display: flex; gap: .2rem; align-items: center; }
.page-btn {
  min-width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; cursor: pointer; font-size: .88rem;
  background: #F0EEE6; border: none; color: #2E2F2F;
  transition: background .15s;
  font-family: 'Open Sans', sans-serif;
}
.page-btn:hover:not(:disabled):not(.page-ellipsis) { background: #EAE4D6; }
.page-btn.active { background: #D97757; color: #fff; }
.page-btn:disabled { opacity: .3; cursor: default; }
.page-ellipsis { cursor: default; background: none; }

/* ── Sortierbare Spaltenköpfe ── */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { background: transparent; }
.sort-icon { font-size: .7rem; opacity: .7; }
.sort-icon-img { width: 12px; height: 12px; vertical-align: middle; margin-left: 4px; opacity: .65; }

/* ── Checkliste / Status: Vorbereitungs-Punkte ── */
.prep-dots { display: flex; gap: 4px; align-items: center; }
.prep-dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.prep-dot-ok         { background: #00AF12; }  /* Tipptopp / Alles ok */
.prep-dot-kritisch   { background: #FF0000; }  /* Offen / Kritisch    */
.prep-dot-offen      { background: #D1D5DB; }  /* Noch nicht gesetzt  */
.prep-dot-irrelevant { background: #C8C8C8; }  /* Für die Veranstaltung nicht relevant */

/* ── Auswertung: Status-Kreisdiagramme ── */
.aw-charts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.aw-chart-cell { display: flex; flex-direction: column; align-items: center; gap: .7rem; padding: .4rem 0; }
.aw-chart-title { font-size: .92rem; color: #2E2F2F; text-align: center; }
.aw-pie { width: 130px; height: 130px; }
.aw-chart-legend { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: #2E2F2F; }
.aw-legend-row { display: flex; align-items: center; }
.aw-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: .45rem; flex-shrink: 0; }
.aw-chart-empty { color: #A79E8E; font-size: .85rem; text-align: center;
  min-height: 130px; display: flex; align-items: center; justify-content: center; }

/* ── Auswertung: Detailtabellen (Vor-/Nachbereitung) ── */
.aw-detail-table, .aw-nb-detail-table { font-size: .85rem; }
.aw-detail-table th, .aw-detail-table td,
.aw-nb-detail-table th, .aw-nb-detail-table td { padding: .55rem .7rem; }
.aw-detail-table a, .aw-nb-detail-table a { color: #D97757; text-decoration: none; }
.aw-detail-table a:hover, .aw-nb-detail-table a:hover { text-decoration: underline; }

/* Status Vorbereitung – Detailtabelle (10 Spalten) */
.aw-detail-table th:nth-child(1),  .aw-detail-table td:nth-child(1)  { width: 12%; }  /* Veranstaltung */
.aw-detail-table th:nth-child(2),  .aw-detail-table td:nth-child(2)  { width: 10%; }  /* Teilnahme */
.aw-detail-table th:nth-child(3),  .aw-detail-table td:nth-child(3)  { width: 9%;  }  /* Intraneteintrag */
.aw-detail-table th:nth-child(4),  .aw-detail-table td:nth-child(4)  { width: 9%;  }  /* Konzept */
.aw-detail-table th:nth-child(5),  .aw-detail-table td:nth-child(5)  { width: 9%;  }  /* Kalkulation */
.aw-detail-table th:nth-child(6),  .aw-detail-table td:nth-child(6)  { width: 9%;  }  /* Meldefrist */
.aw-detail-table th:nth-child(7),  .aw-detail-table td:nth-child(7)  { width: 13%; }  /* Org. Verantwortung */
.aw-detail-table th:nth-child(8),  .aw-detail-table td:nth-child(8)  { width: 15%; overflow: hidden; text-overflow: ellipsis; }  /* Verantwortlich (E-Mail) */
.aw-detail-table th:nth-child(9),  .aw-detail-table td:nth-child(9)  { width: 9%;  }  /* Aktuelle Erinnerung */
.aw-detail-table th:nth-child(10), .aw-detail-table td:nth-child(10) { width: 5%; overflow: hidden; text-align: center; }  /* Kebab */

/* Status Nachbereitung – Detailtabelle (9 Spalten) */
.aw-nb-detail-table th:nth-child(1), .aw-nb-detail-table td:nth-child(1) { width: 13%; }  /* Veranstaltung */
.aw-nb-detail-table th:nth-child(2), .aw-nb-detail-table td:nth-child(2) { width: 11%; }  /* Teilnahme */
.aw-nb-detail-table th:nth-child(3), .aw-nb-detail-table td:nth-child(3) { width: 12%; }  /* Kontakterfassung */
.aw-nb-detail-table th:nth-child(4), .aw-nb-detail-table td:nth-child(4) { width: 12%; }  /* Berichterstattung */
.aw-nb-detail-table th:nth-child(5), .aw-nb-detail-table td:nth-child(5) { width: 8%; text-align: center; }  /* Feedback (Anzahl) */
.aw-nb-detail-table th:nth-child(6), .aw-nb-detail-table td:nth-child(6) { width: 14%; }  /* Org. Verantwortung */
.aw-nb-detail-table th:nth-child(7), .aw-nb-detail-table td:nth-child(7) { width: 16%; overflow: hidden; text-overflow: ellipsis; }  /* Verantwortlich (E-Mail) */
.aw-nb-detail-table th:nth-child(8), .aw-nb-detail-table td:nth-child(8) { width: 9%; }  /* Aktuelle Erinnerung */
.aw-nb-detail-table th:nth-child(9), .aw-nb-detail-table td:nth-child(9) { width: 5%; overflow: hidden; text-align: center; }  /* Kebab */
.aw-status-dot {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block; flex-shrink: 0; margin-right: .4rem; vertical-align: middle;
}
.aw-status-dot-ok       { background: #00AF12; }
.aw-status-dot-kritisch { background: #FF0000; }
.aw-status-dot-offen    { background: #D1D5DB; }

/* ── Monitoring: 4-Spalten-Grid für die Auswertungsgrafiken ── */
/* align-items:stretch -> alle Karten der Zeile sind gleich hoch */
.mon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
  align-items: stretch; margin-bottom: 1.5rem; }
.mon-grid > .card { margin-bottom: 0; display: flex; flex-direction: column; }

/* Legende: einklappbarer Teil + Umschalter */
.mon-legend-toggle { align-self: flex-start; margin-top: .35rem; padding: 0;
  background: none; border: none; cursor: pointer; font: inherit;
  font-size: .8rem; color: #D97757; text-decoration: underline; }
.mon-legend-toggle:hover { color: #B8654A; }
.mon-legend-more { display: flex; flex-direction: column; gap: .3rem; margin-top: .3rem; }

/* ── Monitoring: Balken- und Tortendiagramme ── */
.mon-bar-chart { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1rem; }
.mon-bar-row { display: flex; flex-direction: column; gap: 4px; }
.mon-bar-org { font-size: .82rem; color: #2E2F2F; text-align: left; }
.mon-bar-group { display: flex; flex-direction: column; gap: 4px; }
.mon-bar-track { display: flex; align-items: center; gap: .5rem; }
.mon-bar { height: 15px; border-radius: 3px; min-width: 2px; transition: width .3s ease; }
.mon-bar-val { font-size: .78rem; color: #2E2F2F; white-space: nowrap; }
.mon-pie-wrap { display: flex; justify-content: center; padding: .4rem 0 1rem; }
.mon-chart-legend { display: flex; flex-direction: column; gap: .3rem;
  font-size: .82rem; color: #2E2F2F; align-items: flex-start; }

/* ── Bearbeitungssperre-Overlay ── */
.lock-overlay {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(3px);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lock-overlay-box {
  display: flex; flex-direction: column; align-items: center;
  gap: .75rem; text-align: center;
  padding: 2.5rem 2rem;
  background: #fff;
  border: 1.5px solid #fcd34d;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.10);
  max-width: 380px;
}
.lock-overlay-msg {
  font-size: .95rem; font-weight: 500; color: #92400e;
  margin: 0; line-height: 1.5;
}

/* ── Modal ── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 200;
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #fff; border-radius: 14px; padding: 2rem;
  width: 95%; max-width: 720px; max-height: 90vh; overflow-y: auto; position: relative;
}
.modal-close {
  position: absolute; top: 1rem; right: 1.2rem;
  background: none; border: none; font-size: 1.4rem;
  cursor: pointer; color: #93897A; line-height: 1;
}
.modal-close:hover { color: #2E2F2F; }

/* ── Views ── */
.view { display: none; }
.view.active { display: block; }

/* ── Trennlinie Formular ── */
.form-section-divider {
  margin: 1.5rem 0 1rem;
  padding-top: 1rem;
  border-top: 1px solid #E2D9CA;
}

/* ── Auftraggeber: Reiter-Design ── */
.ag-tab-bar {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}
.ag-tab {
  padding: .45rem 1.1rem;
  background: #FFFFFF;
  border: 1px solid #E2D9CA;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  font-size: .88rem;
  color: #666;
  font-weight: 400;
  white-space: nowrap;
  transition: background .12s;
  line-height: 1.4;
}
.ag-tab.ag-tab-active {
  background: #FBF9F4;
  color: #2E2F2F;
  font-weight: 500;
  position: relative;
  border-bottom: none;
}
.ag-tab.ag-tab-add {
  background: transparent;
  border-style: dashed;
  border-bottom: none;
  color: #D97757;
  font-size: .85rem;
}
.ag-tab.ag-tab-add:hover { background: #F5EFE3; }
.ag-tab-content-wrap {
  border: 1px solid #E2D9CA;
  border-radius: 0 4px 4px 4px;
  background: #FBF9F4;
  padding: 1.25rem 1.5rem 1rem;
  position: relative;
  min-height: 500px;
}
.ag-tab-content-wrap .auftraggeber-block,
.ag-tab-content-wrap .weitere-partner-block {
  border: none;
  border-radius: 0;
  padding: 0;
  margin-top: 0;
  background: transparent;
}
/* ── Veranstaltungs-Feedback (Reportings) ───────────────────────────────────── */
.feedback-card {
  border: 1px solid #E2DCC9;
  border-radius: 6px;
  background: #FBF9F4;
  margin-bottom: .6rem;
}
.feedback-card > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .9rem;
  font-size: .88rem;
}
.feedback-card > summary::-webkit-details-marker { display: none; }
.feedback-card > summary::before {
  content: "▸";
  color: #93897A;
  transition: transform .15s;
}
.feedback-card[open] > summary::before { content: "▾"; }
.fb-badge {
  background: #D97757; color: #fff;
  font-size: .72rem; font-weight: 600;
  padding: .12rem .55rem; border-radius: 20px;
}
.fb-von { font-weight: 600; color: #2E2F2F; }
.fb-datum { color: #93897A; margin-left: auto; font-size: .82rem; }
.fb-body { padding: .2rem .9rem 1rem; }
.fb-block { margin-top: .7rem; }
.fb-block-title {
  font-weight: 600; color: #D97757; font-size: .85rem;
  border-bottom: 1px solid #E2DCC9; padding-bottom: .2rem; margin-bottom: .3rem;
}
.fb-item { font-size: .85rem; margin: .18rem 0; color: #2E2F2F; }
.fb-item-label { color: #93897A; }

/* ── Unser Team ────────────────────────────────────────────────────────────── */
#team-container {
  margin-bottom: .25rem;
}
.team-member-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1rem 1.5rem;
  align-items: end;
  padding: 3px 0;
}
/* Labels ab der zweiten Zeile ausblenden (kein Platzhalter mehr nötig) */
.team-member-row + .team-member-row .form-group label {
  display: none;
}
.team-member-row .form-group {
  margin: 0;
}
.team-member-row .form-group label {
  font-size: .74rem;
  margin-bottom: .3rem;
}
/* E-Mail + Löschen-Button teilen sich die 4. Grid-Zelle */
.team-email-cell {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
}
.team-email-cell .form-group {
  flex: 1;
  min-width: 0;
}
.team-remove-btn {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fdecea;
  border: 1px solid #f5c6c2;
  border-radius: 4px;
  margin-bottom: .1rem;
  cursor: pointer;
}
.team-remove-btn img {
  filter: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(600%) hue-rotate(330deg);
  width: 14px;
  height: 14px;
}
.team-remove-btn:hover {
  background: #fad5d1;
  transform: none;
}
/* Detailansicht: Add-Buttons, Löschen-Buttons und Aus-Bestand-Buttons ausblenden */
.view-mode #add-team-btn,
.view-mode #add-auftraggeber-btn,
.view-mode .team-remove-btn,
.view-mode .team-selector-btn,
.view-mode .auftraggeber-remove-btn,
.view-mode .weitere-remove-btn,
.view-mode #ref-leistung-add-btn,
.view-mode .ref-tl-add-btn {
  display: none !important;
}

/* Detailansicht: Add-Buttons innerhalb der Blöcke verstecken */

@media (max-width: 600px) {
  header {
    width: min(calc(1400px - 1.5rem), calc(100% - 4.5rem));
    padding: 0 1rem;
    gap: 1rem;
    height: 80px;
  }
  .logo span { display: none; }
  .logo img { width: 70px; height: 70px; }
  main { padding: 0 .75rem; margin: 1rem auto; }
  .card { padding: 1.25rem; }
  .mon-grid { display: none; }
  .pagination-bar { display: none; }
  nav button[data-view="tasks"] { display: none; }
  #view-tasks { display: none !important; }
  .btn, .btn-secondary, .btn-danger, .btn-outline { width: 100%; height: 2.4rem; }
}

/* ── Auftraggeber-Übersicht ── */
.badge-neutral { background: #E6E1D4; color: #4a5568; }

.header-actions { display: flex; gap: .4rem; }

/* Aus Bestand-Buttons in Detailansicht ausblenden */
.view-mode .ag-selector-btn,
.view-mode .partner-selector-btn { display: none !important; }

/* ── Auswahl-Modal ── */
/* ── Banana Popup ─────────────────────────────────────────────────────────── */
#banana-popup {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35);
  cursor: pointer;
  animation: bananaFadeIn .2s ease;
}
#banana-img {
  max-width: min(480px, 90vw);
  max-height: 90vh;
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,.5);
  animation: bananaPop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bananaFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes bananaPop    { from { transform: scale(.6) } to { transform: scale(1) } }

.sel-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
}
.sel-box {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  width: min(520px, calc(100vw - 2rem));
  max-height: min(640px, calc(100vh - 4rem));
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid #E2D9CA;
  font-size: 1rem; font-weight: 700; color: #D97757;
}
.sel-close {
  background: none; border: none; cursor: pointer;
  color: #A79E8E; padding: .2rem; border-radius: 4px;
  display: flex; align-items: center;
}
.sel-close:hover { color: #D97757; background: #E2D9CA; }
.sel-search-wrap {
  display: flex; align-items: center; gap: .5rem;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid #E2D9CA;
}
.sel-search-wrap input {
  flex: 1; border: none; outline: none;
  font-size: .95rem; background: transparent;
}
.sel-list {
  overflow-y: auto; flex: 1;
  padding: .4rem 0;
}
.sel-item {
  padding: .65rem 1.25rem;
  cursor: pointer;
  border-bottom: 1px solid #F0EBDD;
  transition: background .1s;
}
.sel-item:last-child { border-bottom: none; }
.sel-item:hover { background: #E2D9CA; }
.sel-item-name { font-weight: 600; font-size: .9rem; color: #2E2F2F; }
.sel-item-meta { font-size: .78rem; color: #93897A; margin-top: .15rem; }
.sel-empty {
  text-align: center; padding: 2.5rem 1rem;
  color: #A79E8E; font-size: .9rem;
}

/* ── Bestätigungs-Modal ────────────────────────────────────────────────── */
#modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(30, 50, 50, 0.45);
  backdrop-filter: blur(2px);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-box {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(48, 77, 75, 0.22);
  padding: 2rem 2.25rem 1.75rem;
  max-width: 440px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  animation: modal-in .18s ease;
}
@keyframes modal-in {
  from { transform: scale(.93); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.modal-icon-wrap {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fef3f2;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .25rem;
}
.modal-icon-wrap img {
  width: 26px; height: 26px;
  filter: brightness(0) saturate(100%) invert(27%) sepia(80%) saturate(1500%) hue-rotate(340deg);
}
.modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2E2F2F;
  margin: 0;
  text-align: center;
}
.modal-body {
  font-size: .9rem;
  color: #4a5568;
  margin: 0;
  text-align: center;
  line-height: 1.55;
}
.modal-actions {
  display: flex;
  gap: .75rem;
  margin-top: .75rem;
  width: 100%;
  justify-content: center;
}
.modal-btn {
  padding: .55rem 1.4rem;
  border-radius: 4px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: filter .15s;
}
.modal-btn:hover { filter: brightness(.92); }
.modal-btn-cancel {
  background: #EDE8DD;
  color: #4a5568;
}
.modal-btn-confirm {
  background: #D97757;
  color: #fff;
}
.modal-btn-danger {
  background: #FF0000;
  color: #fff;
}

/* ── Validierungsfehler ── */
.val-error-field {
  border-color: #FF0000 !important;
  background: #fff5f5 !important;
}
.val-error {
  display: block;
  color: #FF0000;
  font-size: .8rem;
  margin-top: .2rem;
}

/* ── Stern-Bewertung ───────────────────────────────────────────────────────── */
.star-rating {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  gap: .1rem;
  align-items: center;
  margin-top: .25rem;
}
.star-rating input[type="radio"] { display: none; }
.star-rating label {
  font-size: 1.55rem;
  color: #d1d5db;
  cursor: pointer;
  transition: color .12s;
  line-height: 1;
  user-select: none;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label { color: #f59e0b; }

/* ── Multi-Select Zielgruppe ─────────────────────────────────────────────── */
select.multi-select {
  flex: 1;
  min-height: 180px;
  padding: .3rem .4rem;
  font-size: .88rem;
}
select.multi-select option { padding: .2rem .4rem; }
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-top: .3rem;
}
.checkbox-option {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .875rem;
  font-weight: 400;
  cursor: pointer;
  line-height: 1.3;
}
input.num-right { text-align: right; }
input.num-total { background: #F0EBDD; cursor: default; font-weight: 600; }
.bet-panel-subheading {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #93897A;
  margin: .8rem 0 0;
  padding-bottom: .3rem;
  border-bottom: 1px solid #E2D9CA;
}
.sonstiges-wrap {
  padding-left: 1.45rem;
  margin-top: .25rem;
  margin-bottom: .15rem;
}
.sonstiges-wrap input[type="text"] {
  font-size: .875rem;
  width: 100%;
}
.checkbox-option input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #D97757;
}

/* ── Monats-Gantt der Veranstaltungen ── */
.gantt-nav { display: inline-flex; gap: .35rem; }
.gantt-nav-btn {
  background: #F0EEE6; border: 1px solid #E2DCC9; border-radius: 4px;
  cursor: pointer; padding: .2rem .7rem; font-size: .85rem; color: #555;
  line-height: 1.3; transition: background .15s;
}
.gantt-nav-btn:hover { background: #EAE4D6; color: #333; }

.gantt-chart { overflow-x: auto; min-height: 300px; }
.gantt-grid { min-width: 680px; }

.gantt-header-row, .gantt-row { display: flex; align-items: stretch; }

.gantt-name {
  flex: 0 0 180px; width: 180px; padding: .4rem .6rem;
  font-size: .82rem; color: #2E2F2F;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center;
}
.gantt-name-hdr { min-height: 1.6rem; }

.gantt-bar-area {
  position: relative; flex: 1 1 auto; min-height: 30px;
  border-left: 1px solid #E2DCC9;
}
.gantt-days-hdr { display: flex; min-height: 1.6rem; }
.gantt-dh {
  flex: 1 1 0; text-align: center; font-size: .68rem; color: #93897A;
  padding: .2rem 0; border-right: 1px solid #F0EEE6;
}
.gantt-dh-we    { background: #F5F1E7; color: #A79E8E; }
.gantt-dh-today { background: #D97757; color: #fff; font-weight: 600; border-radius: 3px; }

.gantt-row { cursor: pointer; border-radius: 6px; }
.gantt-row:hover { background: #F0EEE6; }
.gantt-row:hover .gantt-bar { filter: brightness(.92); }

.gantt-we { position: absolute; top: 0; bottom: 0; background: #F5F1E7; z-index: 0; }
.gantt-today-mark { position: absolute; top: 0; bottom: 0; width: 2px; background: #D97757; z-index: 2; }
.gantt-bar {
  position: absolute; top: 6px; bottom: 6px; border-radius: 4px;
  min-width: 4px; z-index: 1; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.gantt-empty { padding: 2rem; text-align: center; color: #A79E8E; font-size: .9rem; }