.ines4-task-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .ines4-task-detail-grid {
    grid-template-columns: 2fr 1fr;
  }
}

.ines4-employee-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .ines4-employee-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

/* AI Tasks Detail: wie Mitarbeiter-Detail — 1 Spalte schmal, ab 900px 3 gleiche Spalten */
.ines4-ai-task-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

.ines4-ai-task-detail-grid > * {
  min-width: 0;
}

.ines4-ai-task-detail-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 0;
}

.ines4-ai-task-prompt-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 1.25rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.ines4-ai-task-prompt-card textarea {
  flex: 1 1 auto;
  min-height: 16rem;
  resize: vertical;
  width: 100%;
  box-sizing: border-box;
}

.ines4-ai-task-prompt-card--auto {
  min-height: 0 !important;
}

.ines4-ai-task-prompt-card--auto textarea {
  min-height: 8rem;
}

.ines4-ai-task-test-run-card {
  border-color: #bfdbfe;
  background: linear-gradient(to bottom right, #fff, rgba(239, 246, 255, 0.85));
}

/* Breite wie Inhalt (Tailwind w-fit fehlt ggf. im Bundle), Icon + Text vertikal zentriert */
.ines4-ai-task-run-test-btn {
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  vertical-align: middle;
}

.ines4-ai-task-run-test-btn i,
.ines4-ai-task-run-test-btn svg {
  display: block;
  flex-shrink: 0;
}

.ines4-ai-task-test-results-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .ines4-ai-task-test-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ines4-ai-task-test-result-panel {
  min-width: 0;
}

/* Prompt-Test: Zeilenumbrüche + Umbrechen langer Zeilen (Tailwind-Klassen ggf. nicht im Bundle) */
.ines4-ai-task-test-result-panel [data-test-result-output] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-word;
  /* max-h-72 und leading-relaxed fehlen im Build. Ohne Hoehendeckel laeuft das
     overflow-auto leer und eine lange KI-Antwort schiebt die Karte auf. */
  max-height: 18rem;
  overflow: auto;
  line-height: 1.625;
}

[data-ai-task-test-progress-wrap='1'] {
  margin-top: 10px;
}

.ines4-ai-task-test-progress-track {
  height: 6px;
  width: 100%;
  border-radius: 9999px;
  background: #e0e7ff;
  overflow: hidden;
}

.ines4-ai-task-test-progress-bar {
  height: 100%;
  width: 35%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  animation: ines4-ai-task-progress-slide 1.1s ease-in-out infinite;
}

@keyframes ines4-ai-task-progress-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}

@media (min-width: 900px) {
  .ines4-ai-task-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }

  .ines4-ai-task-detail-col {
    height: 100%;
  }

  .ines4-ai-task-prompt-card {
    min-height: min(70vh, 40rem);
  }

  .ines4-ai-task-prompt-card textarea {
    min-height: 0;
  }
}

@keyframes ines4-ki-spin {
  to {
    transform: rotate(360deg);
  }
}

.ines4-ki-progress-spin {
  display: inline-block;
  animation: ines4-ki-spin 0.85s linear infinite;
}

/* Mailer / Einstellungen: zwei Karten nebeneinander — Basis per Inline-Style im Markup; hier nur Kinder + schmale Viewports */
[data-ines4-two-col-mailer='1'] > * {
  min-width: 0;
}
@media (max-width: 720px) {
  [data-ines4-two-col-mailer='1'] {
    grid-template-columns: 1fr !important;
  }
}

#ines4-main {
  max-width: 1600px;
}

#ines4-app-shell {
  min-height: 100vh;
}

#ines4-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 0 0 16rem;
}

#ines4-sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.25rem;
}

#ines4-sidebar-footer {
  flex: 0 0 auto;
}

#ines4-main-wrap {
  height: 100vh;
  overflow-y: auto;
}

.ines4-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  flex: 1 1 30rem;
  min-width: 0;
}

.ines4-list-toolbar-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.ines4-list-toolbar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  min-width: 0;
  margin-left: auto;
}

.ines4-list-toolbar-group {
  white-space: nowrap;
}

.ines4-sort-select {
  width: 12rem;
  max-width: 100%;
}

.ines4-quickfilter-btn {
  border-radius: 0.5rem;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  transition-property: color, background-color;
  transition-duration: 150ms;
  color: #374151;
  white-space: nowrap;
}
.ines4-quickfilter-btn:hover {
  background: #f9fafb;
}
.ines4-quickfilter-btn--active {
  background: #eff6ff;
  color: #1d4ed8;
}

@media (max-width: 900px) {
  .ines4-list-toolbar-right {
    justify-self: start;
    justify-content: flex-start;
  }
}

/* Host-Div wird von Summernote versteckt; sichtbar ist .note-editor als Nachbar */
.ines4-org-editor {
  min-height: 0;
}

.ines4-org-editor + .note-editor.note-frame {
  display: flex !important;
  flex-direction: column;
  min-height: 0;
  height: 350px !important;
  max-height: 350px !important;
}

.ines4-org-editor + .note-editor .note-toolbar {
  flex: 0 0 auto;
}

.ines4-org-editor + .note-editor .note-editing-area {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ines4-org-editor + .note-editor .note-editable {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
}

/* Summernote WYSIWYG: sichtbare Formatierung für Überschriften, Absätze, Listen */
.note-editor .note-editable {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #0f172a;
}

.note-editor .note-editable p {
  margin: 0 0 0.65em;
}

.note-editor .note-editable p:last-child {
  margin-bottom: 0;
}

.note-editor .note-editable h1,
.note-editor .note-editable h2,
.note-editor .note-editable h3,
.note-editor .note-editable h4,
.note-editor .note-editable h5,
.note-editor .note-editable h6 {
  font-weight: 600;
  line-height: 1.25;
  color: #0f172a;
  margin: 0.85em 0 0.4em;
}

.note-editor .note-editable h1:first-child,
.note-editor .note-editable h2:first-child,
.note-editor .note-editable h3:first-child,
.note-editor .note-editable h4:first-child,
.note-editor .note-editable h5:first-child,
.note-editor .note-editable h6:first-child {
  margin-top: 0;
}

.note-editor .note-editable h1 {
  font-size: 1.5rem;
}

.note-editor .note-editable h2 {
  font-size: 1.35rem;
}

.note-editor .note-editable h3 {
  font-size: 1.2rem;
}

.note-editor .note-editable h4 {
  font-size: 1.1rem;
}

.note-editor .note-editable h5 {
  font-size: 1rem;
}

.note-editor .note-editable h6 {
  font-size: 0.95rem;
}

.note-editor .note-editable ul,
.note-editor .note-editable ol {
  margin: 0.5em 0 0.65em;
  padding-left: 1.75rem;
}

.note-editor .note-editable ul {
  list-style-type: disc;
}

.note-editor .note-editable ol {
  list-style-type: decimal;
}

.note-editor .note-editable li {
  display: list-item;
  margin: 0.2em 0;
  padding-left: 0.15em;
}

.note-editor .note-editable ul ul,
.note-editor .note-editable ol ol,
.note-editor .note-editable ul ol,
.note-editor .note-editable ol ul {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

.note-editor .note-editable ul ul {
  list-style-type: circle;
}

.note-editor .note-editable blockquote {
  margin: 0.65em 0;
  padding-left: 1rem;
  border-left: 3px solid #cbd5e1;
  color: #475569;
}

.note-editor .note-editable a {
  color: #2563eb;
  text-decoration: underline;
}

/* Mail-Vorschau (fertiges HTML, nicht im Editor)
   ------------------------------------------------------------------
   Tailwind setzt im Preflight `ol,ul,menu{list-style:none}`. In einem
   Editorfenster holen die .note-editable-Regeln oben das zurück – eine reine
   Vorschau hat diesen Rahmen aber nicht, dort verlören Aufzählungen ihre
   Punkte und die Einrückung. Im Mailprogramm des Empfängers greift kein
   Reset, die Vorschau sähe also anders aus als die tatsächliche Mail. */
.ines4-mailvorschau ul,
.ines4-mailvorschau ol {
  margin: 0.5em 0 0.65em;
  padding-left: 1.75rem;
}

.ines4-mailvorschau ul { list-style-type: disc; }
.ines4-mailvorschau ol { list-style-type: decimal; }
.ines4-mailvorschau ul ul { list-style-type: circle; }

.ines4-mailvorschau li {
  display: list-item;
  margin: 0.2em 0;
  padding-left: 0.15em;
}

.ines4-mailvorschau ul ul,
.ines4-mailvorschau ol ol,
.ines4-mailvorschau ul ol,
.ines4-mailvorschau ol ul {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

.ines4-mailvorschau blockquote {
  margin: 0.65em 0;
  padding-left: 1rem;
  border-left: 3px solid #cbd5e1;
  color: #475569;
}

/* KI-Aufgaben, Block „Variablen"
   ------------------------------------------------------------------
   Feste Spaltenanteile statt w-full auf der Namensspalte: sonst zieht sich
   das Namensfeld ueber die halbe Karte, waehrend die Wertefelder rechts
   zusammengedrueckt kleben. Die Wertespalte bekommt den Rest, weil dort die
   Optionslisten stehen, die wirklich Platz brauchen. */
.ines4-ai-task-vars-table { table-layout: fixed; }
/* align-top fehlt im Build: ohne das saessen die Felder mittig zur Zeile und
   ruckten weg, sobald darunter der Hinweis zur leeren Optionsliste auftaucht. */
.ines4-ai-task-vars-table td { vertical-align: top; }
.ines4-ai-task-vars-table th:nth-child(1) { width: 12rem; }
.ines4-ai-task-vars-table th:nth-child(2) { width: 10rem; }
.ines4-ai-task-vars-table th:nth-child(3) { width: auto; }
.ines4-ai-task-vars-table th:nth-child(4) { width: 2.5rem; }

/* Waechst mit der Spalte, schrumpft aber nicht unter die Lesbarkeit; die
   Zeile bricht dann lieber um (flex-wrap am Elternteil). */
.ines4-ai-task-var-optionen {
  flex: 1 1 12rem;
  min-width: 8rem;
}

/* „200 bis 500" bleibt zusammen; die Gruppe wandert als Ganzes in die
   naechste Zeile, statt Feld/Wort/Feld einzeln umzubrechen. */
.ines4-ai-task-var-paar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

/* Schmales Fenster: die Wertespalte behaelt Vorrang, Name und Typ geben nach.
   Feste Rem-Breiten wuerden dort die Wertefelder erdruecken. */
@media (max-width: 900px) {
  .ines4-ai-task-vars-table th:nth-child(1) { width: 26%; }
  .ines4-ai-task-vars-table th:nth-child(2) { width: 24%; }
  .ines4-ai-task-vars-table th:nth-child(4) { width: 2rem; }
  .ines4-ai-task-var-optionen { flex-basis: 100%; }
}

/* Erstkontakt-Modal: kompaktere Editorhöhe */
.ines4-first-contact-summernote + .note-editor.note-frame {
  height: 260px !important;
  max-height: 320px !important;
  min-height: 200px !important;
}

/* App-Modal-Overlays: die Tailwind-Arbitrary-Klasse z-[99999] ist im
   kompilierten app.css nicht enthalten, wodurch Modals auf z-index:auto
   zurückfielen und von Sticky-Toolbars (z-index:40) überlagert wurden.
   Hier nachgereicht, damit alle App-Modals zuverlässig oben liegen. */
.z-\[99999\] {
  z-index: 99999 !important;
}

/* Summernote: Dropdowns/Dialoge über App-Modals (z. B. z-[99999]) */
.note-editor .note-dropdown-menu,
.note-modal {
  z-index: 999999 !important;
}

.ines4-sticky-savebar {
  position: sticky;
  top: 0;
  z-index: 40;
  margin-bottom: 1.5rem;
  padding: 0.75rem 0;
  backdrop-filter: blur(2px);
  border-bottom: 1px solid #e5e7eb;
}

.ines4-sticky-filterbar {
  position: sticky;
  top: 0;
  z-index: 35;
}

.ines4-circle-icon-btn {
  border-radius: 9999px !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  padding: 0 !important;
}

.ines4-page-hidden {
  display: none !important;
}

/* Sichtbarkeit unabhängig von Tailwind (fehlende .hidden im Bundle) */
.ines4-hidden {
  display: none !important;
}

/* Stellenkarte: Aktionsleiste eine Zeile, Buttons in Inhaltsbreite, bei Bedarf horizontal scrollen */
[data-job-summary-toolbar="1"] {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
[data-job-summary-toolbar="1"] > * {
  flex-shrink: 0;
}

/* Stellenkarte: Kopfbereich 50 % Text / 50 % Erstellt–Aktualisiert–Geprüft */
[data-job-summary-split="1"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}
@media (min-width: 900px) {
  [data-job-summary-split="1"] {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

/* Organisationskarten (Übersicht & nach Logo-Upload): feste Maximalmaße, unabhängig von Tailwind-JIT */
img[data-organization-logo-img="1"] {
  max-height: 100px !important;
  max-width: 300px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* Aufgaben: 20px Padding für alle Navigationsziele mit data-ines4-path */
[data-module-server-paged="aufgaben"] .ines4-task-card > a[data-ines4-path] {
  display: block;
  box-sizing: border-box;
  padding: 20px;
}

[data-module-server-paged="aufgaben"] .ines4-task-card .border-t a[data-ines4-path] {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: 20px;
}

/* Hinweis: Die früheren Regeln „[...aufgaben] > .mb-4.flex a[data-ines4-path]" und
   „[data-task-id] > .mb-4.flex a[data-ines4-path]" trafen die BREADCRUMB-Zeile
   (sie ist selbst ein direktes .mb-4.flex-Kind) und bliesen den „Dashboard"-Link
   per display:flex + padding:20px auf 60px Höhe auf – dadurch wirkte der Breadcrumb-
   Abstand abweichend zu den anderen Modulen. Entfernt, damit er wie überall ist. */

/* Aufgaben-Karte: „Löschen"-Button in der Fußzeile (nur erledigte Aufgaben).
   Die Fußzeilen-Links bekommen oben padding:20px – der Button braucht einen
   passenden eigenen Abstand, sonst klebt er am Rand. */
[data-module-server-paged="aufgaben"] .ines4-task-card .border-t .ines4-task-card-delete {
  margin: 12px 20px;
  flex-shrink: 0;
}

[data-task-id] .ines4-sticky-savebar a[data-ines4-path] {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: 20px;
}

/* Aufgabe löschen: kontrastreich (Tailwind-Textfarben fehlen ggf. im Bundle) */
button[data-task-delete="1"] {
  color: #fff !important;
  background-color: #dc2626 !important;
  border-color: #b91c1c !important;
}
button[data-task-delete="1"]:hover {
  background-color: #b91c1c !important;
  border-color: #991b1b !important;
  color: #fff !important;
}
button[data-task-delete="1"] svg {
  stroke: #fff !important;
}

/* Stellenmarkt Detail: Archivieren-Button immer mit klarer orangener Outline */
button[data-job-archive-open="1"] {
  color: #c2410c !important;
  background-color: #fff !important;
  border: 1px solid #ea580c !important;
}
button[data-job-archive-open="1"]:hover {
  color: #9a3412 !important;
  background-color: #fff7ed !important;
  border-color: #c2410c !important;
}

/* Modale Dialoge: Button-Farben fest (Tailwind scannt app.js oft nicht → fehlende bg-/text-Utilities) */
button[data-ines4-modal-action="primary"] {
  color: #fff !important;
  background-color: #2563eb !important;
  border-color: #2563eb !important;
}
button[data-ines4-modal-action="primary"]:hover {
  background-color: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #fff !important;
}
button[data-ines4-modal-action="danger"] {
  color: #fff !important;
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
}
button[data-ines4-modal-action="danger"]:hover {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #fff !important;
}
/* Wiederverwendbarer Warn-/Löschen-Button. Die Tailwind-Utilities bg-red-600,
   bg-red-700 sowie die disabled:-Modifier fehlen im gepurgten app.css – ohne
   eigene Regel bliebe weiße Schrift auf weißem Grund unsichtbar. Farben wie beim
   Modal-Button [data-ines4-modal-action="danger"]. */
.ines4-btn-danger {
  color: #fff;
  background-color: #dc2626;
  border-color: #dc2626;
}
.ines4-btn-danger:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}
.ines4-btn-danger:disabled,
.ines4-btn-danger[disabled] {
  opacity: .5;
  cursor: not-allowed;
}
.ines4-btn-danger:disabled:hover,
.ines4-btn-danger[disabled]:hover {
  background-color: #dc2626;
  border-color: #dc2626;
}

/* „Organisation löschen"-Button (Orga-Detailansicht): die Tailwind-Utilities
   bg-red-600 / bg-red-700 sind im gepurgten app.css nicht enthalten. Ohne
   diese Regel bliebe die weiße Beschriftung unsichtbar (kein Hintergrund). */
button[data-org-delete="1"] {
  color: #fff !important;
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
}
button[data-org-delete="1"]:hover {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #fff !important;
}
button[data-ines4-modal-action="secondary"] {
  color: #374151 !important;
  background-color: #fff !important;
  border-color: #d1d5db !important;
}
button[data-ines4-modal-action="secondary"]:hover {
  background-color: #f9fafb !important;
  color: #111827 !important;
}

/* KI-Assistent: indeterminierter Ladebalken beim Abruf der Crawl-URL */
.ines4-crawl-fetch-progress-track {
  height: 8px;
}
.ines4-crawl-fetch-progress-bar {
  width: 38%;
  animation: ines4CrawlFetchProgressSlide 1.1s linear infinite;
}
@keyframes ines4CrawlFetchProgressSlide {
  from {
    transform: translateX(-105%);
  }
  to {
    transform: translateX(320%);
  }
}

/* Aktionslog: Icon-Hintergrund exakt rund (Flex-Item min-height:auto + SVG sonst oval) */
.ines4-audit-log-icon-ring {
  box-sizing: border-box;
  flex: 0 0 auto;
  aspect-ratio: 1;
}
.ines4-audit-log-icon-ring--sm {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  max-width: 1.75rem;
  max-height: 1.75rem;
}
.ines4-audit-log-icon-ring--md {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  max-width: 2rem;
  max-height: 2rem;
}
.ines4-audit-log-icon-ring svg {
  display: block;
}

/* Aktionslog Stream: Abstand links/rechts um den Namen */
.ines4-audit-log-stream-name {
  margin-left: 5px;
  margin-right: 5px;
}

/* Matches Stellenmarkt: Accordion (native <details>) */
details[data-talent-sm-matches-accordion="1"] > summary.ines4-talent-sm-matches-summary {
  list-style: none;
}
details[data-talent-sm-matches-accordion="1"] > summary.ines4-talent-sm-matches-summary::-webkit-details-marker {
  display: none;
}
details[data-talent-sm-matches-accordion="1"] [data-talent-sm-matches-accordion-chevron] {
  transition: transform 0.2s ease;
  transform: rotate(-90deg);
}
details[data-talent-sm-matches-accordion="1"][open] [data-talent-sm-matches-accordion-chevron] {
  transform: rotate(0deg);
}

/* Stellenmarkt Job-Detail: Matches (Talentpool) — gleiches Accordion wie Talent-Detail */
details[data-job-sm-matches-accordion="1"] > summary.ines4-job-sm-matches-summary {
  list-style: none;
}
details[data-job-sm-matches-accordion="1"] > summary.ines4-job-sm-matches-summary::-webkit-details-marker {
  display: none;
}
details[data-job-sm-matches-accordion="1"] [data-job-sm-matches-accordion-chevron] {
  transition: transform 0.2s ease;
  transform: rotate(-90deg);
}
details[data-job-sm-matches-accordion="1"][open] [data-job-sm-matches-accordion-chevron] {
  transform: rotate(0deg);
}

/* Mailer: Orga- + Talentpool-Queue-Vorschau (<details> wie Stellenmarkt-Matches) */
details[data-mailer-org-preview-accordion="1"] > summary.ines4-mailer-org-preview-summary {
  list-style: none;
}
details[data-mailer-org-preview-accordion="1"] > summary.ines4-mailer-org-preview-summary::-webkit-details-marker {
  display: none;
}
details[data-mailer-org-preview-accordion="1"] [data-mailer-org-preview-accordion-chevron] {
  transition: transform 0.2s ease;
  transform: rotate(-90deg);
}
details[data-mailer-org-preview-accordion="1"][open] [data-mailer-org-preview-accordion-chevron] {
  transform: rotate(0deg);
}

details[data-mailer-tp-preview-accordion="1"] > summary.ines4-mailer-tp-preview-summary {
  list-style: none;
}
details[data-mailer-tp-preview-accordion="1"] > summary.ines4-mailer-tp-preview-summary::-webkit-details-marker {
  display: none;
}
details[data-mailer-tp-preview-accordion="1"] [data-mailer-tp-preview-accordion-chevron] {
  transition: transform 0.2s ease;
  transform: rotate(-90deg);
}
details[data-mailer-tp-preview-accordion="1"][open] [data-mailer-tp-preview-accordion-chevron] {
  transform: rotate(0deg);
}

details[data-mailer-org-preview-accordion="1"] table.ines4-mailer-preview-table,
details[data-mailer-tp-preview-accordion="1"] table.ines4-mailer-preview-table {
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
}
details[data-mailer-org-preview-accordion="1"] table.ines4-mailer-preview-table td,
details[data-mailer-tp-preview-accordion="1"] table.ines4-mailer-preview-table td {
  word-break: break-word;
}

/* Talentpool: Versand-Sperr-Hinweis — Hintergrund (#fff2f2) zuverlässig (Tailwind arbitrary fehlt ggf. im Bundle) */
[data-talent-sm-org-lock-hint="1"] {
  background-color: #fff2f2 !important;
  border: 1px solid #ffdede !important;
}

/* Talent-Detail „Matches Stellenmarkt“: Zeile + feste Spaltenbreiten
   (Tailwind arbitrary widths stehen nicht im gebündelten app.css) */
.ines4-talent-sm-match-row {
  box-sizing: border-box;
  display: inline-flex;
  width: max-content;
  max-width: none;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 1.5rem;
  padding-right: 0.25rem;
}

.ines4-talent-sm-match-col--170 {
  box-sizing: border-box;
  width: 170px;
  min-width: 170px;
  max-width: 170px;
  flex-shrink: 0;
}

.ines4-talent-sm-match-col--250 {
  box-sizing: border-box;
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  flex-shrink: 0;
}

.ines4-talent-sm-match-col--150 {
  box-sizing: border-box;
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  flex-shrink: 0;
}

/* Label + Wert/Tags in einer Zeile (flex-wrap bei Bedarf) */
.ines4-talent-sm-match-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.25rem;
}

/* Variante: Label oben, Wert/Tags IMMER in neuer Zeile darunter (nicht erst bei
   Überlänge). Für Hierarchie-/Fachdisziplin-Tags + Zusatzbeschreibung. */
.ines4-talent-sm-match-inline--stack {
  flex-direction: column;
  align-items: flex-start;
  row-gap: 0.25rem;
}

.ines4-talent-sm-match-col--300 {
  box-sizing: border-box;
  width: 300px;
  min-width: 300px;
  max-width: 300px;
  flex-shrink: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.ines4-talent-sm-match-col--actions {
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Talentpool-Detail (Accordion): "Matches für diese Orga" + Crawler-Status stehen
   jetzt unter dem Orga-Namen (col--300); die frühere col--150 entfällt hier. Die
   ersten drei Spalten daher etwas breiter — NUR im Talent-Detail-Accordion, damit
   die Direktanfrage-Ansicht (gleiche Klassen, aber ohne Accordion, weiterhin mit
   col--150) unverändert bleibt. */
[data-talent-sm-matches-accordion] .ines4-talent-sm-match-col--170 {
  width: 210px;
  min-width: 210px;
  max-width: 210px;
}
[data-talent-sm-matches-accordion] .ines4-talent-sm-match-col--250 {
  width: 300px;
  min-width: 300px;
  max-width: 300px;
}
[data-talent-sm-matches-accordion] .ines4-talent-sm-match-col--300 {
  width: 340px;
  min-width: 340px;
  max-width: 340px;
}

/* Disziplinsanalyse: Fachdisziplin | Balance 230px | Detail — Tailwind-Arbitrary aus PHP oft nicht im Bundle */
.ines4-metrics-discipline-row {
  display: grid;
  grid-template-columns: 150px 230px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.ines4-metrics-discipline-row > :first-child {
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.ines4-metrics-balance-col {
  box-sizing: border-box;
  width: 230px;
  max-width: 100%;
}

.ines4-metrics-tag-count {
  display: inline-block;
  box-sizing: border-box;
  width: 20px;
  margin-left: 4px;
  text-align: center;
  flex-shrink: 0;
}

/* Disziplinsanalyse: Hierarchien als waagerechte Spalten (SM / TP + Abweichung je Zelle) */
.ines4-metrics-hierarchy-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  -webkit-overflow-scrolling: touch;
}

.ines4-metrics-hierarchy-cell {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 9rem;
  min-width: 9rem;
}

.ines4-metrics-hierarchy-cell-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.25rem;
  word-break: break-word;
  margin-bottom: 7px;
}

.ines4-metrics-hierarchy-count-rows {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.ines4-metrics-hierarchy-count-row {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex: 1 1 0;
  min-width: 0;
}

.ines4-metrics-hierarchy-arrow,
.ines4-metrics-hierarchy-arrow-spacer {
  box-sizing: border-box;
  width: 14px;
  min-width: 14px;
  height: 14px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .ines4-metrics-discipline-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .ines4-metrics-balance-col {
    width: 100%;
    max-width: 100%;
  }
}

/* Modul-Ladeoverlay (#ines4-main): doppelter Ring-Spinner (Farben an Primary-Blau angepasst) */
.ines4-main-loader-circle {
  position: relative;
  width: 70px;
  height: 70px;
  display: inline-block;
  box-sizing: border-box;
}
.ines4-main-loader-circle::before,
.ines4-main-loader-circle::after {
  content: "";
  display: block;
  position: absolute;
  border-width: 5px;
  border-style: solid;
  border-radius: 50%;
  box-sizing: border-box;
}
.ines4-main-loader-circle::before {
  top: 0;
  left: 0;
  width: 70px;
  height: 70px;
  border-bottom-color: #2563eb;
  border-right-color: #1d4ed8;
  border-top-color: transparent;
  border-left-color: transparent;
  animation: ines4-main-loader-circle-outer 1s linear infinite;
}
.ines4-main-loader-circle::after {
  width: 40px;
  height: 40px;
  border-bottom-color: #60a5fa;
  border-right-color: #3b82f6;
  border-top-color: transparent;
  border-left-color: transparent;
  top: 22%;
  left: 22%;
  animation: ines4-main-loader-circle-inner 0.85s linear infinite;
}
@keyframes ines4-main-loader-circle-inner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes ines4-main-loader-circle-outer {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.ines4-expose-preview-scroll {
  max-height: calc(100vh - 260px);
  overflow: auto;
  padding-right: 6px;
  position: relative;
  z-index: 0;
}

@media (min-width: 1024px) {
  .ines4-expose-layout {
    grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr);
    align-items: start;
  }
  .ines4-expose-layout-left {
    min-width: 300px;
  }
  .ines4-expose-layout-right {
    min-width: 0;
  }
}

.ines4-expose-page-wrap {
  position: relative;
  margin-top: 20px;
}

.ines4-expose-page-badge {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 0 8px 8px;
  display: inline-flex;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #fff;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
}

.ines4-expose-page {
  width: 794px;
  min-height: 1123px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.09);
  position: relative;
}

.ines4-expose-page-inner {
  min-height: 1123px;
  /* top 24mm ≈ 91px, Seiten 14mm ≈ 53px, unten erweitert auf 72px,
     damit die Fußzeile (Logo + Seitenzahl) Platz hat. Identisch zum
     PDF-Print-CSS (.ines4-expose-sheet-inner). */
  padding: 91px 53px 72px;
  background: #fff;
}

/* Fußzeile (BeyondHealth-Logo + Seitenzahl) – auf jeder Seite, identisch zum PDF. */
.ines4-expose-page-footer {
  position: absolute;
  left: 53px;
  right: 53px;
  bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: Arial, sans-serif;
}

.ines4-expose-page-footer-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  color: #002e5d;
}

.ines4-expose-page-footer-brand svg {
  width: 22px;
  height: auto;
  flex-shrink: 0;
}

.ines4-expose-page-footer-brand .expose-brand-text span {
  color: rgb(191, 206, 0);
}

.ines4-expose-page-footer-pages {
  font-size: 11px;
  line-height: 1;
  color: #64748b;
  white-space: nowrap;
}

/* Seitenumbruch-/Fortsetzungs-Indikatoren in der Vorschau */
.ines4-expose-page-break-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 794px;
  margin: 0 auto 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #2563eb;
  background: #eff6ff;
  border: 1px dashed #93c5fd;
  border-radius: 4px;
}

.ines4-expose-page-split-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 794px;
  margin: 0 auto 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  background: #fffbeb;
  border: 1px dashed #fbbf24;
  border-radius: 4px;
}

.ines4-expose-page-number {
  position: absolute;
  right: 53px;
  bottom: 26px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1;
  color: #64748b;
}

.ines4-expose-page--cover .ines4-expose-page-inner--cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ines4-expose-brand-logo {
  position: absolute;
  /* top/right entsprechen dem PDF-@page-Margin (24mm=91px oben, 14mm=53px rechts),
     sodass das Logo genau am Rand des Content-Bereichs sitzt. */
  top: 91px;
  right: 53px;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  color: #002e5d;
  display: flex;
  align-items: center;
  gap: 9px;
}

.ines4-expose-brand-logo .expose-brand-text span {
  color: rgb(191, 206, 0);
}

.ines4-expose-brand-logo svg {
  width: 44px;
  height: auto;
  flex-shrink: 0;
}

.ines4-expose-cover-layout {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}

.ines4-expose-cover-content {
  width: 66.6667%;
  min-width: 0;
}

.ines4-expose-cover-side {
  width: 33.3333%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
}

.ines4-expose-cover-side .ines4-expose-block {
  width: 100%;
  max-width: 210px;
}

.ines4-expose-cover-qr {
  width: 100%;
  max-width: 210px;
}

.ines4-expose-cover-qr > img {
  width: 118px;
  height: 118px;
  display: block;
}

.ines4-expose-cover-qr > p {
  margin: 10px 0 0;
  max-width: 380px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: #334155;
}

.ines4-expose-page--cover .ines4-expose-cover-content img:first-of-type {
  position: absolute;
  top: 22px;
  right: 28px;
  max-width: 140px;
  max-height: 72px;
  object-fit: contain;
}

.ines4-expose-page--cover .ines4-expose-block {
  margin-bottom: 0;
}

.ines4-expose-page-brand {
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 18px;
}

.ines4-expose-page-brand span {
  color: #2563eb;
}

.ines4-expose-page-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.ines4-expose-page-tabs span {
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  background: #fff;
}

.ines4-expose-block {
  position: relative;
  margin: 0 0 20px;
  border: 0 !important;
  border-radius: 0;
  padding: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.ines4-expose-block-title {
  margin: 0 0 16px;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
  color: rgb(191, 206, 0);
}

.ines4-expose-block-content {
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: #1f2937;
  border-bottom: 0 !important;
}

.ines4-expose-block-content *,
.ines4-expose-cover-content * {
  font-family: Arial, sans-serif !important;
}

.ines4-expose-block-content p,
.ines4-expose-block-content li,
.ines4-expose-block-content span,
.ines4-expose-block-content div,
.ines4-expose-block-content strong,
.ines4-expose-block-content em {
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.ines4-expose-block-content h1 {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  color: #0f172a;
}

.ines4-expose-block-content h3 {
  font-size: 15px;
  margin: 0 0 8px;
  font-weight: 700;
  color: rgb(191, 206, 0);
}

.ines4-expose-block-content h2 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  color: #0f172a;
}

.ines4-expose-block-content h4 {
  margin: 12px 0 8px;
  font-size: 15px !important;
  line-height: 1.35;
  font-weight: 700;
  color: #1e293b;
}

.ines4-expose-block-content p {
  margin: 0 0 12px;
}

.ines4-expose-block-content p + p {
  margin-top: 2px;
}

.ines4-expose-block-content ul {
  list-style: disc outside !important;
  margin: 8px 0 12px 0;
  padding-left: 1.5rem;
}

.ines4-expose-block-content ol {
  list-style: decimal outside !important;
  margin: 8px 0 12px 0;
  padding-left: 1.6rem;
}

.ines4-expose-block-content ul ul {
  list-style-type: circle !important;
  margin-top: 4px;
  margin-bottom: 0;
}

.ines4-expose-block-content ol ol {
  list-style-type: lower-alpha !important;
  margin-top: 4px;
  margin-bottom: 0;
}

.ines4-expose-block-content li {
  display: list-item !important;
  margin: 0 0 6px;
  padding-left: 2px;
  line-height: 1.5;
  color: #111827;
}

.ines4-expose-block-content li:last-child {
  margin-bottom: 0;
}

.ines4-expose-block-content li::marker {
  color: #6b7280;
  font-size: 0.9em;
  font-weight: 500;
}

.ines4-expose-block-content li > p {
  margin: 0 0 2px;
}

.ines4-expose-block-edit {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  opacity: 0;
  transition: opacity .15s ease;
}

.ines4-expose-block:hover .ines4-expose-block-edit,
.ines4-expose-block:focus-within .ines4-expose-block-edit {
  opacity: 1;
}

.ines4-expose-block-edit:hover {
  background: #f8fafc;
}

.ines4-expose-block--header {
  margin-bottom: 24px;
}

.ines4-expose-block--employer,
.ines4-expose-block--scope,
.ines4-expose-block--region {
  background: transparent;
}

.ines4-expose-block--employer_meta {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  padding: 0;
}

.ines4-expose-block-content .expose-employer-meta-box {
  font-size: 13px;
  line-height: 1.5;
}

.ines4-expose-block-content .expose-employer-meta-box ul,
.ines4-expose-block-content .expose-employer-meta-box ol {
  list-style: none !important;
  margin: 8px 0 0 !important;
  padding-left: 0 !important;
}

.ines4-expose-block-content .expose-employer-meta-box li {
  margin: 0 0 6px !important;
  padding-left: 0 !important;
}

.ines4-expose-block-content .expose-employer-meta-box li::marker {
  content: "" !important;
}

.ines4-expose-block-content .expose-employer-meta-logo-wrap {
  margin: 0 0 10px;
}

.ines4-expose-block-content .expose-employer-meta-logo {
  display: block;
  width: 100%;
  max-width: none;
  max-height: none;
  height: auto;
  object-fit: cover;
}

.ines4-expose-block-content .expose-employer-meta-title {
  margin: 10px 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.ines4-expose-employer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 18px;
  align-items: start;
}

.ines4-expose-block--scope,
.ines4-expose-block--region,
.ines4-expose-block--contact {
  padding-top: 12px;
}

/* Kontaktkarte: Signatur-Layout */
.ines4-expose-block-content .expose-contact-card {
  padding: 0;
}
.ines4-expose-block-content .expose-contact-headline {
  font-size: 16px;
  margin: 0 0 14px;
  color: rgb(191, 206, 0);
  font-weight: 700;
  line-height: 1.3;
}
.ines4-expose-block-content .expose-contact-sig-table {
  width: 100%;
  border-collapse: collapse;
}
.ines4-expose-block-content .expose-contact-sig-avatar {
  width: 116px;
  vertical-align: middle;
  padding-right: 16px;
}
.ines4-expose-block-content .expose-contact-avatar-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}
.ines4-expose-block-content .expose-contact-avatar-placeholder {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgb(191, 206, 0);
  color: #fff;
  font-weight: 700;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ines4-expose-block-content .expose-contact-sig-info {
  vertical-align: middle;
  padding-right: 20px;
}
.ines4-expose-block-content .expose-contact-name {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 3px;
}
.ines4-expose-block-content .expose-contact-role {
  font-size: 13px;
  color: #475569;
  margin: 0 0 10px;
}
.ines4-expose-block-content .expose-contact-company {
  font-size: 12px;
  font-weight: 700;
  color: rgb(191, 206, 0);
  margin: 0 0 2px;
}
.ines4-expose-block-content .expose-contact-slogan {
  font-size: 11px;
  color: #374151;
  margin: 0;
}
.ines4-expose-block-content .expose-contact-sig-sep {
  width: 1px;
  padding: 0 20px;
  vertical-align: middle;
}
.ines4-expose-block-content .expose-contact-sep-line {
  width: 1px;
  background: rgb(191, 206, 0);
  height: 90px;
}
.ines4-expose-block-content .expose-contact-sig-rows {
  vertical-align: middle;
}
.ines4-expose-block-content .expose-contact-sig-rows td {
  vertical-align: middle;
  font-size: 12px;
  color: #1f2937;
  padding-bottom: 2px;
}
.ines4-expose-block-content .expose-contact-sig-rows a {
  color: #1f2937;
  text-decoration: none;
}
.ines4-expose-block-content .expose-contact-sig-rows img {
  display: block;
  width: 13px;
}
.ines4-expose-block-content hr {
  display: none;
}

/* Seitenumbruch-Indikator in der Vorschau */
.ines4-expose-block--page-break {
  position: relative;
  margin-top: 14px;
}
.ines4-expose-block--page-break::before {
  content: 'Neue Seite';
  display: flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  font-size: 10px;
  font-weight: 600;
  color: #2563eb;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-top: 2px dashed #93c5fd;
  padding-top: 3px;
}

.ines4-expose-measure-host {
  position: absolute;
  left: -99999px;
  top: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Organisation Ansprechpartner-Filter: horizontale Abstände + Reset bündig zur Select-Zeile.
   (Utility-Klassen nur in PHP-Partials → oft nicht im Tailwind-Bundle.) */
.ines4-org-ap-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  min-width: 0;
  column-gap: 0.375rem;
  row-gap: 0.75rem;
}

.ines4-org-ap-filter-fields {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
  column-gap: 0.8rem;
  row-gap: 0.75rem;
}

.ines4-org-ap-filter-search-col {
  flex: 0 0 auto;
  width: 300px;
  max-width: 100%;
}

.ines4-org-ap-filter-search-col .ines4-org-ap-filter-search-input {
  width: 100%;
  max-width: 300px;
}

.ines4-org-ap-filter-col {
  min-width: 11rem;
  flex: 1 1 auto;
  max-width: 28rem;
}

.ines4-org-ap-filter-reset-wrap {
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: calc(0.375rem + 0.9rem);
  padding-left: 10px;
}

/* ===== Generisches Details-Akkordeon (details-chevron) ===== */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
details .details-chevron {
  transition: transform 0.2s ease;
  transform: rotate(-90deg);
}
details[open] .details-chevron {
  transform: rotate(0deg);
}

/* ===== Exposé Standortkarte ===== */
.expose-map-block {
  margin: 0;
}

.expose-map-leaf {
  width: 100%;
  height: 240px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

.expose-map-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.expose-map-caption {
  font-size: 11px;
  color: #64748b;
  margin: 4px 0 0;
  text-align: center;
}

/* Leaflet z-index-Fix innerhalb des Exposé-Previews */
.ines4-expose-page-inner .leaflet-pane,
.ines4-expose-page-inner .leaflet-top,
.ines4-expose-page-inner .leaflet-bottom {
  z-index: 400;
}

/* Favorisieren-Button: aktiver Zustand (amber-400 nicht im Tailwind-Build) */
.ines4-btn-favorited {
  background-color: #fbbf24;
  border-color: #fbbf24;
  color: #ffffff;
}
.ines4-btn-favorited:hover {
  background-color: #f59e0b;
  border-color: #f59e0b;
}
.ines4-btn-favorited .lucide-star {
  fill: #ffffff;
  color: #ffffff;
}

/* ===========================
   CV-PDF-Editor (Talentpool)
   =========================== */

.ines4-cv-pdf-preview-scroll {
  max-height: calc(100vh - 260px);
  overflow: auto;
  padding-right: 6px;
  position: relative;
  z-index: 0;
}

@media (min-width: 1024px) {
  .ines4-cv-pdf-layout {
    grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr);
    align-items: start;
  }
  .ines4-cv-pdf-layout-left {
    min-width: 300px;
  }
  .ines4-cv-pdf-layout-right {
    min-width: 0;
  }
}

.ines4-cv-pdf-page-wrap {
  position: relative;
  margin-top: 20px;
}
.ines4-cv-pdf-page-wrap + .ines4-cv-pdf-page-wrap {
  margin-top: 24px;
}

.ines4-cv-pdf-page {
  width: 794px;
  min-height: 1123px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.09);
  position: relative;
}

/* PDF @page margin: 18mm top (68px), 14mm sides (53px), 12mm bottom (45px) */
.ines4-cv-pdf-page-inner {
  min-height: 1123px;
  padding: 68px 53px 45px;
  background: #fff;
}

.ines4-cv-pdf-page-number {
  position: absolute;
  right: 53px;
  bottom: 26px;
  font-family: Arial, sans-serif;
  font-size: 10px;
  color: #64748b;
}

/* Multi-line Fußzeile auf jeder Seite (links: CV für …, BeyondHealth-Adresse;
   rechts: Page-Counter). 1:1 zum PDF-@page-Footer. */
.ines4-cv-pdf-page-footer {
  position: absolute;
  left: 53px;
  right: 53px;
  bottom: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-family: Arial, sans-serif;
  color: #64748b;
}
.ines4-cv-pdf-page-footer-text {
  display: flex;
  flex-direction: column;
  font-size: 9px;
  line-height: 1.35;
}
.ines4-cv-pdf-page-footer-pages {
  font-size: 9px;
  line-height: 1.35;
}

/* Seitenumbruch-Indikator in der Vorschau (über der erzwungenen Seite) */
.ines4-cv-pdf-page-break-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 794px;
  margin: 0 auto 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #2563eb;
  background: #eff6ff;
  border: 1px dashed #93c5fd;
  border-radius: 4px;
}

/* Fortsetzungs-Indikator (allowSplit – Sektion läuft auf nächste Seite über) */
.ines4-cv-pdf-page-split-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 794px;
  margin: 0 auto 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  background: #fffbeb;
  border: 1px dashed #fbbf24;
  border-radius: 4px;
}

.ines4-cv-pdf-block {
  margin: 0 0 38px;
  padding: 0;
  border: 1px dashed transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ines4-cv-pdf-block:hover {
  border-color: rgb(191, 206, 0);
  background: rgba(191, 206, 0, 0.05);
}
.ines4-cv-pdf-block--disabled {
  opacity: 0.45;
}

.ines4-cv-pdf-block-title {
  font-size: 18px;
  line-height: 1.2;
  margin: 0 0 15px;
  color: rgb(191, 206, 0);
  font-weight: 700;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 8px;
}
.ines4-cv-pdf-block--header .ines4-cv-pdf-block-title,
.ines4-cv-pdf-block--cover .ines4-cv-pdf-block-title {
  display: none;
}

/* Deckblatt: vertikal zentrierter Inhalt auf eigener Vorschau-Seite (analog Exposé). */
.ines4-cv-pdf-page-inner--cover {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ines4-cv-pdf-page-inner--cover .ines4-cv-pdf-block {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: default;
}
.ines4-cv-pdf-page-inner--cover .ines4-cv-pdf-block:hover {
  background: transparent;
  border-color: transparent;
}
.ines4-cv-pdf-block-content .cv-cover {
  text-align: left;
}
.ines4-cv-pdf-block-content .cv-cover-photo {
  width: 181px;
  height: 181px;
  margin: 0 0 23px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgb(191, 206, 0);
  background: #f8fafc;
}
.ines4-cv-pdf-block-content .cv-cover-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.ines4-cv-pdf-block-content .cv-cover-ref {
  font-size: 11px;
  color: #64748b;
  margin: 0 0 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.ines4-cv-pdf-block-content .cv-cover .cv-name {
  display: block;
  font-size: 32px;
  line-height: 1.1;
  margin: 0 0 15px;
  color: #0f172a;
  font-weight: 700;
  border-bottom: 2px solid rgb(191, 206, 0);
  padding-bottom: 15px;
}
.ines4-cv-pdf-block-content .cv-cover .cv-subtitle {
  font-size: 14px;
  line-height: 1.4;
  color: rgb(191, 206, 0);
  margin: 0 0 30px;
  font-weight: 600;
}
.ines4-cv-pdf-block-content .cv-cover table.cv-keyvalue {
  width: auto;
  margin: 0;
  text-align: left;
}

.ines4-cv-pdf-block-content {
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1.55;
  color: #1f2937;
}
.ines4-cv-pdf-block-content *,
.ines4-cv-pdf-block-content {
  font-family: Arial, sans-serif;
}
.ines4-cv-pdf-block-content p {
  margin: 0 0 11px;
}
.ines4-cv-pdf-block-content h1.cv-name {
  font-size: 32px;
  line-height: 1.1;
  margin: 0 0 4px;
  color: #0f172a;
  font-weight: 700;
}
.ines4-cv-pdf-block-content .cv-subtitle {
  font-size: 14px;
  line-height: 1.4;
  color: rgb(191, 206, 0);
  margin: 0;
  font-weight: 600;
}
.ines4-cv-pdf-block-content .cv-header {
  border-bottom: 2px solid rgb(191, 206, 0);
  padding-bottom: 12px;
}
.ines4-cv-pdf-block-content table.cv-keyvalue {
  width: 100%;
  border-collapse: collapse;
}
.ines4-cv-pdf-block-content table.cv-keyvalue tr {
  border-bottom: 1px solid #f1f5f9;
}
.ines4-cv-pdf-block-content table.cv-keyvalue th {
  text-align: left;
  width: 38%;
  font-weight: 700;
  color: #475569;
  padding: 8px 11px 8px 0;
  font-size: 11px;
  vertical-align: top;
}
.ines4-cv-pdf-block-content table.cv-keyvalue td {
  padding: 8px 0;
  color: #0f172a;
  font-size: 12px;
  vertical-align: top;
}
.ines4-cv-pdf-block-content .cv-entry {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin: 0 0 15px;
}
.ines4-cv-pdf-block-content .cv-entry-period {
  display: table-cell;
  width: 30%;
  vertical-align: top;
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
  padding-right: 15px;
}
.ines4-cv-pdf-block-content .cv-entry-body {
  display: table-cell;
  vertical-align: top;
}
.ines4-cv-pdf-block-content .cv-entry-title {
  font-size: 13px;
  color: #0f172a;
  font-weight: 700;
  margin: 0 0 4px;
}
.ines4-cv-pdf-block-content .cv-entry-meta {
  font-size: 11px;
  color: #475569;
  margin: 0 0 8px;
}
.ines4-cv-pdf-block-content h4.cv-subhead {
  font-size: 13px;
  color: #0f172a;
  font-weight: 700;
  margin: 19px 0 8px;
}
.ines4-cv-pdf-block-content ul.cv-list {
  list-style: disc outside;
  padding-left: 19px;
  margin: 0 0 11px;
}
.ines4-cv-pdf-block-content ul.cv-list li {
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.55;
}
.ines4-cv-pdf-block-content ul.cv-list-inline {
  padding-left: 0;
  list-style: none;
  margin: 0;
}
.ines4-cv-pdf-block-content ul.cv-list-inline li {
  display: inline-block;
  background: #f1f5f9;
  color: #0f172a;
  padding: 4px 11px;
  margin: 0 8px 8px 0;
  border-radius: 3px;
  font-size: 11px;
}
.ines4-cv-pdf-block-content .cv-list-date {
  color: #64748b;
  font-size: 11px;
  font-weight: 400;
}
.ines4-cv-pdf-block-content .cv-empty {
  font-style: italic;
  color: #94a3b8;
  font-size: 11px;
  margin: 0;
}

.ines4-cv-pdf-section-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  cursor: grab;
}
.ines4-cv-pdf-section-card.is-disabled {
  opacity: 0.5;
}
.ines4-cv-pdf-section-card .ines4-cv-pdf-section-handle {
  color: #94a3b8;
  cursor: grab;
}
.ines4-cv-pdf-section-card .ines4-cv-pdf-section-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}
.ines4-cv-pdf-section-card button {
  background: none;
  border: 0;
  padding: 4px;
  color: #475569;
  cursor: pointer;
}
.ines4-cv-pdf-section-card button:hover {
  color: #0f172a;
}

/* Systemaufgaben: Abstand unter Cronjob-Block (Tailwind-Arbitrary mb-[20px] nicht im Build) */
[data-cron-block="1"] {
  margin-bottom: 20px;
}

[data-cron-block="1"] > div {
  padding-left: 20px;
  padding-right: 20px;
}

/* Dashboard: „Offene Aufgaben", „Direktmailer", „Auslastung Mail-Accounts",
   „Online Benutzer" und „Aktionslog Stream" auf max. 450px Höhe begrenzen.
   Überschrift (+ „Mehr anzeigen"-Button) bleiben sichtbar, nur der markierte
   Listenbereich scrollt per Overflow. Gilt gezielt nur für diese Karten via
   data-Attribut (nicht global für alle Dashboard-Karten).
   Da die Karten Grid-Elemente sind, dehnen sie sich auf die Zeilenhöhe und
   werden bei 450px gekappt — nebeneinanderliegende Karten sind dadurch gleich
   hoch, statt je nach Inhalt unterschiedlich. */
[data-dashboard-capped-card="1"] {
  max-height: 450px;
  min-height: 0;
  align-self: stretch;
}

[data-dashboard-capped-card="1"] [data-dashboard-capped-scroll="1"] {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* Aktionslog „Mehr anzeigen"-Modal (openDashboardAuditLogModal).
   Eigenständiges, vom vorkompilierten Tailwind unabhängiges Layout (responsive
   Grid-/Flex-Varianten werden im JIT-Build nicht zuverlässig erzeugt). Scoped
   über die Wrapper-Klasse .ines4-audit-modal. Modal-Verhalten (Schließen nur
   per X/ESC, kein Backdrop-Close, Load-More) bleibt unverändert. */
.ines4-audit-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 56rem;
  max-height: 85vh;
  min-height: 0;
  border-radius: 1.25rem;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35), 0 8px 24px rgba(15, 23, 42, 0.18);
}
/* Toggling läuft weiterhin über die .hidden-Klasse aus dem JS – hier scoped
   absichern, damit es unabhängig von der Tailwind-Ladereihenfolge greift. */
.ines4-audit-modal .hidden {
  display: none !important;
}

.ines4-audit-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
}
.ines4-audit-modal__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: #0f172a;
}
.ines4-audit-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
}
.ines4-audit-modal__close:hover {
  background: #f1f5f9;
}

.ines4-audit-modal__filters {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.ines4-audit-modal__filter-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}
.ines4-audit-modal__field {
  display: flex;
  flex-direction: column;
  flex: 1 1 150px;
  min-width: 130px;
}
.ines4-audit-modal__label {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #4b5563;
}
.ines4-audit-modal__control {
  height: 2.25rem;
  width: 100%;
  padding: 0 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background: #fff;
  font-size: 0.875rem;
  color: #111827;
}
.ines4-audit-modal__control:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 1px #2563eb;
}
.ines4-audit-modal__filter-actions {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  flex: 1 1 220px;
  min-width: 200px;
}
.ines4-audit-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  padding: 0 0.875rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.ines4-audit-modal__btn--primary {
  flex: 1 1 auto;
  background: #2563eb;
  color: #fff;
}
.ines4-audit-modal__btn--primary:hover {
  background: #1d4ed8;
}
.ines4-audit-modal__btn--ghost {
  background: #fff;
  color: #374151;
  border-color: #d1d5db;
}
.ines4-audit-modal__btn--ghost:hover {
  background: #f9fafb;
}

.ines4-audit-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 1rem 1.25rem;
}
.ines4-audit-modal__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.ines4-audit-modal__msg {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.875rem;
}

.ines4-audit-modal__footer {
  padding: 0.875rem 1.25rem;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}
.ines4-audit-modal__loadmore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  background: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
.ines4-audit-modal__loadmore:hover {
  background: #f9fafb;
}
.ines4-audit-modal__loadmore:disabled {
  opacity: 0.6;
  cursor: default;
}

@media (max-width: 640px) {
  .ines4-audit-modal__field,
  .ines4-audit-modal__filter-actions {
    flex: 1 1 100%;
    min-width: 0;
  }
}


/* ============================================================
   Direktmailer
   - Start-Button: feinerer Grünton inkl. Hover (der Tailwind-Build
     enthält weder bg-emerald-* noch bg-green-700 als Basisklasse).
   - Modus-Optionen: Pointer-Cursor + sanfter Hover.
   ============================================================ */
.dm-btn-start { background-color: #059669; }
.dm-btn-start:hover { background-color: #047857; }
.dm-mode-option { cursor: pointer; }
.dm-mode-option:hover { border-color: #93c5fd; background-color: #f8fafc; }

/* Direktmailer Start-Button: an die Button-Chrome der App angeglichen (border + disabled). */
.dm-btn-start { border-color: #059669; }
.dm-btn-start:hover { border-color: #047857; }
.dm-btn-start:disabled { opacity: .5; cursor: not-allowed; }
.dm-btn-start:disabled:hover { background-color: #059669; border-color: #059669; }

/* E-Mail-Vorschauen (compose_mail_html: inline Arial + color:#111 — Paraphrase-
   Beispiele, Mailtesting, Logfile): Der Tailwind-Reset entfernt p-Margins und
   Link-Farben, Mail-Clients zeigen beides. Hier fürs App-Rendering nachbilden. */
[style*="font-family:Arial"][style*="color:#111"] p {
  margin: 0 0 12px;
}
[style*="font-family:Arial"][style*="color:#111"] p:last-child {
  margin-bottom: 0;
}
[style*="font-family:Arial"][style*="color:#111"] a {
  color: #2563eb;
  text-decoration: underline;
}

/* Direktmailer Paraphrase-Beispiele: determinierter Fortschrittsbalken */
.dm-examples-progress-track {
  height: 8px;
  width: 100%;
  border-radius: 9999px;
  background: #e5e7eb;
  overflow: hidden;
}
.dm-examples-progress-bar {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  transition: width 0.3s ease;
  animation: dm-examples-progress-pulse 1.2s ease-in-out infinite;
}
@keyframes dm-examples-progress-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Direktmailer: Lade-Spinner (Textmaster/Beispiele) */
.dm-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid #cbd5e1;
  border-top-color: #2563eb;
  border-radius: 9999px;
  animation: dm-spin 0.7s linear infinite;
  vertical-align: -2px;
}
.dm-spinner-lg { width: 34px; height: 34px; border-width: 3px; }
@keyframes dm-spin { to { transform: rotate(360deg); } }

/* Sidebar-Navigation: Kategorie-Zwischenüberschriften (z. B. „Verwaltung").
   Eigene Klasse statt Tailwind-Arbitrary-Werten (text-[10px]), da das CSS
   vorkompiliert ist und solche Klassen dort nicht existieren. */
.ines4-nav-cat {
  padding: 10px 16px 2px;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af; /* gray-400 */
  user-select: none;
}

/* Navigations-Indikator: kleiner roter Kreis mit Anzahl rechts im Nav-Punkt.
   Eigene Klasse statt Tailwind-Utilities, da diese im gepurgten Build fehlen. */
.ines4-nav-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 9999px;
  background-color: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}

/* ============================================================
   App-Modal (Changelog / Toolbar) – robust gegen Tailwind-Purge.
   Der vorkompilierte Build enthält u. a. NICHT: inset-x-4, top-10,
   bottom-10, max-w-lg, rounded-2xl, shadow-2xl, grid-cols-1,
   sm:grid-cols-2, px-5, p-0.5, py-1.5, hover:bg-*. Daher eigene Klassen.
   ============================================================ */
.ines4-modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.ines4-modal.hidden { display: none; }
.ines4-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); }
.ines4-modal__card {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: 100%; max-width: 34rem; max-height: calc(100vh - 2rem);
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 55px rgba(15, 23, 42, .30), 0 4px 12px rgba(15, 23, 42, .12);
}
.ines4-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid #e5e7eb; flex-shrink: 0;
}
.ines4-modal__body { flex: 1 1 auto; overflow-y: auto; padding: 1.25rem; }
.ines4-modal__foot {
  display: flex; align-items: center; justify-content: flex-end; gap: .75rem;
  padding: 1rem 1.25rem; border-top: 1px solid #e5e7eb; flex-shrink: 0;
}
.ines4-modal__x {
  display: inline-flex; padding: .5rem; border-radius: 6px;
  color: #6b7280; background: transparent; border: 0; cursor: pointer;
}
.ines4-modal__x:hover { background: #f3f4f6; color: #111827; }
.ines4-modal__tabs {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px;
  border-radius: 8px; background: #f3f4f6; margin-bottom: 1rem;
}
.ines4-modal__tab {
  padding: .35rem .8rem; border-radius: 6px; font-size: .8rem; font-weight: 500;
  border: 0; background: transparent; color: #6b7280; cursor: pointer;
}
.ines4-modal__row { display: flex; flex-wrap: wrap; gap: .75rem; }
.ines4-modal__row > * { flex: 1 1 12rem; min-width: 0; }
.ines4-modal__btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; border-radius: 8px; font-size: .875rem; font-weight: 500;
  cursor: pointer; border: 1px solid transparent;
}
.ines4-modal__btn--secondary { border-color: #d1d5db; background: #fff; color: #374151; }
.ines4-modal__btn--secondary:hover { background: #f9fafb; }
.ines4-modal__btn--primary { background: #2563eb; color: #fff; }
.ines4-modal__btn--primary:hover { background: #1d4ed8; }

/* ============================================================
   Toolbar-Update-Banner (app-übergreifend). Eigene Klassen statt
   Tailwind (amber-Töne/hover teils weg-gepurged) + Abstände.
   ============================================================ */
.ines4-update-banner {
  position: sticky; top: 0; z-index: 30;
  padding: 14px 20px 2px;                 /* Abstand oben + seitlich */
}
.ines4-update-banner.hidden { display: none; }
.ines4-update-banner__card {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  background: linear-gradient(180deg, #fffdf5 0%, #fffbeb 100%); /* amber-50 */
  border: 1px solid #fcd34d;              /* amber-300 */
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(217, 119, 6, .14), 0 1px 2px rgba(0,0,0,.04);
  color: #92400e;                         /* amber-800 */
  font-size: .875rem; line-height: 1.35;
}
.ines4-update-banner__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: #fde68a;                     /* amber-200 */
  color: #b45309;                         /* amber-700 */
}
.ines4-update-banner__text {
  min-width: 0; flex: 1 1 auto;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 8px;
}
.ines4-update-banner__text strong { font-weight: 600; color: #78350f; } /* amber-900 */
.ines4-update-banner__meta { color: #b45309; font-size: .8125rem; }
.ines4-update-banner__cta {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 8px;
  background: #d97706;                     /* amber-600 */
  color: #fff; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease;
}
.ines4-update-banner__cta:hover { background: #b45309; }
.ines4-update-banner__x {
  flex-shrink: 0; display: inline-flex; padding: 6px; border-radius: 7px;
  color: #b45309; background: transparent; border: 0; cursor: pointer;
  transition: background-color .15s ease;
}
.ines4-update-banner__x:hover { background: #fde68a; color: #78350f; }

/* ==========================================================
   Tailwind-Abstandsklassen, die im vorkompilierten Build
   fehlen (gepurgt). Ohne diese Regeln greifen u. a. p-8/p-10,
   gap-x-*, mb-1.5 und space-y-* im Markup nicht.
   ========================================================== */
.gap-0\.5 { gap: 0.125rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-x-1 { column-gap: 0.25rem; }
.gap-x-2 { column-gap: 0.5rem; }
.gap-x-3 { column-gap: 0.75rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-y-0\.5 { row-gap: 0.125rem; }
.gap-y-1 { row-gap: 0.25rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.mt-0 { margin-top: 0px; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-5 { margin-top: 1.25rem; }
.p-10 { padding: 2.5rem; }
.p-1\.5 { padding: 0.375rem; }
.p-2\.5 { padding: 0.625rem; }
.p-8 { padding: 2rem; }
.pb-12 { padding-bottom: 3rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-8 { padding-bottom: 2rem; }
.pl-1 { padding-left: 0.25rem; }
.pr-1 { padding-right: 0.25rem; }
.pr-10 { padding-right: 2.5rem; }
.pr-3 { padding-right: 0.75rem; }
.pr-4 { padding-right: 1rem; }
.pr-9 { padding-right: 2.25rem; }
.pt-1\.5 { padding-top: 0.375rem; }
.pt-5 { padding-top: 1.25rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.125rem; }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.375rem; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }

/* Feste Feldbreiten. Ohne sie fallen number-Eingaben auf die Browser-Vorgabe
   von rund 176 px zurueck – im KI-Variablenblock und im Urlaubs-Modal sassen
   dadurch fingerbreite Kaesten fuer einstellige Werte. */
.w-20 { width: 5rem; }
.w-24 { width: 6rem; }

/* Laufweite fuer die Grossbuchstaben-Beschriftungen (15 Dateien nutzen sie). */
.tracking-wide { letter-spacing: 0.025em; }

/* ============================================================
   Direktmailer-Detail: Karten „Anfragen" und „Klicks" nebeneinander
   sowie das zugehörige „Mehr anzeigen"-Modal.

   Der vorkompilierte Tailwind-Build enthält u. a. NICHT: grid-cols-1,
   lg:grid-cols-2, max-w-4xl, inset-x-4, top-10, bottom-10, shadow-2xl,
   z-[70], gap-1.5, py-0.5, py-1.5, bg-indigo-50, text-indigo-700.
   Deshalb hier eigene Klassen (gleiches Vorgehen wie beim App-Modal weiter oben).
   ============================================================ */

/* Zwei gleich breite Karten (je 50 %), ab lg nebeneinander. Die explizite
   .hidden-Regel muss bleiben: overrides.css lädt nach app.css und würde
   Tailwinds display:none sonst überschreiben. */
[data-direktmailer-listen-panel="1"] {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px) {
  [data-direktmailer-listen-panel="1"] { grid-template-columns: 1fr 1fr; }
}
[data-direktmailer-listen-panel="1"].hidden { display: none; }
/* Grid-Elemente haben min-width:auto und können sonst nicht unter ihre
   Inhaltsbreite schrumpfen — die Karte würde die Seite breiter machen, statt
   dass der .overflow-x-auto-Wrapper in der Karte scrollt. */
[data-direktmailer-listen-panel="1"] > * { min-width: 0; }

/* Zähler-Badge in der Kartenüberschrift */
.dm-count-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  background: #eef2ff;                  /* indigo-50 */
  color: #4338ca;                       /* indigo-700 */
  padding: 2px 8px;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.1;
}

/* „Mehr anzeigen" in der Kartenüberschrift */
.dm-card-more {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  height: 2rem;
  padding: 0 .75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  font-size: .75rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.dm-card-more:hover { background: #f9fafb; }
.dm-card-more.hidden { display: none; }

/* Breite Variante der Modal-Karte für Listen mit vielen Zeilen
   (Basis: .ines4-modal__card, max-width dort 34rem). */
.ines4-modal__card--wide { max-width: 56rem; }

/* Tabelle im Listen-Modal und in den Karten */
.dm-list-table { width: 100%; border-collapse: collapse; text-align: left; }
.dm-list-table thead th {
  padding: .375rem .5rem .375rem 0;
  border-bottom: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: .75rem;
  font-weight: 500;
}
.dm-list-table tbody td {
  padding: .375rem .5rem .375rem 0;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: top;
}
.dm-list-table tbody tr:last-child td { border-bottom: 0; }
.dm-list-modal-table thead th,
.dm-list-modal-table tbody td { padding: .5rem .75rem .5rem 0; font-size: .875rem; }
.dm-list-modal-table thead th { text-transform: uppercase; letter-spacing: .03em; font-size: .75rem; }

/* Zielspalte: lange URLs kürzen statt die Tabelle zu sprengen. Ohne festes
   Tabellenlayout schiebt eine einzige lange URL die Tabelle über die Karten-
   bzw. Modalbreite hinaus (horizontaler Scrollbalken). */
.dm-list-table { table-layout: fixed; }
.dm-list-table th,
.dm-list-table td { overflow-wrap: anywhere; }
.dm-list-target {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Ziel-Link + „×N"-Zähler nebeneinander: der Link schrumpft (Ellipsis), das
   Badge behält seine Breite. Ohne Flex würde der inline-block-Link die volle
   Zellbreite belegen und das Badge in die nächste Zeile drücken.
   align-items:center statt baseline — der Link hat overflow:hidden, seine
   Baseline wäre die Unterkante des Kastens und das Badge säße zu tief. */
.dm-list-target-wrap { display: flex; align-items: center; gap: .375rem; min-width: 0; }
.dm-list-target-wrap .dm-list-target { flex: 1 1 auto; min-width: 0; }
.dm-click-count {
  flex: 0 0 auto;
  border-radius: 9999px;
  background: #f3f4f6;                  /* gray-100 */
  color: #4b5563;                       /* gray-600 */
  padding: 1px 6px;
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  cursor: default;
}

/* Fuß des Listen-Modals: Info links, „Mehr laden" rechts (Basis richtet rechtsbündig aus). */
.ines4-modal__foot--between { justify-content: space-between; }

/* .ines4-modal__btn setzt display:inline-flex und steht in overrides.css nach
   Tailwinds .hidden — ohne diese Regel ließe sich ein Button nicht ausblenden. */
.ines4-modal__btn.hidden { display: none; }

/* Platzhalter-/Fehlerzeile in den Listen (Laden…, Keine Einträge, Fehler) */
.dm-list-msg { padding: .75rem 0; font-size: .875rem; }

/* Spaltenbreiten. Die Karte zeigt als Vorschau nur drei Spalten (sonst quetschen
   fünf Spalten auf halber Seitenbreite Namen und E-Mails mitten im Wort um);
   die vollständige Tabelle steht im Modal. */
.dm-list-card-table { min-width: 21rem; }   /* darunter überlappen Datum und Ziel;
                                               der .overflow-x-auto-Wrapper scrollt dann */
.dm-list-card-table th:nth-child(1) { width: 42%; }
.dm-list-card-table th:nth-child(2) { width: 26%; }
.dm-list-card-table th:nth-child(3) { width: 32%; }

.dm-list-modal-table th:nth-child(1) { width: 28%; }
.dm-list-modal-table th:nth-child(2) { width: 22%; }
.dm-list-modal-table th:nth-child(3) { width: 12%; }
.dm-list-modal-table th:nth-child(4) { width: 18%; }
.dm-list-modal-table th:nth-child(5) { width: 20%; }