/* ==========================================================================
   Inserat vorbereiten (js/inserat.js): Formular links, Prüfung und Export rechts.
   Farben nur über die Tokens aus css/app.css.
   ========================================================================== */
.ins { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.ins-form { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ins-gruppe > .h3 { margin: 0 0 10px; font-size: 14px; }
.ins-ki { margin: -4px 0 10px; }
.ins-kopie { margin-left: 6px; width: 22px; height: 22px; border: 0; border-radius: var(--r-klein); background: none; color: var(--ink-3); display: inline-grid; place-items: center; cursor: pointer; vertical-align: middle; }
.ins-kopie:hover { background: var(--hover); color: var(--ink); }
.ins-kopie:focus-visible { outline: none; box-shadow: var(--ring); }
.ins-bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.ins-bild { position: relative; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.ins-bild > img, .ins-pdf { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-mittel); background: var(--inset); }
.ins-pdf { display: grid; place-items: center; align-content: center; gap: 4px; color: var(--ink-3); font-size: 12px; }
.ins-bild input { position: absolute; top: 8px; left: 8px; width: 18px; height: 18px; accent-color: var(--accent); }
.ins-bild input:not(:checked) ~ img, .ins-bild input:not(:checked) ~ .ins-pdf { opacity: .45; }
.ins-bild-name { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-seite { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-gross); background: var(--inset); }
.ins-seite > .h3 { margin: 6px 0 0; font-size: 14px; }
.ins-pruefung { display: flex; flex-direction: column; gap: 6px; }
.ins-hinweis, .ins-ok { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; line-height: 1.4; }
.ins-hinweis .status-dot { margin-top: 5px; flex: none; }
.ins-ok { color: var(--good); font-weight: 560; }
.ins-export { display: flex; flex-direction: column; gap: 8px; }
.ins-export .btn { justify-content: flex-start; }
@media (max-width: 900px) {
  .ins { grid-template-columns: minmax(0, 1fr); }
  .ins-seite { position: static; }
}
/* Portale und „Jetzt inserieren“ */
.ins-portale { display: flex; flex-direction: column; gap: 2px; }
.ins-portal { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; cursor: pointer; }
.ins-portal input { width: 18px; height: 18px; accent-color: var(--accent); }
.ins-jetzt { width: 100%; justify-content: center; }
.ins-erkl { margin: 0; }