/* Blogbeheer Grandeur Stijl. Zelfde merk als de site (Jost, teal, messing,
   geen afgeronde hoeken), maar rustiger: dit is gereedschap, geen etalage.
   Groot en duidelijk, zodat het zonder uitleg werkt. */

:root{
  --teal:#1D3439; --teal-2:#2a4a50; --brass:#C1997D; --brass-d:#a9805f; --tint:#FAF9FD;
  --ink:#1D3439; --body:#5d6466; --zacht:#6b7274; --line:#e6e3ea; --line-2:#d3cfd8;
  --ok:#2f7a4f; --ok-bg:#eaf5ee; --fout:#b0403a; --fout-bg:#fbeceb; --geel:#8a5f0f; --geel-bg:#fbf3e3; --blauw:#2f5d8a; --blauw-bg:#e9f0f7;
}
*{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }
body{ font:400 16px/1.55 Jost, system-ui, sans-serif; color:var(--body); background:var(--tint); min-height:100vh }
a{ color:inherit }
button, input, select, textarea{ font:inherit; color:inherit }
img{ max-width:100%; display:block }
[hidden]{ display:none !important }
b{ font-weight:600; color:var(--ink) }
em{ font-style:normal; font-weight:400; color:var(--zacht); margin-left:6px; font-size:.86em }

/* ---------- balk ---------- */
.balk{ background:var(--teal); color:#fff; position:sticky; top:0; z-index:20 }
.balk-in{ max-width:1240px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:20px; justify-content:space-between }
.balk-merk{ display:flex; align-items:center; gap:14px; text-decoration:none }
.balk-merk span{ font-size:.78rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--brass);
                 border-left:1px solid rgba(255,255,255,.25); padding-left:14px }
.balk-nav{ display:flex; align-items:center; gap:22px; font-size:.95rem }
.balk-nav a, .balk-nav button{ color:rgba(255,255,255,.82); text-decoration:none; background:none; border:0; cursor:pointer; padding:4px 0 }
.balk-nav a:hover, .balk-nav button:hover{ color:#fff }
.balk-wie{ opacity:.7 }

.hoofd{ max-width:1240px; margin:0 auto; padding:34px 24px 80px }

/* ---------- koppen ---------- */
.kop{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; flex-wrap:wrap }
.kop h1{ font-size:2.1rem; font-weight:600; letter-spacing:-.03em; color:var(--ink); line-height:1.15 }
.kop-klein h1{ font-size:1.7rem }
.kop-sub{ margin-top:6px; color:var(--zacht) }
.terug{ display:inline-block; margin-bottom:8px; font-size:.92rem; color:var(--zacht); text-decoration:none }
.terug:hover{ color:var(--ink) }

/* ---------- knoppen ---------- */
.knop{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 24px;
       border:1px solid transparent; font-weight:500; font-size:1rem; cursor:pointer; text-decoration:none;
       transition:background .2s, border-color .2s, color .2s }
.knop-hoofd{ background:var(--brass); color:#fff }
.knop-hoofd:hover{ background:var(--brass-d) }
.knop-hoofd span{ font-size:1.3rem; line-height:1; margin-top:-2px }
.knop-tweede{ background:#fff; border-color:var(--line-2); color:var(--ink) }
.knop-tweede:hover{ border-color:var(--ink) }
.knop-tekst{ background:none; color:var(--ink); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--brass); min-height:40px }
.knop-tekst:hover{ color:var(--brass-d) }
.knop-zacht{ color:var(--zacht); text-decoration-color:var(--line-2); font-weight:400 }
.knop-zacht:hover{ color:var(--fout) }
.knop:focus-visible, .actie:focus-visible, .editor-knoppen button:focus-visible{ outline:2px solid var(--brass-d); outline-offset:2px }
.knop-breed{ width:100% }
.knop-klein{ min-height:38px; padding:0 14px; font-size:.92rem }
.knop:disabled{ opacity:.55; cursor:wait }

/* ---------- meldingen ---------- */
.melding{ padding:14px 18px; margin-bottom:22px; border-left:3px solid; font-weight:500 }
.melding a{ margin-left:8px; font-weight:500 }
.melding-info{ background:var(--geel-bg); border-color:var(--geel); color:#5f430c }
.melding-rij{ display:flex; gap:14px; align-items:center; flex-wrap:wrap }
.melding-knop{ margin-left:12px; background:none; border:0; padding:0; font:inherit; font-weight:600; color:inherit;
               text-decoration:underline; text-underline-offset:3px; cursor:pointer }
.melding-ok{ background:var(--ok-bg); border-color:var(--ok); color:var(--ok) }
.melding-fout{ background:var(--fout-bg); border-color:var(--fout); color:var(--fout) }
.veld-fout{ color:var(--fout); font-weight:500; font-size:.94rem; margin-top:8px }

/* ---------- overzicht ---------- */
.lijst{ list-style:none; background:#fff; border:1px solid var(--line) }
.rij{ display:grid; grid-template-columns:120px 1fr auto; gap:22px; align-items:center; padding:16px 20px; border-top:1px solid var(--line) }
.rij:first-child{ border-top:0 }
.rij.is-nieuw{ animation:oplicht 2.4s ease-out }
@keyframes oplicht{ from{ background:#f6eee6 } to{ background:#fff } }
.rij-beeld{ display:block; aspect-ratio:4/3; background:var(--tint); overflow:hidden }
.rij-beeld img{ width:100%; height:100%; object-fit:cover }
.rij-geenbeeld{ display:flex; height:100%; align-items:center; justify-content:center; font-size:.8rem; color:var(--zacht) }
.rij-kop{ font-size:1.14rem; font-weight:600; color:var(--ink); line-height:1.3; letter-spacing:-.01em }
.rij-meta{ margin-top:5px; font-size:.92rem; color:var(--zacht) }
.rij-acties{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end }
.inline{ display:inline }
.actie{ display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border:1px solid var(--line-2); background:#fff;
        color:var(--ink); font-size:.93rem; font-weight:500; cursor:pointer; text-decoration:none; white-space:nowrap }
.actie:hover{ border-color:var(--ink) }
.actie-hoofd{ background:var(--teal); border-color:var(--teal); color:#fff }
.actie-hoofd:hover{ background:var(--teal-2) }
.actie-gevaar{ color:var(--fout) }
.actie-gevaar:hover{ border-color:var(--fout) }
.actie-gevaar.is-zeker{ background:var(--fout); border-color:var(--fout); color:#fff }
.label{ display:inline-block; vertical-align:3px; margin-left:8px; padding:2px 9px; font-size:.72rem; font-weight:500;
        letter-spacing:.08em; text-transform:uppercase }
.label-online{ background:var(--ok-bg); color:var(--ok) }
.label-concept{ background:var(--geel-bg); color:var(--geel) }
.label-ingepland{ background:var(--blauw-bg); color:var(--blauw) }
.label-weg{ background:var(--fout-bg); color:var(--fout) }
.leeg{ padding:40px 24px; text-align:center; color:var(--zacht) }
.voet-link{ margin-top:18px; font-size:.94rem }
.voet-link a{ color:var(--zacht) }
.rij-smal{ grid-template-columns:1fr auto }
.toevoegen{ margin-top:22px }
.toevoegen .knop{ margin-top:16px }

/* ---------- bewerken ---------- */
.bewerk{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:26px; align-items:start }
.bewerk-hoofd, .bewerk-zij{ display:grid; gap:20px; min-width:0 }
.blok{ background:#fff; border:1px solid var(--line); padding:24px }
.blok.smal{ max-width:480px }
.blok-plak{ display:grid; gap:10px }

/* ---------- opslaanbalk onderin ----------
   Verschijnt pas als het opslaanblok rechts uit beeld is, zodat opslaan altijd
   binnen handbereik is zonder dat er iets over het formulier heen schuift. */
.opslaanbalk{ position:fixed; left:0; right:0; bottom:0; z-index:30; background:#fff; border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(29,52,57,.08); transform:translateY(110%); visibility:hidden;
  transition:transform .25s ease, visibility 0s linear .25s }
.opslaanbalk.is-zichtbaar{ transform:none; visibility:visible; transition:transform .25s ease, visibility 0s }
.opslaanbalk-in{ max-width:1240px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px }
.opslaanbalk .status-regel{ margin:0; font-size:.95rem }
.opslaanbalk-knoppen{ display:flex; gap:10px; margin-left:auto }
.is-bewerk .hoofd{ padding-bottom:120px }
.veld{ display:block; margin-top:18px }
.blok > .veld:first-child, .blok > label.veld:first-of-type{ margin-top:0 }
.veld > span{ display:block; font-weight:500; color:var(--ink); margin-bottom:8px; font-size:.98rem }
.veld input, .veld textarea, .veld select{ width:100%; border:1px solid var(--line-2); background:#fff; padding:12px 14px; border-radius:0;
  transition:border-color .2s, box-shadow .2s; min-height:48px }
.veld textarea{ resize:vertical; line-height:1.55 }
.veld input:focus, .veld textarea:focus, .veld select:focus{ outline:0; border-color:var(--brass); box-shadow:0 0 0 3px rgba(193,153,125,.22) }
.veld-groot input{ font-size:1.5rem; font-weight:600; color:var(--ink); letter-spacing:-.02em; padding:12px 16px }
.veld-klein{ margin-top:14px }
.veld-klein > span{ font-size:.92rem }
.teller{ display:block; text-align:right; font-size:.8rem; color:var(--zacht); margin-top:4px }
.teller.te-lang{ color:var(--geel) }
.hint{ font-size:.9rem; color:var(--zacht); margin-top:10px }
.hint-let-op{ color:var(--geel); font-weight:500 }
.zacht{ color:var(--zacht) }
.status-regel{ display:flex; align-items:center; gap:10px; font-weight:500; color:var(--ink); margin-bottom:6px }
.stip{ width:10px; height:10px; border-radius:50%; background:var(--geel); flex:none }
.stip-online{ background:var(--ok) }
.stip-ingepland{ background:var(--blauw) }
.adres{ font-size:.86rem; color:var(--zacht); overflow-wrap:anywhere; border-top:1px solid var(--line); padding-top:12px; margin-top:4px }
.adres b{ font-weight:500; color:var(--body) }

/* ---------- editor ---------- */
.editor{ border:1px solid var(--line-2); background:#fff }
.editor:focus-within{ border-color:var(--brass); box-shadow:0 0 0 3px rgba(193,153,125,.22) }
.editor-knoppen{ display:flex; flex-wrap:wrap; gap:2px; padding:8px; border-bottom:1px solid var(--line); background:#fcfbfd;
                 position:sticky; top:77px; z-index:5 }
.editor-knoppen button{ min-height:38px; padding:0 7px; border:1px solid transparent; background:none; cursor:pointer; font-size:.9rem;
                        color:var(--ink); display:inline-flex; align-items:center; gap:6px }
.editor-knoppen svg{ flex:none; color:var(--body) }
.editor-knoppen button.is-aan svg{ color:#fff }
.editor-knoppen .knop-rechts{ margin-left:auto; color:var(--body) }
.editor-knoppen button:disabled{ opacity:.6; cursor:wait }
.editor-melding{ margin:0; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--fout-bg) }
.editor-knoppen button:hover{ background:#fff; border-color:var(--line-2) }
.editor-knoppen button.is-aan{ background:var(--teal); color:#fff }
.editor-knoppen button.is-aan b{ color:#fff }
.scheiding{ width:1px; background:var(--line); margin:4px 2px }
.editor-link{ display:flex; gap:8px; padding:10px; border-bottom:1px solid var(--line); background:#fcfbfd; flex-wrap:wrap }
.editor-link input{ flex:1 1 260px; min-height:38px; border:1px solid var(--line-2); padding:0 12px }
.editor-link input:focus{ outline:0; border-color:var(--brass) }
.editor-foto{ display:flex; gap:10px; align-items:center; padding:10px; border-bottom:1px solid var(--line); background:#fbf6f2; flex-wrap:wrap }
.editor-foto label{ display:flex; gap:10px; align-items:center; flex:1 1 320px; font-size:.92rem; font-weight:500; color:var(--ink) }
.editor-foto input{ flex:1; min-height:38px; border:1px solid var(--line-2); padding:0 12px; font-weight:400 }
.editor-foto input:focus{ outline:0; border-color:var(--brass) }
.versie-wat{ font-size:.86rem }
.editor-vlak{ min-height:420px; padding:22px 26px 30px; outline:0 }
.editor-vlak.is-leeg::before{ content:attr(data-leeg); color:var(--zacht); pointer-events:none; display:block; position:absolute; max-width:36rem }
.editor-vlak{ position:relative }

/* De tekst in de editor lijkt op het artikel op de site */
.artikel-look{ color:var(--body); font-size:1.06rem; line-height:1.7 }
.artikel-look > * + *{ margin-top:14px }
.artikel-look h2{ font-size:1.5rem; font-weight:600; letter-spacing:-.02em; color:var(--ink); line-height:1.25; margin-top:30px }
.artikel-look h3{ font-size:1.2rem; font-weight:600; color:var(--ink); margin-top:24px }
.artikel-look > :first-child{ margin-top:0 }
.artikel-look ul, .artikel-look ol{ padding-left:1.4em }
.artikel-look li + li{ margin-top:6px }
.artikel-look li::marker{ color:var(--brass) }
.artikel-look a{ color:var(--ink); text-decoration-color:var(--brass); text-underline-offset:3px }
.artikel-look figure{ margin-top:22px }
.artikel-look figure img{ max-width:100%; width:auto; max-height:420px; height:auto }
.artikel-look figure.is-gekozen{ outline:3px solid var(--brass) }

/* ---------- hoofdfoto ---------- */
.foto-vak{ position:relative }
.foto-voorbeeld{ width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:10px; background:var(--tint) }
.foto-kies{ width:100%; min-height:110px; border:2px dashed var(--line-2); background:var(--tint); cursor:pointer; padding:16px;
            color:var(--body); font-size:.96rem; transition:border-color .2s, background .2s }
.foto-voorbeeld:not([hidden]) + .foto-kies{ min-height:48px; border-style:solid; border-width:1px; background:#fff; color:var(--ink); font-weight:500 }
.foto-kies:hover, .foto-vak.is-sleep .foto-kies{ border-color:var(--brass); background:#fbf6f2 }
.foto-weg{ min-height:36px; margin-top:4px; padding:0; font-size:.9rem; justify-content:flex-start }
.foto-bezig{ margin-top:10px; color:var(--brass-d); font-weight:500 }

/* ---------- google ---------- */
.uitklap summary{ cursor:pointer; font-weight:500; color:var(--ink); list-style:none }
.uitklap summary::-webkit-details-marker{ display:none }
.uitklap summary::before{ content:"+"; display:inline-block; width:18px; color:var(--brass); font-weight:600 }
.uitklap[open] summary::before{ content:"–" }
.google-voorbeeld{ margin-top:16px; padding:14px; border:1px solid var(--line); font-family:Arial, sans-serif; display:grid; gap:3px }
.cta-voorbeeld{ display:inline-flex; align-items:center; gap:10px; margin-top:8px; padding:12px 20px; background:var(--brass); color:#fff; font-weight:500; font-size:.95rem }
.versies{ list-style:none; margin-top:12px; display:grid; gap:8px; font-size:.94rem }
.versies a{ color:var(--ink); font-weight:500; text-decoration-color:var(--brass); text-underline-offset:3px }
.g-adres{ font-size:12px; color:#4d5156 }
.g-titel{ font-size:17px; color:#1a0dab; line-height:1.3 }
.g-tekst{ font-size:13px; color:#4d5156; line-height:1.45 }

/* ---------- login ---------- */
.is-login{ background:var(--teal) }
.is-login .hoofd{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px }
.login{ background:#fff; width:100%; max-width:420px; padding:44px 40px 40px }
.login-logo{ margin-bottom:26px }
.login h1{ font-size:1.8rem; font-weight:600; color:var(--ink); letter-spacing:-.03em }
.login-sub{ margin-top:4px; color:var(--zacht) }
.login-form{ margin-top:24px }
.login-form .knop{ margin-top:26px }

/* ---------- smal scherm ---------- */
@media (max-width:980px){
  .bewerk{ grid-template-columns:1fr }
  /* Op een telefoon: eerst schrijven, dan foto en categorie, publiceren als laatste */
  .bewerk-zij .blok-plak{ order:9 }
}
@media (max-width:760px){
  .hoofd{ padding:24px 16px 60px }
  .balk-in{ padding:12px 16px }
  .balk-merk img{ width:104px }
  .balk-merk span{ display:none }
  .balk-nav{ gap:14px; font-size:.88rem }
  .balk-nav a:first-child{ display:none }
  .kop h1{ font-size:1.7rem }
  .rij{ grid-template-columns:84px 1fr; gap:14px; padding:14px }
  .rij-acties{ grid-column:1 / -1; justify-content:flex-start }
  .blok{ padding:18px }
  .editor-vlak{ padding:18px 16px 24px; min-height:320px }
  .editor-knoppen{ flex-wrap:nowrap; overflow-x:auto }
  .editor-knoppen .knop-rechts{ margin-left:0 }
  .balk-wie{ display:none }
  .login{ padding:34px 24px 28px }
  .opslaanbalk-in{ padding:10px 16px }
  .opslaanbalk .status-regel{ display:none }
  .opslaanbalk-knoppen{ width:100% }
  .opslaanbalk-knoppen .knop{ flex:1; padding:0 12px }
}