/* ============================================================
   Contenttool – geschützte Bereiche (Adminbereich & Webapp)
   Alpasana GmbH

   Bewusst getrennt vom öffentlichen .alp-*-Designsystem, aber in
   denselben Markenfarben UND denselben Schriften: Rajdhani für Titel
   und Beschriftungen, Rubik für den Fliesstext.

   Die Schriften kommen mit display=swap. Der Text steht damit sofort in
   der Systemschrift und springt erst beim Eintreffen um - der früher
   genannte Vorteil ("ohne externe Anfragen sofort da sein") bleibt also
   erhalten, ohne dass der Arbeitsbereich fremd aussieht.

   Der Installer lädt bewusst KEINE Webfonts: er läuft einmalig und
   teils auf Servern ohne Internetzugang. Dort greift die Ersatzschrift.

   Deckt ab: Panel-Shell, Login-Seite und Installer.
   ============================================================ */

:root {
  /* Weisser Text auf #269CD9 erreicht nur 3.07:1. Gefüllte Flächen mit
     weisser Schrift verwenden daher --p-blue-dark (4.61:1), im Hover
     --p-blue-deep (6.15:1). --p-blue bleibt für Rahmen und Fokusringe. */
  --p-blue:       #269CD9;
  --p-blue-dark:  #1C7CB0;
  --p-blue-deep:  #17688F;
  --p-dark:       #232434;
  --p-dark-2:     #2C2D40;
  --p-heading:    #232434;
  --p-text:       #4A4E57;
  /* 4.94:1 auf Weiss – erfüllt WCAG AA auch für kleine Hinweistexte. */
  --p-muted:      #6E7077;
  --p-bg:         #F5F7FA;
  --p-border:     #E3E7EE;
  --p-white:      #FFFFFF;
  --p-error:      #B00020;
  --p-error-bg:   #FDF2F3;
  --p-ok:         #1E7A4B;
  --p-ok-bg:      #F1F9F4;
  --p-warn:       #96590A;
  --p-warn-bg:    #FFF7E8;
  --p-radius:     10px;
  --p-radius-sm:  6px;
  --p-shadow:     0 2px 10px rgba(35, 36, 52, .06);
  /* Markenschriften wie im öffentlichen Designsystem. Die Ersatzschriften
     dahinter greifen, solange die Webfonts nicht da sind - oder im Installer,
     der bewusst keine lädt. */
  --p-font-head: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --p-font: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --p-mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  --p-sidebar: 232px;
}

*, *::before, *::after { box-sizing: border-box; }

body.panel, body.panel-plain {
  margin: 0; font-family: var(--p-font); font-size: 15px; line-height: 1.6;
  color: var(--p-text); background: var(--p-bg);
  -webkit-text-size-adjust: 100%;
}

/* Titel in Rajdhani. Rajdhani läuft schmaler als die Ersatzschrift, daher
   etwas mehr Laufweite - sonst wirken die Zeilen gedrängt. Kein durchgängiges
   Grossgeschrieben: auf der öffentlichen Seite trägt das, im Arbeitsbereich
   erschwert es das Ueberfliegen langer Listen. */
h1, h2, h3 {
  font-family: var(--p-font-head); font-weight: 600; letter-spacing: .005em;
  color: var(--p-heading); line-height: 1.25; margin: 0 0 12px;
}
h1 { font-size: 1.5rem; font-weight: 700; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.04rem; margin-top: 24px; }
p { margin: 0 0 12px; }
a { color: var(--p-blue-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--p-blue); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--p-muted); }
.lead { font-size: 1.05rem; color: var(--p-heading); margin-bottom: 20px; }
.ok-text { color: var(--p-ok); font-weight: 600; }
.opt { font-weight: 400; color: var(--p-muted); }
.slug { font-size: .8rem; margin-left: 6px; }

/* ============================================================ SHELL */
.panel-layout { display: flex; min-height: 100vh; }

.panel-sidebar {
  width: var(--p-sidebar); flex-shrink: 0;
  background: var(--p-dark); color: rgba(255, 255, 255, .72);
  position: fixed; inset: 0 auto 0 0; overflow-y: auto; z-index: 60;
}
.panel-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 16px; border-bottom: 1px solid rgba(255, 255, 255, .09);
  color: #fff; font-family: var(--p-font-head); font-weight: 600; font-size: 1.02rem;
  letter-spacing: .01em;
}
.panel-brand small {
  display: block; font-size: .68rem; font-weight: 500;
  opacity: .55; letter-spacing: .1em; text-transform: uppercase; margin-top: 2px;
}
.panel--app .panel-brand { border-bottom-color: rgba(46, 163, 242, .35); }

.panel-nav { padding: 8px 0 26px; }
.panel-nav-section {
  padding: 15px 16px 5px; margin: 0;
  font-family: var(--p-font-head);
  font-size: .68rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(255, 255, 255, .42);
}
.panel-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; font-size: .9rem;
  color: rgba(255, 255, 255, .74); text-decoration: none;
  border-left: 3px solid transparent;
}
.panel-nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.panel-nav-link.is-active {
  background: rgba(38, 156, 217, .18); color: #fff; border-left-color: var(--p-blue);
}
.panel-nav-link .ico { width: 18px; text-align: center; opacity: .85; flex-shrink: 0; }
.panel-nav-button {
  width: 100%; background: none; border: 0; border-left: 3px solid transparent;
  font: inherit; text-align: left; cursor: pointer;
}
.panel-logout { margin: 0; }
.panel-badge {
  margin-left: auto; background: var(--p-blue-dark); color: #fff;
  font-size: .7rem; font-weight: 700; border-radius: 50px; padding: 1px 8px;
}

.panel-main { flex: 1; min-width: 0; margin-left: var(--p-sidebar); }

.panel-topbar {
  display: flex; align-items: center; gap: 12px;
  background: var(--p-white); border-bottom: 1px solid var(--p-border);
  padding: 12px 24px; position: sticky; top: 0; z-index: 40;
}
.panel-page-title { font-family: var(--p-font-head); font-size: 1.05rem; font-weight: 600;
  color: var(--p-heading); margin: 0; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.panel-user { font-size: .88rem; color: var(--p-muted); white-space: nowrap; }
.panel-mode {
  font-family: var(--p-font-head);
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 50px; padding: 3px 11px; white-space: nowrap;
}
.panel-mode.is-soon { background: var(--p-warn-bg); color: var(--p-warn); border: 1px solid #E8CE9A; }
.panel-mode.is-live { background: var(--p-ok-bg); color: var(--p-ok); border: 1px solid #B4DCC4; }

/* ── Aktiver Mandant ─────────────────────────────────────── */
/* Eine Firma: nur Beschriftung. Mehrere: Auswahlfeld. */
.panel-tenant {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--p-font-head); font-size: .92rem; font-weight: 600;
  color: var(--p-heading); white-space: nowrap;
}
.panel-tenant .ico { color: var(--p-blue); font-size: .8rem; }

.panel-tenant-form { display: flex; margin: 0; }
.panel-tenant-select {
  font-family: var(--p-font-head); font-size: .9rem; font-weight: 600;
  color: var(--p-heading); background: #fff;
  border: 1px solid var(--p-border); border-radius: var(--p-radius);
  padding: 5px 10px; max-width: 190px; cursor: pointer;
}
.panel-tenant-select:hover { border-color: var(--p-blue); }
.panel-tenant-select:focus-visible {
  outline: none; border-color: var(--p-blue);
  box-shadow: 0 0 0 3px rgba(38, 156, 217, .18);
}

.panel-nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--p-heading); padding: 0 4px 0 0;
}
.panel-backdrop { display: none; }

.panel-content { padding: 24px; max-width: 1160px; }

/* ============================================================ KARTEN */
.card, .panel-card {
  background: var(--p-white); border: 1px solid var(--p-border);
  border-radius: var(--p-radius); padding: 22px 24px; margin-bottom: 20px;
  box-shadow: var(--p-shadow);
}
.card-narrow { max-width: 520px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.card-head h2 { margin: 0; }
.mode-current { font-size: 1rem; display: flex; align-items: center; gap: 10px; }

/* ============================================================ HINWEISE */
.alert {
  border-radius: var(--p-radius-sm); padding: 12px 16px; font-size: .93rem;
  margin: 0 0 18px; border: 1px solid transparent;
}
.alert-error { background: var(--p-error-bg); border-color: #E7B4BB; color: var(--p-error); }
.alert-ok    { background: var(--p-ok-bg);    border-color: #B4DCC4; color: var(--p-ok); }
.alert-warn  { background: var(--p-warn-bg);  border-color: #E8CE9A; color: var(--p-warn); }
.alert-info  { background: #EEF6FC;           border-color: #B8D9EE; color: var(--p-blue-dark); }
.alert a { color: inherit; text-decoration: underline; }

/* ============================================================ BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--p-font-head); font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  padding: 10px 20px; border-radius: var(--p-radius-sm); border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary   { background: var(--p-blue-dark); color: #fff; }
.btn-primary:hover { background: var(--p-blue-deep); color: #fff; }
.btn-secondary { background: var(--p-white); color: var(--p-heading); border-color: var(--p-border); }
.btn-secondary:hover { border-color: var(--p-blue); color: var(--p-blue-dark); }
.btn-ghost { background: transparent; color: var(--p-muted); }
.btn-ghost:hover { color: var(--p-heading); }
/* ============================================================ BILDARCHIV
   Raster mit fester Mindestbreite statt fester Spaltenzahl: Werbemittel
   gibt es hoch, quer und quadratisch; eine feste Spaltenzahl liesse
   entweder die Hochformate winzig oder die Querformate abgeschnitten. */
.bild-raster {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.bild-karte {
  margin: 0; border: 1px solid var(--p-border); border-radius: var(--p-radius-sm);
  overflow: hidden; background: var(--p-white);
}
.bild-karte img {
  display: block; width: 100%; height: auto;
  /* Karierter Grund, damit weisse Bilder als Bild erkennbar bleiben. */
  background:
    linear-gradient(45deg, #EEF1F5 25%, transparent 25%, transparent 75%, #EEF1F5 75%),
    linear-gradient(45deg, #EEF1F5 25%, transparent 25%, transparent 75%, #EEF1F5 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px;
}
.bild-karte figcaption { padding: 12px 14px 14px; }

/* Nur fuer das Unwiderrufliche: Firma loeschen. Rot ist hier keine
   Verzierung, sondern der Unterschied zwischen "aendert etwas" und
   "vernichtet Daten". Sparsam einsetzen, sonst nutzt es sich ab. */
.btn-danger { background: var(--p-danger, #B00020); color: #fff; }
.btn-danger:hover { background: #8C0019; color: #fff; }
.btn-sm { padding: 6px 13px; font-size: .82rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.btn-row form { margin: 0; }

/* ============================================================ FORMULARE */
.form-row { margin-bottom: 16px; }

/* Drei kurze Felder nebeneinander - etwa Reichweite, Reaktionen,
   Kommentare. Bricht von selbst um, sobald es eng wird: Zahlenfelder
   nebeneinander zu quetschen macht sie auf dem Telefon unbedienbar. */
.form-row-3 {
  display: grid; gap: 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.form-label {
  display: block; font-family: var(--p-font-head); font-size: .9rem; font-weight: 600;
  color: var(--p-heading); margin-bottom: 6px;
}
.form-control {
  width: 100%; font-family: inherit; font-size: .95rem;
  padding: 10px 13px; border: 1.5px solid var(--p-border);
  border-radius: var(--p-radius-sm); background: var(--p-white); color: var(--p-heading);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:hover { border-color: #C7D0DC; }
.form-control:focus {
  outline: none; border-color: var(--p-blue); box-shadow: 0 0 0 3px rgba(38, 156, 217, .16);
}
textarea.form-control { resize: vertical; min-height: 90px; }
.form-control-tall { min-height: 300px; font-family: var(--p-mono); font-size: .9rem; }
.form-control-sm { padding: 5px 9px; font-size: .84rem; width: auto; }
.form-hint { font-size: .8rem; color: var(--p-muted); margin: 6px 0 0; }
.form-grid { display: grid; gap: 0 18px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

.inline-form { display: inline-flex; align-items: center; gap: 7px; margin: 0; flex-wrap: wrap; }
.filter-form { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin: 0; }
.filter-form .form-row { margin: 0; flex: 1 1 180px; }
.filter-form .btn { margin-top: 0; }

.radio-set { display: grid; gap: 10px; margin-bottom: 18px; }
.radio-option, .check-option {
  display: flex; align-items: flex-start; gap: 11px;
  border: 1.5px solid var(--p-border); border-radius: var(--p-radius-sm);
  padding: 13px 15px; cursor: pointer; background: var(--p-white);
}
.radio-option:hover, .check-option:hover { border-color: var(--p-blue); }
.radio-option input, .check-option input { margin-top: 3px; flex-shrink: 0; }
.radio-option strong { display: block; color: var(--p-heading); }
.radio-option small { color: var(--p-muted); }

/* ============================================================ TABELLEN */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table, .check-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th, .data-table td,
.check-table th, .check-table td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--p-border);
  vertical-align: top;
}
/* Tabellenköpfe und Etiketten sind kurz und stehen ohnehin gross-
   geschrieben - hier trägt Rajdhani, wie im öffentlichen Designsystem. */
.data-table thead th {
  font-family: var(--p-font-head); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--p-muted); font-weight: 700;
}
.data-table tbody th, .check-table th {
  font-weight: 600; color: var(--p-heading); white-space: nowrap; width: 34%;
}
.data-table tbody tr:last-child td, .data-table tbody tr:last-child th,
.check-table tbody tr:last-child td, .check-table tbody tr:last-child th { border-bottom: 0; }
.check-state { width: 34px; text-align: center; }

.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.dot-ok   { background: #2FA36B; }
.dot-bad  { background: #C6394A; }
.dot-wait { background: #D9A227; }

/* ============================================================ TAGS */
.tag {
  display: inline-block; font-family: var(--p-font-head);
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  border-radius: 50px; padding: 2px 11px; white-space: nowrap;
  background: #EDF1F6; color: #55606E;
}
.tag-ok, .tag-erledigt, .tag-freigegeben { background: var(--p-ok-bg); color: var(--p-ok); }
.tag-bad { background: var(--p-error-bg); color: var(--p-error); }
.tag-warn, .tag-wait, .tag-in_arbeit, .tag-in_pruefung { background: var(--p-warn-bg); color: var(--p-warn); }
.tag-neu { background: #EEF6FC; color: var(--p-blue-dark); }
.tag-veroeffentlicht { background: #EEF6FC; color: var(--p-blue-dark); }

/* ============================================================ KENNZAHLEN */
.stat-grid {
  display: grid; gap: 16px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}
.stat {
  background: var(--p-white); border: 1px solid var(--p-border);
  border-radius: var(--p-radius); padding: 18px 20px; box-shadow: var(--p-shadow);
}
/* Ziffern in Rajdhani mit tabular-nums, damit die Kennzahlen
   untereinander auf gleicher Breite stehen. */
.stat-value {
  font-family: var(--p-font-head); font-size: 2.1rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--p-heading);
  margin: 0 0 2px; line-height: 1.1;
}
.stat-label { font-size: .82rem; color: var(--p-muted); margin: 0; }
.stat-hint { font-size: .76rem; color: var(--p-muted); margin: 6px 0 0; }

/* ============================================================ ANFRAGEN */
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip {
  font-size: .84rem; padding: 5px 14px; border-radius: 50px;
  border: 1px solid var(--p-border); color: var(--p-text); background: var(--p-white);
}
.chip:hover { border-color: var(--p-blue); text-decoration: none; }
.chip.is-active { background: var(--p-blue-dark); border-color: var(--p-blue-dark); color: #fff; }

.lead-list { list-style: none; margin: 0; padding: 0; }
.lead-item { border-bottom: 1px solid var(--p-border); }
.lead-item:last-child { border-bottom: 0; }
.lead-link { display: block; padding: 14px 4px; color: var(--p-text); }
.lead-link:hover { background: #FAFBFD; text-decoration: none; }
.lead-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lead-head strong { color: var(--p-heading); }
.lead-meta { display: block; font-size: .82rem; color: var(--p-muted); margin: 3px 0; }
.lead-excerpt { display: block; font-size: .88rem; }

.message-body {
  background: var(--p-bg); border: 1px solid var(--p-border);
  border-radius: var(--p-radius-sm); padding: 15px 17px; margin-bottom: 16px;
  overflow-wrap: anywhere;
}
.back-link { font-size: .88rem; }

/* ============================================================ CODE / LOG */
code {
  font-family: var(--p-mono); font-size: .86em;
  background: var(--p-bg); border: 1px solid var(--p-border);
  border-radius: 4px; padding: 1px 5px;
}
.code-block {
  font-family: var(--p-mono); font-size: .82rem;
  background: var(--p-bg); border: 1px solid var(--p-border);
  border-radius: var(--p-radius-sm); padding: 13px 15px;
  overflow-x: auto; margin: 0 0 12px; white-space: pre;
}
.log-block { max-height: 340px; overflow-y: auto; }

/* ============================================================ LOGIN */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  background: linear-gradient(150deg, #232434 0%, #1E2A3C 55%, #14304A 100%);
}
.login-card {
  width: 100%; max-width: 400px; background: var(--p-white);
  border-radius: 16px; padding: 34px 32px;
  box-shadow: 0 22px 60px rgba(9, 14, 26, .40);
}
.login-brand { text-align: center; margin-bottom: 22px; }
.login-brand img { display: inline-block; }
.login-name { font-weight: 700; color: var(--p-heading); margin: 10px 0 0; }
.login-sub { font-size: .78rem; color: var(--p-muted); letter-spacing: .1em;
  text-transform: uppercase; margin: 2px 0 0; }
.login-title { font-size: 1.15rem; text-align: center; margin-bottom: 20px; }
.login-form { margin-bottom: 6px; }
.login-back { text-align: center; font-size: .85rem; margin: 18px 0 0; }

/* ============================================================ INSTALLER */
.install-wrap { max-width: 720px; margin: 0 auto; padding: 36px 20px 56px; }
.install-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.install-title { font-size: 1.2rem; font-weight: 700; color: var(--p-heading); margin: 0; }
.install-sub { font-size: .78rem; color: var(--p-muted); letter-spacing: .1em;
  text-transform: uppercase; margin: 0; }
.install-form { margin-top: 8px; }
.install-next { padding-left: 20px; margin: 0 0 12px; }
.install-next li { margin-bottom: 8px; }
.install-foot { text-align: center; font-size: .8rem; color: var(--p-muted); margin-top: 28px; }
.hint { font-size: .86rem; color: var(--p-muted); }

/* ============================================================ RESPONSIV */
@media (max-width: 900px) {
  .panel-nav-toggle { display: block; }
  .panel-sidebar { transform: translateX(-100%); transition: transform .22s ease; }
  .panel-nav-open .panel-sidebar { transform: translateX(0); }
  .panel-main { margin-left: 0; }
  .panel-content { padding: 18px 16px; }
  .panel-topbar { padding: 11px 16px; }
  .panel-user { display: none; }
  /* Die aktive Firma bleibt sichtbar - wer für mehrere Firmen arbeitet,
     muss auch unterwegs erkennen, wo er gerade schreibt. */
  .panel-tenant { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
  .panel-tenant-select { max-width: 130px; }

  .panel-nav-open .panel-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(35, 36, 52, .5); z-index: 50;
  }
  .panel-nav-open { overflow: hidden; }

  .card, .panel-card { padding: 18px 16px; }

  /* Tabellen auf schmalen Bildschirmen als Karten (Alpasana-Standard) */
  .data-table.data-table--stack thead { display: none; }
  .data-table.data-table--stack tr {
    display: block; border: 1px solid var(--p-border);
    border-radius: var(--p-radius-sm); padding: 10px; margin-bottom: 10px;
  }
  .data-table.data-table--stack td { display: block; border: 0; padding: 4px 0; }
}

/* ============================================================
   Vorschläge des Kampagnenassistenten

   Zwischen mehreren Fassungen wird verglichen, nicht gelesen. Jede
   bekommt deshalb einen eigenen Rahmen – ohne ihn laufen zwei
   Beiträge im Fliesstext ineinander, und genau die Grenze dazwischen
   braucht das Auge beim Auswählen.
   ============================================================ */
.gen-variante {
  border: 1px solid var(--p-border); border-radius: var(--p-radius);
  padding: 16px 18px; margin-bottom: 14px; background: var(--p-white);
}
.gen-variante:last-of-type { margin-bottom: 0; }

.gen-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 10px; font-weight: 600; color: var(--p-heading);
}
.gen-mass { font-weight: 400; font-size: .85rem; color: var(--p-muted); }
.gen-mass-warn { color: var(--p-warn); }

/* Zeilenumbrüche des Beitrags bleiben stehen – sie gehören zum Text. */
.gen-text { white-space: pre-wrap; margin: 0 0 10px; }
.gen-tags { margin: 0 0 12px; font-size: .9rem; color: var(--p-blue-dark); }

/* Aufgabenliste. Kästchen links, Text daneben, Aktionen rechts.

   Erledigtes bleibt stehen, tritt aber deutlich zurück – eine abgehakte
   Liste ist beim nächsten Mal die beste Vorlage, soll aber nicht mit dem
   Offenen um Aufmerksamkeit streiten. Überfälliges bekommt eine rote Kante:
   Es ist das Einzige in dieser Liste, das jemanden sofort angeht. */
.aufgaben { list-style: none; margin: 10px 0 0; padding: 0; }
.aufgabe {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 0 7px 10px; border-top: 1px solid var(--p-border);
  border-left: 3px solid transparent;
}
.aufgabe:first-child { border-top: 0; }
.aufgabe-text { flex: 1; min-width: 0; }
.aufgabe-haken { color: var(--p-muted); padding: 0 4px; }
.aufgabe form { margin: 0; }

.aufgabe-erledigt { opacity: .6; }
.aufgabe-erledigt .aufgabe-text strong { text-decoration: line-through; font-weight: 400; }
.aufgabe-faellig { border-left-color: var(--p-error); }

/* Verlauf am Beitrag: Kommentare und Statuswechsel untereinander.

   Ein Statuseintrag stammt vom System und tritt deshalb zurück – kleiner,
   grau, ohne eigene Fläche. Ein Kommentar hat einen Menschen als Urheber
   und bekommt eine Karte. Wer den Verlauf überfliegt, sieht so auf einen
   Blick, wo jemand etwas gesagt hat. */
.verlauf { list-style: none; margin: 0; padding: 0; }
.verlauf-eintrag { padding: 8px 0; border-top: 1px solid var(--p-border); }
.verlauf-eintrag:first-child { border-top: 0; }

.verlauf-kopf { margin: 0 0 3px; font-size: .85rem; }
.verlauf-kopf .muted { margin-left: 8px; font-size: .8rem; }
.verlauf-text { margin: 0; color: var(--p-text); }

.verlauf-kommentar .verlauf-text {
  background: var(--p-bg); border-left: 3px solid var(--p-blue);
  border-radius: 0 var(--p-radius-sm) var(--p-radius-sm) 0;
  padding: 8px 12px;
}
.verlauf-status .verlauf-text { font-size: .85rem; color: var(--p-muted); }
.verlauf-status .verlauf-kopf strong { font-weight: 400; color: var(--p-muted); }

/* ============================================================
   Redaktionskalender

   Sieben Spalten, Montag zuerst. Die Tagesfelder haben eine Mindesthöhe,
   damit ein leerer Monat nicht zu einer Reihe dünner Striche zusammenfällt –
   ein Kalender muss auch dann wie ein Kalender aussehen, wenn nichts
   drinsteht. Auf schmalen Bildschirmen bleibt das Raster in seiner Breite
   und wird waagrecht gescrollt: Sieben Spalten untereinander wären keine
   Woche mehr.
   ============================================================ */
.cal {
  display: grid; grid-template-columns: repeat(7, minmax(112px, 1fr));
  gap: 1px; background: var(--p-border);
  border: 1px solid var(--p-border); border-radius: var(--p-radius-sm);
  overflow: hidden;
}

.cal-wt {
  background: var(--p-bg); padding: 7px 9px;
  font-family: 'Rajdhani', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  font-size: .76rem; color: var(--p-muted);
}

.cal-tag { background: var(--p-white); min-height: 92px; padding: 6px; }
.cal-leer { background: #FAFBFC; }
.cal-we   { background: #FCFCFD; }
.cal-heute { box-shadow: inset 0 0 0 2px var(--p-blue); }

.cal-zahl {
  font-family: 'Rajdhani', sans-serif; font-weight: 600;
  font-size: .82rem; color: var(--p-muted); margin-bottom: 4px;
}
.cal-heute .cal-zahl { color: var(--p-blue-dark); }

/* Ein Eintrag trägt seinen Status als linke Kante. Farbe allein genügt
   nicht – wer sie nicht unterscheiden kann, liest die Uhrzeit und den
   Titel, und im Titelattribut steht der Status ausgeschrieben. */
.cal-eintrag {
  display: block; margin-bottom: 3px; padding: 3px 5px;
  border-left: 3px solid var(--p-muted);
  background: var(--p-bg); border-radius: 3px;
  font-size: .78rem; line-height: 1.35; color: var(--p-heading);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis;
}
.cal-eintrag:hover { background: #EEF6FC; }
.cal-zeit { font-variant-numeric: tabular-nums; color: var(--p-muted); margin-right: 4px; }
.cal-netz { font-weight: 600; color: var(--p-blue-dark); margin-right: 4px; }

.cal-entwurf     { border-left-color: var(--p-muted); }
.cal-in_pruefung { border-left-color: var(--p-warn); background: var(--p-warn-bg); }
.cal-freigegeben { border-left-color: var(--p-ok);   background: var(--p-ok-bg); }
/* Veröffentlicht ist der Endzustand: erledigt, deshalb ruhig. Freigegeben
   steht noch aus und bleibt darum das auffälligere Grün. */
.cal-veroeffentlicht { border-left-color: var(--p-blue-dark); background: #EEF6FC; }

.cal-legende {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-left: 3px solid var(--p-muted); border-radius: 3px;
  background: var(--p-bg); font-size: .78rem;
}

/* Zustand einer Kampagne. „Aktiv" ist der Normalfall und bleibt ruhig;
   abgeschlossen und archiviert treten zurück, damit die laufenden Kampagnen
   in einer Liste sofort ins Auge fallen. */
.tag-aktiv         { background: #EEF6FC; color: var(--p-blue-dark); }
.tag-abgeschlossen { background: var(--p-ok-bg); color: var(--p-ok); }
.tag-archiviert    { background: var(--p-bg); color: var(--p-muted); }

/* Beschriftete Angaben (Zeitraum, Beiträge). Auf schmalen Bildschirmen
   untereinander, sonst zweispaltig – ein Wert soll nie umbrechen müssen,
   nur weil die Beschriftung daneben lang ist. */
.kv { margin: 14px 0 0; display: grid; gap: 4px 16px; }
.kv dt {
  font-family: 'Rajdhani', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  font-size: .78rem; color: var(--p-muted);
}
.kv dd { margin: 0 0 8px; color: var(--p-text); }

@media (min-width: 620px) {
  .kv { grid-template-columns: 150px 1fr; align-items: baseline; }
  .kv dd { margin-bottom: 4px; }
}

/* Hinterlegtes Firmenlogo. Karierter Grund, weil ein Logo meist durchsichtig
   ist – auf reinem Weiss sähe man nicht, wo es aufhört. */
.brand-logo {
  max-width: 260px; max-height: 120px; padding: 12px;
  border: 1px solid var(--p-border); border-radius: var(--p-radius-sm);
  background-color: #FFF;
  background-image:
    linear-gradient(45deg, #EEF1F5 25%, transparent 25%, transparent 75%, #EEF1F5 75%),
    linear-gradient(45deg, #EEF1F5 25%, transparent 25%, transparent 75%, #EEF1F5 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
}

/* Knopf während eines langen Vorgangs.

   Der Ring dreht sich links neben der Beschriftung. Wichtig ist weniger die
   Bewegung als die Beschriftung: Wer nur einen Kreisel sieht, weiss nicht,
   ob überhaupt etwas passiert – „Wird erzeugt …" sagt es. Deshalb bleibt der
   Text auch dann stehen, wenn Bewegung abgeschaltet ist. */
.btn.is-busy {
  cursor: progress; opacity: .85;
  display: inline-flex; align-items: center; gap: 9px;
}
.btn.is-busy::before {
  content: ''; width: 14px; height: 14px; flex: 0 0 auto;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: alp-dreh .7s linear infinite;
}
.btn.is-busy:disabled { opacity: .85; }

@keyframes alp-dreh { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  /* Kein Kreisel, aber der Ring bleibt als ruhiges Zeichen sichtbar. */
  .btn.is-busy::before { animation: none; border-right-color: currentColor; opacity: .5; }
}

/* Befunde der Qualitäts- und Markenprüfung.

   Fehler und Hinweise unterscheiden sich sichtbar, nicht nur im Wort: Ein
   Fehler verhindert die Veröffentlichung, ein Hinweis ist eine Faustregel.
   Wer beides gleich anmalt, bringt die Leserschaft dazu, alles zu
   überfliegen – und dann geht der eine echte Fehler unter. */
.gen-pruefung { list-style: none; margin: 10px 0 0; padding: 0; }
.gen-pruefung-ok { font-size: .88rem; color: var(--p-ok); margin: 10px 0 0; }

.gen-befund {
  display: flex; gap: 8px; align-items: baseline;
  font-size: .88rem; line-height: 1.5; padding: 5px 0;
  border-top: 1px solid var(--p-border); color: var(--p-text);
}
.gen-befund:first-child { border-top: 0; }

.gen-stufe {
  flex: 0 0 auto; font-family: 'Rajdhani', sans-serif; font-weight: 600;
  font-size: .74rem; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 999px;
}
.gen-befund-fehler  .gen-stufe { background: var(--p-error-bg); color: var(--p-error); }
.gen-befund-hinweis .gen-stufe { background: var(--p-warn-bg);  color: var(--p-warn); }

/* Vorschau eines Werbemittels. Die Breitenangabe im <img> nennt die echten
   Bildpunkte – angezeigt wird es passend zur Karte, damit ein 1584er Banner
   die Seite nicht seitlich schiebt. Das karierte Feld dahinter zeigt, wo das
   Bild aufhört, auch wenn seine Ecke dieselbe Farbe hat wie die Seite. */
.ad-preview {
  display: block; max-width: 100%; height: auto; margin: 0 auto;
  border: 1px solid var(--p-border); border-radius: var(--p-radius-sm);
  background-color: #FFF;
  background-image:
    linear-gradient(45deg, #EEF1F5 25%, transparent 25%, transparent 75%, #EEF1F5 75%),
    linear-gradient(45deg, #EEF1F5 25%, transparent 25%, transparent 75%, #EEF1F5 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Kalender: Ziehen (S-04) ────────────────────────────────
   Der gezogene Eintrag wird blass, die Ablageflaeche bekommt einen
   Rahmen in der Akzentfarbe. Beides nur waehrend des Ziehens - eine
   dauerhafte Markierung wuerde das Raster unruhig machen. */
.cal-eintrag[draggable="true"] { cursor: grab; }
.cal-eintrag.is-zieht,
.row.is-zieht { opacity: .4; }
.cal-tag.ist-ziel { outline: 2px solid #269CD9; outline-offset: -2px; }
#kal-warteschlange.ist-ziel { outline: 2px solid #269CD9; outline-offset: -2px; }

/* Meldung neben dem Kalender - ohne feste Hoehe springt das Raster,
   sobald ein Satz erscheint. */
#kal-meldung { min-height: 1.2em; }