/* =============================================================
   FUNNELS OG SIDER - se sider.js
   Al farve kommer fra skallens variabler (app.css), så lys og mørk
   følger med. Kun lærredet og miniaturerne viser SIDEN og har derfor
   sidens egne farver.
   ============================================================= */

/* ---------- TILPASNINGSLAGET ----------
   Sidebyggeren er flyttet hertil fra et ældre bagrum med andre grundregler.
   Det, den forventer derfra, står HER og kun under .sf-rum - i :where(), så
   reglerne aldrig vejer tungere end modulets egne og aldrig rammer skallen.
   .sf-rum sidder på modulets egne billeder (en funnel, indstillinger,
   skabeloner), på cellerne i funnel-listen, på editorens skelet og på
   modulets dialoger. */
.sf-rum{
  --tekst-2:var(--daempet); --accent:var(--farve); --graa:var(--daempet);
  --kant-felt:color-mix(in srgb, var(--kant) 55%, var(--daempet)); --skille:var(--kant); --flade-2:var(--bund);
  --god-bg:transparent; --god-kant:var(--god); --advar:var(--advarsel); --advar-bg:transparent; --advar-kant:var(--advarsel);
  --r:.6rem; --r-lille:.4rem; --skrift-kode:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
:where(.sf-rum) :where(h3,h4,p,ul,ol,fieldset,legend,figure,blockquote){ margin:0; padding:0; }
:where(.sf-rum) [hidden]{ display:none !important; }
:where(.sf-rum) small{ display:inline; color:inherit; }
:where(.sf-rum) button{ font:inherit; color:inherit; cursor:pointer; }
:where(.sf-rum) textarea{ font:inherit; color:inherit; background:var(--flade); border:1px solid var(--kant-felt); border-radius:var(--r-lille); padding:.5rem .6rem; width:100%; resize:vertical; }
:where(.sf-rum) input:where([type=checkbox],[type=radio],[type=range],[type=color],[type=file]){ width:auto; padding:0; border:0; background:none; }
:where(.sf-rum) .knap{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; background:var(--farve); border-color:var(--farve); color:var(--farve-tekst); font-weight:600; }
:where(.sf-rum) .knap.rolig{ background:var(--flade); border-color:var(--kant); color:var(--tekst); font-weight:500; }
:where(.sf-rum) .knap.rolig:hover{ background:var(--bund); }
:where(.sf-rum) .knap.lille{ padding:.3rem .7rem; font-size:13px; }
:where(.sf-rum) .status{ font-size:14px; color:var(--daempet); }
:where(.sf-rum) .status.fejl{ color:var(--fejl); }
:where(.sf-rum) .status.god{ color:var(--god); }
:where(.sf-rum) .tomt{ color:var(--daempet); padding:30px 4px; text-align:center; }

.sf-celle{ display:flex; align-items:center; gap:.3rem; }
.hoejre > .sf-celle{ justify-content:flex-end; }
.sf-midtfor{ justify-content:center; }
.sf-domænenote{ font-size:13px; color:var(--advarsel); margin-top:8px; text-align:left; }
.sf-fod{ color:var(--daempet); }

.sf-ik{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-3px; flex:none; }
#sider-status:empty{ display:none; }
#sider-status{ display:block; margin:0 0 12px; }
#sider-status.fejl{ color:var(--fejl); }
.sf-svag{ color:var(--graa, #a8968a); }
.sf-maerke{ display:inline-block; font-size:11px; font-weight:600; padding:2px 9px; border-radius:999px; background:var(--advar-bg); color:var(--advar); border:1px solid var(--advar-kant); white-space:nowrap; vertical-align:2px; }
.sf-maerke.god{ background:var(--god-bg); color:var(--god); border-color:var(--god-kant); }
.sf-link{ background:none; border:0; padding:0; font:inherit; font-weight:600; color:var(--tekst); cursor:pointer; text-align:left; }
.sf-link:hover{ color:var(--accent); text-decoration:underline; }
.sf-ikonknap{ width:34px; height:34px; display:inline-grid; place-items:center; border-radius:9px; border:1px solid transparent; background:transparent; color:var(--tekst-2); cursor:pointer; }
.sf-ikonknap:hover{ background:var(--flade-2, #f8f1e7); border-color:var(--kant); color:var(--tekst); }
.sf-farlig{ color:var(--fejl) !important; }

/* ---------- Miniaturen ---------- */
.sf-mini{ position:relative; overflow:hidden; border-radius:8px; border:1px solid var(--kant); background:#fff; color:#16191f; color-scheme:light; flex:none; }
.sf-mini iframe{ border:0; transform-origin:0 0; pointer-events:none; position:absolute; left:0; top:0; }
.sf-mini-tom{ position:absolute; inset:0; display:grid; place-items:center; font-size:11px; color:var(--tekst-2); }
.sf-mini-knap{ padding:0; border:0; background:none; cursor:pointer; display:block; border-radius:9px; }
.sf-mini-knap:hover .sf-mini{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }

/* ---------- Listen ---------- */
.sf-faner{ display:flex; gap:4px; }
.sf-faner button{ font:inherit; font-size:14px; padding:7px 14px; border-radius:9px; border:1px solid transparent; background:none; color:var(--tekst-2); cursor:pointer; }
.sf-faner button[aria-selected="true"]{ background:var(--flade); border-color:var(--kant); color:var(--tekst); font-weight:600; }
.sf-søg{ width:100%; font:inherit; padding:11px 14px; border:1px solid var(--kant-felt); border-radius:var(--r-lille, 10px); background:var(--flade); margin-bottom:14px; }
.sf-t-navn{ min-width:0; }
.sf-t-navn > div:first-child{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sf-url{ font-family:var(--skrift-kode); font-size:12px; color:var(--tekst-2); margin-top:3px; overflow-wrap:anywhere; }
.sf-dato{ font-size:12px; color:var(--tekst-2); margin-top:2px; }

/* ---------- En funnel: trinene lodret ---------- */
.sf-fv-top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.sf-fv-top h3{ margin:0; font-size:20px; }
.sf-skub{ margin-left:auto; }
.sf-flow{ display:flex; flex-direction:column; align-items:center; padding:12px 0 40px; }
.sf-start, .sf-trinkort{ width:min(440px, 100%); background:var(--flade); border:1px solid var(--kant); border-radius:var(--r, 16px); box-shadow:0 1px 2px rgba(0,0,0,.05); }
.sf-start{ padding:16px; text-align:center; }
.sf-start-titel{ font-weight:600; color:var(--tekst-2); margin-bottom:10px; }
.sf-url-felt{ font-family:var(--skrift-kode); font-size:12px; padding:8px 10px; border:1px solid var(--kant); border-radius:8px; background:var(--flade); overflow-wrap:anywhere; text-align:left; }
.sf-start-knapper{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
.sf-start-knapper .knap{ display:inline-flex; align-items:center; gap:6px; }
.sf-plus{ display:flex; flex-direction:column; align-items:center; }
.sf-plus::before, .sf-plus::after{ content:''; width:2px; height:18px; background:var(--kant); }
.sf-plus button{ width:30px; height:30px; border-radius:50%; border:1px solid var(--kant-felt); background:var(--flade); color:var(--tekst-2); display:grid; place-items:center; cursor:pointer; }
.sf-plus button:hover{ background:var(--tekst); color:var(--flade); border-color:var(--tekst); transform:scale(1.08); }
.sf-trinkort{ position:relative; }
.sf-tk-top{ display:flex; gap:14px; padding:14px; align-items:flex-start; }
.sf-tk-navn{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; align-items:flex-start; }
.sf-tk-navn .sf-link{ font-size:16px; }
.sf-sti{ font-family:var(--skrift-kode); font-size:12px; color:var(--tekst-2); overflow-wrap:anywhere; }
.sf-tk-tal{ display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; padding:12px 16px; border-top:1px solid var(--skille); background:var(--bund); border-radius:0 0 var(--r, 16px) var(--r, 16px); }
.sf-tk-tal > div{ border-left:3px solid var(--accent); padding-left:10px; display:flex; flex-direction:column; }
.sf-tk-tal > div:nth-child(2){ border-left-color:var(--kant-felt); }
.sf-split-resultat{ border-radius:0; margin-top:8px; }
.sf-split-resultat > div:nth-child(2){ border-left-color:var(--accent); }
.sf-split-resultat .sf-svag{ font-size:13px; }
.sf-split-resultat .sf-tk-fod{ grid-column:1 / -1; }
.sf-tk-tal small{ font-size:12px; color:var(--tekst-2); }
.sf-tk-tal b{ font-size:18px; }
.sf-tk-fod{ grid-column:1 / -1; margin:4px 0 0; font-size:11px; color:var(--tekst-2); }
.sf-menu{ position:absolute; right:12px; top:48px; z-index:5; background:var(--flade); border:1px solid var(--kant); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.15); padding:6px; min-width:220px; }
.sf-menu button{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; font:inherit; font-size:14px; padding:8px 10px; border:0; background:none; border-radius:8px; cursor:pointer; color:var(--tekst); }
.sf-menu button:hover{ background:var(--bund); }
.sf-menu-note{ font-size:13px; color:var(--advarsel); margin:4px 10px 6px; max-width:260px; line-height:1.4; }
.sf-slut{ margin-top:4px; color:var(--tekst-2); font-size:13px; display:flex; align-items:center; gap:6px; }

/* ---------- Modalen ---------- */
.sf-modal{ border:0; border-radius:18px; padding:0; width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 48px); box-shadow:0 30px 80px rgba(0,0,0,.3); color:var(--tekst); background:var(--flade); }
.sf-modal::backdrop{ background:rgba(0,0,0,.45); }
.sf-modal form{ padding:24px; display:flex; flex-direction:column; gap:14px; }
.sf-modal h3{ margin:0; font-size:20px; }
.sf-m-felt{ display:flex; flex-direction:column; gap:6px; }
.sf-m-felt label, .sf-m-label{ font-weight:600; font-size:14px; }
.sf-m-felt input:not([type=radio]), .sf-m-felt textarea{ font:inherit; padding:10px 12px; border:1px solid var(--kant-felt); border-radius:10px; background:var(--flade); }
.sf-m-felt textarea{ font-family:var(--skrift-kode); font-size:13px; }
.sf-m-felt small{ font-size:12px; color:var(--tekst-2); }
.sf-m-fejl:empty{ display:none; }
.sf-m-knapper{ display:flex; justify-content:flex-end; gap:8px; }
.sf-skabeloner{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.sf-skabelon{ display:flex; flex-direction:column; gap:4px; padding:8px; border:1.5px solid var(--kant); border-radius:12px; cursor:pointer; background:var(--flade); }
.sf-skabelon input{ position:absolute; opacity:0; pointer-events:none; }
.sf-skabelon:has(input:checked){ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.sf-skabelon:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }
.sf-skabelon b{ font-size:14px; }
.sf-skabelon small{ font-size:11px; color:var(--tekst-2); line-height:1.35; }
.sf-sk-billede .sf-mini{ width:100% !important; }

/* =============================================================
   EDITOREN: hele vinduet, tre kolonner
   ============================================================= */
body.sf-redigerer{ overflow:hidden; }
#sider-editor{ position:fixed; inset:0; z-index:100; background:var(--bund); display:grid; grid-template-rows:52px minmax(0,1fr); font-size:14px; }
#sider-editor[hidden]{ display:none; }
#sider-editor *, .sf-modal *{ box-sizing:border-box; }

.sf-top{ display:flex; align-items:center; gap:10px; padding:0 10px; background:var(--flade); color:var(--tekst); border-bottom:1px solid var(--kant); }
.sf-topknap{ width:36px; height:36px; display:grid; place-items:center; border-radius:9px; border:0; background:transparent; color:var(--tekst-2); cursor:pointer; }
.sf-topknap svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sf-topknap:hover{ background:var(--bund); color:var(--tekst); }
.sf-topknap[aria-pressed="true"]{ background:var(--bund); color:var(--accent); }
.sf-hvad{ display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.sf-hvad b{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sf-hvad span{ font-size:12px; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sf-midt{ display:flex; gap:2px; margin:0 auto; }
.sf-højre-top{ display:flex; align-items:center; gap:4px; }
.sf-tilstand{ font-size:12px; margin:0 8px; min-width:70px; text-align:right; color:var(--tekst-2); }
.sf-tilstand.god{ color:var(--god); }
.sf-tilstand.advar{ color:var(--advar); }
.sf-tilstand.fejl{ color:var(--fejl); }
.sf-gemknap, .sf-udgivknap{ font:inherit; font-weight:600; font-size:13px; padding:8px 16px; border-radius:9px; cursor:pointer; border:1px solid var(--kant); }
.sf-gemknap{ background:var(--flade); color:var(--tekst); }
.sf-gemknap:hover{ background:var(--bund); }
.sf-udgivknap{ background:var(--farve); border-color:var(--farve); color:var(--farve-tekst); }
.sf-udgivknap:hover{ filter:brightness(.93); }

.sf-krop{ display:grid; grid-template-columns:230px minmax(0,1fr) 320px; min-height:0; }
.sf-venstre, .sf-højre{ background:var(--flade); display:flex; flex-direction:column; min-height:0; }
.sf-venstre{ border-right:1px solid var(--kant); }
.sf-højre{ border-left:1px solid var(--kant); }
.sf-vfaner, .sf-hfaner{ display:flex; border-bottom:1px solid var(--kant); }
.sf-vfaner button, .sf-hfaner button{ flex:1; font:inherit; font-size:13px; font-weight:600; padding:11px 6px; border:0; border-bottom:2px solid transparent; background:none; color:var(--tekst-2); cursor:pointer; }
.sf-vfaner button[aria-selected="true"], .sf-hfaner button[aria-selected="true"]{ color:var(--tekst); border-bottom-color:var(--accent); }
.sf-vpanel, .sf-hpanel{ flex:1; overflow-y:auto; overflow-x:hidden; min-height:0; }
.sf-hint{ font-size:12px; color:var(--tekst-2); margin:10px 12px 0; }
.sf-felt-fejl{ display:block; font-size:12px; color:var(--fejl); margin-top:4px; }
.sf-felt-fejl[hidden]{ display:none; }
.sf-r input[aria-invalid="true"]{ border-color:var(--fejl); }

#sf-trinliste{ padding:10px; display:flex; flex-direction:column; gap:6px; }
.sf-tl{ display:flex; gap:10px; align-items:center; padding:7px; border:1px solid var(--kant); border-radius:10px; background:var(--flade); cursor:pointer; font:inherit; text-align:left; color:var(--tekst); }
.sf-tl:hover{ border-color:var(--kant-felt); }
.sf-tl.aktiv{ background:var(--farve); border-color:var(--farve); color:var(--farve-tekst); }
.sf-tl span{ display:flex; flex-direction:column; min-width:0; }
.sf-tl b{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sf-tl small{ font-size:11px; opacity:.7; font-family:var(--skrift-kode); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sf-midte{ display:grid; grid-template-rows:minmax(0,1fr) 34px; min-height:0; }
#sf-laerred{ min-height:0; }
nav.sf-sti{ display:flex; align-items:center; gap:2px; padding:0 12px; background:var(--flade); border-top:1px solid var(--kant); overflow-x:auto; white-space:nowrap; font-size:12px; }
.sf-sti button{ font:inherit; font-size:12px; border:0; background:none; padding:4px 7px; border-radius:6px; color:var(--tekst-2); cursor:pointer; text-transform:uppercase; letter-spacing:.04em; }
.sf-sti button:hover{ background:var(--bund); color:var(--tekst); }
.sf-sti button.aktiv{ color:var(--accent); font-weight:700; }
.sf-pil{ color:var(--kant-felt); }

.sf-valgt{ padding:12px 16px; background:var(--farve); color:var(--farve-tekst); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
#sf-h-indstillinger{ padding:4px 14px 20px; }
.sf-tip{ background:var(--bund); border-radius:12px; padding:12px 14px; margin:10px 0 4px; }
.sf-tip p{ margin:6px 0 0; font-size:13px; color:var(--tekst-2); }
.sf-gruppe-felt{ border:0; border-top:1px solid var(--skille); margin:12px 0 0; padding:12px 0 0; display:flex; flex-direction:column; gap:10px; min-width:0; }
.sf-gruppe-felt legend{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tekst-2); padding:0; float:left; width:100%; margin-bottom:2px; }
.sf-r{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; }
.sf-r > span:first-child{ flex:none; max-width:46%; }
.sf-r.lodret{ flex-direction:column; align-items:stretch; gap:5px; }
.sf-r.lodret > span:first-child{ max-width:none; }
.sf-r input[type=text]{ font:inherit; font-size:13px; padding:7px 9px; border:1px solid var(--kant-felt); border-radius:8px; width:100%; background:var(--flade); }
.sf-afkryds{ justify-content:flex-start; }
.sf-farve{ display:flex; align-items:center; gap:4px; }
.sf-farve input{ width:46px; height:28px; padding:0; border:1px solid var(--kant-felt); border-radius:7px; background:var(--flade); cursor:pointer; }
.sf-nul{ width:24px; height:24px; border:0; background:none; color:var(--tekst-2); border-radius:6px; cursor:pointer; font-size:16px; line-height:1; }
.sf-nul:hover{ background:var(--bund); color:var(--fejl); }
.sf-skyder{ display:flex; align-items:center; gap:6px; flex:1; justify-content:flex-end; }
.sf-skyder input[type=range]{ flex:1; max-width:110px; accent-color:var(--accent); }
.sf-tal{ width:58px; font:inherit; font-size:13px; padding:5px 6px; border:1px solid var(--kant-felt); border-radius:7px; text-align:right; }
.sf-seg{ display:inline-flex; border:1px solid var(--kant-felt); border-radius:8px; overflow:hidden; }
.sf-seg button{ font:inherit; font-size:12px; padding:6px 9px; border:0; border-left:1px solid var(--kant); background:var(--flade); color:var(--tekst-2); cursor:pointer; }
.sf-seg button:first-child{ border-left:0; }
.sf-seg button[aria-pressed="true"]{ background:var(--farve); color:var(--farve-tekst); }
.sf-knaprække{ display:flex; gap:6px; flex-wrap:wrap; }
.sf-billede-vis{ background:var(--bund); border-radius:10px; padding:6px; }
.sf-billede-vis img{ max-width:100%; max-height:130px; margin:0 auto; display:block; border-radius:6px; }

/* ---------- GrapesJS i skallens farver ---------- */
#sider-editor .gjs-one-bg{ background-color:var(--flade); }
#sider-editor .gjs-two-color{ color:var(--tekst); }
#sider-editor .gjs-three-bg{ background-color:var(--farve); color:var(--farve-tekst); }
#sider-editor .gjs-four-color, #sider-editor .gjs-four-color-h:hover{ color:var(--accent); }
#sider-editor .gjs-cv-canvas{ width:100%; height:100%; top:0; background:var(--bund); }
#sider-editor .gjs-editor{ background:var(--bund); }
#sf-blokke .gjs-blocks-c{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px; }
#sf-blokke .gjs-block{ width:auto; min-height:0; margin:0; padding:6px; border:1px solid var(--kant); border-radius:10px; background:var(--flade); box-shadow:none; color:var(--tekst); font-size:11px; font-weight:600; display:flex; flex-direction:column; gap:4px; transition:border-color .15s, transform .15s; }
#sf-blokke .gjs-block:hover{ border-color:var(--accent); transform:translateY(-1px); color:var(--tekst); }
#sf-blokke .gjs-block-label{ font-weight:600; }
#sf-blokke .sf-skitse{ width:100%; height:auto; display:block; }
#sf-blokke .gjs-block__media{ margin:0; }
#sf-blokke .gjs-title{ background:none; border:0; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tekst-2); padding:10px 12px 0; }
#sf-blokke .gjs-block-category{ border:0; }
#sf-lag .gjs-layer{ background:none; color:var(--tekst); }
#sf-lag .gjs-layer.gjs-selected{ background:var(--bund); }
.sf-avanceret{ font-size:12px; }
.sf-avanceret .gjs-sm-sector-title, .sf-avanceret .gjs-trt-header{ background:var(--bund); color:var(--tekst); border-color:var(--kant); }
.sf-avanceret .gjs-field{ background:var(--flade); color:var(--tekst); border:1px solid var(--kant); }
.sf-avanceret .gjs-sm-label, .sf-avanceret .gjs-label{ color:var(--tekst-2); }
#sider-editor .gjs-mdl-dialog{ background:var(--flade); color:var(--tekst); border-radius:16px; }
#sider-editor .gjs-mdl-header{ border-color:var(--kant); }
.gjs-mdl-container .gjs-mdl-dialog{ background:var(--flade); color:var(--tekst); }

/* ---------- Funnelens indstillinger (hel side) ---------- */
.sf-i-kort{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:24px; padding:24px 0; border-top:1px solid var(--kant); }
.sf-i-kort:first-of-type{ border-top:0; }
.sf-i-om h4{ margin:0 0 4px; font-size:16px; }
.sf-i-om p{ margin:0; color:var(--tekst-2); font-size:14px; }
.sf-i-felter{ background:var(--flade); border:1px solid var(--kant); border-radius:var(--r, 16px); padding:20px 22px; display:flex; flex-direction:column; gap:18px; }
.sf-i-felt{ display:flex; flex-direction:column; gap:6px; }
.sf-i-felt > label{ font-weight:600; font-size:14px; }
.sf-i-felt small{ color:var(--tekst-2); font-size:12px; }
.sf-i-felt input[type=text], .sf-i-felt select, .sf-i-felt textarea{ font:inherit; padding:10px 12px; border:1px solid var(--kant-felt); border-radius:10px; background:var(--flade); width:100%; box-sizing:border-box; }
.sf-i-sti{ display:flex; border:1px solid var(--kant-felt); border-radius:10px; overflow:hidden; background:var(--flade); }
.sf-i-sti span{ padding:10px 12px; background:var(--bund); color:var(--tekst-2); font-family:var(--skrift-kode); font-size:13px; white-space:nowrap; border-right:1px solid var(--kant); }
.sf-i-sti input{ border:0 !important; border-radius:0 !important; }
.sf-i-billede{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; border:1.5px dashed var(--kant-felt); border-radius:12px; padding:14px; }
.sf-i-billede img{ width:32px; height:32px; object-fit:contain; }
.sf-i-billede small{ flex-basis:100%; }
.sf-i-stil{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.sf-stilprøve{ display:flex; gap:16px; align-items:center; padding:14px 18px; border-radius:12px; border:1px solid var(--kant); width:100%; box-sizing:border-box; }
.sf-stilprøve b{ font-size:22px; }
.sf-stilknap{ padding:8px 18px; font-weight:700; font-size:14px; margin-left:auto; }
.sf-tags{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; border:1px solid var(--kant-felt); border-radius:10px; padding:6px 8px; background:var(--flade); }
.sf-tags input{ border:0 !important; padding:4px !important; flex:1; min-width:120px; }
.sf-tag{ display:inline-flex; align-items:center; gap:4px; background:var(--bund); border-radius:999px; padding:3px 4px 3px 10px; font-size:13px; }
.sf-tag button{ border:0; background:none; cursor:pointer; color:var(--tekst-2); font-size:15px; line-height:1; }
.sf-i-bund{ display:flex; align-items:center; gap:8px; padding:20px 0 40px; border-top:1px solid var(--kant); flex-wrap:wrap; }
.sf-farligknap{ background:var(--fejl) !important; border-color:var(--fejl) !important; color:var(--flade) !important; }
.sf-kode{ font-family:var(--skrift-kode) !important; font-size:12.5px !important; line-height:1.5; tab-size:2; }
@media (max-width:900px){ .sf-i-kort{ grid-template-columns:1fr; } }

/* ---------- Den brede modal (sidens indstillinger, stilguide) ---------- */
.sf-modal-bred{ width:min(760px, calc(100vw - 32px)); }
.sf-m-overskrift{ margin:8px 0 -4px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); border-top:1px solid var(--skille); padding-top:14px; }
.sf-m-overskrift:first-of-type{ border-top:0; padding-top:0; }
.sf-m-hjælp{ margin:0; font-size:12px; color:var(--tekst-2); }
.sf-m-afkryds label{ display:flex; gap:10px; align-items:flex-start; font-weight:500 !important; }
.sf-m-afkryds input{ margin-top:3px; accent-color:var(--accent); }
.sf-m-billedrække{ display:flex; gap:8px; align-items:center; }
.sf-m-billedrække input[type=url]{ flex:1; }
.sf-m-billede{ width:64px; height:40px; object-fit:cover; border-radius:6px; border:1px solid var(--kant); }
.sf-m-felt select{ font:inherit; padding:9px 10px; border:1px solid var(--kant-felt); border-radius:10px; background:var(--flade); }
.sf-m-felt input[type=color]{ width:64px; height:34px; padding:0; border:1px solid var(--kant-felt); border-radius:8px; background:var(--flade); }
.sf-i-felt .sf-seg{ align-self:flex-start; }

/* ---------- Punkt 2: elementer, panelet, gemte sektioner ---------- */
.sf-enhedsbesked{ margin:10px 0 0; padding:8px 10px; border-radius:8px; border:1px solid var(--advar); color:var(--advar); font-size:12px; font-weight:600; }
.sf-vælg{ font:inherit; font-size:13px; padding:7px 8px; border:1px solid var(--kant-felt); border-radius:8px; background:var(--flade); width:100%; }
.sf-r.lodret input[type=number], .sf-r.lodret input[type=color]{ font:inherit; font-size:13px; padding:6px 8px; border:1px solid var(--kant-felt); border-radius:8px; background:var(--flade); }
.sf-r.lodret .sf-seg{ align-self:flex-start; flex-wrap:wrap; }
.sf-anim{ display:flex; flex-direction:column; gap:10px; }
#sf-sektionsliste{ padding:6px 10px 12px; display:flex; flex-direction:column; gap:6px; }
.sf-sektion-række{ display:flex; gap:6px; align-items:center; padding:8px; border:1px solid var(--kant); border-radius:10px; background:var(--flade); }
.sf-sektion-række span{ display:flex; flex-direction:column; flex:1; min-width:0; }
.sf-sektion-række b{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sf-sektion-række small{ font-size:11px; color:var(--tekst-2); }
#sider-editor.sf-sektionstilstand .sf-top{ box-shadow:inset 0 -3px 0 var(--god); }
#sf-venstre-faner button{ font-size:12px; padding:11px 2px; }

/* ---------- Punkt 3: skabelongalleriet ---------- */
.sf-g-krop{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:24px; margin-top:16px; align-items:start; }
.sf-g-filtre{ background:var(--flade); border:1px solid var(--kant); border-radius:var(--r, 16px); padding:18px 20px; position:sticky; top:16px; }
.sf-g-gruppe{ border:0; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:7px; }
.sf-g-gruppe:last-child{ margin-bottom:0; }
.sf-g-gruppe legend{ font-weight:700; font-size:14px; margin-bottom:6px; }
.sf-g-gruppe label{ display:flex; gap:8px; align-items:center; font-size:14px; color:var(--tekst-2); cursor:pointer; }
.sf-g-gruppe input{ accent-color:var(--accent); }
.sf-g-gitter{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:18px; }
.sf-g-kort{ display:flex; flex-direction:column; gap:6px; text-align:left; padding:10px 10px 14px; border:1px solid var(--kant); border-radius:14px; background:var(--flade); cursor:pointer; font:inherit; color:var(--tekst); transition:border-color .15s, box-shadow .15s, transform .15s; }
.sf-g-kort:hover{ border-color:var(--accent); box-shadow:0 8px 24px rgba(0,0,0,.1); transform:translateY(-2px); }
.sf-g-kort .sf-mini{ width:100% !important; height:auto !important; aspect-ratio:3/2; }
.sf-g-kort b{ font-size:15px; margin-top:4px; }
.sf-g-om{ font-size:13px; color:var(--tekst-2); line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.sf-g-trin{ font-size:12px; color:var(--tekst-2); display:flex; align-items:center; gap:4px; margin-top:auto; }
.sf-g-vis-trin{ display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; }
.sf-g-vis-trin > div{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
@media (max-width:1000px){ .sf-g-krop{ grid-template-columns:1fr; } .sf-g-filtre{ position:static; } }

/* ---------- Punkt 4: split-test ---------- */
.sf-split{ width:min(560px, 100%); }
.sf-maerke-split{ background:transparent; color:var(--accent); border-color:var(--accent); }
.sf-split-rækker{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 14px 12px; }
.sf-split-var{ position:relative; display:flex; flex-direction:column; gap:6px; align-items:flex-start; padding:10px; border:1px solid var(--kant); border-radius:12px; background:var(--flade); }
.sf-split-var .sf-mini{ width:100% !important; height:auto !important; aspect-ratio:3/2; }
.sf-split-bogstav{ position:absolute; top:-9px; left:-9px; width:26px; height:26px; border-radius:50%; background:var(--tekst); color:var(--flade); display:grid; place-items:center; font-weight:700; font-size:13px; z-index:1; }
.sf-split-vægt{ display:grid; grid-template-columns:auto 1fr auto; gap:6px 12px; align-items:center; padding:12px 16px; border-top:1px solid var(--skille); background:var(--bund); font-size:13px; }
.sf-split-vægt label{ font-weight:600; }
.sf-split-vægt input{ accent-color:var(--accent); }
.sf-split-vægt small{ grid-column:1 / -1; color:var(--tekst-2); font-size:12px; }
.sf-split-tal{ font-variant-numeric:tabular-nums; font-weight:600; }
.sf-split-bund{ padding:10px 14px 14px; }
.sf-split-var .sf-mini-knap{ width:100%; }

/* Ordreformularens varer i højre panel (egenskaben prisliste). */
.sf-prisliste{ border-top:1px solid var(--skille); margin-top:10px; padding:10px 12px 0; display:grid; gap:6px; }
.sf-prisliste-titel{ font-weight:600; font-size:13px; }
.sf-prisvalg{ display:flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid var(--kant-felt); border-radius:8px; font-size:13px; }
.sf-prisvalg > span{ flex:1; min-width:0; overflow-wrap:anywhere; }
.sf-prisvalg small{ display:block; color:var(--tekst-2); font-size:12px; }
.sf-prisvalg.fejl{ border-color:var(--fejl); }
.sf-prisvalg.fejl small{ color:var(--fejl); }
.sf-prisvalg input[type=number]{ width:52px; font:inherit; font-size:13px; padding:4px 6px; border:1px solid var(--kant-felt); border-radius:6px; background:var(--flade); color:inherit; }
.sf-prisliste .sf-hint{ margin:0; }
/* "Rigtige betalinger" i funnelens indstillinger. */
.sf-rigtige{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.sf-rigtige b{ font-size:15px; }
.sf-rigtige .sf-advar{ color:var(--fejl); font-size:13px; margin:0; }
/* Formularens indstillinger i højre panel (egenskaben formularvalg). */
.sf-formularvalg{ border-top:1px solid var(--skille); margin-top:10px; padding-top:10px; display:grid; gap:8px; }
.sf-formularvalg-titel{ font-weight:600; font-size:13px; padding:0 12px; }
.sf-formularvalg > div{ display:grid; gap:8px; }
.sf-formularvalg .knap{ justify-self:start; margin:0 12px; }
.sf-formularvalg .sf-hint{ margin-top:0; }


.sf-hint.fejl{ color:var(--fejl); }
.sf-i-felt > .knap{ align-self:flex-start; }
/* En besked, der standser en udgivelse og har et link (fx en formular, der er slået fra). */
.sf-stopnote{ position:fixed; left:50%; transform:translateX(-50%); top:3.6rem; z-index:60; margin:0; width:max-content; max-width:min(42rem, 92vw); padding:.6rem .9rem; border-radius:.5rem;
  background:var(--flade, #fff); color:var(--tekst, #16191f); border:1px solid var(--fejl, #b3261e); box-shadow:0 6px 20px rgba(0,0,0,.25); font-size:.9rem; }
.sf-stopnote a{ color:var(--farve, #1f5eff); }