/* =====================================================================
   Huis & Verbouwing — premium UI (2026)
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  /* merk */
  --indigo:#ff7200; --indigo-600:#e9660a; --indigo-700:#b64f04;
  --indigo-soft:#fff0e3;
  --mint:#127a52; --mint-soft:#e7f4ec; --mint-100:#d1ecdd;
  --rood:#e5484d; --rood-soft:#fdeae6;
  --geel-soft:#fbf0d8; --geel:#8a6410;

  /* neutraal — warm, papierachtig (zelfde als landingspagina) */
  --ink:#161311; --ink-2:#5a534e; --ink-3:#8b827b;
  --lijn:#ece5da; --lijn-2:#e2d9cc;
  --bg:#f6f3ee; --paneel:#fffdfa;

  --radius:18px; --radius-sm:12px; --radius-pill:999px;
  --schaduw:0 1px 2px rgba(20,14,10,.05), 0 12px 30px -14px rgba(20,14,10,.16);
  --schaduw-lg:0 30px 70px -30px rgba(120,60,10,.4), 0 12px 30px -18px rgba(20,14,10,.22);
  --sidebar-w:264px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em}
h1{font-size:1.6rem}
p{margin:.3em 0}
.muted{color:var(--ink-3)}
code{background:#efe8dd;padding:2px 6px;border-radius:6px;font-size:.85em}
svg{flex:none}

/* =========================== App shell =============================== */
.app{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-w);flex:none;background:var(--paneel);
  border-right:1px solid var(--lijn);
  display:flex;flex-direction:column;gap:8px;padding:22px 16px;
  position:sticky;top:0;height:100vh;z-index:40;
}
.sidebar .brand{display:flex;align-items:center;gap:11px;padding:8px 8px 20px}
.brand-logo{
  width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--indigo),#ff9a4d);color:#fff;box-shadow:0 8px 18px -6px rgba(255,114,0,.6);
}
.brand-txt b{display:block;font-size:1.4rem;line-height:1.1;letter-spacing:-.02em}
.brand-txt span{font-size:.68rem;color:var(--ink-3);font-weight:600;letter-spacing:.06em;text-transform:uppercase}

.nav{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.nav a{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;
  color:var(--ink-2);font-weight:500;font-size:.94rem;transition:.15s;position:relative;
}
.nav a .chev{margin-left:auto;opacity:.4;transition:.15s}
.nav a:hover{background:var(--indigo-soft);color:var(--indigo-700)}
.nav a.actief{
  background:linear-gradient(135deg,var(--indigo),#ff8a2e);color:#fff;
  box-shadow:0 12px 22px -10px rgba(255,114,0,.75);
}
.nav a.actief .chev{opacity:.9}
.nav .nav-label{padding:14px 14px 6px;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

.sidebar .user-card{
  margin-top:auto;display:flex;align-items:center;gap:11px;padding:12px;
  border:1px solid var(--lijn-2);border-radius:16px;background:#fffdf9;
}
.user-card .info{min-width:0}
.user-card .info b{display:block;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-card .info span{font-size:.75rem;color:var(--ink-3)}
.user-card .logout{margin-left:auto;color:var(--ink-3);display:grid;place-items:center;width:32px;height:32px;border-radius:9px}
.user-card .logout:hover{background:var(--rood-soft);color:var(--rood)}

/* =========================== Main ==================================== */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;
  padding:18px 30px;background:rgba(246,243,238,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--lijn);
  max-width:1240px;width:100%;margin-inline:auto;
}
.topbar .hallo{font-size:1.35rem;font-weight:800;letter-spacing:-.02em}
.topbar .hallo small{display:block;font-size:.8rem;font-weight:500;color:var(--ink-3);letter-spacing:0}
.topbar .rechts{margin-left:auto;display:flex;align-items:center;gap:14px}
.zoek{display:flex;align-items:center;gap:9px;background:var(--paneel);border:1px solid var(--lijn-2);
  border-radius:var(--radius-pill);padding:10px 16px;color:var(--ink-3);min-width:230px}
.zoek input{border:none;outline:none;background:none;font-size:.9rem;width:100%;font-family:inherit;color:var(--ink)}
.hamburger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--lijn-2);
  background:var(--paneel);cursor:pointer;place-items:center;color:var(--ink)}

.content{padding:26px 30px 60px;max-width:1240px;width:100%;margin-inline:auto}
.content > h1{margin-bottom:4px}
.content > .sub{color:var(--ink-3);margin-bottom:22px}

/* =========================== Avatars ================================= */
.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;
  display:grid;place-items:center;font-weight:700;color:#fff;font-size:.85rem;background:var(--indigo)}
.avatar.sm{width:30px;height:30px;font-size:.72rem}
.avatar.lg{width:76px;height:76px;font-size:1.5rem}
.avatar-stack{display:flex}
.avatar-stack .avatar{border:2.5px solid var(--paneel);margin-left:-10px;width:34px;height:34px;font-size:.72rem}
.avatar-stack .avatar:first-child{margin-left:0}

/* =========================== Cards ================================== */
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.card{background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:22px;box-shadow:var(--schaduw)}
.card h3{font-size:1rem;margin-bottom:14px}

/* stat card */
.stat-card{display:flex;align-items:center;gap:16px}
.stat-ico{width:58px;height:58px;border-radius:16px;flex:none;display:grid;place-items:center;
  background:var(--mint-soft);color:var(--mint)}
.stat-ico.paars{background:var(--indigo-soft);color:var(--indigo-600)}
.stat-ico.geel{background:var(--geel-soft);color:var(--geel)}
.stat-meta{min-width:0}
.stat-meta .label{font-size:.82rem;color:var(--ink-3);font-weight:500}
.stat-meta .num{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.trend{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:600;margin-top:2px}
.trend.up{color:var(--mint)} .trend.down{color:var(--rood)}

/* woning hero */
.woning-hero{position:relative;overflow:hidden;color:#fff;border:none;
  background:radial-gradient(120% 140% at 0% 0%,#ff8a2e 0%,var(--indigo) 45%,#cc5200 100%)}
.woning-hero *{position:relative;z-index:1}
.woning-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px;
  border-radius:50%;background:rgba(255,255,255,.08)}
.woning-hero .adres{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.woning-hero .rij{display:flex;flex-wrap:wrap;gap:26px;margin-top:16px}
.woning-hero .rij .k{font-size:.75rem;opacity:.75;text-transform:uppercase;letter-spacing:.05em}
.woning-hero .rij .v{font-size:1.05rem;font-weight:700}
.woning-hero .pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.16);
  padding:6px 13px;border-radius:var(--radius-pill);font-size:.8rem;font-weight:600}

/* =========================== Tabellen =============================== */
.tabel-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{padding:14px 16px;text-align:left;font-size:.9rem}
thead th{color:var(--ink-3);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;
  border-bottom:1px solid var(--lijn-2)}
tbody td{border-bottom:1px solid var(--lijn)}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:.12s}
tbody tr:hover{background:#fafbff}
td.rechts,th.rechts{text-align:right}
tfoot th{border-top:2px solid var(--lijn-2);font-size:.9rem;color:var(--ink)}

/* =========================== Badges ================================= */
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--radius-pill);
  font-size:.78rem;font-weight:600;border:1px solid transparent}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-grijs{background:#efe8dd;color:#7a716a}
.badge-blauw{background:var(--indigo-soft);color:var(--indigo-600)}
.badge-groen{background:var(--mint-100);color:#087443}
.badge-rood{background:var(--rood-soft);color:var(--rood)}
.badge-geel{background:var(--geel-soft);color:var(--geel)}

/* =========================== Knoppen =============================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:#efe8dd;color:var(--ink);padding:10px 16px;border-radius:12px;border:none;
  cursor:pointer;font-size:.9rem;font-weight:600;font-family:inherit;transition:.15s}
.btn:hover{filter:brightness(.97);transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--indigo),#ff8a2e);color:#fff;
  box-shadow:0 12px 22px -12px rgba(255,114,0,.8)}
.btn-klein{padding:7px 11px;font-size:.82rem;border-radius:10px}
.btn-rood{background:var(--rood-soft);color:var(--rood)}
.btn-ghost{background:transparent;border:1px solid var(--lijn-2)}

/* =========================== Formulieren =========================== */
label.veld,.form-rij label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;color:var(--ink-2);font-weight:500}
.form-rij label input[type=checkbox]{width:auto}
.form-rij label:has(input[type=checkbox]){flex-direction:row;align-items:center;gap:8px}
input,select,textarea{padding:11px 13px;border:1px solid var(--lijn-2);border-radius:12px;
  font-size:.92rem;font-family:inherit;background:#fff;color:var(--ink);transition:.15s;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--indigo);
  box-shadow:0 0 0 4px var(--indigo-soft)}
textarea{min-height:84px;resize:vertical}
.form-rij{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.form-rij > *{flex:1;min-width:170px}
.paginakop{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.paginakop h1{margin:0}

.voortgang{background:#ece5da;border-radius:var(--radius-pill);height:10px;overflow:hidden}
.voortgang > div{background:linear-gradient(90deg,var(--indigo),#ff9a4d);height:100%;border-radius:inherit;transition:width .4s}

/* =========================== Kanban =============================== */
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kanban-kolom{background:#f2ede4;border:1px solid var(--lijn);border-radius:var(--radius);padding:14px;min-height:140px}
.kanban-kolom h3{font-size:.9rem;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.kanban-kolom h3 .telw{background:#fff;border:1px solid var(--lijn-2);border-radius:8px;padding:1px 8px;font-size:.78rem;color:var(--ink-3)}
.kanban-kaart{background:#fff;border:1px solid var(--lijn-2);border-radius:14px;padding:13px;margin-bottom:11px;
  box-shadow:0 2px 6px rgba(16,24,40,.04)}
.kanban-kaart .titel{font-weight:600;font-size:.92rem}
.kanban-kaart .meta{font-size:.78rem;color:var(--ink-3);margin-top:5px;line-height:1.6}

/* =========================== Inspiratiebord ======================= */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:var(--radius-pill);
  background:var(--paneel);border:1px solid var(--lijn-2);color:var(--ink-2);font-size:.86rem;font-weight:600;transition:.15s}
.chip:hover{border-color:var(--indigo);color:var(--indigo-700)}
.chip.actief{background:linear-gradient(135deg,var(--indigo),#ff8a2e);color:#fff;border-color:transparent;
  box-shadow:0 10px 20px -12px rgba(255,114,0,.8)}
.chip span{background:rgba(0,0,0,.08);border-radius:var(--radius-pill);padding:1px 8px;font-size:.74rem}
.chip.actief span{background:rgba(255,255,255,.24)}

.insp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.insp-kaart{background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--schaduw);display:flex;flex-direction:column;transition:.18s}
.insp-kaart:hover{transform:translateY(-3px);box-shadow:var(--schaduw-lg)}
.insp-kaart img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:#efe8dd}
.insp-nolink{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  aspect-ratio:4/5;background:var(--indigo-soft);color:var(--indigo-600);font-weight:600;font-size:.85rem}
.insp-body{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1}
.insp-titel{font-weight:700;font-size:.98rem;line-height:1.3}
.insp-notitie{font-size:.83rem;color:var(--ink-3);line-height:1.5}
.insp-acties{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px}
.insp-linkbtn{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--indigo-600)}
.insp-linkbtn:hover{text-decoration:underline}
.moodboard-kop{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.moodboard-kop h2{font-size:1.15rem}

/* ---------- Slepen (drag & drop) ---------- */
.insp-kaart[draggable="true"],.kanban-kaart[draggable="true"]{cursor:grab}
.insp-kaart[draggable="true"]:active,.kanban-kaart[draggable="true"]:active{cursor:grabbing}
.sleep-actief{opacity:.4;transform:scale(.97)}
.insp-grid.sleep-over,.kanban-kolom.sleep-over{outline:2px dashed var(--indigo);outline-offset:4px;border-radius:var(--radius)}
.sleep-greep{color:var(--ink-3);letter-spacing:-3px;font-size:.85em;margin-right:3px;cursor:grab}

/* =========================== Alerts =============================== */
.alert{padding:13px 16px;border-radius:12px;margin-bottom:16px;font-size:.9rem;font-weight:500}
.alert-fout{background:var(--rood-soft);color:var(--rood)}
.alert-succes{background:var(--mint-100);color:#087443}

/* =========================== Auth (login/install) ================= */
.auth-body{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(120% 120% at 100% 0%,#ff9a4d 0%,var(--indigo) 40%,#b34700 100%)}
.auth-card{background:var(--paneel);padding:38px;border-radius:24px;box-shadow:var(--schaduw-lg);
  width:100%;max-width:430px}
.auth-card h1{font-size:1.5rem;display:flex;align-items:center;gap:10px}
.auth-card .veld,.auth-card label{margin-bottom:14px}
.auth-card .btn{width:100%;padding:13px;margin-top:6px}
.auth-card h3{margin:18px 0 10px;font-size:1rem}

/* =========================== Overlay/mobiel ======================= */
.overlay{display:none;position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:35}
.overlay.show{display:block}

@media (max-width:960px){
  .zoek{min-width:150px}
  .kanban{grid-template-columns:1fr}
}
@media (max-width:820px){
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .28s ease;
    box-shadow:var(--schaduw-lg)}
  .sidebar.open{transform:translateX(0)}
  .hamburger{display:grid}
  .topbar{padding:14px 18px}
  .content{padding:20px 18px 60px}
  .topbar .hallo{font-size:1.1rem}
  .zoek{display:none}
}
@media (max-width:480px){
  .topbar .rechts .avatar-stack{display:none}
  .card{padding:18px}
  .woning-hero .rij{gap:16px}
}

/* =========================== Voor / na-slider ===================== */
.vn{position:relative;width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden;user-select:none;background:#eee;touch-action:none}
.vn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vn .vn-voor{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.vn-lijn{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:#fff;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.vn-lijn::after{content:"⟷";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;color:var(--indigo);border-radius:50%;width:34px;height:34px;display:grid;place-items:center;font-size:15px;font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.vn-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.vn-tag{position:absolute;bottom:10px;padding:3px 11px;border-radius:var(--radius-pill);font-size:.72rem;font-weight:700;color:#fff;background:rgba(16,24,40,.62);pointer-events:none;letter-spacing:.03em}
.vn-tag-voor{left:10px}
.vn-tag-na{right:10px}

/* =========================== Live-update melding ================== */
.live-banner{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;
  padding:12px 16px;border-radius:var(--radius-pill);box-shadow:var(--schaduw-lg);font-size:.9rem;font-weight:500}
.live-banner button{background:var(--indigo);color:#fff;border:none;border-radius:var(--radius-pill);
  padding:7px 15px;font-weight:700;font-family:inherit;cursor:pointer;font-size:.85rem}
.live-banner button:hover{filter:brightness(1.05)}

/* =========================== Inspiratie: auteur + stemmen ========= */
.insp-auteur{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-3)}
.insp-auteur strong{color:var(--ink-2);font-weight:600}
.stem-blok{display:flex;flex-direction:column;gap:7px}
.stem-knoppen{display:flex;gap:8px}
.stem-knoppen form{flex:1;margin:0}
.stem-btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 10px;border-radius:10px;border:1.5px solid var(--lijn-2);background:#fff;color:var(--ink-2);
  font-weight:700;font-size:.84rem;font-family:inherit;cursor:pointer;transition:.15s}
.stem-btn span{opacity:.9}
.stem-btn.ja:hover{border-color:var(--mint);color:#087443;background:var(--mint-100)}
.stem-btn.nee:hover{border-color:var(--rood);color:var(--rood);background:var(--rood-soft)}
.stem-btn.ja.actief{background:var(--mint);border-color:var(--mint);color:#fff}
.stem-btn.nee.actief{background:var(--rood);border-color:var(--rood);color:#fff}
.stem-balk{height:8px;background:var(--rood-soft);border-radius:var(--radius-pill);overflow:hidden}
.stem-balk>div{height:100%;background:var(--mint);border-radius:var(--radius-pill);transition:width .3s}
.stem-pct{font-size:.76rem;color:var(--ink-3);font-weight:600}

/* =========================== Inspiratie: prijs/opmerkingen/bewerken */
.insp-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.prijs-badge{font-variant-numeric:tabular-nums}
.opm-blok{display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--lijn);padding-top:10px}
.opm{display:flex;gap:9px}
.opm-body{flex:1;min-width:0}
.opm-kop{display:flex;align-items:center;gap:7px;font-size:.78rem;color:var(--ink-3)}
.opm-kop strong{color:var(--ink-2);font-weight:600}
.opm-tijd{font-size:.72rem}
.opm-del{margin-left:auto;background:none;border:none;color:var(--ink-3);cursor:pointer;font-size:.8rem;padding:0 2px}
.opm-del:hover{color:var(--rood)}
.opm-tekst{font-size:.86rem;color:var(--ink);background:#f2ede6;border-radius:10px;padding:7px 10px;margin-top:2px}
.opm-form{display:flex;gap:6px;margin:0}
.opm-form input[type=text]{flex:1;padding:8px 10px;font-size:.85rem}
details.bewerk{margin-left:auto}
details.bewerk>summary{list-style:none;cursor:pointer;user-select:none}
details.bewerk>summary::-webkit-details-marker{display:none}
.bewerk-form{display:flex;flex-direction:column;gap:9px;background:#f2ede6;border:1px solid var(--lijn-2);
  border-radius:12px;padding:12px;margin-top:10px;width:100%}
details.bewerk[open]{width:100%}

/* =========================== Woning: galerij + plattegrond ======== */
.woning-galerij{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:16px}
.woning-galerij img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block;background:#efe8dd;transition:.15s}
.woning-galerij a:hover img{filter:brightness(.92)}
.plattegrond-embed{position:relative;width:100%;aspect-ratio:4/3;max-width:720px;border:1px solid var(--lijn-2);border-radius:12px;overflow:hidden;background:#f2ede6}
.plattegrond-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Woning-galerij: item met verwijderknop */
.woning-galerij .wg-item{position:relative}
.woning-galerij .wg-item form{position:absolute;top:6px;right:6px;margin:0}
.wg-del{width:26px;height:26px;border-radius:8px;border:none;cursor:pointer;
  background:rgba(16,24,40,.6);color:#fff;font-size:.8rem;line-height:1;display:grid;place-items:center}
.wg-del:hover{background:var(--rood)}

/* =========================== Inspiratie v3 ======================== */
.insp-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.weergave-toggle{display:flex;gap:4px;background:var(--paneel);border:1px solid var(--lijn-2);border-radius:12px;padding:3px}
.weergave-toggle button{width:36px;height:32px;border:none;background:none;border-radius:9px;cursor:pointer;color:var(--ink-3);display:grid;place-items:center}
.weergave-toggle button.actief{background:var(--indigo);color:#fff}

/* Kaart */
.insp-foto{position:relative}
.insp-foto img,.insp-nolink{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#efe8dd}
.insp-nolink{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--indigo-600);font-weight:600;font-size:.82rem;background:var(--indigo-soft)}
.insp-badges{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;gap:6px;pointer-events:none}
.insp-badges .badge{backdrop-filter:blur(4px)}
.insp-body{padding:12px 13px;display:flex;flex-direction:column;gap:9px}
.insp-titel{font-weight:700;font-size:.95rem;line-height:1.3}
.insp-meta{display:flex;align-items:center;gap:7px;font-size:.78rem;color:var(--ink-3)}
.insp-onder{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:2px}
.stem-mini{display:flex;align-items:center;gap:5px}
.stem-mini form{margin:0}
.mini{border:1px solid var(--lijn-2);background:#fff;border-radius:9px;padding:4px 8px;font-size:.8rem;font-weight:700;cursor:pointer;font-family:inherit;color:var(--ink-2)}
.mini.ja.actief{background:var(--mint);border-color:var(--mint);color:#fff}
.mini.nee.actief{background:var(--rood);border-color:var(--rood);color:#fff}
.stem-pct{font-size:.74rem;color:var(--ink-3);font-weight:600}
.kaart-acties{display:flex;align-items:center;gap:3px}
.kaart-acties form{margin:0}
.ico-btn{border:none;background:none;cursor:pointer;font-size:.86rem;padding:5px 6px;border-radius:8px;color:var(--ink-2);font-family:inherit;line-height:1;text-decoration:none;display:inline-flex;align-items:center;gap:3px}
.ico-btn:hover{background:var(--indigo-soft)}
.ico-btn.rood:hover{background:var(--rood-soft);color:var(--rood)}

/* Lijstweergave */
.insp-grid.lijst{grid-template-columns:1fr;gap:12px}
.insp-grid.lijst .insp-kaart{display:grid;grid-template-columns:110px 1fr;align-items:stretch}
.insp-grid.lijst .insp-foto img,.insp-grid.lijst .insp-nolink{aspect-ratio:1/1;height:100%}
.insp-grid.lijst .insp-badges{right:auto}
.insp-grid.lijst .insp-body{justify-content:center}

/* Modals (native <dialog>) */
dialog.modal{width:min(520px,92vw);border:none;border-radius:18px;padding:0;box-shadow:var(--schaduw-lg);color:var(--ink)}
dialog.modal::backdrop{background:rgba(16,24,40,.5);backdrop-filter:blur(2px)}
.modal-kop{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--lijn)}
.modal-kop b{font-size:1.05rem}
.modal-x{border:none;background:none;font-size:1rem;cursor:pointer;color:var(--ink-3);width:30px;height:30px;border-radius:9px}
.modal-x:hover{background:var(--lijn);color:var(--ink)}
.modal-body{padding:18px;display:flex;flex-direction:column;gap:12px;max-height:75vh;overflow:auto}
.modal-voet{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}

/* =========================== Inspiratie: Pinterest ================ */
.pin-grid{column-width:230px;column-gap:16px}
@media(max-width:620px){.pin-grid{column-width:150px;column-gap:12px}}
.pin{break-inside:avoid;-webkit-column-break-inside:avoid;display:block;margin:0 0 16px;background:var(--paneel);
  border:1px solid var(--lijn);border-radius:16px;overflow:hidden;box-shadow:var(--schaduw)}
.pin-img{position:relative;line-height:0}
.pin-img img{width:100%;height:auto;display:block}
.pin-nolink{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:var(--indigo-600);background:var(--indigo-soft)}
.pin-chip{position:absolute;top:8px;left:8px;background:rgba(16,24,40,.6);color:#fff;font-size:.72rem;font-weight:700;
  padding:3px 10px;border-radius:var(--radius-pill);backdrop-filter:blur(4px);line-height:1.4}
.pin-hover{position:absolute;inset:0;opacity:0;transition:opacity .16s;padding:8px;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(to bottom,rgba(16,24,40,.42),rgba(16,24,40,0) 34%,rgba(16,24,40,0) 52%,rgba(16,24,40,.6))}
.pin:hover .pin-hover{opacity:1}
.pin-top{display:flex;justify-content:flex-end;gap:4px}
.pin-top form,.pin-stem form{margin:0}
.pin-bot{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.pin-stem{display:flex;gap:5px}
.pin-r{display:flex;align-items:center;gap:5px}
.pin-hover .ico-btn{background:rgba(255,255,255,.92);color:var(--ink)}
.pin-hover .ico-btn:hover{background:#fff}
.pin-hover .ico-btn.rood:hover{background:var(--rood);color:#fff}
.pin-hover .mini{background:rgba(255,255,255,.92);border-color:transparent}
.pin-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px}
.pin-titel{font-weight:600;font-size:.9rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pin-prijs{font-weight:800;color:#087443;font-size:.9rem;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Lijstweergave */
.pin-grid.lijst{column-width:auto;column-count:1;column-gap:0}
.pin-grid.lijst .pin{display:grid;grid-template-columns:120px 1fr;align-items:stretch;margin-bottom:10px}
.pin-grid.lijst .pin-img img{height:110px;object-fit:cover}
.pin-grid.lijst .pin-nolink{aspect-ratio:auto;height:110px}
.pin-grid.lijst .pin-meta{justify-content:flex-start;gap:16px}
.pin-grid.lijst .pin-titel{white-space:normal}

/* Touch: geen hover → acties altijd tonen */
@media(hover:none){
  .pin-hover{opacity:1;background:linear-gradient(to top,rgba(16,24,40,.6),rgba(16,24,40,0) 42%)}
  .pin-top{opacity:.95}
}

/* =========================== Woning-fotogalerij + lightbox ======== */
.foto-galerij{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.fg-item{position:relative;margin:0}
.fg-item img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;display:block;cursor:zoom-in;background:#efe8dd;transition:.15s}
.fg-item img:hover{filter:brightness(.93)}
.fg-item form{position:absolute;top:6px;right:6px;margin:0}
.fg-del{width:26px;height:26px;border-radius:8px;border:none;cursor:pointer;background:rgba(16,24,40,.6);color:#fff;font-size:.8rem;display:grid;place-items:center}
.fg-del:hover{background:var(--rood)}
dialog.lightbox{border:none;background:transparent;padding:0;max-width:94vw;max-height:94vh;overflow:visible}
dialog.lightbox::backdrop{background:rgba(0,0,0,.82)}
dialog.lightbox img{max-width:94vw;max-height:94vh;border-radius:12px;display:block;cursor:zoom-out}

/* =========================== Kanban premium ======================= */
.kanban{gap:18px}
.kanban-kolom{background:#f3eee6;border:1px solid var(--lijn);border-radius:16px;padding:0 0 6px;overflow:hidden;min-height:160px}
.kanban-kolom.sleep-over{outline:2px dashed var(--indigo);outline-offset:-2px}
.kolom-kop{display:flex;align-items:center;gap:8px;padding:13px 15px 12px;font-weight:700;font-size:.95rem;
  background:var(--paneel);border-top:3px solid var(--ink-3);border-bottom:1px solid var(--lijn)}
.kolom-kop .telw{margin-left:auto;background:#ece5da;border-radius:var(--radius-pill);padding:1px 10px;font-size:.78rem;color:var(--ink-2);font-weight:700}
.kol-todo  .kolom-kop{border-top-color:#98a2b3}
.kol-bezig .kolom-kop{border-top-color:var(--indigo)}
.kol-klaar .kolom-kop{border-top-color:var(--mint)}
.kanban-kolom .kanban-kaart{margin:10px 12px 0}
.kanban-kaart{background:#fff;border:1px solid var(--lijn-2);border-radius:12px;padding:12px;
  box-shadow:0 1px 3px rgba(16,24,40,.05);transition:.15s}
.kanban-kaart:hover{box-shadow:0 10px 20px -10px rgba(16,24,40,.28);transform:translateY(-1px)}
.kanban-kaart .titel{font-weight:600;font-size:.93rem;display:flex;align-items:center;gap:6px}
.sleep-greep{color:var(--ink-3);cursor:grab;letter-spacing:-2px;font-size:.8em}

/* ============================================================
   2026 premium refinement pass (overrides — laatst = wint)
   ============================================================ */
:root{
  --schaduw:0 1px 2px rgba(16,24,40,.05), 0 10px 26px -14px rgba(16,24,40,.16);
  --schaduw-lg:0 30px 70px -24px rgba(180,71,0,.30);
}
body{letter-spacing:-.005em}
::selection{background:var(--indigo-soft);color:var(--indigo-700)}

/* Knoppen */
.btn{border-radius:12px;font-weight:600;transition:transform .12s ease,box-shadow .16s,filter .16s,background .16s}
.btn:active{transform:scale(.975)}
.btn-primary{box-shadow:0 8px 18px -9px rgba(255,114,0,.7)}
.btn-primary:hover{box-shadow:0 14px 26px -10px rgba(255,114,0,.85);filter:none}
.btn-ghost{background:var(--paneel);border:1px solid var(--lijn-2)}
.btn-ghost:hover{border-color:var(--indigo);color:var(--indigo-700)}

/* Kaarten iets luchtiger + zachte hover */
.card{border-radius:16px;transition:box-shadow .18s,transform .18s}
.grid-3 .card:hover,.grid-4 .card:hover{box-shadow:var(--schaduw)}

/* Inputs */
input,select,textarea{border-radius:12px}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}

/* Sidebar-nav actieve pill iets ronder */
.nav a{border-radius:13px}

/* Inspiratie: SVG-iconen netjes schalen */
.ico-btn{display:inline-flex;align-items:center;gap:4px}
.ico-btn svg{width:15px;height:15px}
.mini{display:inline-flex;align-items:center;gap:5px}
.mini svg{width:14px;height:14px}
.mini b{font-weight:700}
.pin-chip{display:inline-flex;align-items:center;gap:5px}

/* Prijs als nette pill i.p.v. vette tekst */
.pin-prijs{display:inline-flex;align-items:center;gap:4px;background:var(--mint-100);color:#087443;
  font-weight:700;font-size:.78rem;padding:4px 10px;border-radius:var(--radius-pill);white-space:nowrap}
.pin-prijs svg{width:13px;height:13px}
.pin-meta{padding:11px 12px}
.pin-titel{font-size:.92rem}

/* ============ Mobiel ============ */
@media(max-width:820px){
  .content{padding:18px 15px 96px}
  h1{font-size:1.35rem}
  .card{padding:17px}
  .paginakop{gap:10px}
  dialog.modal{width:96vw}
  .woning-hero .rij{gap:16px}
}
@media(max-width:560px){
  .paginakop{flex-direction:column;align-items:stretch}
  .paginakop .btn{width:100%;justify-content:center}
  .modal-voet{flex-direction:column-reverse;gap:8px}
  .modal-voet .btn{width:100%;justify-content:center}
  .topbar{padding:12px 15px}
  .topbar .hallo{font-size:1.05rem}
  .grid-4,.grid-3,.grid-2{gap:12px}
}

/* =========================== Aftel-widget ========================= */
.aftel{display:flex;align-items:center;gap:18px}
.aftel-ico{width:58px;height:58px;border-radius:16px;background:var(--indigo-soft);display:grid;place-items:center;font-size:1.7rem;flex:none}
.aftel-label{font-size:.85rem;color:var(--ink-3);font-weight:600}
.aftel-num{font-size:2rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.aftel-num span{font-size:1rem;font-weight:600;color:var(--ink-3)}
.aftel-num b{color:var(--indigo)}
.aftel-datum{font-size:.8rem;color:var(--ink-3);margin-top:2px}

/* OG-link preview in inspiratie-modal */
.og-rij{display:flex;gap:8px;align-items:flex-end}
.og-rij .veld{flex:1}
.og-preview{display:none;align-items:center;gap:10px;background:#f2ede6;border:1px solid var(--lijn-2);border-radius:12px;padding:8px;margin-top:2px}
.og-preview.actief{display:flex}
.og-preview img{width:52px;height:52px;object-fit:cover;border-radius:8px;flex:none;background:#eee}
.og-preview .og-t{font-size:.85rem;font-weight:600;line-height:1.3}

/* Autosave-indicator */
.autosave-pill{position:fixed;bottom:22px;right:22px;z-index:60;background:var(--ink);color:#fff;
  padding:9px 15px;border-radius:var(--radius-pill);font-size:.85rem;font-weight:600;box-shadow:var(--schaduw-lg);
  opacity:0;transform:translateY(8px);transition:.2s;pointer-events:none;display:flex;align-items:center;gap:7px}
.autosave-pill.zien{opacity:1;transform:translateY(0)}
.autosave-pill.bezig{background:var(--ink-2)}

/* =========================== Zoeken ============================== */
.zoek-mobiel{display:none}
.zoek-groot{display:flex;align-items:center;gap:10px;background:var(--paneel);border:1px solid var(--lijn-2);
  border-radius:14px;padding:8px 8px 8px 14px;margin-top:8px;color:var(--ink-3)}
.zoek-groot input{flex:1;border:none;outline:none;background:none;font-size:1rem;font-family:inherit;color:var(--ink)}
.zoek-lijst{display:flex;flex-direction:column;gap:2px}
.zoek-item{display:block;padding:11px 12px;border-radius:10px}
.zoek-item:hover{background:#f2ede6}
.zoek-t{font-weight:600;font-size:.93rem}
.zoek-s{font-size:.8rem;color:var(--ink-3)}

/* =========================== Grote countdown ===================== */
.aftel{background:radial-gradient(130% 150% at 0% 0%,#ff9a4d 0%,var(--indigo) 52%,#cc5200 100%);color:#fff;
  border:none;gap:22px;padding:26px 28px;box-shadow:var(--schaduw-lg)}
.aftel-ico{width:66px;height:66px;background:rgba(255,255,255,.18);font-size:2rem}
.aftel-label{color:rgba(255,255,255,.9);font-weight:600}
.aftel-num{font-size:3.4rem;line-height:1}
.aftel-num b{color:#fff}
.aftel-num span{color:rgba(255,255,255,.9);font-size:1.15rem}
.aftel-datum{color:rgba(255,255,255,.82);margin-top:6px}

/* =========================== Kleinere titels mobiel ============== */
@media(max-width:820px){
  .zoek{display:none}
  .zoek-mobiel{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--lijn-2);
    border-radius:12px;background:var(--paneel);color:var(--ink-2)}
  .aftel-num{font-size:2.8rem}
  .aftel-ico{width:56px;height:56px;font-size:1.7rem}
  .woning-hero .adres{font-size:1.3rem}
}
@media(max-width:560px){
  h1{font-size:1.2rem}
  .content > .sub,.paginakop .sub{font-size:.85rem}
  .woning-hero .adres{font-size:1.2rem}
  .aftel{padding:20px;gap:16px}
  .aftel-num{font-size:2.4rem}
  .stat-meta .num{font-size:1.45rem}
  .pin-titel{font-size:.88rem}
  .modal-kop b{font-size:1rem}
}

/* =========================== Countdown-keuze ===================== */
.aftel-kies{margin-left:auto;align-self:flex-start}
.aftel-kies select{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);color:#fff;
  border-radius:10px;padding:7px 10px;font-size:.82rem;font-weight:600;cursor:pointer}
.aftel-kies select option{color:var(--ink)}

/* =========================== Inkooplijst ========================= */
.inkoop-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.inkoop-item{display:flex;align-items:center;gap:12px;padding:11px 10px;border-bottom:1px solid var(--lijn)}
.inkoop-item:last-child{border-bottom:none}
.inkoop-item .check{width:24px;height:24px;border-radius:8px;border:2px solid var(--lijn-2);background:#fff;
  cursor:pointer;display:grid;place-items:center;color:#fff;flex:none;transition:.15s}
.inkoop-item.af .check{background:var(--mint);border-color:var(--mint)}
.ink-check{margin:0}
.ink-body{flex:1;min-width:0}
.ink-titel{font-weight:600;font-size:.93rem}
.ink-meta{display:block;font-size:.78rem;color:var(--ink-3)}
.ink-prijs{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.inkoop-item.af .ink-titel{text-decoration:line-through;color:var(--ink-3)}
.inkoop-item.af .ink-prijs{color:var(--ink-3)}

/* =========================== Contacten =========================== */
.contact-kaart{display:flex;flex-direction:column;gap:12px}
.contact-kop{display:flex;align-items:center;gap:12px}
.contact-naam{font-weight:700;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-rol{font-size:.82rem;color:var(--ink-3)}
.contact-notitie{font-size:.85rem;color:var(--ink-2);background:#f2ede6;border-radius:10px;padding:8px 10px}
.contact-acties{display:flex;align-items:center;gap:6px;margin-top:auto}
.cbtn{width:38px;height:38px;border-radius:11px;border:1px solid var(--lijn-2);background:var(--paneel);
  display:grid;place-items:center;color:var(--ink-2);cursor:pointer;text-decoration:none;transition:.15s}
.cbtn:hover{border-color:var(--indigo);color:var(--indigo-700)}
.cbtn.bel:hover{border-color:var(--mint);color:#087443;background:var(--mint-100)}
.cbtn.wa{color:#25d366}.cbtn.wa:hover{background:#e7f9ee;border-color:#25d366;color:#128c3e}
.cbtn.mail:hover{border-color:var(--indigo);color:var(--indigo-700);background:var(--indigo-soft)}
.cbtn.rood:hover{border-color:var(--rood);color:var(--rood);background:var(--rood-soft)}

/* =========================== Hero-countdown (subtiel) ============= */
.woning-hero .hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.hero-cd{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:16px;
  padding:12px 16px;text-align:center;backdrop-filter:blur(6px);min-width:120px;flex:none}
.hero-cd-num{font-size:2.1rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.hero-cd-num.klein{font-size:1.15rem}
.hero-cd-num span{display:block;font-size:.66rem;font-weight:700;opacity:.85;text-transform:uppercase;letter-spacing:.1em;margin-top:3px}
.hero-cd-label{font-size:.72rem;opacity:.85;margin-top:6px;line-height:1.3}
.hero-cd-kies{margin-top:9px}
.hero-cd-kies select{width:100%;max-width:150px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);
  color:#fff;border-radius:9px;padding:5px 8px;font-size:.72rem;font-weight:600;cursor:pointer}
.hero-cd-kies select option{color:var(--ink)}
@media(max-width:560px){
  .woning-hero .hero-top{flex-direction:column}
  .hero-cd{align-self:stretch;display:flex;align-items:center;gap:14px;text-align:left;min-width:0}
  .hero-cd-num{font-size:1.8rem}
  .hero-cd-label{margin-top:0}
  .hero-cd-kies{margin-top:0;margin-left:auto}
}

/* =========================== Prijs verbergen (oog) =============== */
.prijs-mask{display:inline-flex;align-items:center;gap:8px}
.prijs-mask .prijs-echt{display:none}
.prijs-mask.zien .prijs-echt{display:inline}
.prijs-mask.zien .prijs-dots{display:none}
.prijs-oog{width:28px;height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.prijs-oog:hover{background:rgba(255,255,255,.26)}
.prijs-oog .oog-open{display:none}
.prijs-mask.zien .prijs-oog .oog-dicht{display:none}
.prijs-mask.zien .prijs-oog .oog-open{display:block}

.prijs-oog{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

/* =========================== Wishlist-hartje ===================== */
.pin-hart{position:absolute;top:8px;right:8px;margin:0;z-index:2}
.pin-hart .hart{width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(16,24,40,.42);backdrop-filter:blur(4px);display:grid;place-items:center;color:#fff;padding:0;transition:.15s}
.pin-hart .hart:hover{background:rgba(16,24,40,.6);transform:scale(1.08)}
.pin-hart .hart svg{fill:none;stroke:#fff;stroke-width:2}
.pin-hart .hart.aan svg{fill:#ff4d5e;stroke:#ff4d5e}
.pin-hart .hart.aan{background:rgba(255,255,255,.92)}

/* Wishlist-totaal balk */
.wishlist-totaal{position:sticky;bottom:0;margin-top:20px;display:flex;align-items:center;justify-content:space-between;
  gap:14px;background:var(--ink);color:#fff;border-radius:16px;padding:16px 22px;box-shadow:var(--schaduw-lg)}
.wishlist-totaal .lbl{font-size:.9rem;opacity:.85;font-weight:600}
.wishlist-totaal .bedrag{font-size:1.7rem;font-weight:800;letter-spacing:-.02em}

/* =========================== Dashboard-hero: adres linksonder ===== */
.dash-hero{display:flex;flex-direction:column;min-height:230px}
.dash-hero .hero-onder{margin-top:auto}
.dash-hero .adres{margin-top:0}
@media(max-width:560px){ .dash-hero{min-height:200px} }

/* =========================== Budget: inline bewerken ============= */
.cel-edit{width:100%;border:1px solid transparent;background:transparent;border-radius:8px;
  padding:6px 8px;font-size:.9rem;font-family:inherit;color:var(--ink);transition:.12s}
.cel-edit:hover{background:#f2ede6}
.cel-edit:focus{outline:none;background:#fff;border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-soft)}
.cel-edit.sterk{font-weight:700}
.cel-edit.cel-bedrag{text-align:right;font-variant-numeric:tabular-nums}
.cel-edit.cel-sub{font-size:.78rem;color:var(--ink-3);margin-top:2px}
.cel-edit::placeholder{color:var(--ink-3);font-weight:400}
td .cel-edit{min-width:70px}

td:has(.cel-edit){padding:6px 8px;vertical-align:middle}

/* --- Aanmelden / inloggen: tabs & wissellink --- */
.auth-tabs{display:flex;gap:6px;background:var(--paneel);border:1px solid var(--lijn-2);
  border-radius:var(--radius-pill);padding:5px;margin:14px 0 18px}
.auth-tab{flex:1;border:none;background:none;cursor:pointer;font-family:inherit;
  font-size:.9rem;font-weight:600;color:var(--ink-3);padding:9px 10px;border-radius:var(--radius-pill);
  transition:background .15s,color .15s}
.auth-tab.actief{background:var(--indigo);color:#fff}
.reg-blok[hidden]{display:none}
.auth-wissel{margin-top:16px;text-align:center;font-size:.9rem;color:var(--ink-3)}
.auth-wissel a{color:var(--indigo);font-weight:600;text-decoration:none}

/* --- Huishouden / uitnodiging --- */
.invite-blok{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--indigo-soft);border:1px dashed var(--indigo);border-radius:var(--radius-sm);padding:14px 16px}
.invite-code{font-size:1.5rem;font-weight:800;letter-spacing:.14em;color:var(--indigo-700);font-family:'Inter',monospace}

/* --- Nieuw Stecky-wordmark-logo --- */
.brand-logo-img{height:24px;width:auto;display:block}
.auth-logo{height:40px;width:auto;display:block;margin:0 auto 6px}

/* --- Gebruikerskaart: profiel-link + los uitlog-knopje (niet genest) --- */
.user-card-link{display:flex;align-items:center;gap:11px;flex:1;min-width:0;text-decoration:none;color:inherit}
.user-card .logout{cursor:pointer}

/* --- Admin: landingspagina-editor --- */
.admin-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 20px;position:sticky;top:78px;z-index:20;
  background:rgba(246,243,238,.92);backdrop-filter:blur(8px);padding:6px;border:1px solid var(--lijn);border-radius:14px}
.admin-tab{border:none;background:none;font-family:inherit;font-size:.88rem;font-weight:600;color:var(--ink-3);
  padding:9px 14px;border-radius:10px;cursor:pointer;transition:.15s;white-space:nowrap}
.admin-tab:hover{color:var(--ink);background:var(--paneel)}
.admin-tab.actief{background:var(--indigo);color:#fff;box-shadow:0 8px 16px -8px rgba(255,114,0,.6)}
.admin-paneel{display:none}
.admin-paneel.actief{display:block;animation:fadein .25s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.admin-toggle{display:flex;align-items:center;gap:11px;cursor:pointer;padding:10px 0;border-top:1px solid var(--lijn)}
.admin-toggle:first-of-type{border-top:none}
.admin-toggle input{display:none}
.admin-toggle .switch{width:42px;height:24px;border-radius:99px;background:var(--lijn-2);position:relative;flex:none;transition:.2s}
.admin-toggle .switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s}
.admin-toggle input:checked + .switch{background:var(--indigo)}
.admin-toggle input:checked + .switch::after{transform:translateX(18px)}
.admin-toggle .tg-label{font-size:.9rem;font-weight:500;color:var(--ink)}
.img-preview{display:flex;align-items:center;gap:16px;margin:8px 0 10px;flex-wrap:wrap}
.img-preview img{width:220px;max-width:100%;border-radius:12px;border:1px solid var(--lijn);box-shadow:var(--schaduw)}

/* --- Admin v2: overzichtelijke editor --- */
.admin-sectiekop{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--lijn)}
.admin-sectiekop h3{font-size:1.15rem;margin:0 0 3px}
.admin-sectiekop p{font-size:.88rem;margin:0}
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 26px}
.admin-veld{display:flex;flex-direction:column;padding:12px 0}
.admin-veld.vol{grid-column:1 / -1}
.admin-label{font-weight:600;font-size:.85rem;color:var(--ink);margin-bottom:7px}
.admin-veld input[type=text],.admin-veld select,.admin-veld textarea,.admin-veld input[type=file]{
  width:100%;font-family:inherit;font-size:.92rem;color:var(--ink);background:var(--paneel);
  border:1px solid var(--lijn-2);border-radius:10px;padding:10px 12px;transition:.15s}
.admin-veld input[type=text]:focus,.admin-veld select:focus,.admin-veld textarea:focus{
  outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(255,114,0,.13)}
.admin-veld textarea{resize:vertical;line-height:1.5}
.admin-veld input[type=file]{padding:8px;background:var(--bg);cursor:pointer;font-size:.85rem}
.admin-savebar{position:sticky;bottom:0;z-index:25;display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin:22px -30px -60px;padding:14px 30px;
  background:rgba(255,253,250,.9);backdrop-filter:blur(10px);border-top:1px solid var(--lijn)}
.admin-savebar .muted{font-size:.88rem}
@media(max-width:720px){.admin-grid{grid-template-columns:1fr}.admin-savebar{margin:22px -18px -60px;padding:12px 18px}}

/* =====================================================================
   Awwwards-polish — verfijning, hiërarchie & micro-interacties (2026)
   ===================================================================== */

/* Basis-verfijning */
html{ -webkit-text-size-adjust:100%; }
body{ text-rendering:optimizeLegibility; }
::selection{ background:rgba(255,114,0,.22); color:var(--ink); }
.serif{ font-family:'Instrument Serif',Georgia,serif; font-weight:400; font-style:italic; letter-spacing:.01em; }

/* Zachte, warme ambient-gloed bovenaan de werkruimte (subtiel, niet storend) */
.main{ position:relative; }
.main::before{
  content:""; position:absolute; top:0; left:0; right:0; height:340px; z-index:0; pointer-events:none;
  background:radial-gradient(120% 100% at 82% -10%, rgba(255,138,46,.13), transparent 60%);
}
.topbar, .content{ position:relative; z-index:1; }

/* Focus-ring — toegankelijk én netjes */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(255,114,0,.28); border-radius:10px;
}

/* Getallen strak uitgelijnd */
.stat-meta .num, .num, .hero-cd-num b, table td, .amt{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* Zachte scrollbar */
*{ scrollbar-width:thin; scrollbar-color:#d8cdbc transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#ddd2c1; border-radius:99px; border:3px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover{ background:#c9bda9; }

/* ---- Content-entree: rustige fade-up bij het laden ---- */
@keyframes stkIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.content > *{ animation:stkIn .55s cubic-bezier(.2,.7,.3,1) both; }
.content > *:nth-child(1){ animation-delay:.02s }
.content > *:nth-child(2){ animation-delay:.08s }
.content > *:nth-child(3){ animation-delay:.14s }
.content > *:nth-child(4){ animation-delay:.20s }
.content > *:nth-child(5){ animation-delay:.26s }
.content > *:nth-child(n+6){ animation-delay:.30s }
@media (prefers-reduced-motion:reduce){ .content > *{ animation:none } .main::before{ display:none } }

/* ---- Topbar: sterkere hiërarchie + serif-accent op de naam ---- */
.topbar{ padding-top:22px; padding-bottom:22px; }
.topbar .hallo{ font-size:1.5rem; line-height:1.1; }
.topbar .hallo .naam{ font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400; letter-spacing:.005em; }
.topbar .hallo .wave{ display:inline-block; transform-origin:70% 70%; }
.topbar:hover .hallo .wave{ animation:wave 1.4s ease-in-out; }
@keyframes wave{ 0%,100%{transform:rotate(0)} 20%{transform:rotate(16deg)} 40%{transform:rotate(-8deg)} 60%{transform:rotate(12deg)} 80%{transform:rotate(-4deg)} }
.topbar .hallo small{ margin-top:2px; }
.zoek{ transition:border-color .18s, box-shadow .18s, background .18s; }
.zoek:focus-within{ border-color:var(--indigo); box-shadow:0 0 0 3px rgba(255,114,0,.14); background:var(--paneel); }

/* ---- Sidebar: rustiger, met fijn actief-accent ---- */
.sidebar{ padding:24px 16px; }
.sidebar .brand{ padding:6px 8px 22px; }
.nav a{ transition:background .18s cubic-bezier(.2,.7,.3,1), color .18s, transform .18s, box-shadow .25s; }
.nav a svg{ transition:transform .2s cubic-bezier(.2,.7,.3,1); }
.nav a:hover{ transform:translateX(2px); }
.nav a:hover svg{ transform:scale(1.08); }
.nav a .chev{ transform:translateX(-4px); }
.nav a:hover .chev{ transform:translateX(0); opacity:.7; }
.nav a.actief{ box-shadow:0 14px 26px -12px rgba(255,114,0,.85); }
.nav a.actief .chev{ transform:translateX(0); }
.user-card{ transition:border-color .2s, box-shadow .2s, transform .2s; }
.user-card:hover{ border-color:#d8cdbc; box-shadow:var(--schaduw); transform:translateY(-1px); }
.brand-logo{ transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s; }
.sidebar .brand:hover .brand-logo{ transform:rotate(-6deg) scale(1.05); }

/* ---- Titels ---- */
.content > h1, .paginakop h1{ font-size:clamp(1.6rem,2.6vw,2.05rem); letter-spacing:-.028em; }
.paginakop{ align-items:flex-start; }

/* ---- Kaarten: verfijnde randen, diepte & interactie ---- */
.card{ border-color:var(--lijn); transition:box-shadow .3s cubic-bezier(.2,.7,.3,1), transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s; }
.stat-card{ cursor:default; }
.stat-card:hover{ transform:translateY(-3px); box-shadow:var(--schaduw-lg); border-color:#e4d9c8; }
.stat-ico{ transition:transform .3s cubic-bezier(.2,.7,.3,1); }
.stat-card:hover .stat-ico{ transform:scale(1.06) rotate(-3deg); }
.contact-kaart, .pin, .fg-item{ transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s; }
.contact-kaart:hover{ transform:translateY(-3px); box-shadow:var(--schaduw-lg); }

/* ---- Knoppen: tactiel, premium ---- */
.btn{ transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .22s, background .18s, color .18s, border-color .18s; }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{ box-shadow:0 10px 22px -10px rgba(255,114,0,.75); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(255,114,0,.8); }
.btn-ghost:hover{ transform:translateY(-2px); border-color:#d8cdbc; }

/* ---- Badges & pills: subtieler ---- */
.badge{ letter-spacing:.01em; }

/* ---- Voortgangsbalk: zachte glans ---- */
.voortgang > div, .stat .bar i{ background:linear-gradient(90deg,var(--indigo),#ff9e4d) !important; }

/* ---- Dashboard-hero: iets meer allure ---- */
.dash-hero, .woning-hero{ box-shadow:0 30px 70px -34px rgba(180,80,10,.55); }
.woning-hero .adres{ font-size:1.7rem; letter-spacing:-.03em; }

/* ---- Tabellen: luchtiger & leesbaarder ---- */
th{ font-size:.72rem !important; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); font-weight:700; }
tbody tr{ transition:background .15s; }
tbody tr:hover{ background:rgba(255,114,0,.035); }

/* ---- Modals: zachtere entree ---- */
dialog.modal{ border:1px solid var(--lijn); box-shadow:var(--schaduw-lg); }
dialog.modal::backdrop{ background:rgba(22,19,17,.42); backdrop-filter:blur(3px); }

/* ---- Admin: entree van tab-panelen iets verfijnd ---- */
.admin-tab{ transition:background .18s, color .18s, transform .15s; }
.admin-tab:active{ transform:scale(.97); }

/* =====================================================================
   Module-finetune — elke module net iets scherper (2026)
   ===================================================================== */

/* ---- Paginakoppen: consistente ademruimte ---- */
.paginakop{ margin-bottom:24px; gap:16px; }
.paginakop .sub{ margin-top:4px; }

/* ---- Aankoop / tabellen ---- */
td strong{ font-weight:700; letter-spacing:-.01em; }
select{ font-family:inherit; border:1px solid var(--lijn-2); border-radius:10px; padding:8px 12px; background:var(--paneel); color:var(--ink); transition:border-color .15s, box-shadow .15s; }
select:focus{ outline:none; border-color:var(--indigo); box-shadow:0 0 0 3px rgba(255,114,0,.14); }

/* ---- Budget: inline bewerken voelt tastbaar ---- */
.cel-edit{ border:1px solid transparent; border-radius:9px; padding:7px 9px; transition:background .15s, border-color .15s, box-shadow .15s; }
.cel-edit:hover{ background:#f3eee6; }
.cel-edit:focus{ outline:none; background:var(--paneel); border-color:var(--indigo); box-shadow:0 0 0 3px rgba(255,114,0,.14); }
.cel-bedrag{ font-variant-numeric:tabular-nums; font-weight:700; }
.cel-sub{ color:var(--ink-3); font-size:.82rem; }
tfoot th{ font-size:.9rem !important; text-transform:none; letter-spacing:0; color:var(--ink); border-top:2px solid var(--lijn-2); }
tfoot .rechts{ font-variant-numeric:tabular-nums; }

/* ---- Klussen: kanban met meer karakter ---- */
.kanban-kolom{ background:#f3eee6; transition:outline-color .15s, background .2s; }
.kolom-kop{ border-top:3px solid transparent; letter-spacing:-.01em; }
.kanban-kaart{ box-shadow:0 1px 2px rgba(20,14,10,.05); transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s; cursor:grab; }
.kanban-kaart:hover{ transform:translateY(-2px); box-shadow:var(--schaduw); border-color:#dccfbb; }
.kanban-kaart:active{ cursor:grabbing; }
.kanban-kaart.sleept{ opacity:.5; transform:rotate(1.5deg) scale(1.02); }
.sleep-greep{ color:var(--ink-3); cursor:grab; letter-spacing:-2px; }
.kol-todo .telw{ color:var(--ink-2) } .kol-bezig .telw{ color:var(--indigo-700) } .kol-klaar .telw{ color:#0d6b47 }

/* ---- Inspiratie: rustiger raster, verfijnde hover ---- */
.pin{ border:1px solid var(--lijn); box-shadow:var(--schaduw); transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s; }
.pin:hover{ transform:translateY(-4px); box-shadow:var(--schaduw-lg); border-color:#e2d8c8; }
.pin-hover{ background:linear-gradient(180deg,rgba(22,19,17,.02),rgba(22,19,17,.30) 55%,rgba(22,19,17,.62)); transition:opacity .22s; }
.pin-chip{ backdrop-filter:blur(4px); letter-spacing:.02em; }
.hart{ transition:transform .18s cubic-bezier(.2,.7,.3,1); }
.hart:hover{ transform:scale(1.15); }
.hart.aan{ animation:pop .3s cubic-bezier(.2,.7,.3,1); }
@keyframes pop{ 0%{transform:scale(1)} 45%{transform:scale(1.3)} 100%{transform:scale(1)} }
.weergave-toggle button{ transition:background .15s, color .15s; }
.chip{ transition:border-color .15s, color .15s, background .15s, transform .15s; }
.chip:active{ transform:scale(.97); }

/* ---- Wishlist: totaalbalk als hero ---- */
.wishlist-totaal{ background:linear-gradient(135deg,#161311,#2a231d); color:#f6f3ee; border:none;
  box-shadow:var(--schaduw-lg); }
.wishlist-totaal .bedrag{ font-variant-numeric:tabular-nums; }

/* ---- Voor & na: nettere schuif ---- */
.vn{ background:#efe8dd; box-shadow:var(--schaduw); }
.vn-lijn::after{ transition:transform .1s; }
.vn:active .vn-lijn::after{ transform:translate(-50%,-50%) scale(1.08); }

/* ---- Contacten: strakkere kaart + belknoppen ---- */
.contact-naam{ letter-spacing:-.01em; }
.cbtn{ transition:transform .16s, background .16s, color .16s, border-color .16s; }
.cbtn:hover{ transform:translateY(-2px); }
.cbtn.wa:hover{ background:#25d366; color:#fff; border-color:transparent; }
.cbtn.bel:hover{ background:var(--indigo); color:#fff; border-color:transparent; }
.cbtn.mail:hover{ background:var(--ink); color:#fff; border-color:transparent; }

/* ---- Inkooplijst: checklist met plezier ---- */
.inkoop-item{ border-radius:12px; transition:background .15s; }
.inkoop-item:hover{ background:#f3eee6; }
.inkoop-item .check{ transition:transform .16s, background .16s, border-color .16s; }
.inkoop-item .check:hover{ transform:scale(1.1); border-color:var(--indigo); }
.inkoop-item.af .ink-titel{ text-decoration:line-through; color:var(--ink-3); }
.ink-prijs{ font-variant-numeric:tabular-nums; font-weight:700; }

/* ---- Documentenkluis: rijen luchtig ---- */
.tabel-wrap table td .badge{ vertical-align:middle; }

/* ---- Zoeken: groot & uitnodigend ---- */
.zoek-groot{ box-shadow:var(--schaduw); transition:border-color .18s, box-shadow .18s; }
.zoek-groot:focus-within{ border-color:var(--indigo); box-shadow:0 0 0 4px rgba(255,114,0,.14); }
.zoek-item{ border-radius:12px; transition:background .15s, transform .15s; }
.zoek-item:hover{ transform:translateX(3px); }

/* ---- Woning: koopsom-onthuller & galerij ---- */
.prijs-oog{ transition:background .15s, color .15s; }
.fg-item img{ transition:filter .2s, transform .3s cubic-bezier(.2,.7,.3,1); }
.fg-item:hover img{ transform:scale(1.02); }

/* ---- Profiel: uitnodigingscode springt eruit ---- */
.invite-code{ font-variant-numeric:tabular-nums; }
.invite-blok{ transition:border-color .2s, background .2s; }
.invite-blok:hover{ background:#fff4e9; }

/* ---- Formulieren: consistente, premium inputs ---- */
.veld input, .veld textarea, .veld select{ transition:border-color .15s, box-shadow .15s, background .15s; }
.veld input:focus, .veld textarea:focus, .veld select:focus{ outline:none; border-color:var(--indigo); box-shadow:0 0 0 3px rgba(255,114,0,.14); }

/* ---- Lege staten: vriendelijker ---- */
.card [style*="text-align:center"] > div:first-child{ opacity:.9; }

/* ---- Alerts: zachter ---- */
.alert{ border-radius:14px; }
.alert-succes{ box-shadow:0 8px 20px -12px rgba(18,122,82,.5); }

/* --- Sitebeheer: kleuren-editor + live preview --- */
.alert-info{ background:var(--indigo-soft); color:var(--indigo-700); border:1px solid #ffd9b8; }
.kleur-layout{ display:grid; grid-template-columns:1.35fr 1fr; gap:18px; align-items:start; }
.kleur-preview-card{ position:sticky; top:150px; }
.kleur-rij{ display:flex; align-items:center; gap:10px; }
.kleur-rij .kp{ -webkit-appearance:none; appearance:none; width:46px; height:38px; border:1px solid var(--lijn-2);
  border-radius:10px; background:none; cursor:pointer; padding:3px; flex:none; }
.kleur-rij .kp::-webkit-color-swatch{ border:none; border-radius:7px; }
.kleur-rij .kp::-webkit-color-swatch-wrapper{ padding:0; }
.kleur-rij .kh{ font-family:'Inter',monospace; font-size:.85rem; text-transform:uppercase; letter-spacing:.03em;
  width:104px; border:1px solid var(--lijn-2); border-radius:10px; padding:9px 12px; background:var(--paneel); color:var(--ink-2); }

.kleur-preview{ border-radius:16px; overflow:hidden; border:1px solid var(--lijn); background:var(--pv-achtergrond); padding:16px; transition:background .2s; }
.kleur-preview .pv-hero{ border-radius:14px; padding:18px; color:#fff; position:relative; overflow:hidden;
  background:var(--pv-primair);
  background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--pv-primair) 78%, #fff), var(--pv-primair) 55%, var(--pv-diep)); }
.kleur-preview .pv-pill{ display:inline-block; background:rgba(255,255,255,.2); padding:5px 12px; border-radius:999px; font-size:.72rem; font-weight:600; }
.kleur-preview .pv-adres{ font-size:1.25rem; font-weight:800; letter-spacing:-.02em; margin-top:10px; }
.kleur-preview .pv-card{ background:var(--pv-paneel); border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:16px; margin-top:14px; }
.kleur-preview .pv-chip{ display:inline-block; background:var(--pv-zacht); color:var(--pv-diep); font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:999px; }
.kleur-preview .pv-titel{ color:var(--pv-tekst); font-weight:700; margin:10px 0 12px; letter-spacing:-.01em; }
.kleur-preview .pv-bar{ height:8px; border-radius:99px; background:rgba(0,0,0,.08); background:color-mix(in srgb, var(--pv-tekst) 12%, transparent); overflow:hidden; }
.kleur-preview .pv-bar span{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--pv-primair),var(--pv-hover)); }
.kleur-preview .pv-knoppen{ display:flex; gap:8px; margin-top:16px; }
.kleur-preview .pv-btn{ font-size:.82rem; font-weight:600; padding:9px 16px; border-radius:999px; background:var(--pv-primair); color:#fff; }
.kleur-preview .pv-btn.ghost{ background:var(--pv-paneel); color:var(--pv-tekst); border:1px solid rgba(0,0,0,.12); border-color:color-mix(in srgb, var(--pv-tekst) 16%, transparent); }
@media(max-width:820px){ .kleur-layout{ grid-template-columns:1fr } .kleur-preview-card{ position:static } }

/* --- Beheercentrum (super-admin dashboard) --- */
.beheer-hero{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;
  background:linear-gradient(135deg,#161311,#2a231d); color:#f6f3ee; border-radius:var(--radius);
  padding:30px 32px; box-shadow:var(--schaduw-lg); position:relative; overflow:hidden; }
.beheer-hero::after{ content:""; position:absolute; right:-80px; top:-80px; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,114,0,.4), transparent 70%); }
.beheer-hero > *{ position:relative; z-index:1; }
.beheer-hero .bh-pill{ display:inline-block; background:rgba(255,255,255,.14); color:#fff; font-size:.72rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:999px; }
.beheer-hero h1{ font-size:clamp(1.5rem,3vw,2rem); margin:12px 0 6px; letter-spacing:-.02em; }
.beheer-hero p{ color:#c8bfb4; margin:0; }
.beheer-hero .bh-acties{ display:flex; gap:8px; flex-wrap:wrap; }
.beheer-hero .btn-ghost{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.25); }
.beheer-hero .btn-ghost:hover{ background:rgba(255,255,255,.18); }

.beheer-2col{ display:grid; grid-template-columns:1.6fr 1fr; gap:18px; }
@media(max-width:900px){ .beheer-2col{ grid-template-columns:1fr } }

.bh-mini{ display:flex; flex-direction:column; }
.bh-mini-r{ display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-top:1px solid var(--lijn); font-size:.92rem; color:var(--ink-2); }
.bh-mini-r:first-child{ border-top:none; }
.bh-mini-r b{ color:var(--ink); font-weight:800; font-variant-numeric:tabular-nums; }
.bh-lijst{ display:flex; flex-direction:column; gap:2px; }
.bh-lijst-r{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-top:1px solid var(--lijn); }
.bh-lijst-r:first-child{ border-top:none; }
.bh-huis{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:.92rem; }
.bh-huis svg{ width:17px; height:17px; color:var(--indigo); }
.bh-leden{ font-size:.82rem; color:var(--ink-3); font-weight:600; white-space:nowrap; }

/* --- Menu: compacter font + scrollbaar tussen logo en profielkaart --- */
.nav{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding-right:4px; }
.nav a{ font-size:.855rem; padding:8px 12px; gap:11px; border-radius:12px; }
.nav a svg:first-child{ width:18px; height:18px; }
.nav a .chev{ width:14px; height:14px; }
.nav .nav-label{ font-size:.65rem; padding:12px 12px 5px; }

/* =====================================================================
   Inloggen / aanmelden — premium split-screen (2026)
   ===================================================================== */
.auth2{ min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:1.05fr .95fr; background:var(--bg); color:var(--ink); }

.auth2-aside{ position:relative; overflow:hidden; color:#fff; padding:52px 48px;
  display:flex; flex-direction:column; justify-content:space-between; gap:28px;
  background:radial-gradient(130% 120% at 0% 0%, #ff9e4d 0%, var(--indigo) 46%, var(--indigo-700) 100%); }
.auth2-aside::before{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:54px 54px; -webkit-mask-image:radial-gradient(circle at 20% 15%,#000,transparent 75%); mask-image:radial-gradient(circle at 20% 15%,#000,transparent 75%); }
.auth2-aside::after{ content:""; position:absolute; right:-140px; bottom:-140px; width:460px; height:460px; border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.2),transparent 70%); pointer-events:none; }
.auth2-aside > *{ position:relative; z-index:1; }
.auth2-brand{ display:flex; align-items:center; gap:12px; font-weight:800; font-size:1.4rem; letter-spacing:-.02em; }
.auth2-mark{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.18); backdrop-filter:blur(4px); flex:none; }
.auth2-pitch h1{ font-size:clamp(1.9rem,3.1vw,2.7rem); line-height:1.08; letter-spacing:-.03em; font-weight:800; max-width:13ch; }
.auth2-punten{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:13px; }
.auth2-punten li{ display:flex; align-items:center; gap:11px; font-size:1.02rem; opacity:.96; }
.auth2-punten .tik{ width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.22); display:grid; place-items:center; flex:none; }
.auth2-quote{ margin:0; }
.auth2-quote p{ font-size:1.05rem; line-height:1.5; font-weight:500; }
.auth2-quote figcaption{ margin-top:14px; display:flex; align-items:center; gap:10px; font-size:.86rem; opacity:.92; font-weight:600; }
.auth2-quote .av{ width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.22); display:grid; place-items:center; font-weight:700; }

.auth2-main{ display:flex; align-items:center; justify-content:center; padding:44px 24px; background:var(--bg); }
.auth2-card{ width:100%; max-width:404px; animation:stkIn .55s cubic-bezier(.2,.7,.3,1) both; }
.auth2-mobielbrand{ display:none; margin-bottom:24px; color:var(--ink); }
.auth2-terug{ display:inline-flex; align-items:center; gap:6px; font-size:.85rem; color:var(--ink-3); font-weight:500; margin-bottom:22px; transition:color .15s; }
.auth2-terug:hover{ color:var(--indigo-700); }
.auth2-card h2{ font-size:1.75rem; letter-spacing:-.025em; }
.auth2-card > .muted{ margin:6px 0 24px; }
.auth2-card form{ display:flex; flex-direction:column; gap:15px; margin-top:4px; }
.auth2-card label{ display:flex; flex-direction:column; gap:7px; font-size:.82rem; font-weight:600; color:var(--ink-2); }
.auth2-card input[type=email],.auth2-card input[type=password],.auth2-card input[type=text]{
  font-family:inherit; font-size:.96rem; padding:13px 15px; border:1px solid var(--lijn-2); border-radius:12px;
  background:var(--paneel); color:var(--ink); transition:border-color .15s, box-shadow .15s; width:100%; }
.auth2-card input::placeholder{ color:var(--ink-3); opacity:.7; }
.auth2-card input:focus{ outline:none; border-color:var(--indigo); box-shadow:0 0 0 3px rgba(255,114,0,.14); }
.auth2-card .reg-blok{ display:flex; flex-direction:column; gap:7px; }
.auth2-card .btn-primary{ width:100%; justify-content:center; padding:14px; margin-top:6px; font-size:1rem; }
.auth2-card .auth-tabs{ margin:0 0 20px; }
.auth2-card .auth-wissel{ margin-top:20px; }

@media(max-width:900px){
  .auth2{ grid-template-columns:1fr; }
  .auth2-aside{ display:none; }
  .auth2-mobielbrand{ display:block; }
  .auth2-main{ padding:32px 20px; align-items:flex-start; }
  .auth2-card{ margin-top:8vh; }
}

/* =====================================================================
   REDESIGN 2026 — "Atelier": zwevende panelen, haarlijnen, rust
   (shell-wijzigingen op desktop; mobiel uitschuifmenu blijft intact)
   ===================================================================== */
:root{
  --radius:20px; --radius-sm:14px;
  --schaduw:0 1px 2px rgba(20,14,10,.04), 0 18px 44px -28px rgba(20,14,10,.22);
  --schaduw-lg:0 44px 90px -40px rgba(120,60,10,.36), 0 16px 40px -24px rgba(20,14,10,.24);
  --rand:var(--lijn);
}

/* Zachtere, iets diepere canvas achter de panelen */
body{ background:var(--bg); background:color-mix(in srgb, var(--ink) 6%, var(--bg)); }

/* ---- Zwevende shell (desktop) ---- */
@media(min-width:821px){
  .app{ padding:16px; gap:16px; background:transparent; }
  .sidebar{
    position:sticky; top:16px; height:calc(100vh - 32px);
    background:var(--paneel); border:1px solid var(--lijn); border-right:1px solid var(--lijn);
    border-radius:22px; box-shadow:var(--schaduw); padding:22px 14px;
  }
  .main{
    background:var(--bg); border:1px solid var(--lijn); border-radius:22px;
    box-shadow:var(--schaduw); min-height:calc(100vh - 32px); overflow:visible;
  }
  .main::before{ display:none; }
  .topbar{
    position:sticky; top:16px; z-index:20; margin:0; width:auto; max-width:none;
    background:var(--bg); border-bottom:1px solid var(--lijn);
    border-radius:22px 22px 0 0; backdrop-filter:none; padding:22px 32px;
  }
  .content{ max-width:1160px; padding:30px 32px 64px; }
}

/* ---- Zijbalk: rustiger, met fijnere nav ---- */
.sidebar .brand{ padding:6px 10px 18px; }
.nav a{ border-radius:13px; font-weight:500; }
.nav a:hover{ background:var(--indigo-soft); color:var(--indigo-700); }
.nav a.actief{
  background:var(--indigo); color:#fff; font-weight:600;
  box-shadow:0 12px 24px -12px var(--indigo);
}
.nav a.actief svg{ color:#fff; }
.nav .nav-label{ opacity:.9; }
.sidebar .user-card{ border-radius:16px; background:color-mix(in srgb, var(--ink) 3%, var(--paneel)); }

/* ---- Topbar: sterker, kalmer ---- */
.topbar .hallo{ font-size:1.6rem; }
.zoek{ border-radius:14px; background:color-mix(in srgb, var(--ink) 4%, var(--paneel)); border-color:transparent; }
.zoek:focus-within{ background:var(--paneel); }

/* ---- Kaarten: haarlijn + zachte diepte, ruimer ---- */
.card{
  border:1px solid var(--lijn); border-radius:18px; padding:24px;
  box-shadow:0 1px 2px rgba(20,14,10,.04), 0 16px 40px -30px rgba(20,14,10,.24);
}
.grid{ gap:18px; }

/* ---- Stat-cards: getal groter en strak ---- */
.stat-ico{ width:54px; height:54px; border-radius:15px; }
.stat-meta .num{ font-size:1.85rem; letter-spacing:-.03em; }

/* ---- Titels: iets groter, strakker ---- */
.content > h1, .paginakop h1{ font-size:clamp(1.7rem,2.7vw,2.15rem); letter-spacing:-.03em; }
.paginakop{ padding-bottom:6px; }

/* ---- Knoppen: net iets ronder ---- */
.btn{ border-radius:13px; }
.btn-primary{ box-shadow:0 12px 24px -12px var(--indigo); }

/* ---- Tabellen: luchtiger binnen de nieuwe kaarten ---- */
th,td{ padding:15px 18px; }

/* ---- Modals: passend bij de nieuwe radius ---- */
dialog.modal{ border-radius:22px; }

/* =====================================================================
   Mobiel als iOS-app — glazen tabbalk onderin, safe-areas, glas-header
   ===================================================================== */
.tabbar{ display:none; }

@media(max-width:820px){
  /* Tabbalk (liquid glass) */
  .tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    justify-content:space-around; align-items:stretch; gap:2px;
    padding:7px 6px calc(7px + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--paneel) 72%, transparent);
    -webkit-backdrop-filter:saturate(180%) blur(24px);
    backdrop-filter:saturate(180%) blur(24px);
    border-top:1px solid color-mix(in srgb, var(--ink) 9%, transparent);
    box-shadow:0 -8px 30px -18px rgba(20,14,10,.3);
  }
  .tabbar-item{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    background:none; border:none; font-family:inherit; text-decoration:none; cursor:pointer;
    color:var(--ink-3); font-size:.63rem; font-weight:600; letter-spacing:.01em;
    padding:5px 0 3px; border-radius:14px; transition:color .18s, transform .12s;
  }
  .tabbar-item .tb-ic{ width:30px; height:30px; display:grid; place-items:center; border-radius:11px; transition:background .2s; }
  .tabbar-item svg{ width:24px; height:24px; }
  .tabbar-item.actief{ color:var(--indigo); }
  .tabbar-item.actief .tb-ic{ background:var(--indigo-soft); }
  .tabbar-item:active{ transform:scale(.9); }

  /* Ruimte vrijhouden onder de content */
  .content{ padding-bottom:calc(90px + env(safe-area-inset-bottom)) !important; }

  /* Menu nu via 'Meer' — hamburger verbergen */
  .hamburger{ display:none !important; }

  /* App-achtige, glazen topbar met notch-ruimte */
  .topbar{
    background:color-mix(in srgb, var(--paneel) 70%, transparent);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px);
    padding-top:calc(14px + env(safe-area-inset-top));
    border-bottom:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  }

  /* Uitschuifmenu ("Meer") als nette sheet, boven de tabbalk */
  .overlay{ z-index:65; background:rgba(20,14,10,.4); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
  .sidebar{ z-index:70; width:82%; max-width:320px; border-radius:0 22px 22px 0;
    background:color-mix(in srgb, var(--paneel) 88%, transparent);
    -webkit-backdrop-filter:saturate(180%) blur(24px); backdrop-filter:saturate(180%) blur(24px);
    padding-top:calc(22px + env(safe-area-inset-top)); box-shadow:24px 0 60px -20px rgba(20,14,10,.4); }
}

/* Oudere browsers zonder backdrop-filter: val terug op vaste kleur */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media(max-width:820px){
    .tabbar{ background:var(--paneel); }
    .topbar{ background:var(--paneel); }
    .sidebar{ background:var(--paneel); }
  }
}

/* --- Beeldmerk-icoon (nieuw app-icoon) in de zijbalk --- */
.brand-icon{ width:40px; height:40px; border-radius:11px; display:block; flex:none;
  box-shadow:0 8px 18px -8px rgba(255,114,0,.55); transition:transform .3s cubic-bezier(.2,.7,.3,1); }
.sidebar .brand:hover .brand-icon{ transform:rotate(-5deg) scale(1.05); }

/* =====================================================================
   MOBIEL 2026 — native iOS-gevoel (glas, sheets, grote titels, spring)
   Alles gescoped op ≤820px; desktop blijft onaangeroerd.
   ===================================================================== */
.mob-titel{ display:none; }

@media(max-width:820px){
  html{ -webkit-text-size-adjust:100%; }
  body{ -webkit-font-smoothing:antialiased; }

  /* ---- Grote iOS-titel in de header, glas, met notch-ruimte ---- */
  .topbar{
    align-items:center; gap:12px; padding:calc(12px + env(safe-area-inset-top)) 20px 12px;
    transition:padding .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
  }
  .topbar .hallo{ display:none; }
  .mob-titel{
    display:block; font-size:1.7rem; font-weight:800; letter-spacing:-.03em; color:var(--ink);
    transition:font-size .28s cubic-bezier(.2,.7,.3,1);
  }
  /* Compacte header bij scrollen (collapsing large title) */
  .app.is-scrolled .topbar{ box-shadow:0 6px 20px -16px rgba(20,14,10,.5); }
  .app.is-scrolled .mob-titel{ font-size:1.15rem; }
  .topbar .rechts{ gap:10px; }
  .avatar-stack .avatar{ width:32px; height:32px; }

  /* ---- Content: één kolom, veel lucht ---- */
  .content{ padding:16px 18px calc(96px + env(safe-area-inset-bottom)); }
  .content > h1, .paginakop h1{ display:none; } /* titel staat al in de header */
  .paginakop{ margin-bottom:14px; }
  .paginakop .sub{ display:none; }
  .grid, .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr !important; gap:14px; }

  /* ---- Kaarten: glas, grote radius, ruim, tactiel ---- */
  .card{
    border-radius:24px; padding:22px; border:1px solid color-mix(in srgb, var(--ink) 7%, transparent);
    background:color-mix(in srgb, var(--paneel) 82%, transparent);
    -webkit-backdrop-filter:saturate(160%) blur(12px); backdrop-filter:saturate(160%) blur(12px);
    box-shadow:0 1px 2px rgba(20,14,10,.04), 0 22px 46px -32px rgba(20,14,10,.4);
  }
  .stat-card{ padding:18px; border-radius:22px; }
  .stat-meta .num{ font-size:2rem; }

  /* ---- Knoppen: grote touch targets, spring bij indrukken ---- */
  .btn{ padding:13px 20px; border-radius:14px; font-size:.98rem; min-height:48px; }
  .btn-klein{ min-height:38px; padding:9px 14px; }
  .btn:active{ transform:scale(.96); }

  /* ---- Inputs: rustig, groot, zachte focus ---- */
  .veld input, .veld textarea, .veld select,
  input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], select, textarea{
    font-size:16px !important; /* voorkomt inzoomen op iOS */
    padding:14px 15px; border-radius:14px; min-height:50px;
  }
  textarea{ min-height:96px; }

  /* ---- Tabbalk: zwevende glazen pill met actieve indicator ---- */
  .tabbar{
    left:14px; right:14px; bottom:calc(10px + env(safe-area-inset-bottom));
    padding:8px 8px; border-radius:26px;
    background:color-mix(in srgb, var(--paneel) 66%, transparent);
    -webkit-backdrop-filter:saturate(180%) blur(30px); backdrop-filter:saturate(180%) blur(30px);
    border:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
    box-shadow:0 18px 44px -18px rgba(20,14,10,.5);
  }
  .tabbar-item{ position:relative; gap:2px; font-size:.6rem; z-index:1; }
  .tabbar-item .tb-ic{ transition:transform .28s cubic-bezier(.34,1.56,.64,1); }
  .tabbar-item.actief .tb-ic{ transform:translateY(-1px) scale(1.06); }
  .tabbar-item.actief .tb-ic{ background:transparent; }
  /* vloeiende actieve 'pill' achter het icoon */
  .tabbar-item.actief::before{
    content:""; position:absolute; top:2px; left:50%; transform:translateX(-50%);
    width:52px; height:34px; border-radius:12px; background:var(--indigo-soft); z-index:-1;
    animation:tabPop .32s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes tabPop{ from{ transform:translateX(-50%) scale(.6); opacity:0 } to{ transform:translateX(-50%) scale(1); opacity:1 } }

  /* ---- Modals als native bottom-sheet ---- */
  dialog.modal{
    top:auto; bottom:0; left:0; right:0; margin:0; width:100%; max-width:100%;
    border:none; border-radius:26px 26px 0 0; padding:8px 20px calc(20px + env(safe-area-inset-bottom));
    box-shadow:0 -20px 60px -24px rgba(20,14,10,.5);
    animation:sheetUp .34s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes sheetUp{ from{ transform:translateY(100%) } to{ transform:translateY(0) } }
  dialog.modal::backdrop{ background:rgba(20,14,10,.42); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
  /* grijpstreepje bovenaan de sheet */
  dialog.modal .modal-kop{ position:relative; padding-top:20px; }
  dialog.modal .modal-kop::before{
    content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:40px; height:5px; border-radius:99px; background:color-mix(in srgb, var(--ink) 18%, transparent);
  }

  /* ---- Paginakop: primaire actie als volle, zachte knop ---- */
  .paginakop{ flex-wrap:wrap; }
  .paginakop .btn-primary{ width:100%; justify-content:center; }

  /* ---- Rustige scrollbar verbergen op mobiel ---- */
  *::-webkit-scrollbar{ width:0; height:0; }

  /* ---- Zwevende panelen uitzetten op mobiel (één vlak canvas) ---- */
  .main{ border:none; border-radius:0; box-shadow:none; background:transparent; }
}

/* Zachte pull-to-refresh indicator */
.ptr{ position:fixed; top:0; left:0; right:0; height:0; display:flex; align-items:center; justify-content:center;
  z-index:50; pointer-events:none; overflow:hidden; transition:height .2s ease; }
.ptr .spin{ width:26px; height:26px; border-radius:50%; border:2.5px solid color-mix(in srgb,var(--ink) 15%, transparent);
  border-top-color:var(--indigo); opacity:0; transition:opacity .2s; }
.ptr.actief .spin{ opacity:1; animation:ptrSpin .7s linear infinite; }
@keyframes ptrSpin{ to{ transform:rotate(360deg) } }

/* =====================================================================
   MOBIEL — landingpage-stijl doortrekken (crème pill-chrome, witte kaarten)
   ===================================================================== */
.mob-brand{ display:none; }

@media(max-width:820px){
  /* Warme, rustige canvas (effen, geen raster) */
  .app{ background:var(--bg); }

  /* ---- Zwevende merk-pill bovenin (i.p.v. grote titel in de balk) ---- */
  .topbar{
    position:sticky; top:calc(8px + env(safe-area-inset-top)); z-index:40;
    margin:calc(8px + env(safe-area-inset-top)) 14px 4px; width:auto; padding:11px 14px 11px 12px;
    border-radius:100px; border:1px solid color-mix(in srgb, var(--ink) 7%, transparent);
    background:color-mix(in srgb, var(--paneel) 72%, transparent);
    -webkit-backdrop-filter:saturate(180%) blur(24px); backdrop-filter:saturate(180%) blur(24px);
    box-shadow:0 10px 30px -16px rgba(20,14,10,.4);
  }
  .app.is-scrolled .topbar{ box-shadow:0 14px 34px -16px rgba(20,14,10,.5); }
  .mob-titel{ display:none; }
  .mob-brand{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.2rem; letter-spacing:-.02em; color:var(--ink); }
  .mob-brand img{ border-radius:9px; box-shadow:0 6px 14px -6px rgba(255,114,0,.55); }
  .topbar .rechts{ margin-left:auto; }

  /* ---- Paginatitel groot in de content (landing-koppenstijl) ---- */
  .content{ padding-top:8px; }
  .content > h1, .paginakop h1{ display:block; font-size:1.9rem; line-height:1.08; letter-spacing:-.03em; font-weight:800; }
  .paginakop .sub, .content > .sub{ display:block; color:var(--ink-3); font-size:.95rem; }
  .paginakop{ display:block; }
  .paginakop .btn-primary{ width:100%; margin-top:12px; }

  /* ---- Witte kaarten met zachte schaduw (zoals landing), geen glas ---- */
  .card{
    background:var(--paneel); -webkit-backdrop-filter:none; backdrop-filter:none;
    border:1px solid var(--lijn); border-radius:22px;
    box-shadow:0 1px 2px rgba(20,14,10,.04), 0 24px 48px -34px rgba(120,60,10,.4);
  }

  /* ---- Volledig ronde pill-knoppen (zoals landing) ---- */
  .btn{ border-radius:100px; }
  .btn-primary{ box-shadow:0 12px 26px -10px var(--indigo); }
  .btn-ghost{ background:var(--paneel); border:1px solid var(--lijn); box-shadow:var(--schaduw); }

  /* Zoekbalk als zachte pill */
  .zoek{ border-radius:100px; }

  /* Bottom-sheets blijven zoals iOS; chips/toolbars iets ruimer */
  .chip{ padding:9px 16px; }
}

/* =====================================================================
   MOBIEL — hamburger in de pill, blur-fade onderaan, vaste tabbalk
   ===================================================================== */
.tab-fade{ display:none; }

@media(max-width:820px){
  /* Hamburger terug, als nette ronde knop in de zwevende pill (links) */
  .hamburger{
    display:grid !important; place-items:center; width:40px; height:40px; flex:none;
    border-radius:50%; border:1px solid var(--lijn); background:var(--paneel); color:var(--ink);
    box-shadow:0 4px 12px -8px rgba(20,14,10,.4); margin-right:2px;
  }
  .hamburger:active{ transform:scale(.92); }
  .mob-brand{ font-size:1.12rem; }

  /* Zachte blur-fade onder de content, achter de zwevende tabbalk */
  .tab-fade{
    display:block; position:fixed; left:0; right:0; bottom:0; height:140px; z-index:55; pointer-events:none;
    background:linear-gradient(to top, var(--bg) 12%, color-mix(in srgb, var(--bg) 55%, transparent) 55%, transparent);
    -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
    -webkit-mask-image:linear-gradient(to top, #000 42%, transparent); mask-image:linear-gradient(to top, #000 42%, transparent);
  }

  /* Tabbalk blijft zeker vast onderaan, boven de fade */
  .tabbar{ position:fixed !important; z-index:60; }
}

/* Terugval zonder backdrop-filter: nette effen fade */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media(max-width:820px){ .tab-fade{ -webkit-backdrop-filter:none; backdrop-filter:none; } }
}

/* --- Logo-chip op het inlogpaneel (icoon in wit vlakje voor contrast) --- */
.auth2-mark{ background:#fff; padding:5px; }
.auth2-mark img{ width:100%; height:100%; border-radius:9px; display:block; }

/* =====================================================================
   WEB (desktop): hover-effecten uit — rustiger, geen beweging
   ===================================================================== */
@media (hover:hover) and (min-width:821px){
  .card:hover, .stat-card:hover, .tile:hover, .pin:hover, .contact-kaart:hover,
  .kanban-kaart:hover, .price:hover, .user-card:hover, .zoek-item:hover,
  .btn:hover, .btn-primary:hover, .btn-ghost:hover, .btn-klein:hover, .cbtn:hover,
  .nav a:hover{ transform:none !important; }
  .stat-card:hover .stat-ico, .sidebar .brand:hover .brand-icon,
  .nav a:hover svg, .fg-item:hover img, .hart:hover, .feat-card:hover,
  .feat-card:hover, .tile:hover{ transform:none !important; }
  .topbar:hover .hallo .wave{ animation:none !important; }
}

/* =====================================================================
   MOBIEL: hamburger + zoekknop verfijnd (2026 glas-rond)
   ===================================================================== */
@media(max-width:820px){
  .hamburger, .zoek-mobiel{
    display:grid !important; place-items:center; width:42px; height:42px; flex:none;
    border-radius:50%; border:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
    background:color-mix(in srgb, var(--paneel) 78%, transparent);
    -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
    color:var(--ink); box-shadow:0 6px 16px -10px rgba(20,14,10,.45);
    transition:transform .16s cubic-bezier(.34,1.56,.64,1), background .2s;
  }
  .hamburger:active, .zoek-mobiel:active{ transform:scale(.9); background:var(--indigo-soft); }
  .hamburger svg, .zoek-mobiel svg{ width:20px; height:20px; }
  .hamburger svg{ stroke-width:2.2; }
  .zoek-mobiel svg{ stroke-width:2.2; }
}

/* --- Wordmark-logo als betrouwbare tekst (rendert altijd, web + mobiel) --- */
.brand-woordmerk{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:800; letter-spacing:-.03em; color:var(--ink); line-height:1;
  display:inline-block; white-space:nowrap;
}

/* =====================================================================
   MOBIEL — verfijnde typeschaal (Apple-achtige hiërarchie)
   ===================================================================== */
@media(max-width:820px){
  .content > h1, .paginakop h1{ font-size:1.75rem; line-height:1.12; letter-spacing:-.03em; }
  .paginakop .sub, .content > .sub{ font-size:.95rem; line-height:1.45; }
  .card h3{ font-size:1.05rem; letter-spacing:-.01em; }
  .stat-meta .num{ font-size:1.9rem; }
  .stat-meta .label{ font-size:.82rem; }
  .mob-brand{ font-size:1.08rem; }
  .btn{ font-size:1rem; }
  .btn-klein{ font-size:.86rem; }
  table th{ font-size:.68rem !important; }
  table td{ font-size:.92rem; }
  .badge{ font-size:.74rem; }
  .chip{ font-size:.86rem; }
  .muted{ font-size:.92rem; }
  /* rustige regelafstand voor leesbaarheid */
  .card p, .card li{ line-height:1.5; }
}

/* =====================================================================
   Inspiratiebord — knoppen uniform (ronde witte 'like'-stijl) + uitlijning
   ===================================================================== */
.pin-top{
  position:absolute; top:10px; right:10px; left:auto; bottom:auto;
  display:flex; align-items:center; gap:7px; z-index:4; justify-content:flex-end;
  opacity:1; padding:0; background:none;
}
.pin-top form{ margin:0; }
.pin-top .ico-btn, .pin-top .hart{
  width:36px; height:36px; padding:0; border:none; border-radius:50%;
  background:rgba(255,255,255,.95); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:var(--ink); display:inline-flex; align-items:center; justify-content:center; gap:0;
  box-shadow:0 6px 16px -6px rgba(20,14,10,.55); cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.7,.3,1), background .16s, color .16s, opacity .2s;
}
.pin-top .ico-btn svg, .pin-top .hart svg{ width:18px; height:18px; }
.pin-top .ico-btn:hover{ background:#fff; transform:scale(1.08); }
.pin-top .ico-btn.rood:hover{ background:var(--rood); color:#fff; }
.pin-top .hart svg{ fill:none; stroke:var(--ink); stroke-width:2; }
.pin-top .hart.aan svg{ fill:#ff4d5e; stroke:#ff4d5e; }
.pin-top .hart.aan{ background:#fff; }
/* Niet-hart-knoppen verschijnen bij hover; hart is altijd zichtbaar */
.pin-top > button, .pin-top > form:not(.js-hart){ opacity:0; transform:translateY(-4px) scale(.9); pointer-events:none; }
.pin:hover .pin-top > button, .pin:hover .pin-top > form:not(.js-hart){ opacity:1; transform:none; pointer-events:auto; }
.pin-top > form.js-hart{ opacity:1; }

/* Onderrij (stem + meta) netjes onderaan, zelfde witte knopstijl */
.pin-hover{ justify-content:flex-end; }
.pin-bot{ align-items:center; }
.pin-stem{ gap:7px; } .pin-r{ gap:7px; }
.pin-bot .mini, .pin-bot .ico-btn{
  height:34px; border:none; border-radius:99px; padding:0 12px; gap:6px;
  background:rgba(255,255,255,.95); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:var(--ink); font-weight:700; font-size:.82rem; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px -6px rgba(20,14,10,.5); cursor:pointer;
}
.pin-bot .ico-btn svg, .pin-bot .mini svg{ width:16px; height:16px; }
.pin-bot .ico-btn:hover{ background:#fff; }
.pin-bot .mini.ja.actief{ background:var(--mint); color:#fff; }
.pin-bot .mini.nee.actief{ background:var(--rood); color:#fff; }

/* Touch (tablet e.d.): topknoppen altijd tonen */
@media(hover:none) and (min-width:621px){
  .pin-top > button, .pin-top > form:not(.js-hart){ opacity:1; transform:none; pointer-events:auto; }
}

/* =====================================================================
   Inspiratie — premium 'toevoegen'-popup + auto-ophalen
   ===================================================================== */
.modal-kop .modal-sub{ display:block; font-size:.8rem; font-weight:500; color:var(--ink-3); margin-top:2px; }
.modal-add .modal-body{ gap:14px; }
.og-invoer{ position:relative; display:flex; align-items:center; }
.og-invoer-ico{ position:absolute; left:14px; width:19px; height:19px; color:var(--ink-3); pointer-events:none; }
.og-invoer input{ width:100%; border:1.5px solid var(--lijn); background:var(--bg); border-radius:14px;
  padding:14px 44px 14px 42px; font-family:inherit; font-size:.95rem; color:var(--ink); transition:border-color .15s, box-shadow .15s; }
.og-invoer input:focus{ outline:none; border-color:var(--indigo); box-shadow:0 0 0 4px rgba(255,114,0,.14); }
.og-spin{ position:absolute; right:14px; width:18px; height:18px; border-radius:50%;
  border:2px solid var(--lijn); border-top-color:var(--indigo); opacity:0; transition:opacity .2s; }
.og-bezig .og-spin{ opacity:1; animation:og-draai .7s linear infinite; }
@keyframes og-draai{ to{ transform:rotate(360deg); } }
.og-status{ font-size:.8rem; font-weight:600; margin:0; padding-left:2px; }
.og-status.bezig{ color:var(--ink-3); }
.og-status.ok{ color:#087443; }
.og-status.fout{ color:var(--rood); }

.og-kaart{ display:none; align-items:center; gap:14px; background:var(--bg); border:1px solid var(--lijn);
  border-radius:16px; padding:12px; overflow:hidden; animation:fadein .3s ease; }
.og-kaart.actief{ display:flex; }
.og-kaart-beeld{ flex:none; width:74px; height:74px; border-radius:12px; overflow:hidden; background:var(--indigo-soft);
  display:grid; place-items:center; }
.og-kaart-beeld img{ width:100%; height:100%; object-fit:cover; display:block; }
.og-kaart.geen-beeld .og-kaart-beeld{ display:none; }
.og-kaart-tekst{ min-width:0; flex:1; }
.og-kaart .og-t{ font-size:.95rem; font-weight:700; line-height:1.3; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.og-kaart .og-dom{ font-size:.78rem; color:var(--ink-3); margin-top:3px; }

/* =====================================================================
   Inspiratie — mobiele tegel: avatar + hamburger-menu rechtsonder
   ===================================================================== */
.pin-mobiel{ display:none; }
@media(max-width:620px){
  .pin-hover{ display:none !important; }
  .pin-top{ display:none !important; }
  .pin-mobiel{ display:flex; position:absolute; right:8px; bottom:8px; align-items:center; gap:7px; z-index:6; }
  .pin-mob-avatar{ line-height:0; border-radius:50%; box-shadow:0 3px 10px -2px rgba(20,14,10,.6); }
  .pin-mob-avatar .avatar, .pin-mob-avatar img{ border:2px solid rgba(255,255,255,.9); }
  .pin-mob-menu{ width:38px; height:38px; border:none; border-radius:50%; background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--ink);
    display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:0 6px 16px -5px rgba(20,14,10,.6); }
  .pin-mob-menu:active{ transform:scale(.93); }
  .pin-mob-menu svg{ width:19px; height:19px; }
}

/* Tegel-menu als bottom-sheet */
.menu-sheet .menu-sheet-kop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:4px 4px 14px; }
.menu-sheet .menu-sheet-kop b{ font-size:1.02rem; line-height:1.3; }
.menu-sheet-stem{ display:flex; gap:10px; margin-bottom:12px; }
.menu-stemknop{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1.5px solid var(--lijn); background:var(--paneel); border-radius:13px; padding:12px; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:.9rem; color:var(--ink-2); transition:.15s; }
.menu-stemknop svg{ width:18px; height:18px; }
.menu-stemknop b{ font-variant-numeric:tabular-nums; }
.menu-stemknop.actief-ja{ background:var(--mint,#e6f6ee); border-color:transparent; color:#087443; }
.menu-stemknop.actief-nee{ background:var(--rood-soft); border-color:transparent; color:var(--rood); }
.menu-sheet-lijst{ display:flex; flex-direction:column; gap:2px; }
.menu-sheet-lijst form{ margin:0; }
.menu-actie{ width:100%; display:flex; align-items:center; gap:13px; border:none; background:none; cursor:pointer;
  font-family:inherit; font-size:.95rem; font-weight:600; color:var(--ink); text-align:left; text-decoration:none;
  padding:14px 12px; border-radius:12px; transition:background .14s; }
.menu-actie:hover, .menu-actie:active{ background:var(--indigo-soft); }
.menu-actie svg{ width:19px; height:19px; flex:none; color:var(--ink-2); }
.menu-actie span{ flex:1; }
.menu-actie em{ font-style:normal; font-weight:700; color:var(--ink-3); background:var(--bg); border-radius:99px; padding:2px 9px; font-size:.8rem; }
.menu-actie.aan-hart svg{ color:#ff4d5e; fill:#ff4d5e; }
.menu-actie.rood{ color:var(--rood); }
.menu-actie.rood svg{ color:var(--rood); }
.menu-actie.rood:hover{ background:var(--rood-soft); }
@media(max-width:620px){
  .menu-sheet .menu-sheet-kop{ position:relative; padding-top:22px; }
  .menu-sheet .menu-sheet-kop::before{ content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:40px; height:5px; border-radius:99px; background:color-mix(in srgb, var(--ink) 18%, transparent); }
}

/* =====================================================================
   Tijdlijn — "reis van jullie huis" (Polarsteps-stijl feed)
   ===================================================================== */
.tl-hero{ margin-bottom:22px; }
.tl-tellers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:18px; }
.tl-teller{ text-align:left; }
.tl-teller .n{ font-size:1.9rem; font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.tl-teller .l{ font-size:.8rem; color:var(--ink-3); margin-top:5px; font-weight:500; }

.tijdlijn{ position:relative; }
.tijdlijn::before{ content:""; position:absolute; left:19px; top:8px; bottom:26px; width:2px;
  background:linear-gradient(var(--lijn), var(--lijn) 88%, transparent); }
.tl-maand{ padding-left:56px; margin:26px 0 12px; font-size:.72rem; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); }
.tl-maand:first-child{ margin-top:2px; }
.tl-item{ position:relative; padding-left:56px; margin-bottom:16px; }
.tl-dot{ position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  color:#fff; box-shadow:0 8px 18px -8px rgba(20,14,10,.5); z-index:1; }
.tl-dot svg{ width:19px; height:19px; }
.tl-dot.oranje{ background:linear-gradient(135deg,#ff9e4d,var(--indigo)); }
.tl-dot.groen{ background:var(--mint); }
.tl-dot.blauw{ background:#2e79f0; }
.tl-dot.paars{ background:#7a5af8; }
.tl-dot.geel{ background:#f4a52b; }
.tl-kaart{ background:var(--paneel); border:1px solid var(--lijn); border-radius:18px; padding:16px 18px;
  box-shadow:0 1px 2px rgba(20,14,10,.04), 0 16px 38px -30px rgba(20,14,10,.3); }
.tl-kop{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.tl-kop h3{ font-size:1.05rem; letter-spacing:-.01em; margin-top:5px; line-height:1.25; }
.tl-datum{ font-size:.8rem; color:var(--ink-3); font-weight:700; white-space:nowrap; flex:none; margin-top:3px; }
.tl-badge{ display:inline-block; font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  padding:3px 9px; border-radius:99px; background:var(--indigo-soft); color:var(--indigo-700); }
.tl-badge.groen{ background:var(--mint-soft); color:#0d6b47; }
.tl-badge.blauw{ background:#e7f0ff; color:#1b5fd0; }
.tl-badge.paars{ background:#efeaff; color:#5a3fd6; }
.tl-badge.geel{ background:var(--geel-soft); color:var(--geel); }
.tl-tekst{ color:var(--ink-2); font-size:.92rem; margin-top:7px; line-height:1.5; }
.tl-foto{ width:100%; border-radius:13px; margin-top:12px; display:block; }
.tl-voet{ display:flex; align-items:center; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--lijn); }
.tl-auteur{ display:flex; align-items:center; gap:8px; font-size:.85rem; font-weight:600; color:var(--ink-2); }
.tl-start{ padding-left:56px; margin-top:6px; color:var(--ink-3); font-size:.85rem; }
@media(max-width:560px){
  .tl-item, .tl-maand, .tl-start{ padding-left:48px; }
  .tijdlijn::before{ left:16px; }
  .tl-dot{ width:34px; height:34px; }
}

/* =====================================================================
   Compacter zijmenu
   ===================================================================== */
.sidebar{ gap:3px; }
.sidebar .brand{ gap:9px; }
@media(min-width:821px){
  .sidebar{ padding:16px 12px; }
  .sidebar .brand{ padding:4px 8px 12px; }
}
.brand-icon{ width:34px !important; height:34px !important; }
.nav{ gap:2px; }
.nav a{ padding:7px 11px; gap:10px; font-size:.85rem; border-radius:11px; }
.nav a svg:first-child{ width:17px; height:17px; }
.nav .nav-label{ padding:11px 11px 4px; font-size:.62rem; }
.sidebar .user-card{ padding:9px 10px; }
.user-card .info b{ font-size:.85rem; }
.user-card .info span{ font-size:.72rem; }

/* --- Tijdlijn: deel-kaart --- */
.tl-deel{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:6px; }
.tl-deel-tekst{ min-width:0; flex:1; }
.tl-deel-tekst h3{ margin:0 0 4px; font-size:1.05rem; }
.tl-deel-tekst p{ margin:0; font-size:.9rem; }

/* =====================================================================
   Openbare reis-pagina (read-only deellink)
   ===================================================================== */
.reis-body{ margin:0; background:var(--bg); color:var(--ink); min-height:100vh;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; }
.reis-top{ display:flex; justify-content:space-between; align-items:center; max-width:760px; margin:0 auto;
  padding:calc(16px + env(safe-area-inset-top)) 20px 8px; }
.reis-merk{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.15rem; letter-spacing:-.02em; }
.reis-merk img{ border-radius:8px; }
.reis-wrap{ max-width:760px; margin:0 auto; padding:10px 20px calc(70px + env(safe-area-inset-bottom)); }
.reis-hero{ text-align:center; padding:22px 0 32px; }
.reis-kicker{ display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--indigo-700); background:var(--indigo-soft); border:1px solid #ffd9b8; padding:6px 14px; border-radius:999px; }
.reis-hero h1{ font-size:clamp(2rem,6vw,2.9rem); letter-spacing:-.03em; margin:16px 0 4px; font-weight:800; line-height:1.05; }
.reis-plaats{ color:var(--ink-3); margin:0; }
.reis-hero .tl-tellers{ max-width:540px; margin:22px auto 0; }
.reis-hero .tl-teller{ text-align:center; }
.reis-voet{ text-align:center; color:var(--ink-3); font-size:.88rem; margin-top:34px; }
.reis-voet a{ color:var(--indigo-700); font-weight:700; }
.reis-leeg{ max-width:460px; margin:0 auto; text-align:center; padding:16vh 24px; }
.reis-leeg h1{ font-size:1.7rem; margin:14px 0 8px; letter-spacing:-.02em; }
.reis-leeg p{ color:var(--ink-2); margin-bottom:22px; }

/* --- Tijdlijn: momentbeheer-knoppen duidelijk zichtbaar --- */
.tl-voet .ico-btn{
  width:36px; height:36px; padding:0; border-radius:11px; border:1px solid var(--lijn);
  background:var(--bg); color:var(--ink-2); display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s, color .15s, border-color .15s, transform .15s;
}
.tl-voet .ico-btn svg{ width:17px; height:17px; }
.tl-voet .ico-btn:hover{ background:var(--paneel); color:var(--ink); }
.tl-voet .ico-btn.rood{ }
.tl-voet .ico-btn.rood:hover{ background:var(--rood-soft); color:var(--rood); border-color:transparent; }
.tl-voet form{ margin:0; }

/* Slogan op de publieke tijdlijn */
.reis-slogan{ margin:4px 0 0; font-family:'Instrument Serif',Georgia,serif; font-style:italic;
  font-size:1.25rem; color:var(--indigo-700); letter-spacing:.01em; }

/* =====================================================================
   Premium live landingspagina-editor (3 panelen: navigatie · velden · voorbeeld)
   ===================================================================== */
.content:has(.pb-shell){ max-width:none; }

/* Kopbalk */
.pb-top{ display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:18px; }
.pb-top h1{ font-size:clamp(1.7rem,2.7vw,2.15rem); font-weight:800; letter-spacing:-.03em; margin:0; line-height:1.05; }
.pb-top .sub{ margin:4px 0 0; color:var(--ink-3); }
.pb-top-r{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pb-status{ display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:600; color:var(--ink-3);
  background:var(--paneel); border:1px solid var(--lijn); border-radius:99px; padding:7px 14px; }
.pb-status-dot{ width:8px; height:8px; border-radius:50%; background:#22b07d; transition:.2s; }
.pb-status[data-staat=bezig] .pb-status-dot{ background:var(--indigo); animation:pols 1s infinite; }
@keyframes pols{ 0%,100%{opacity:1} 50%{opacity:.3} }

/* Shell: rail + velden + voorbeeld */
.pb-shell{ display:grid; grid-template-columns:248px minmax(340px,420px) minmax(0,1fr); gap:20px; align-items:start; }

/* Pane 1 — navigatie */
.pb-nav{ position:sticky; top:92px; display:flex; flex-direction:column; gap:12px; max-height:calc(100vh - 110px); }
.pb-zoek{ position:relative; display:flex; align-items:center; }
.pb-zoek svg{ position:absolute; left:12px; width:16px; height:16px; color:var(--ink-3); pointer-events:none; }
.pb-zoek input{ width:100%; border:1px solid var(--lijn); background:var(--paneel); border-radius:12px; padding:10px 12px 10px 36px;
  font-family:inherit; font-size:.86rem; color:var(--ink); }
.pb-zoek input:focus{ outline:none; border-color:var(--indigo); box-shadow:0 0 0 3px rgba(255,114,0,.14); }
.pb-navlijst{ display:flex; flex-direction:column; gap:3px; overflow-y:auto; padding-right:2px; margin:0 -2px; }
.pb-navitem{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; border:1px solid transparent; background:none;
  border-radius:13px; padding:9px 10px; cursor:pointer; font-family:inherit; color:var(--ink-2); transition:background .15s, border-color .15s, transform .12s; }
.pb-navitem:hover{ background:var(--paneel); }
.pb-navitem:active{ transform:scale(.985); }
.pb-navitem.actief{ background:var(--paneel); border-color:var(--lijn); box-shadow:var(--schaduw-sm); }
.pb-navico{ flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--bg); border:1px solid var(--lijn); color:var(--ink-2); transition:.15s; }
.pb-navico svg{ width:18px; height:18px; }
.pb-navitem.actief .pb-navico{ background:var(--indigo); border-color:var(--indigo); color:#fff; box-shadow:0 8px 16px -8px rgba(255,114,0,.6); }
.pb-navtxt{ min-width:0; flex:1; display:flex; flex-direction:column; line-height:1.2; }
.pb-navtxt b{ font-size:.9rem; font-weight:700; color:var(--ink); }
.pb-navtxt small{ font-size:.72rem; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-oog{ flex:none; width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:var(--ink-3); cursor:pointer; transition:.15s; }
.pb-oog:hover{ background:var(--bg); color:var(--ink); }
.pb-oog svg{ width:17px; height:17px; }
.pb-oog .oog-dicht{ display:none; }
.pb-oog.uit{ color:#c2704a; }
.pb-oog.uit .oog-open{ display:none; }
.pb-oog.uit .oog-dicht{ display:inline; }
.pb-nav-scheiding{ font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:12px 10px 4px; }
.pb-nav-geen{ font-size:.82rem; color:var(--ink-3); padding:8px 10px; }

/* Pane 2 — velden */
.pb-fields{ min-width:0; max-height:calc(100vh - 110px); overflow-y:auto; padding-right:4px; margin-right:-4px; }
.pb-fields .card{ box-shadow:none; }
.pb-fields .admin-sectiekop h3{ font-size:1.4rem; font-weight:800; letter-spacing:-.02em; }
.pb-fields .admin-grid{ grid-template-columns:1fr; }
.pb-fields .admin-veld{ padding:9px 0; }

/* Pane 3 — live voorbeeld */
.pb-preview{ position:sticky; top:92px; }
.pb-frame-bar{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.pb-device{ display:flex; gap:3px; background:var(--paneel); border:1px solid var(--lijn); border-radius:11px; padding:3px; }
.pb-device button{ border:none; background:none; padding:7px 14px; border-radius:8px; font-family:inherit; font-weight:600; font-size:.82rem; color:var(--ink-3); cursor:pointer; transition:.15s; }
.pb-device button.actief{ background:var(--indigo); color:#fff; box-shadow:0 8px 16px -8px rgba(255,114,0,.6); }
.pb-frame-info{ font-size:.78rem; font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.pb-frame-buiten{ display:flex; justify-content:center; }
.pb-frame-wrap{ border:1px solid var(--lijn); border-radius:18px; overflow:hidden; background:var(--paper); box-shadow:var(--schaduw-lg);
  height:calc(100vh - 190px); transition:width .32s cubic-bezier(.2,.7,.3,1), border-radius .3s; }
.pb-frame-wrap.tablet{ border-radius:26px; border-width:8px; }
.pb-frame-wrap.mobiel{ border-radius:38px; border-width:9px; }
.pb-frame-wrap iframe{ border:0; display:block; background:var(--paper); transform-origin:0 0; }

.pb-toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(16px); z-index:200;
  background:var(--ink); color:#fff; padding:11px 20px; border-radius:99px; font-size:.86rem; font-weight:700;
  opacity:0; pointer-events:none; transition:opacity .22s, transform .22s; box-shadow:var(--schaduw-lg); }
.pb-toast.zien{ opacity:1; transform:translateX(-50%) translateY(0); }

@media(max-width:1200px){
  .pb-shell{ grid-template-columns:220px 1fr; }
  .pb-preview{ grid-column:1 / -1; position:static; margin-top:8px; }
  .pb-frame-wrap{ height:70vh; }
}
@media(max-width:820px){
  .pb-shell{ grid-template-columns:1fr; }
  .pb-nav{ position:static; max-height:none; }
  .pb-navlijst{ flex-direction:row; flex-wrap:wrap; }
  .pb-navitem{ width:auto; }
  .pb-navtxt small{ display:none; }
  .pb-fields{ max-height:none; overflow:visible; }
}

/* Eigen secties beheren */
.sec-lijst{ display:flex; flex-direction:column; gap:12px; }
.sec-rij{ border:1px solid var(--lijn); border-radius:14px; background:var(--paneel); overflow:hidden; }
.sec-rij.verborgen{ opacity:.6; }
.sec-rij-hoofd{ display:flex; align-items:center; gap:14px; padding:12px; }
.sec-thumb{ width:66px; height:52px; object-fit:cover; border-radius:9px; flex:none; border:1px solid var(--lijn); }
.sec-thumb.leeg{ display:flex; align-items:center; justify-content:center; text-align:center; font-size:.66rem; line-height:1.05; color:var(--ink-3); background:var(--bg); }
.sec-rij-tekst{ min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.sec-rij-tekst strong{ font-size:.95rem; }
.sec-rij-tekst .muted{ font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sec-rij-tekst .sec-meta{ font-size:.72rem; }
.sec-rij-knoppen{ display:flex; align-items:center; gap:5px; flex:none; }
.sec-rij-knoppen form{ margin:0; }
.sec-rij-knoppen .btn{ padding:6px 9px; }
.sec-del{ color:#b3261e; }
.sec-bewerk{ border-top:1px solid var(--lijn); }
.sec-bewerk summary{ cursor:pointer; padding:10px 14px; font-weight:600; font-size:.85rem; color:var(--indigo); list-style:none; }
.sec-bewerk summary::-webkit-details-marker{ display:none; }
.sec-bewerk[open] summary{ border-bottom:1px solid var(--lijn); }
.sec-form{ display:flex; flex-direction:column; gap:6px; padding:14px; }
.sec-form .admin-label{ margin-top:6px; }
.sec-form input[type=text], .sec-form textarea, .sec-form select{ width:100%; }
.sec-nieuw{ border-top:1px dashed var(--lijn); margin-top:18px; }
.sec-nieuw .sec-form{ padding:0; }