/* CROlab: eigene Klassen fuer Hinweise, Vorschau, Code-Bloecke (Filament-CSS enthaelt keine beliebigen Tailwind-Klassen) */
.crolab-note{border-radius:.5rem;padding:.625rem .875rem;font-size:.875rem;line-height:1.35rem;border:1px solid}
.crolab-note-warning{background:#fffbeb;border-color:#fcd34d;color:#78350f}
.crolab-note-info{background:#eff6ff;border-color:#93c5fd;color:#1e3a8a}
.dark .crolab-note-warning{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.4);color:#fde68a}
.dark .crolab-note-info{background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.4);color:#bfdbfe}
.crolab-muted{color:var(--gray-500);font-size:.8125rem}
.crolab-danger{color:var(--danger-600,#e11d48);font-weight:600}
.crolab-warning{color:#b45309;font-weight:600}.dark .crolab-warning{color:#fbbf24}
.crolab-badge{display:inline-block;border-radius:.375rem;padding:.1rem .5rem;font-size:.75rem;font-weight:600;background:var(--gray-100);color:var(--gray-700)}
.crolab-badge-active{background:#dcfce7;color:#166534}.crolab-badge-scheduled{background:#dbeafe;color:#1e40af}.crolab-badge-paused{background:#fef3c7;color:#92400e}
.dark .crolab-badge{background:rgba(255,255,255,.08);color:var(--gray-200)}
.crolab-code{border-radius:.5rem;background:#09090b;color:#f4f4f5;padding:.75rem;overflow:auto;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;max-height:70vh;white-space:pre}
.crolab-errors{border-radius:.5rem;border:1px solid #fda4af;background:#fff1f2;color:#9f1239;padding:.75rem;font-size:.8125rem}
.crolab-errors li{font-family:ui-monospace,Menlo,monospace;font-size:.75rem;margin-left:1rem;list-style:disc}
.crolab-ok{border-radius:.5rem;border:1px solid #86efac;background:#f0fdf4;color:#166534;padding:.5rem .75rem;font-size:.8125rem}
.dark .crolab-errors{background:rgba(244,63,94,.1);border-color:rgba(244,63,94,.4);color:#fecdd3}
.dark .crolab-ok{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.4);color:#bbf7d0}
.crolab-stack>*+*{margin-top:.75rem}
.crolab-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem;font-size:.875rem}
.crolab-kv small{display:block;color:var(--gray-500);font-size:.75rem}
.crolab-kv code{font-family:ui-monospace,Menlo,monospace;word-break:break-all}
.crolab-preview-bar{display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem;flex-wrap:wrap}
.crolab-preview-bar button,.crolab-btn{border:1px solid var(--gray-300);border-radius:.375rem;padding:.25rem .75rem;font-size:.8125rem;background:transparent;color:inherit;cursor:pointer}
.crolab-preview-bar button.is-active{background:var(--primary-400,#d8df21);border-color:var(--primary-500,#c4cb1d);color:#000}
.crolab-preview-stage{background:var(--gray-100);border-radius:.5rem;padding:.75rem;display:flex;justify-content:center}
.dark .crolab-preview-stage{background:rgba(255,255,255,.04)}
.crolab-preview-stage iframe{border:1px solid var(--gray-300);border-radius:.375rem;background:#fff;transition:width .2s}
.crolab-assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem}
.crolab-asset{border:1px solid var(--gray-200);border-radius:.5rem;padding:.5rem;display:flex;flex-direction:column;gap:.375rem;font-size:.75rem}
.crolab-asset img{height:100px;object-fit:contain;background:var(--gray-50);border-radius:.25rem}
.crolab-asset-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crolab-sticky{position:sticky;top:5rem;align-self:start}
.crolab-context{display:flex;align-items:center;gap:.25rem;margin-left:.25rem}
.crolab-site-switch{display:flex;align-items:center;gap:.5rem;border:1px solid var(--gray-200);border-radius:.5rem;padding:.3rem .6rem;background:#fff;cursor:pointer;text-align:left;max-width:16rem}
.dark .crolab-site-switch{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.crolab-site-switch:hover{border-color:var(--gray-300)}
.crolab-site-switch-text{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.crolab-site-switch-text small{font-size:.6875rem;color:var(--gray-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crolab-site-switch-text b{font-size:.8125rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crolab-icon{width:1.1rem;height:1.1rem;color:var(--gray-500);flex-shrink:0}
.crolab-icon-sm{width:1rem;height:1rem;color:var(--gray-400);flex-shrink:0}
.crolab-link{text-decoration:underline;color:inherit}
.crolab-publish-badge{display:inline-flex;align-items:center;gap:.3rem;border-radius:9999px;padding:.25rem .65rem;font-size:.75rem;font-weight:600;white-space:nowrap;border:1px solid transparent}
.crolab-publish-badge .crolab-icon-sm{width:.95rem;height:.95rem;color:currentColor}
.crolab-publish-ok{background:#dcfce7;color:#166534}.dark .crolab-publish-ok{background:rgba(34,197,94,.15);color:#86efac}
.crolab-publish-warn{background:#fef3c7;color:#92400e;border-color:#fcd34d;cursor:pointer}.crolab-publish-warn:hover{background:#fde68a}
.dark .crolab-publish-warn{background:rgba(245,158,11,.15);color:#fcd34d;border-color:rgba(245,158,11,.4)}

/* Kampagnentyp als Karten (A/B-Test, Personalisierung) */
.fi-fo-radio.crolab-type-cards{gap:.75rem!important;margin-top:.375rem}
.crolab-type-cards .fi-fo-radio-label{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 1rem;border:1px solid var(--gray-300);border-radius:.75rem;cursor:pointer;transition:border-color .15s,background-color .15s}
.dark .crolab-type-cards .fi-fo-radio-label{border-color:rgba(255,255,255,.18)}
.crolab-type-cards .fi-fo-radio-label:hover{border-color:var(--primary-400,#d8df21)}
.crolab-type-cards .fi-fo-radio-label:has(input:checked){border-color:var(--primary-400,#d8df21);background:color-mix(in srgb,var(--primary-400,#d8df21) 12%,transparent)}
.crolab-type-cards .fi-fo-radio-label:has(input:disabled){opacity:.6;cursor:default}
.crolab-type-cards .fi-fo-radio-label-text{display:flex;flex-direction:column;gap:.25rem}
.crolab-type-cards .fi-fo-radio-label-text>p:first-child{font-weight:600}

/* A/B-Test: Verteilung Original (Kontrolle) gegen Testvariante */
.crolab-split{display:flex;flex-direction:column;gap:.5rem}
.crolab-split-bar{display:flex;height:2.25rem;border-radius:.5rem;overflow:hidden;border:1px solid var(--gray-300)}
.dark .crolab-split-bar{border-color:rgba(255,255,255,.18)}
.crolab-split-seg{display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:600;white-space:nowrap;overflow:hidden;transition:width .2s}
.crolab-split-control{background:var(--gray-200);color:var(--gray-700)}
.dark .crolab-split-control{background:rgba(255,255,255,.1);color:var(--gray-200)}
.crolab-split-test{background:color-mix(in srgb,var(--primary-400,#d8df21) 45%,transparent)}
.crolab-split-note{font-size:.8125rem;color:var(--gray-500)}

/* Layer-Tabelle in der Kampagne: Zellen nicht umbrechen, bei wenig Platz seitlich scrollen */
.fi-fo-table-repeater{overflow-x:auto}
.fi-fo-table-repeater td,.fi-fo-table-repeater th{white-space:nowrap}
.fi-fo-table-repeater table{min-width:46rem}
.fi-fo-table-repeater td *{white-space:nowrap;overflow-wrap:normal;word-break:normal}

/* Layer-Tabelle: Zeilen mit eigenen Einstellungen haben links einen farbigen Rand, angepasste Werte sind kräftig */
.fi-ta-table tr:has(.crolab-custom), table tr:has(.crolab-custom) { box-shadow: inset 4px 0 0 rgb(245 158 11); }
.fi-fo-table-repeater td .crolab-wrap,.fi-fo-table-repeater td .crolab-wrap *{white-space:normal;overflow-wrap:break-word}
.crolab-badge.crolab-custom{font-weight:600}

/* Reiter mit ungespeicherten Änderungen */
[role=tab].crolab-dirty::after{content:'';display:inline-block;width:.5rem;height:.5rem;margin-left:.4rem;border-radius:9999px;background:#f59e0b;vertical-align:middle}

/* ===== Layer-Editor (Layer und Layer-Templates): feste Kopfzeile, zwei Spalten, Code-Reiter, Vorschau ===== */
:root{--crolab-le-head:5.25rem}
/* Kopfzeile bleibt beim Scrollen oben (Breadcrumb, Titel, Typ, Status, Aktionen) */
.fi-header:has(.crolab-le-title){position:sticky;top:0;z-index:30;background:#fff;padding:.5rem 0 .625rem;align-items:center}
.dark .fi-header:has(.crolab-le-title){background:var(--gray-900)}
.fi-header:has(.crolab-le-title) .fi-header-heading{font-size:1.25rem;line-height:1.75rem}
.crolab-le-title{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.5rem .75rem;vertical-align:middle}
.crolab-le-name{display:inline-flex;align-items:center}
.crolab-le-name-btn{display:inline-flex;align-items:center;gap:.4rem;background:transparent;border:0;padding:.1rem .35rem;margin-left:-.35rem;border-radius:.375rem;cursor:text;font:inherit;color:inherit}
.crolab-le-name-btn:hover,.crolab-le-name-btn:focus-visible{background:var(--gray-100)}
.dark .crolab-le-name-btn:hover,.dark .crolab-le-name-btn:focus-visible{background:rgba(255,255,255,.08)}
.crolab-le-name-btn .crolab-icon-sm{opacity:.5}
.crolab-le-name-input{font:inherit;min-width:16rem;padding:.1rem .5rem;border:1px solid var(--gray-300);border-radius:.375rem;background:#fff;color:#111}
.dark .crolab-le-name-input{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.2)}
.crolab-le-name-input:focus{outline:2px solid #d8df21;outline-offset:1px}
.crolab-le-type{display:inline-block;padding:.1rem .6rem;border-radius:9999px;background:#d8df21;color:#323036;font-weight:600;font-size:.8rem;line-height:1.4}
.crolab-le-dirty{display:inline-flex;align-items:center;gap:.35rem;font-size:.8125rem;font-weight:500;color:#b45309}
.dark .crolab-le-dirty{color:#fbbf24}
.crolab-le-dirty i{width:.5rem;height:.5rem;border-radius:9999px;background:#f59e0b}
.crolab-le-error{font-size:.8125rem;font-weight:500;color:var(--danger-600,#e11d48)}

/* zwei Spalten (ab 1200 px), beide in Bildschirmhöhe; darunter einspaltig untereinander.
   --crolab-le-top (Abstand des Arbeitsbereichs vom Seitenanfang) setzt layer-editor.js, damit die Seite selbst nicht scrollen muss. */
.crolab-le>.fi-grid{grid-template-columns:minmax(0,1fr)!important;gap:1.25rem}
.crolab-le>.fi-grid>.fi-grid-col{grid-column:auto!important}
.crolab-le-code .cm-editor{height:28rem}
.crolab-le-stage{height:28rem}
@media (min-width:1200px){
  .crolab-le>.fi-grid{grid-template-columns:minmax(0,11fr) minmax(0,9fr)!important}
  .crolab-le-right{position:sticky;top:calc(var(--crolab-le-head) + .5rem);align-self:start}
  .crolab-le-code .cm-editor{height:max(18rem,calc(100vh - var(--crolab-le-top,14rem) - 12.25rem))!important}
  .crolab-le-stage{height:max(20rem,calc(100vh - var(--crolab-le-top,14rem) - 8rem))}
}
.crolab-le-code>.fi-grid{gap:0!important}
.crolab-le-code .cm-scroller{overflow:auto}
.crolab-le-code .fi-fo-code-editor{border-radius:0 0 .5rem .5rem}
.crolab-le-code.is-dragging{outline:2px dashed #d8df21;outline-offset:3px;border-radius:.5rem}
.crolab-le-tabs.fi-sc-tabs{box-shadow:none;background:transparent}

/* Code-Reiter: HTML | CSS | JS in einer Leiste, „Bilder“ rechts */
.crolab-le-bar>.fi-grid{display:flex!important;flex-direction:row;align-items:center;justify-content:space-between;gap:.75rem;border-bottom:1px solid var(--gray-200)}
.dark .crolab-le-bar>.fi-grid{border-bottom-color:rgba(255,255,255,.12)}
.crolab-le-bar>.fi-grid>.fi-grid-col{width:auto!important;grid-column:auto!important}
.crolab-le-bar>.fi-grid>.fi-grid-col:first-child{flex:1 1 auto}
.crolab-le-tablist{display:flex;gap:.25rem}
.crolab-le-tab{display:inline-flex;align-items:center;gap:.3rem;padding:.45rem .85rem;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--gray-600);font-size:.875rem;font-weight:500;cursor:pointer;margin-bottom:-1px}
.dark .crolab-le-tab{color:var(--gray-300)}
.crolab-le-tab:hover{color:var(--gray-950)}
.dark .crolab-le-tab:hover{color:#fff}
.crolab-le-tab:focus-visible{outline:2px solid #323036;outline-offset:-2px;border-radius:.25rem}
.crolab-le-tab.is-active{border-bottom-color:#d8df21;color:var(--gray-950)}
.dark .crolab-le-tab.is-active{color:#fff}
.crolab-le-dot{color:#a9b012;font-size:1.1rem;line-height:1}
.crolab-le-bang,.crolab-le-tab.is-error{color:var(--danger-600,#e11d48)}
.crolab-le-bang{font-weight:700}
.crolab-le-hint{margin-top:.5rem}
.crolab-le-hint code{font-size:.75rem}
.crolab-le-hint-drop{opacity:.8}

/* Darstellung */
.crolab-le-display{display:flex;flex-direction:column;gap:1rem}
/* Vorschau */
.crolab-le-toolbar{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap;margin-bottom:.5rem}
.crolab-le-url{display:flex;align-items:center;gap:.4rem;flex:1 1 14rem;min-width:10rem;padding:.3rem .6rem;border:1px solid var(--gray-300);border-radius:.5rem;background:#fff}
.dark .crolab-le-url{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18)}
.crolab-le-url:focus-within{outline:2px solid #d8df21;outline-offset:1px}
.crolab-le-url input{flex:1;min-width:0;border:0;background:transparent;outline:0;font-size:.875rem;color:inherit}
.crolab-le-info{display:inline-flex;cursor:help;padding:.15rem;border-radius:.25rem}
.crolab-le-info:focus-visible{outline:2px solid #323036}
.crolab-le-url-empty{flex:1 1 auto}
.crolab-le-seg{display:inline-flex;border:1px solid var(--gray-300);border-radius:.5rem;overflow:hidden;margin-left:.25rem}
.crolab-le-seg button{padding:.3rem .7rem;font-size:.8125rem;background:transparent;border:0;color:inherit;cursor:pointer}
.crolab-le-seg button.is-active{background:#d8df21;color:#323036;font-weight:600}
.crolab-le-seg button:focus-visible{outline:2px solid #323036;outline-offset:-2px}
.crolab-le-stage{background:var(--gray-100);border-radius:.5rem;padding:.5rem;display:flex;justify-content:center}
.dark .crolab-le-stage{background:rgba(255,255,255,.04)}
.crolab-le-stage iframe{border:1px solid var(--gray-300);border-radius:.375rem;background:#fff;height:100%;transition:width .2s}

.crolab-le .sr-only,.crolab-le-title .sr-only,.crolab-le-tablist .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}
.crolab-le-tabs .fi-tabs{margin-inline:0!important;justify-content:flex-start;width:fit-content!important;max-width:100%}

/* Meldungen (Toasts) auf CROlab-Seiten unten rechts statt oben: oben verdecken sie Speichern, Preview und die Aktionen im Seitenkopf */
body:has(.crolab-context) .fi-no, body:has(.crolab-le) .fi-no{flex-direction:column;justify-content:flex-end}