/* BSW-CMS – Oberfläche des Editors */

:root {
  --ink: #16191d;
  --ink-soft: #4a5058;
  --ink-mute: #79808a;
  --line: #e2e5ea;
  --line-strong: #cbd1d9;
  --bg: #f4f6f8;
  --panel: #ffffff;
  --accent: #0b7a3b;
  --accent-dark: #075c2c;
  --accent-soft: #e8f4ec;
  --danger: #b02a2a;
  --warn: #b45309;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px -14px rgba(16,24,40,.25);
  --topbar-h: 3.5rem;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

/* ---------------------------------------------------------------- *
 * Grundelemente
 * ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: #f7f8fa; border-color: var(--ink-mute); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--ghost:hover { background: rgba(0,0,0,.05); border-color: transparent; }
.btn--danger { color: var(--danger); border-color: #f0d0d0; }
.btn--danger:hover { background: #fdf2f2; border-color: var(--danger); }
.btn--sm { padding: .3rem .6rem; font-size: .78rem; }
.btn--block { width: 100%; }
.btn--icon { padding: .3rem .45rem; font-size: .9rem; line-height: 1; }

.field { display: block; margin-bottom: .9rem; }
.field__label {
  display: block;
  margin-bottom: .3rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-soft);
}
.field__input, .field__area, .field__select {
  width: 100%;
  padding: .5rem .65rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit;
  color: var(--ink);
}
.field__area { resize: vertical; min-height: 4.5rem; line-height: 1.55; }
.field__input:focus, .field__area:focus, .field__select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field__hint { margin: .3rem 0 0; font-size: .76rem; color: var(--ink-mute); }
.field--mono .field__area { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .82rem; }

.field--toggle { display: flex; align-items: center; gap: .5rem; }
.field--toggle .field__label { margin: 0; font-weight: 600; color: var(--ink); }

.search {
  width: 100%;
  padding: .55rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  background: #fff;
}
.search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------------------------------------------------------------- *
 * Anmeldung
 * ---------------------------------------------------------------- */

.gate { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem; }
.gate__card {
  width: 100%;
  max-width: 22rem;
  padding: 2rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.gate__title { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }
.gate__sub { margin: .25rem 0 1.5rem; color: var(--ink-mute); font-size: .88rem; }
.gate__error {
  margin: 0 0 .9rem;
  padding: .55rem .7rem;
  border-radius: var(--radius-sm);
  background: #fdf2f2;
  border: 1px solid #f0d0d0;
  color: var(--danger);
  font-size: .84rem;
}

/* ---------------------------------------------------------------- *
 * Kopfleiste
 * ---------------------------------------------------------------- */

.screen { display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--topbar-h);
  padding: 0 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.topbar__left, .topbar__right { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.topbar__left { flex: 1; }
.topbar__sep { width: 1px; height: 1.4rem; background: var(--line); }
.topbar__title { font-weight: 600; color: var(--ink-soft); }
.brand { font-weight: 800; letter-spacing: -.02em; }

.titleinput {
  flex: 1;
  min-width: 8rem;
  max-width: 34rem;
  padding: .35rem .55rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  font-size: .98rem;
  font-weight: 600;
  color: var(--ink);
}
.titleinput:hover { background: #f4f6f8; }
.titleinput:focus { outline: none; background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.badge {
  padding: .15rem .5rem;
  border-radius: 999px;
  background: #eef1f5;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge.is-published { background: #eef6f0; color: #14663a; }
.badge.is-stale { background: #fdf1e3; color: #8a4b06; }

.savestate { font-size: .8rem; color: var(--ink-mute); min-width: 6rem; text-align: right; }
.savestate.is-dirty { color: var(--warn); font-weight: 600; }
.savestate.is-saved { color: var(--accent); }

.feedstatus { font-size: .78rem; color: var(--ink-mute); }

/* ---------------------------------------------------------------- *
 * Beitragsübersicht
 * ---------------------------------------------------------------- */

.listwrap { flex: 1; width: 100%; max-width: 64rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.listwrap--wide { max-width: 84rem; }

/* Mediathek */

.libstats { font-size: .8rem; color: var(--ink-mute); white-space: nowrap; }

.libbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.libbar .search { flex: 1; }

.libgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

.libcard {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.libcard--unused { border-style: dashed; border-color: var(--line-strong); }

.libcard__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.libcard__media img { width: 100%; height: 100%; object-fit: contain; }
.libcard__media--broken img { display: none; }
.libcard__broken { font-size: .78rem; color: var(--ink-mute); }

.libcard__body { flex: 1; padding: .7rem .8rem; }
.libcard__name {
  margin: 0 0 .2rem;
  font-size: .85rem;
  font-weight: 650;
  word-break: break-all;
}
.libcard__meta { margin: 0 0 .5rem; font-size: .76rem; color: var(--ink-mute); }
.libcard__warn { margin: 0 0 .4rem; font-size: .76rem; font-weight: 600; color: var(--warn); }

.libcard__usagehead { margin: 0 0 .2rem; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-mute); }
.libcard__posts { margin: 0; padding: 0; list-style: none; font-size: .8rem; }
.libcard__posts li { margin-bottom: .15rem; }
.libcard__unused { margin: 0; font-size: .8rem; font-style: italic; color: var(--ink-mute); }
.libcard__draft {
  margin-left: .35rem;
  padding: 0 .3rem;
  border-radius: 3px;
  background: #eef1f5;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.linkbtn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .8rem;
  color: var(--accent-dark);
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.linkbtn:hover { color: var(--accent); }

.libcard__tools {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .6rem .8rem;
  border-top: 1px solid var(--line);
  background: #fbfcfd;
}
/* Mit dem dritten Knopf wird es in der Karte eng: lieber umbrechen als
   die Beschriftungen abschneiden. */
.libcard__tools .btn { flex: 1 1 6rem; }
/* Der Download ist ein <a> - ohne das hier trüge er die Linkunterstreichung. */
.libcard__tools a.btn { text-decoration: none; }
.listwrap__head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.listwrap__head .search { flex: 1; }

/* Artikelübersicht */

.prodlist { display: flex; flex-direction: column; gap: .4rem; }
.prodrow {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}
/* Nur eine Kante, keine Fläche: Ein Hinweis ist kein Fehler, sondern ein
   Blick wert. Rot hinterlegte Zeilen liest man nach einer Woche nicht mehr. */
.prodrow--warn { border-left: 3px solid var(--accent); }

.prodrow__media { width: 3.2rem; height: 3.2rem; flex: none; display: grid; place-items: center; background: var(--panel); border-radius: var(--radius-sm); overflow: hidden; }
.prodrow__media img { width: 100%; height: 100%; object-fit: contain; }

.prodrow__body { flex: 1; min-width: 0; }
.prodrow__title { margin: 0; font-size: .92rem; font-weight: 650; }
.prodrow__meta { margin: .15rem 0 0; font-size: .78rem; color: var(--ink-mute); }
.prodrow__usage { margin: .3rem 0 0; font-size: .78rem; color: var(--ink-soft); }
.prodrow__hint { margin: .3rem 0 0; font-size: .8rem; color: var(--accent-dark); }

.prodrow__state { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.prodrow__link { font-size: .78rem; color: var(--accent-dark); }

.prodbadge {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}
.prodbadge--ok { background: #eef6f0; color: #14663a; }
.prodbadge--warn { background: #fdf6ec; color: #8a5a06; }
.prodbadge--bad { background: var(--accent-soft); color: var(--accent-dark); }

@media (max-width: 700px) {
  .prodrow { flex-wrap: wrap; }
  .prodrow__state { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}

/* Legende der Artikelübersicht */

.prodlegend {
  margin-bottom: .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}
.prodlegend__toggle {
  padding: .6rem .85rem;
  font-size: .85rem;
  font-weight: 650;
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.prodlegend__toggle::-webkit-details-marker { display: none; }
.prodlegend__toggle::before {
  content: "";
  width: .45rem; height: .45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
.prodlegend[open] .prodlegend__toggle::before { transform: rotate(45deg); }

.prodlegend__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.1rem 1.6rem;
  padding: 0 .85rem .9rem;
  border-top: 1px solid var(--line);
  padding-top: .9rem;
}
.prodlegend__head { margin: 0 0 .15rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute); }
.prodlegend__note { margin: .2rem 0 .5rem; font-size: .78rem; color: var(--ink-mute); }
.prodlegend__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .45rem; }
/* Die Kennzeichnung steht in einer eigenen Spalte, damit die Erklärungen
   darunter bündig beginnen und nicht um verschieden breite Chips herumfliessen. */
.prodlegend__list li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .5rem; align-items: start; font-size: .8rem; color: var(--ink-soft); }
.prodlegend__list .prodbadge { justify-self: start; }
.prodlegend__foot { grid-column: 1 / -1; margin: 0; padding-top: .3rem; border-top: 1px solid var(--line); font-size: .78rem; color: var(--ink-mute); }

/* Fortschritt des Feed-Abgleichs */

.syncbar {
  margin-bottom: 1.25rem;
  padding: .9rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.syncbar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .55rem;
}
.syncbar__label { font-weight: 650; font-size: .9rem; }
.syncbar__count { font-size: .84rem; color: var(--ink-mute); font-variant-numeric: tabular-nums; }

.syncbar__track {
  height: .5rem;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.syncbar__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width .4s ease;
}

/* Solange die Gesamtzahl unbekannt ist: laufende Animation statt falscher
   Prozentangabe - der erste Abgleich kennt die Laenge des Feeds noch nicht. */
.syncbar--unknown .syncbar__fill {
  width: 35%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: syncslide 1.4s linear infinite;
}
@keyframes syncslide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(320%); }
}

.syncbar--done .syncbar__fill { background: var(--accent-dark); }
.syncbar--error .syncbar__fill { background: var(--danger); width: 100%; }

.syncbar__note { margin: .5rem 0 0; font-size: .78rem; color: var(--ink-mute); }

.postlist { display: flex; flex-direction: column; gap: .5rem; }

.postcard {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.postcard:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.postcard { cursor: default; }
.postcard__open {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.postcard__main { flex: 1; min-width: 0; }
.postcard__title { font-weight: 650; margin: 0 0 .1rem; }
.postcard__meta { margin: 0; font-size: .78rem; color: var(--ink-mute); }
.postcard__actions { display: flex; gap: .35rem; }

.empty { color: var(--ink-mute); font-size: .88rem; padding: 2rem 0; text-align: center; }

/* ---------------------------------------------------------------- *
 * Editor-Layout
 * ---------------------------------------------------------------- */

.editor__body {
  flex: 1;
  display: grid;
  grid-template-columns: 17rem minmax(20rem, 1fr) minmax(24rem, 1.15fr);
  min-height: 0;
  height: calc(100vh - var(--topbar-h));
}

.pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: var(--panel);
}
.pane--preview { border-right: 0; background: var(--bg); }

.pane__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.pane__title { margin: 0; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); }

/* Bausteinliste */

.blocklist { flex: 1; overflow-y: auto; margin: 0; padding: .5rem; list-style: none; }

.blockitem {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .42rem .6rem;
  margin-bottom: .2rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.blockitem:hover { background: #f4f6f8; }
.blockitem.is-active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.blockitem.is-dragging { opacity: .4; }
.blockitem.is-dropbefore { box-shadow: 0 -2px 0 var(--accent); }
.blockitem.is-dropafter { box-shadow: 0 2px 0 var(--accent); }

.blockitem__icon {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  border-radius: 5px;
  background: #eef1f5;
  color: var(--ink-soft);
  font-size: .8rem;
}
.blockitem.is-active .blockitem__icon { background: var(--accent); color: #fff; }
/* Flex statt Inline: Nur so greift die Kürzung mit "…" bei langen Namen
   ("Freies HTML: Clerk: …"), statt die Liste seitlich zu verbreitern. */
.blockitem__body { flex: 1; min-width: 0; display: flex; align-items: center; gap: .35rem; }
/* Ohne zweite Zeile trägt der Bausteinname die Zeile allein und darf
   deshalb kräftiger stehen als vorher, wo er nur die Beschriftung über
   der Zusammenfassung war. */
.blockitem__type {
  font-size: .85rem;
  font-weight: 650;
  color: var(--ink);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blockitem.is-active .blockitem__type { color: var(--accent-dark); }
.blockitem__drag { cursor: grab; color: var(--line-strong); font-size: .9rem; padding: 0 .1rem; }
.blockitem__drag:active { cursor: grabbing; }

.addwrap { position: relative; }
.addmenu {
  position: absolute;
  right: 0;
  top: calc(100% + .35rem);
  z-index: 20;
  width: 14rem;
  max-height: 24rem;
  overflow-y: auto;
  padding: .3rem;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.addmenu__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .45rem .5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.addmenu__item:hover { background: var(--accent-soft); }
.addmenu__item:disabled { opacity: .4; cursor: not-allowed; }
.addmenu__desc { display: block; font-size: .74rem; color: var(--ink-mute); }

/* Formular */

.pane--form { overflow-y: auto; }
.blockform { padding: 1.1rem 1.25rem 4rem; }

.blockform__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--line);
}
.blockform__title { margin: 0; font-size: 1rem; font-weight: 700; }
.blockform__desc { margin: .2rem 0 0; font-size: .8rem; color: var(--ink-mute); }
.blockform__note {
  margin: 0 0 1.1rem;
  padding: .65rem .8rem;
  border: 1px solid #f0dcb8;
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  background: #fdf8ef;
  font-size: .82rem;
  color: #7a5410;
}

.fieldset {
  margin: 0 0 1rem;
  padding: .8rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fbfcfd;
}
.fieldset__legend {
  padding: 0 .3rem;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-mute);
}

/* Textfeld mit Formatierung */

.rte__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem;
  padding: .3rem;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: #fbfcfd;
}
.rte__btn {
  min-width: 1.9rem;
  padding: .28rem .5rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  font-size: .82rem;
  line-height: 1.2;
  color: var(--ink-soft);
  cursor: pointer;
}
.rte__btn:hover { background: #eef1f5; color: var(--ink); }
.rte__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rte__btn.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
.rte__btn--toggle { margin-left: auto; font-family: ui-monospace, Menlo, Consolas, monospace; }
.rte__sep { width: 1px; height: 1.1rem; margin: 0 .25rem; background: var(--line); }

.rte__area {
  padding: .6rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: #fff;
  line-height: 1.6;
  overflow-y: auto;
  max-height: 28rem;
}
.rte__area:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rte__area > * { margin: 0 0 .7rem; }
.rte__area > *:last-child { margin-bottom: 0; }
.rte__area ul, .rte__area ol { padding-left: 1.4rem; }
.rte__area li { margin-bottom: .2rem; }
.rte__area a { color: var(--accent-dark); }
.rte__area:empty::before {
  content: attr(aria-label);
  color: var(--ink-mute);
  opacity: .55;
}
.rte__source {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .82rem;
}

/* Tabellenraster */

.grid__scroll { overflow-x: auto; padding-bottom: .2rem; }
.grid { border-collapse: separate; border-spacing: .25rem; }
.grid th, .grid td { padding: 0; }
.grid__corner { width: 2rem; }

.grid__input {
  width: 100%;
  min-width: 8rem;
  padding: .4rem .5rem;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #fff;
  font: inherit;
  font-size: .85rem;
}
.grid__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.grid__input--head { font-weight: 650; background: #fbfcfd; }

.grid__rownum {
  width: 2rem;
  text-align: right;
  font-size: .75rem;
  color: var(--ink-mute);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.grid__drop {
  margin-left: .15rem;
  padding: 0 .25rem;
  border: 0;
  background: transparent;
  color: var(--line-strong);
  font: inherit;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
}
.grid__drop:hover { color: var(--danger); }
.grid th .grid__drop { display: block; margin: .15rem auto 0; }

.grid__tools { display: flex; gap: .4rem; margin-top: .6rem; }

.rowlist { display: flex; flex-direction: column; gap: .45rem; }
.rowitem { display: flex; align-items: flex-start; gap: .4rem; }
.rowitem .field__input, .rowitem .field__area { flex: 1; }
.rowitem__num {
  width: 1.5rem;
  padding-top: .5rem;
  flex: none;
  font-size: .76rem;
  color: var(--ink-mute);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.subitem {
  padding: .65rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}
.subitem__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.subitem__label { font-size: .74rem; font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .04em; }
.subitem__tools { display: flex; gap: .2rem; }
.subitem .field:last-child { margin-bottom: 0; }

/* Produkt- und Bildauswahl im Formular */

.pickbox {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
}
.pickbox__img {
  width: 3rem; height: 3rem;
  flex: none;
  object-fit: contain;
  background: #f4f6f8;
  border-radius: 5px;
}
.pickbox__body { flex: 1; min-width: 0; }
.pickbox__title { font-weight: 650; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pickbox__meta { font-size: .76rem; color: var(--ink-mute); }
.pickbox--empty { color: var(--ink-mute); font-size: .85rem; justify-content: space-between; }

/* Vorschau */

.previewwrap { flex: 1; overflow: hidden; display: grid; place-items: start center; padding: 1rem; }
.previewwrap.is-mobile { padding: 1rem 0; }
#preview, #hub-preview {
  width: 100%;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: width .18s ease;
}
.previewwrap.is-mobile #preview,
.previewwrap.is-mobile #hub-preview { width: 390px; max-width: 100%; }

.previewbar { display: flex; align-items: center; gap: .4rem; }

/* Vollbild: die Vorschau legt sich über den ganzen Editor. Der
   Bearbeitungsstand bleibt unberührt, es ändert sich nur, was man sieht. */
.pane--preview.is-full {
  position: fixed;
  inset: 0;
  z-index: 60;
  /* Auf schmalen Bildschirmen bekommt die Vorschau weiter unten `height: 70vh`.
     Ohne diese beiden Zeilen bliebe es dabei und das Vollbild wäre keins -
     `inset` bestimmt die Größe nur, solange keine Maße gesetzt sind. */
  width: auto;
  height: auto;
  border: 0;
  background: var(--bg);
}
.pane--preview.is-full .previewwrap { padding: 1.5rem; }
.pane--preview.is-full .previewwrap.is-mobile { padding: 1.5rem 0; }
/* Der Rahmen um das iframe ist im Vollbild nur noch Störung. */
.pane--preview.is-full #preview { border-radius: 0; border: 0; }
.pane--preview.is-full .previewwrap.is-mobile #preview { border: 1px solid var(--line); border-radius: var(--radius); }
.has-fullpreview { overflow: hidden; }

.viewswitch { display: flex; gap: .2rem; }
.viewswitch .btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------------------------------------------------------------- *
 * Dialoge
 * ---------------------------------------------------------------- */

.dlg {
  width: min(38rem, calc(100vw - 2rem));
  max-height: min(80vh, 48rem);
  padding: 0 1.25rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -20px rgba(16,24,40,.4);
  color: var(--ink);
}
.dlg--wide { width: min(52rem, calc(100vw - 2rem)); }
.dlg::backdrop { background: rgba(16,24,40,.45); }

.dlg__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0 .8rem;
  margin-bottom: .8rem;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.dlg__title { margin: 0; font-size: 1rem; font-weight: 700; }
.dlg__actions { display: flex; gap: .5rem; margin-top: .9rem; }

.productlist, .medialist { margin-top: .8rem; max-height: 26rem; overflow-y: auto; display: flex; flex-direction: column; gap: .35rem; }

.productrow {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  padding: .55rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.productrow:hover { border-color: var(--accent); background: var(--accent-soft); }
.productrow__img { width: 2.75rem; height: 2.75rem; flex: none; object-fit: contain; background: #f4f6f8; border-radius: 5px; }
.productrow__body { flex: 1; min-width: 0; }
.productrow__title { font-weight: 650; font-size: .87rem; }
.productrow__meta { font-size: .76rem; color: var(--ink-mute); }
.productrow__price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.medialist { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .6rem; }
.mediacard { padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; cursor: pointer; overflow: hidden; }
.mediacard:hover { border-color: var(--accent); }
.mediacard img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.mediacard__name { padding: .3rem .4rem; font-size: .72rem; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.uploadrow { display: flex; gap: .5rem; align-items: center; }
.dlg__hint { margin: .55rem 0 .3rem; font-size: .78rem; color: var(--ink-mute); }
.dlg__hint code { padding: .05rem .3rem; border-radius: 3px; background: #eef1f5; font-size: .95em; }

.ftphint {
  margin: .7rem 0 .3rem;
  padding: .8rem .9rem;
  border: 1px solid #bcdcc7;
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}
.ftphint__head { margin: 0 0 .3rem; font-weight: 700; font-size: .88rem; }
.ftphint__text { margin: 0 0 .35rem; font-size: .82rem; color: var(--ink-soft); }
.ftphint__warn { margin: 0 0 .4rem; font-size: .82rem; font-weight: 600; color: var(--warn); }
.ftphint__url {
  display: block;
  margin-bottom: .5rem;
  padding: .45rem .55rem;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #fff;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .78rem;
  word-break: break-all;
}
.uploadrow .field__input { flex: 1; }

.modes { display: grid; gap: .5rem; margin-bottom: 1rem; }
.mode {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .2rem .6rem;
  padding: .7rem .85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.mode:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.mode input { grid-row: 1 / span 2; align-self: center; }
.mode__title { font-weight: 700; font-size: .88rem; }
.mode__title em { font-style: normal; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-dark); margin-left: .3rem; }
.mode__desc { font-size: .78rem; color: var(--ink-soft); }

.exportmeta { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-bottom: .6rem; font-size: .78rem; color: var(--ink-mute); }
.exportmeta strong { color: var(--ink); font-weight: 650; }
.exportmeta .is-warn { color: var(--warn); }

.codebox {
  width: 100%;
  height: 15rem;
  padding: .7rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .76rem;
  line-height: 1.5;
  resize: vertical;
  background: #fbfcfd;
}

/* ---------------------------------------------------------------- *
 * Hinweise
 * ---------------------------------------------------------------- */

.toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 100; display: flex; flex-direction: column; gap: .5rem; }
.toast {
  padding: .6rem .9rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #fff;
  font-size: .84rem;
  box-shadow: var(--shadow);
  animation: toastin .16s ease;
}
.toast--error { background: var(--danger); }
.toast--ok { background: var(--accent-dark); }
@keyframes toastin { from { opacity: 0; transform: translateY(6px); } }

/* ---------------------------------------------------------------- *
 * Zwei Sprachen
 * ---------------------------------------------------------------- */

.langswitch {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #f4f6f8;
}
.langswitch__btn {
  padding: .2rem .55rem;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
}
.langswitch__btn:hover { color: var(--ink); }
.langswitch__btn.is-active { background: #fff; color: var(--accent-dark); box-shadow: 0 1px 2px rgba(16,24,40,.12); }
/* Sprache noch nicht eingeschaltet: anklickbar, aber erkennbar "aus". */
.langswitch__btn.is-off { color: var(--ink-mute); text-decoration: line-through; text-decoration-thickness: 1px; }
.langswitch__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* In der englischen Ansicht trägt der Editor eine dezente Markierung,
   damit niemand versehentlich die falsche Fassung bearbeitet. */
.editor[data-lang="en"] .topbar { box-shadow: inset 0 -3px 0 #3b6fd8; }
.editor[data-lang="en"] .pane--form { background: #fbfcff; }

.langchips { display: inline-flex; gap: .25rem; flex-shrink: 0; }
.langchip {
  padding: .1rem .45rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.langchip.is-ok { background: #eef6f0; color: #14663a; }
.langchip.is-stale { background: #fdf1e3; color: #8a4b06; }
.langchip.is-new { background: #fff; color: var(--ink-mute); border-color: var(--line-strong); }

.blockitem__only {
  flex-shrink: 0;
  padding: 0 .35rem;
  border-radius: 4px;
  background: #eef1f5;
  color: var(--ink-mute);
  font-size: .68rem;
  font-weight: 700;
}
.blockitem__missing {
  flex-shrink: 0;
  min-width: 1.35rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: #fdf1e3;
  color: #8a4b06;
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
}
.blockitem.is-otherlang { opacity: .5; }

.blockform__lang {
  margin: 0 0 1rem;
  padding: .5rem .75rem;
  border-left: 3px solid #3b6fd8;
  border-radius: var(--radius-sm);
  background: #eef3fd;
  font-size: .8rem;
  color: #23427f;
}

.field--translated > .field__label { color: #23427f; }
.field__ref {
  display: flex;
  gap: .5rem;
  margin-top: .35rem;
  padding: .4rem .55rem;
  border-radius: 5px;
  background: #f1f3f6;
  font-size: .78rem;
  color: var(--ink-soft);
}
.field__reflabel {
  flex-shrink: 0;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-mute);
  padding-top: .1rem;
}
.field__reftext { white-space: pre-line; overflow-wrap: anywhere; }
.field__hint.is-warn { color: var(--warn); font-weight: 600; }

.subitem__shared { margin: 0 0 .5rem; font-size: .78rem; color: var(--ink-mute); }

.sharedbox {
  margin: .5rem 0 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0 .8rem;
}
.sharedbox[open] { padding-bottom: .6rem; }
.sharedbox__head {
  padding: .55rem 0;
  font-size: .8rem;
  font-weight: 650;
  color: var(--ink-soft);
  cursor: pointer;
}

.field--langs { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); }

.missinglist { flex-basis: 100%; font-size: .78rem; color: var(--ink-soft); }
.missinglist summary { cursor: pointer; color: var(--warn); font-weight: 600; }
.missinglist ul { margin: .4rem 0 0; padding-left: 1.1rem; max-height: 12rem; overflow-y: auto; }

/* ---------------------------------------------------------------- *
 * Übersichtsseite und neuer Beitrag
 * ---------------------------------------------------------------- */

.hub__body { grid-template-columns: minmax(22rem, 1fr) minmax(24rem, 1.5fr); }
.hub__body .pane--form { padding: 0; }

.hubstatus {
  margin-bottom: 1rem;
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}
.hubstatus__line { margin: 0 0 .3rem; font-size: .82rem; color: var(--ink-soft); }
.hubstatus__line:last-child { margin-bottom: 0; }
.hubstatus__line.is-warn { color: var(--warn); }

.newform { display: flex; flex-direction: column; gap: .2rem; }
.newform .dlg__head { margin-bottom: .6rem; }

@media (max-width: 1180px) {
  .editor__body { grid-template-columns: 14rem 1fr; height: auto; }
  .hub__body { grid-template-columns: 1fr; }
  .pane--preview { grid-column: 1 / -1; height: 70vh; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .editor__body { grid-template-columns: 1fr; }
  .pane--blocks { max-height: 18rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}