/* Mini-CMS: inline bewerkbare teksten + beheer-balk.
   De basisregel geldt voor iedereen (newlines behouden); de bewerk-stijlen
   verschijnen alleen voor ingelogde beheerders in bewerkmodus. */

.cms { white-space: pre-wrap; }

/* ---- Bewerkbaar blok ---- */
.cms--edit {
    outline: 2px dashed var(--accent-zacht, #c98a5e);
    outline-offset: 4px;
    border-radius: 4px;
    cursor: text;
    transition: background .15s, outline-color .15s;
}
.cms--edit:hover { background: #ffffff8c; }
.cms--edit:focus {
    outline: 2px solid var(--accent, #9a5b34);
    background: #fff;
}
/* Sleutel/label-hint boven het veld in focus */
.cms--edit { position: relative; }
.cms--edit:focus::after {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: -1.7em;
    font-family: "Hanken Grotesk", system-ui, sans-serif;
    font-size: .7rem;
    font-style: normal;
    letter-spacing: .03em;
    color: #fff;
    background: var(--accent, #9a5b34);
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
}
.cms--edit:not([data-label]):focus::after { content: attr(data-sleutel); }

/* Blok-variant (bv. voorzieningen: één per regel) */
.cms--blok {
    display: block;
    max-width: 640px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 8px;
}

/* ---- Beheer-balk ---- */
.cms-balk {
    position: sticky;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 18px;
    background: #2b2018;
    color: #f6efe4;
    font-family: "Hanken Grotesk", system-ui, sans-serif;
    font-size: .9rem;
    box-shadow: 0 -8px 24px -16px #000;
}
.cms-balk__merk { font-weight: 700; letter-spacing: .02em; }
.cms-balk__hint { color: #d8c9b5; }
.cms-balk__hint em { font-style: normal; color: #f0d9bf; }
.cms-balk__rek { flex: 1; }
.cms-balk__link { color: #d8c9b5; text-decoration: none; }
.cms-balk__link:hover { color: #fff; text-decoration: underline; }
.cms-balk form { margin: 0; }
.cms-balk__knop {
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    border-radius: 999px;
    padding: 7px 16px;
    background: var(--accent, #9a5b34);
    color: #fff;
    transition: background .15s;
}
.cms-balk__knop:hover { background: var(--accent-zacht, #c98a5e); }
.cms-balk--actief .cms-balk__knop { background: #fff; color: #2b2018; }

/* ---- Opgeslagen-melding ---- */
.cms-toast {
    position: fixed;
    right: 20px;
    bottom: 70px;
    z-index: 70;
    background: var(--goed, #3f7d52);
    color: #fff;
    padding: 11px 18px;
    border-radius: 12px;
    font-family: "Hanken Grotesk", system-ui, sans-serif;
    font-weight: 600;
    font-size: .9rem;
    box-shadow: 0 14px 30px -12px #00000055;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .25s, transform .25s;
    pointer-events: none;
}
.cms-toast.cms-toast--zien { opacity: 1; transform: translateY(0); }
.cms-toast--fout { background: #b1402f; }