/* ============================================================
   FMT REDAKTION — Dashboard CSS
   Mobile-First · Neutral · Leicht auf aegean/modern umstellbar
   ============================================================ */

/* --- TOKENS (leicht austauschbar) --- */
:root {
  --fmt-bg:          #F5F5F5;
  --fmt-surface:     #FFFFFF;
  --fmt-border:      #E2E2E2;
  --fmt-border-soft: #EFEFEF;

  --fmt-ink:         #1A1A1A;
  --fmt-ink-soft:    #555555;
  --fmt-ink-faint:   #999999;

  --fmt-primary:     #2563EB;
  --fmt-primary-hv:  #1D4ED8;
  --fmt-green:       #16A34A;
  --fmt-green-hv:    #15803D;
  --fmt-danger:      #DC2626;
  --fmt-danger-hv:   #B91C1C;
  --fmt-yellow:      #D97706;
  --fmt-blue-light:  #DBEAFE;

  --fmt-sidebar-w:   240px;
  --fmt-topbar-h:    60px;
  /* Höhe der WordPress-Werkzeugleiste. Sie liegt fest am oberen Rand und hat
     unsere Kopfzeile samt Menü verdeckt — auf dem Handy ist sie 46 px hoch,
     am Schreibtisch 32. Ohne Anmeldung 0. */
  --fmt-adminbar:    0px;
  --fmt-radius:      8px;
  --fmt-radius-lg:   12px;
  --fmt-shadow:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --fmt-shadow-md:   0 4px 12px rgba(0,0,0,.10);

  --fmt-tap:         48px;   /* Mindest-Touch-Größe */
  --fmt-font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- RESET / BASIS --- */
.fmt-wrap *, .fmt-wrap *::before, .fmt-wrap *::after { box-sizing: border-box; }
.fmt-wrap {
  font-family: var(--fmt-font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fmt-ink);
  background: var(--fmt-bg);
  min-height: 100vh;
}
.fmt-wrap a { color: var(--fmt-primary); text-decoration: none; }

/* --- TOP-BAR --- */
/* WordPress setzt am body die Klasse admin-bar, sobald die Werkzeugleiste
   angezeigt wird. Nur dann wird Platz dafür freigehalten. */
body.admin-bar .fmt-wrap { --fmt-adminbar: 32px; }
@media (max-width: 782px) { body.admin-bar .fmt-wrap { --fmt-adminbar: 46px; } }

.fmt-topbar {
  position: sticky; top: var(--fmt-adminbar); z-index: 50;
  height: var(--fmt-topbar-h);
  background: var(--fmt-surface);
  border-bottom: 1px solid var(--fmt-border);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  box-shadow: var(--fmt-shadow);
}
.fmt-topbar__logo {
  font-weight: 700; font-size: 1rem; color: var(--fmt-ink);
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; flex: 1;
  line-height: 1.15;
}
/* „FMT Redaktion" bleibt in einer Zeile — auf schmalen Geräten brach der Name
   sonst zwischen den beiden Wörtern um. Die Versionsnummer rutscht
   stattdessen darunter. */
.fmt-topbar__brand { white-space: nowrap; }
/* Versionsnummer neben dem Namen — dieselbe Anzeige wie in der Bildredaktion.
   Sie zeigt beim Blick auf die Seite, welcher Stand tatsächlich auf dem
   Server liegt; das erspart die Suche nach der Ursache, wenn eine Änderung
   scheinbar nicht ankommt (meist der Seiten-Cache). */
.fmt-topbar__version {
  font-weight: 400; font-size: .72rem; color: var(--fmt-ink-soft); opacity: .75;
}
/* Unter dem Namen statt daneben — sonst wird die Kopfzeile auf dem Handy zu
   breit. Weil die Leiste dadurch zweizeilig wird, muss auch ihre Höhe wachsen:
   Das Menü hängt mit `top` an --fmt-topbar-h und war sonst oben abgeschnitten
   (die Zeile „Chefredaktion" lag unter der Kopfleiste). */
@media (max-width: 640px) {
  .fmt-wrap { --fmt-topbar-h: 76px; }
  .fmt-topbar { padding: 0 10px; gap: 8px; }
  .fmt-topbar__version { flex: 0 0 100%; padding-left: 30px; }
  .fmt-sidebar__inner { padding-top: 8px; }
}
.fmt-topbar__user {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.fmt-topbar__name {
  font-size: .85rem; color: var(--fmt-ink-soft); font-weight: 500;
}
@media (max-width: 480px) { .fmt-topbar__name { display: none; } }

/* Der Knopf „Ein-/Ausblenden" (.fmt-btn--hide) ist ab 1.0.24 entfallen —
   der Login-Bereich bleibt für Angemeldete dauerhaft ausgeblendet. */

/* Login-Bereich auf der Seite — per JS gesteuert */
.fmt-login-wrap { transition: opacity .3s, max-height .4s, margin .4s; overflow: hidden; max-height: 600px; opacity: 1; }
.fmt-login-wrap.is-hidden { max-height: 0; opacity: 0; pointer-events: none; margin-top: 0 !important; margin-bottom: 0 !important; }

/* Menü-Knopf (Hamburger)
   Vorher: 48x48 px mit 12 px Innenabstand — die Striche waren dadurch nur
   24 px breit und 2 px dünn, ohne Fläche und ohne Rahmen. Auf dem Handy war
   nicht zu erkennen, dass es sich um einen Knopf handelt. Jetzt mit eigener
   Fläche, Rahmen, kräftigeren Strichen in der Akzentfarbe und der
   Beschriftung „Menü". */
.fmt-hamburger {
  display: inline-flex; align-items: center; gap: 9px;
  height: 40px; flex-shrink: 0; padding: 0 12px;
  border: 1.5px solid var(--fmt-border); border-radius: 8px;
  background: var(--fmt-bg); color: var(--fmt-ink); cursor: pointer;
  font-family: var(--fmt-font); font-size: .85rem; font-weight: 700;
  line-height: 1; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fmt-hamburger__bars {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 22px;
}
.fmt-hamburger__bars span {
  display: block; height: 3px; background: var(--fmt-primary); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease, background .15s ease;
}
.fmt-hamburger.is-open {
  background: var(--fmt-primary); color: #fff; border-color: var(--fmt-primary);
}
.fmt-hamburger.is-open .fmt-hamburger__bars span { background: #fff; }
.fmt-hamburger.is-open .fmt-hamburger__bars span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.fmt-hamburger.is-open .fmt-hamburger__bars span:nth-child(2) { opacity: 0; }
.fmt-hamburger.is-open .fmt-hamburger__bars span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (min-width: 961px) { .fmt-hamburger { display: none; } }

/* --- LAYOUT --- */
.fmt-layout {
  display: flex;
  min-height: calc(100vh - var(--fmt-topbar-h));
}

/* --- SIDEBAR --- */
.fmt-sidebar {
  width: var(--fmt-sidebar-w); flex-shrink: 0;
  background: var(--fmt-surface);
  border-right: 1px solid var(--fmt-border);
  /* Mobile: versteckt */
  position: fixed;
  top: calc(var(--fmt-topbar-h) + var(--fmt-adminbar)); left: 0; bottom: 0;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  z-index: 40; overflow-y: auto;
}
.fmt-sidebar.is-open { transform: translateX(0); }
@media (min-width: 961px) {
  .fmt-sidebar {
    position: sticky; top: calc(var(--fmt-topbar-h) + var(--fmt-adminbar));
    height: calc(100vh - var(--fmt-topbar-h) - var(--fmt-adminbar));
    transform: none;
  }
}
.fmt-sidebar__inner { padding: 20px 12px; }
.fmt-sidebar__label {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fmt-ink-faint);
  padding: 0 10px; margin: 0 0 6px;
}
.fmt-sidebar__divider { height: 1px; background: var(--fmt-border); margin: 16px 0 12px; }

/* Nav-Item */
.fmt-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--fmt-radius);
  color: var(--fmt-ink-soft); font-weight: 500; font-size: .93rem;
  text-decoration: none; min-height: var(--fmt-tap);
  transition: background .15s ease, color .15s ease;
}
.fmt-nav-item.is-active { background: var(--fmt-blue-light); color: var(--fmt-primary); font-weight: 700; }
.fmt-nav-item svg { flex-shrink: 0; }

/* Mobile Overlay */
.fmt-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.4); z-index: 39;
}
.fmt-overlay.is-visible { display: block; }

/* --- HAUPT-BEREICH --- */
.fmt-main {
  flex: 1; min-width: 0;
  padding: 24px 20px;
}
@media (min-width: 641px) { .fmt-main { padding: 32px 28px; } }

/* --- SECTION HEAD --- */
.fmt-section-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.fmt-section-title { font-size: 1.4rem; font-weight: 700; margin: 0; color: var(--fmt-ink); }
.fmt-section-sub   { font-size: .85rem; color: var(--fmt-ink-faint); margin: 4px 0 0; }

/* --- VIDEOFELD --- */
.fmt-videofeld__oder  { margin-top: 10px; }
.fmt-videofeld__hint  { margin: 6px 0 0; font-size: .78rem; color: var(--fmt-ink-faint); line-height: 1.45; }

/* --- ADRESSE (SLUG) IM FORMULAR --- */
.fmt-slug__wert {
  display: inline-block; font-size: .82rem; color: var(--fmt-ink-soft);
  background: var(--fmt-bg); border: 1px solid var(--fmt-border);
  border-radius: 6px; padding: 6px 10px; word-break: break-all;
}
.fmt-slug__check {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 10px;
  font-size: .85rem; color: var(--fmt-ink); cursor: pointer;
}
.fmt-slug__check input { margin-top: 2px; flex-shrink: 0; }
.fmt-slug__hint { margin: 4px 0 0 26px; font-size: .78rem; color: var(--fmt-ink-faint); }

/* --- BUTTONS --- */
.fmt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--fmt-tap); padding: .6em 1.2em;
  font-family: var(--fmt-font); font-weight: 600; font-size: .9rem;
  line-height: 1; border-radius: var(--fmt-radius);
  border: 1.5px solid transparent; cursor: pointer;
  text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.fmt-btn--primary { background: var(--fmt-primary); color: #fff !important; border-color: var(--fmt-primary); }
.fmt-btn--green   { background: var(--fmt-green); color: #fff; border-color: var(--fmt-green); }
.fmt-btn--danger  { background: var(--fmt-danger); color: #fff; border-color: var(--fmt-danger); }
.fmt-btn--outline { background: transparent; color: var(--fmt-ink); border-color: var(--fmt-border); }
.fmt-btn--ghost   { background: transparent; color: var(--fmt-ink-soft); border-color: transparent; }

/* Hover-Zustände nur für Geräte mit Mauszeiger — siehe Hinweis bei der
   Tabelle: Auf dem Handy kostet jede Hover-Regel den ersten Fingertipp. */
@media (hover: hover) {
  .fmt-btn--primary:hover { background: var(--fmt-primary-hv); border-color: var(--fmt-primary-hv); color: #fff; }
  .fmt-btn--green:hover   { background: var(--fmt-green-hv); border-color: var(--fmt-green-hv); color: #fff; }
  .fmt-btn--danger:hover  { background: var(--fmt-danger-hv); border-color: var(--fmt-danger-hv); color: #fff; }
  .fmt-btn--outline:hover { border-color: var(--fmt-primary); color: var(--fmt-primary); }
  .fmt-btn--ghost:hover   { background: var(--fmt-bg); color: var(--fmt-ink); }
  .fmt-hamburger:hover    { border-color: var(--fmt-primary); color: var(--fmt-primary); }
  .fmt-nav-item:hover     { background: var(--fmt-bg); color: var(--fmt-ink); }
}

.fmt-btn--sm { min-height: 36px; padding: .4em .85em; font-size: .82rem; }
.fmt-btn--block { width: 100%; }

/* --- TABELLE --- */
.fmt-table-wrap { overflow-x: auto; border-radius: var(--fmt-radius-lg); border: 1px solid var(--fmt-border); }
.fmt-table {
  width: 100%; border-collapse: collapse;
  background: var(--fmt-surface);
}
.fmt-table th {
  background: var(--fmt-bg); font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--fmt-ink-faint);
  padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--fmt-border);
  white-space: nowrap;
}
.fmt-table td {
  padding: 14px 16px; border-bottom: 1px solid var(--fmt-border-soft);
  vertical-align: middle; font-size: .92rem;
}
.fmt-table tr:last-child td { border-bottom: 0; }

/* --- KARTEN AUCH AM SCHREIBTISCH ---
   Jede Zeile bekommt einen eigenen Rahmen mit runden Ecken. Dafür muss
   border-collapse auf "separate" stehen — bei "collapse" teilen sich die
   Zellen ihre Kanten, und Eck-Radien bleiben wirkungslos. Der Rahmen liegt
   deshalb an den Zellen, die runden Ecken an der ersten und letzten. */
@media (min-width: 641px) {
  .fmt-table-wrap { border: 0; border-radius: 0; }
  .fmt-table { border-collapse: separate; border-spacing: 0 8px; background: transparent; }
  .fmt-table th { background: transparent; border-bottom: 0; padding-bottom: 4px; }
  .fmt-table tbody td {
    background: var(--fmt-surface);
    border-top: 1px solid var(--fmt-border);
    border-bottom: 1px solid var(--fmt-border);
    /* Der Schatten sitzt an den Zellen, nicht an der Zeile — an einer Zeile
       mit getrennten Rahmen ließe er sich nicht zeichnen. Weil die Zellen
       lückenlos aneinanderstoßen, wirkt er durchgehend. */
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
  }
  .fmt-table tbody td:first-child {
    border-left: 1px solid var(--fmt-border);
    border-radius: var(--fmt-radius-lg) 0 0 var(--fmt-radius-lg);
  }
  .fmt-table tbody td:last-child {
    border-right: 1px solid var(--fmt-border);
    border-radius: 0 var(--fmt-radius-lg) var(--fmt-radius-lg) 0;
  }
  .fmt-table tr:last-child td { border-bottom: 1px solid var(--fmt-border); }
}

/* Nur für Geräte mit echtem Mauszeiger. Auf dem Handy hat diese Regel dazu
   geführt, dass der erste Fingertipp lediglich den Hover-Zustand auslöste —
   die Knöpfe reagierten erst beim zweiten Tippen. */
@media (hover: hover) {
  .fmt-table tbody tr:hover td { background: #FBFAF7; }
}
.fmt-table__title strong { display: block; color: var(--fmt-ink); }
/* Die Zelle bleibt BEWUSST eine normale Tabellenzelle. Mit display:flex fällt
   sie aus dem Tabellen-Aufbau heraus — der Rahmen der Karte brach dann genau
   vor der Aktionen-Spalte ab und die Knöpfe standen außerhalb. Die Knöpfe
   sind selbst inline-flex, sie reihen sich auch so sauber auf. */
.fmt-table__actions { white-space: nowrap; text-align: right; }
.fmt-table__actions .fmt-btn + .fmt-btn { margin-left: 6px; }
.fmt-author { font-size: .78rem; color: var(--fmt-ink-faint); }
/* Nur auf dem Handy, wo die eigenen Spalten dafür entfallen. */
.fmt-table__meta-m { display: none; }
.fmt-table__date-m { display: none; }

/* --- TABELLE ALS KARTEN (Handy) ---
   Unter 640 px standen Titel, Status und Aktionen weiterhin NEBENEINANDER —
   lange griechische Titel wurden dadurch in eine schmale Spalte gequetscht
   und brachen auf viele Zeilen um. Jede Zeile wird jetzt zur Karte: Titel
   über die volle Breite, darunter Status links und Aktionen rechts. */
@media (max-width: 640px) {
  .fmt-hide-mobile { display: none; }

  .fmt-table-wrap { overflow-x: visible; border: 0; border-radius: 0; }
  .fmt-table { background: transparent; }
  .fmt-table thead { display: none; }
  /* Die Zellen bekommen hier BEWUSST kein eigenes display: Eine Regel
     `.fmt-table td { display: block }` wäre spezifischer als jede
     Klassenregel darunter und hätte sowohl das Ausblenden (.fmt-hide-mobile)
     als auch das Auflösen der Titel-Zelle (display: contents) ausgehebelt.
     Im Flex-Container tr werden die Zellen ohnehin zu Blöcken. */
  .fmt-table, .fmt-table tbody, .fmt-table tr { display: block; width: 100%; }

  .fmt-table tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    background: var(--fmt-surface);
    border: 1px solid var(--fmt-border);
    border-radius: var(--fmt-radius-lg);
    padding: 12px; margin-bottom: 10px;
  }
  .fmt-table tr:hover td,
  .fmt-table tr td { background: transparent; padding: 0; border-bottom: 0; }

  /* display:contents löst die Titel-Zelle auf, damit die Sprachfahnen zu
     eigenständigen Elementen der Karte werden — nur so können Status und
     Datum in derselben Zeile neben ihnen stehen. */
  .fmt-table__title { display: contents; }
  .fmt-table__title strong { flex: 1 1 100%; line-height: 1.3; font-size: .95rem; }
  /* Zeile 2: Autor links, Änderungsdatum rechts. Die volle Breite sorgt
     zugleich dafür, dass die Plaketten darunter eine eigene Zeile bekommen —
     ohne sie wäre der Umbruch von der Titellänge abhängig. */
  .fmt-table__byline {
    flex: 1 1 100%; display: flex; align-items: baseline;
    justify-content: space-between; gap: 8px;
  }
  .fmt-table__date-m { display: inline; font-size: .78rem; color: var(--fmt-ink-faint); }
  /* Zeile 3: Kategorie bzw. Datum, Sprachfahnen, Status, Aktionen */
  .fmt-table__meta-m { display: block; flex: 0 0 auto; }
  .fmt-lang-flags    { flex: 0 0 auto; margin-top: 0; }
  .fmt-table__status { flex: 0 0 auto; }
  /* Die Knöpfe tragen jetzt Beschriftungen und bekommen deshalb eine eigene
     Zeile — nebeneinander mit den Plaketten wäre es zu eng geworden. Sie
     teilen sich die Breite zu gleichen Teilen und füllen die Karte aus. */
  .fmt-table__actions { display: flex; gap: 6px; flex: 1 1 100%; flex-wrap: nowrap; margin-top: 6px; }
  .fmt-table__actions .fmt-btn { flex: 1 1 0; min-width: 0; }
  .fmt-table__actions .fmt-btn + .fmt-btn { margin-left: 0; }
  /* Bequem antippbar — die Symbolknöpfe waren mit 36 px zu klein. */
  .fmt-table__actions .fmt-btn--sm { min-height: 40px; min-width: 40px; }

  /* „Neu erstellen" über die volle Breite */
  .fmt-section-head > .fmt-btn { width: 100%; }
}

/* --- BADGES --- */
.fmt-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: .3em .75em; border-radius: 999px;
  font-size: .75rem; font-weight: 700; line-height: 1;
}
.fmt-badge--green  { background: #DCFCE7; color: #15803D; }
.fmt-badge--yellow { background: #FEF3C7; color: #B45309; }
.fmt-badge--gray   { background: #F3F4F6; color: #6B7280; }
.fmt-badge--blue   { background: #DBEAFE; color: #1D4ED8; }
.fmt-badge--sm     { font-size: .7rem; padding: .2em .6em; }
/* Inaktiv: deutlicher abgesetzt als „Entwurf", damit beide Graustufen im
   Statusfeld auseinanderzuhalten sind. */
.fmt-badge--muted  { background: #E5E7EB; color: #4B5563; border: 1px dashed #9CA3AF; }

/* --- INAKTIV GESETZTE ZEILEN --- */
/* Gedämpft, aber lesbar: Der Beitrag ist nicht gelöscht, nur offline. */
.fmt-row--inaktiv > td { opacity: .62; }
.fmt-row--inaktiv > td.fmt-table__status,
.fmt-row--inaktiv > td.fmt-table__actions { opacity: 1; }
.fmt-row--inaktiv .fmt-table__title strong { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Symbol im Umschalt-Knopf folgt dem Zustand, den der Knopf selbst trägt.
   Dadurch gilt dieselbe Regel in der Liste wie im Formular. */
.fmt-toggle-aktiv .fmt-ico-an  { display: none; }
.fmt-toggle-aktiv .fmt-ico-aus { display: inline-block; }
.fmt-toggle-aktiv.is-inaktiv .fmt-ico-an  { display: inline-block; }
.fmt-toggle-aktiv.is-inaktiv .fmt-ico-aus { display: none; }

/* Hinweis im Formular, wenn der Beitrag offline ist */
.fmt-inaktiv-hinweis {
  background: #F3F4F6; border: 1px dashed #9CA3AF; border-radius: 8px;
  padding: .7em .9em; margin-bottom: .8em;
  font-size: .82rem; line-height: 1.5; color: #4B5563;
}

/* --- LEER-ZUSTAND --- */
.fmt-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 64px 20px; text-align: center;
  color: var(--fmt-ink-soft);
}

/* --- KARTEN --- */
.fmt-card {
  background: var(--fmt-surface); border: 1px solid var(--fmt-border);
  border-radius: var(--fmt-radius-lg); padding: 20px;
  box-shadow: var(--fmt-shadow);
}
.fmt-card-title {
  font-size: .85rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fmt-ink-faint);
  margin: 0 0 14px; display: flex; align-items: center; gap: 8px;
}

/* --- FORMULAR --- */
.fmt-form-wrap { max-width: 960px; }
.fmt-form-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 24px;
}
.fmt-form-title { font-size: 1.3rem; font-weight: 700; margin: 0; }

/* Grid: 2 Spalten auf Desktop, 1 auf Mobile */
.fmt-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (min-width: 761px) {
  .fmt-form-grid { grid-template-columns: 1fr 300px; }
}
/* min-width:0 ist zwingend: Grid-Elemente haben von Haus aus min-width:auto
   und schrumpfen dann nicht unter ihren Inhalt. Ein breiter Editor-Inhalt
   sprengt sonst die Spalte und damit das gesamte Layout. */
.fmt-form-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Langer Text und lange Wörter/URLs dürfen den Editor nicht aufweiten */
.fmt-quill-editor,
.fmt-quill-editor .ql-editor {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.fmt-field { min-width: 0; }
.fmt-input, .fmt-textarea, .fmt-select { max-width: 100%; }

/* Felder */
.fmt-field { display: flex; flex-direction: column; gap: 6px; }
.fmt-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .fmt-field-row { grid-template-columns: 1fr; } }

.fmt-label {
  font-size: .82rem; font-weight: 700; color: var(--fmt-ink);
  letter-spacing: .02em;
}
.fmt-req { color: var(--fmt-danger); }
.fmt-hint { font-size: .78rem; color: var(--fmt-ink-faint); }

/* Ankreuzfeld (z. B. "Oben anheften") */
.fmt-check {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: .9rem; font-weight: 600;
  color: var(--fmt-ink);
}
.fmt-check input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0; cursor: pointer; flex: none;
}

.fmt-input, .fmt-select, .fmt-textarea {
  font-family: var(--fmt-font); font-size: 1rem; color: var(--fmt-ink);
  background: var(--fmt-surface); border: 1.5px solid var(--fmt-border);
  border-radius: var(--fmt-radius); padding: .7em .9em;
  min-height: var(--fmt-tap); width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fmt-input:focus, .fmt-select:focus, .fmt-textarea:focus {
  outline: none; border-color: var(--fmt-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.fmt-input::placeholder, .fmt-textarea::placeholder { color: var(--fmt-ink-faint); }
.fmt-textarea { min-height: 120px; resize: vertical; line-height: 1.55; }

/* --- QUILL EDITOR (Dashboard-Integration) --- */
.fmt-quill-wrap { border: 1.5px solid var(--fmt-border); border-radius: var(--fmt-radius); overflow: hidden; background: var(--fmt-surface); transition: border-color .15s ease, box-shadow .15s ease; }
.fmt-quill-wrap:focus-within { border-color: var(--fmt-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
/* Quill Toolbar */
.fmt-quill-wrap .ql-toolbar.ql-snow { border: none; border-bottom: 1px solid var(--fmt-border-soft); background: var(--fmt-bg); padding: 6px 8px; }
.fmt-quill-wrap .ql-container.ql-snow { border: none; font-family: var(--fmt-font); font-size: 1rem; color: var(--fmt-ink); }
.fmt-quill-wrap .ql-editor { min-height: 180px; padding: .7em .9em; line-height: 1.65; }
.fmt-quill-wrap .ql-editor.ql-blank::before { color: var(--fmt-ink-faint); font-style: normal; }
/* Formatierungen im Editor */
.fmt-quill-wrap .ql-editor h2 { font-size: 1.2rem; font-weight: 700; margin: .75em 0 .25em; }
.fmt-quill-wrap .ql-editor h3 { font-size: 1.05rem; font-weight: 700; margin: .65em 0 .2em; }
.fmt-quill-wrap .ql-editor ul, .fmt-quill-wrap .ql-editor ol { padding-left: 1.4em; }
.fmt-quill-wrap .ql-editor blockquote { border-left: 3px solid var(--fmt-primary); padding-left: .9em; color: var(--fmt-ink-soft); margin: .5em 0; }

/* Aktions-Buttons im Card */
.fmt-form-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 0; }
.fmt-status-info { margin-bottom: 10px; }
.fmt-divider { border: none; border-top: 1px solid var(--fmt-border-soft); margin: 14px 0 14px; }

/* Spin-Animation für Upload-Indikator */
@keyframes fmt-spin { to { transform: rotate(360deg); } }
.fmt-spin { animation: fmt-spin .8s linear infinite; display: inline-block; vertical-align: middle; margin-right: 4px; }

/* --- ÜBERSETZUNGEN --- */
.fmt-lang-card { }
.fmt-lang-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--fmt-border-soft);
}
.fmt-lang-row:last-child { border-bottom: none; }
.fmt-lang-row__flag { width: 24px; flex-shrink: 0; display: flex; align-items: center; }
.fmt-lang-row__flag img { border-radius: 2px; display: block; }
.fmt-lang-code { font-size: .7rem; font-weight: 700; color: var(--fmt-ink-soft); }
.fmt-lang-row__name { flex: 1; font-size: .875rem; color: var(--fmt-ink-soft); }
.fmt-lang-row .fmt-btn--sm { padding: .25em .7em; font-size: .75rem; }

/* Sprachflaggen in der Tabellenliste */
.fmt-lang-flags { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.fmt-lang-flag { display: inline-flex; align-items: center; border-radius: 3px; padding: 1px; opacity: .45; }
.fmt-lang-flag img { border-radius: 2px; display: block; }
.fmt-lang-flag--source { opacity: 1; outline: 2px solid var(--fmt-primary); }
.fmt-lang-flag--exists { opacity: 1; }
.fmt-lang-flag--missing { opacity: .35; filter: grayscale(1); }
.fmt-status-info { margin-bottom: 10px; }

/* --- POSTER-UPLOAD --- */
.fmt-poster-wrap {
  border-radius: var(--fmt-radius); overflow: hidden;
  background: var(--fmt-bg); margin-bottom: 10px;
  aspect-ratio: 3/2;
}
.fmt-poster-preview {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.fmt-poster-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--fmt-ink-faint); font-size: .8rem;
}
.fmt-poster-btns { display: flex; flex-direction: column; gap: 6px; }

/* --- BILD-UPLOAD-ZONE --- */
.fmt-upload-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 28px 16px;
  border: 2px dashed var(--fmt-border); border-radius: var(--fmt-radius-lg);
  background: var(--fmt-bg); cursor: pointer; color: var(--fmt-ink-soft);
  font-size: .9rem; transition: border-color .15s ease, background .15s ease;
  margin-bottom: 16px;
}
.fmt-upload-zone:hover, .fmt-upload-zone.is-dragover {
  border-color: var(--fmt-primary); background: var(--fmt-blue-light);
}

/* Fortschrittsbalken */
.fmt-upload-progress { margin-bottom: 16px; }
.fmt-progress-bar { height: 6px; background: var(--fmt-border); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.fmt-progress-fill { height: 100%; background: var(--fmt-primary); width: 0; border-radius: 3px; transition: width .2s ease; }

/* --- BILDER-GRID --- */
.fmt-image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 480px)  { .fmt-image-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 641px)  { .fmt-image-grid { grid-template-columns: repeat(4, 1fr); } }

.fmt-image-item {
  position: relative; aspect-ratio: 1/1;
  border-radius: var(--fmt-radius); overflow: hidden;
  background: var(--fmt-bg);
}
.fmt-image-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.fmt-image-delete {
  position: absolute; top: 5px; right: 5px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,.55); border: 0; color: #fff;
  display: grid; place-items: center; cursor: pointer;
  opacity: 0; transition: opacity .15s ease;
}
.fmt-image-item:hover .fmt-image-delete { opacity: 1; }
@media (hover: none) { .fmt-image-delete { opacity: 1; } }

.fmt-images-section { margin-top: 0; }

/* --- ALERT / FEEDBACK --- */
.fmt-alert {
  padding: 14px 16px; border-radius: var(--fmt-radius);
  font-weight: 500; margin-bottom: 20px; display: flex; gap: 10px;
}
.fmt-alert--success { background: #DCFCE7; color: #15803D; border: 1px solid #BBF7D0; }
.fmt-alert--error   { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }

/* --- FREIGABEN --- */
.fmt-freigabe-list { display: flex; flex-direction: column; gap: 16px; }
.fmt-freigabe-card {
  background: var(--fmt-surface); border: 1px solid var(--fmt-border);
  border-radius: var(--fmt-radius-lg); padding: 20px;
  box-shadow: var(--fmt-shadow);
}
.fmt-freigabe-card__meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px;
}
.fmt-freigabe-card__title { font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; }
.fmt-freigabe-card__excerpt { color: var(--fmt-ink-soft); font-size: .9rem; margin: 0 0 16px; }
.fmt-freigabe-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fmt-freigabe-card--grouped { border-left: 3px solid var(--fmt-primary); }

/* Sprachzeilen in gruppierter Freigabe-Karte */
.fmt-freigabe-langs { margin: 12px 0 4px; display: flex; flex-direction: column; gap: 0; border: 1px solid var(--fmt-border-soft); border-radius: var(--fmt-radius); overflow: hidden; }
.fmt-freigabe-lang-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--fmt-bg); border-bottom: 1px solid var(--fmt-border-soft); }
.fmt-freigabe-lang-row:last-child { border-bottom: none; }
.fmt-freigabe-lang-row__flag { width: 26px; flex-shrink: 0; display: flex; align-items: center; }
.fmt-freigabe-lang-row__flag img { border-radius: 2px; display: block; }
.fmt-freigabe-lang-row__name { flex: 1; font-size: .875rem; color: var(--fmt-ink-soft); }

/* XS-Buttons für Sprachzeilen */
.fmt-btn--xs { padding: .2em .6em; font-size: .75rem; gap: 4px; }

/* HTML-Quelltext-Ansicht im Editor */
.fmt-html-toggle { margin-top: 6px; }
.fmt-html-source {
  width: 100%;
  min-height: 320px;
  margin-top: 6px;
  padding: 12px;
  border: 1px solid #d8cdb5;
  border-radius: 6px;
  background: #fdfbf7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}

/* --- MODAL --- */
.fmt-modal { display: none; }
.fmt-modal.is-open {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.5);
  display: grid; place-items: center; padding: 20px;
}
.fmt-modal__box {
  background: var(--fmt-surface); border-radius: var(--fmt-radius-lg);
  padding: 28px; max-width: 440px; width: 100%;
  box-shadow: var(--fmt-shadow-md);
}
.fmt-modal__box h3 { margin: 0 0 10px; font-size: 1.1rem; }
.fmt-modal__box p  { color: var(--fmt-ink-soft); margin: 0 0 14px; font-size: .9rem; }
.fmt-modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* --- UTILITIES --- */
.fmt-muted { color: var(--fmt-ink-faint); font-size: .85rem; }

/* ── Bilder sortieren (Ziehen und Ablegen) ── */
.fmt-image-item { cursor: move; }
.fmt-image-placeholder {
  border: 2px dashed var(--fmt-border, #c8b89a);
  border-radius: 8px;
  background: rgba(0, 0, 0, .04);
}
.fmt-image-grid.is-saving { opacity: .6; transition: opacity .15s; }