/* Kurason.Web admin stylesheet (/beheer) and the shared shortcode output (photos, galleries,
   documents, lightbox, FAQ shortcode) that the page editor can place in an article body.
   The public site itself is styled by kurason-tokens.css (Figma variables) and kurason.css.
   Colours of the admin are CSS custom properties adjustable in /beheer/colors (BrandColors). */

:root {
    --kp-pink: #eb008c;
    --kp-pink-dark: #c80077;
    --kp-pink-soft: #8184bd;
    --kp-ink: #000000;
    --kp-ink-soft: #2d3291;
    --kp-bg: #ffffff;
    --kp-bg-tint: #f7f7fa;
    /* Header and footer colours, adjustable in /beheer/colors (BrandColors overrules these). */
    --kp-header-bg: #ffffff;
    --kp-header-text: #2d3291;
    --kp-header-accent: #eb008c;
    --kp-header-accent-soft: #8184bd;
    --kp-footer-bg: #2d3291;
    --kp-footer-text: #ffffff;
    --kp-footer-heading: #ffffff;
    --kp-footer-link: #ffffff;
    --kp-footer-link-hover: #d9d9d9;
    --kp-footer-muted: #8184bd;
    /* Link and inline-code colours, adjustable in /beheer/colors. Bootstrap paints a bare <a>
       blue (#0d6efd) and inline <code> pink (#d63384); both are overruled below so no colour
       outside the house style can appear anywhere on the site. */
    --kp-link: #eb008c;
    --kp-link-hover: #c80077;
    --kp-code: #2d3291;
    /* Colours of the /beheer shell (sidebar, language buttons, manual bar), adjustable on the tab
       "Beheeromgeving" of /beheer/colors. */
    --kp-admin-bg: #2d3291;
    --kp-admin-text: #ffffff;
    --kp-admin-hover: #262b7b;
    --kp-admin-accent: #eb008c;
    /* Colours of the yes/no switches in /beheer (KpToggle): green when on, red when off, so an
       administrator sees at a glance in an overview what is switched on. */
    --kp-toggle-on: #2e7d32;
    --kp-toggle-off: #c0392b;
    --kp-toggle-text: #ffffff;
    --kp-radius: 6px;
    --kp-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    /* Titelopmaak, instelbaar op het tabblad "Titels" van /beheer/colors (HeadingStyles overrulet
       deze waarden). H1 is de paginatitel in de kop van de pagina, H2/H3/H4 zijn de koppen in de
       paginatekst zelf. De kleur verwijst standaard naar de algemene tekstkleur: laat een beheerder
       het kleurveld leeg, dan volgt de titel gewoon die kleur, zoals vóór dit scherm ook het geval
       was. */
    --kp-h1-color: var(--kp-ink);
    --kp-h1-size: 2.3rem;
    --kp-h1-weight: 700;
    --kp-h1-spacing: 0em;
    --kp-h1-transform: none;
    --kp-h1-align: left;
    --kp-h2-color: var(--kp-ink);
    --kp-h2-size: 1.45rem;
    --kp-h2-weight: 700;
    --kp-h2-spacing: 0em;
    --kp-h2-transform: none;
    --kp-h2-align: left;
    --kp-h3-color: var(--kp-ink);
    --kp-h3-size: 1.2rem;
    --kp-h3-weight: 700;
    --kp-h3-spacing: 0em;
    --kp-h3-transform: none;
    --kp-h3-align: left;
    --kp-h4-color: var(--kp-ink);
    --kp-h4-size: 1.05rem;
    --kp-h4-weight: 700;
    --kp-h4-spacing: 0em;
    --kp-h4-transform: none;
    --kp-h4-align: left;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--kp-font);
    color: var(--kp-ink);
    background: var(--kp-bg);
    line-height: 1.65;
}

/* ---------- Focus / caret ----------
   Body copy is not editable: with caret browsing (F7) or a stray focus, browsers drew a blinking
   cursor and a focus box around headings and paragraphs. Hide the caret everywhere except in real
   input fields, and only paint a focus ring on genuinely interactive elements (accessibility). */
body {
    caret-color: transparent;
}

input,
textarea,
select,
[contenteditable="true"] {
    caret-color: auto;
}

:focus {
    outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
label:focus-visible,
/* tabindex="-1" = programmatically focusable only (script focus targets), never a focus ring. */
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid var(--kp-pink);
    outline-offset: 2px;
}

/* A link or a piece of inline code without its own styling follows the house style, not the
   Bootstrap defaults (blue link, pink code). app.css is loaded after bootstrap.min.css, so these
   two rules win; /beheer/colors can change both colours without touching a stylesheet. */
a {
    color: var(--kp-link);
}

a:hover,
a:focus-visible {
    color: var(--kp-link-hover);
}

code {
    color: var(--kp-code);
}

/* Admin typography: Inter (self-hosted by kurason.css) with a calm weight ladder 400/600/700.
   The admin (EmptyLayout/Telerik) keeps its own defaults. */
.kp-site {
    font-weight: 500;
}

.kp-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--kp-pink);
    color: #fff;
    padding: 0.5rem 1rem;
    z-index: 100;
}

.kp-skip-link:focus {
    left: 0;
}

/* ---------- Buttons ---------- */
/* Buttons of the login and password screens. */
.kp-btn {
    display: inline-block;
    padding: 0.75rem 1.6rem;
    border-radius: 3px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.9rem;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    /* Buttons must not inherit the text-shadow of the hero/separator strip, that blurs the label. */
    text-shadow: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.kp-btn:hover {
    transform: translateY(-1px);
}

.kp-btn--primary {
    background: var(--kp-pink);
    color: #fff !important;
    border-color: var(--kp-pink);
}

.kp-btn--primary:hover {
    background: var(--kp-pink-dark);
}

.kp-btn--ghost {
    background: transparent;
    color: var(--kp-pink) !important;
    border-color: var(--kp-pink);
}

/* Secondary/inverted button (hero next to the pink primary, and on the pink CTA strip).
   The shadow keeps the white block separated from a light photo behind it. */
.kp-btn--light {
    background: #fff;
    color: var(--kp-pink) !important;
    border-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.kp-btn--light:hover {
    background: var(--kp-pink-soft);
    border-color: var(--kp-pink-soft);
}

/* ---------- Sections & content ---------- */
.kp-section {
    /* Only vertical padding, a shorthand ("3rem 0") would zero the horizontal padding and so
       wipe out the Bootstrap .container gutter on the pages that are BOTH .kp-section AND
       .container (Home/Contact/CmsPage/…), pushing their text to the screen edge on mobile. */
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.kp-section--tinted {
    background: var(--kp-bg-tint);
}

.kp-section__title {
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.kp-content {
    max-width: 50rem;
}

/* Sluit zwevende foto's (shortcode-uitlijning links/rechts) netjes af onder de tekst. */
.kp-content::after {
    content: "";
    display: block;
    clear: both;
}

/* De koppen in een paginatekst. H3 en H4 hadden hier geen eigen regel, waardoor ze de maten van
   Bootstrap hielden en een H3 gróter was dan een H2; ze staan nu in dezelfde ladder en zijn net als
   de H2 instelbaar op het tabblad "Titels" van /beheer/colors. */
.kp-content h2 {
    font-size: var(--kp-h2-size);
    font-weight: var(--kp-h2-weight);
    letter-spacing: var(--kp-h2-spacing);
    text-transform: var(--kp-h2-transform);
    text-align: var(--kp-h2-align);
    margin: 2rem 0 0.75rem;
    color: var(--kp-h2-color);
}

.kp-content h3 {
    font-size: var(--kp-h3-size);
    font-weight: var(--kp-h3-weight);
    letter-spacing: var(--kp-h3-spacing);
    text-transform: var(--kp-h3-transform);
    text-align: var(--kp-h3-align);
    margin: 1.6rem 0 0.6rem;
    color: var(--kp-h3-color);
}

.kp-content h4 {
    font-size: var(--kp-h4-size);
    font-weight: var(--kp-h4-weight);
    letter-spacing: var(--kp-h4-spacing);
    text-transform: var(--kp-h4-transform);
    text-align: var(--kp-h4-align);
    margin: 1.3rem 0 0.5rem;
    color: var(--kp-h4-color);
}

.kp-content a {
    color: var(--kp-pink);
    font-weight: 600;
}

.kp-content ul,
.kp-content ol {
    padding-left: 1.3rem;
}

.kp-content li {
    margin-bottom: 0.4rem;
}

.kp-lead {
    font-size: 1.18rem;
    color: var(--kp-ink-soft);
}

.kp-muted {
    color: var(--kp-ink-soft);
}

/* ---------- Cards ---------- */
.kp-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--kp-radius);
    padding: 1.5rem;
    height: 100%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}

.kp-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--kp-pink);
    margin-bottom: 0.5rem;
}

.kp-card__text {
    flex-grow: 1;
    color: var(--kp-ink-soft);
}

.kp-card__link {
    color: var(--kp-pink);
    font-weight: 700;
    text-decoration: none;
}

.kp-card__photo {
    width: calc(100% + 3rem);
    margin: -1.5rem -1.5rem 1rem;
    border-radius: var(--kp-radius) var(--kp-radius) 0 0;
    object-fit: cover;
    aspect-ratio: 3 / 2;
    display: block;
}

/* De foto van een tegel zit in een link die als lijst dient: die link draagt nu de negatieve
   marges en de ronde bovenhoeken, zodat de foto er met overflow: hidden binnen blijft. Zonder dat
   kader zou de vergroting hieronder over de rand van de kaart heen steken. */
.kp-card__photo-link {
    display: block;
    width: calc(100% + 3rem);
    margin: -1.5rem -1.5rem 1rem;
    overflow: hidden;
    border-radius: var(--kp-radius) var(--kp-radius) 0 0;
}

.kp-card__photo-link .kp-card__photo {
    width: 100%;
    margin: 0;
    border-radius: 0;
    transition: transform 0.45s ease;
}

/* Alleen op een aanwijzer die echt kan zweven: op een touchscreen blijft een :hover na het tikken
   hangen en zou de tegel vergroot achterblijven. */
@media (hover: hover) {
    .kp-card:hover .kp-card__photo-link .kp-card__photo {
        transform: scale(1.06);
    }
}

/* ---------- Team tiles ----------
   Een personeelsfoto wordt NIET bijgesneden: de tegel is breder (twee per rij in plaats van drie)
   en de foto houdt zijn eigen verhouding, zodat een staande portretfoto volledig in beeld staat.
   De vaste 4/3-uitsnede van een gewone kaartfoto sneed er kop of schouders af.
   Deze regels staan met opzet NA die van de gewone tegelfoto hierboven. */
/* Een teamkaart rekt niet mee met de hoogste kaart van de rij: omdat de foto's nu hun eigen
   verhouding houden, zou een kaart met een liggende foto anders een grote witte ruimte onder de
   functietitel krijgen. */
.kp-card--team {
    height: auto;
}

.kp-card--team .kp-card__photo {
    width: 100%;
    margin: 0 0 0.75rem;
    border-radius: var(--kp-radius);
    aspect-ratio: auto;
    height: auto;
    object-fit: contain;
}

/* De foto zit in een lightbox-link; die link vervangt de negatieve marges van een gewone
   tegelfoto, want hij staat binnen de kaart en niet tegen de bovenrand. */
.kp-card--team .kp-card__photo-link {
    width: 100%;
    margin: 0 0 0.75rem;
    border-radius: var(--kp-radius);
    overflow: hidden;
}

.kp-card--team .kp-card__photo-link .kp-card__photo {
    margin: 0;
    border-radius: var(--kp-radius);
}

/* Geen inzoomeffect op een personeelsfoto: dat zou juist het randje afsnijden dat nu eindelijk
   zichtbaar is. Een lichte verzachting laat zien dat de foto aanklikbaar is. */
@media (hover: hover) {
    .kp-card--team:hover .kp-card__photo-link .kp-card__photo {
        transform: none;
        opacity: 0.92;
    }
}

/* ---------- Separator strip (old-site bg_blok_quote look) ----------
   De strook komt uit de shortcode [[scheiding:foto|kop|subkop|hoogte=NNN]] en stond tot 3 september
   2026 vast in Home.razor met één vaste foto. De foto komt nu per strook mee als
   --kp-separator-image (ShortcodeHelper zet die inline via HeroMedia, net als de hero en de footer),
   de hoogte als --kp-separator-height. Zonder hoogte bepaalt de padding hieronder de hoogte, precies
   zoals de oude vaste strook. */
.kp-separator {
    background:
        linear-gradient(rgba(20, 14, 18, 0.30), rgba(255, 51, 153, 0.24)),
        var(--kp-separator-image) center / cover no-repeat;
    color: #fff;
    text-align: center;
    padding: 4rem 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
    /* Met een ingestelde hoogte blijft de tekst midden in de strook staan in plaats van bovenaan. */
    min-height: var(--kp-separator-height, 0);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.kp-separator__text {
    font-size: clamp(1.5rem, 3.5vw, 2.4rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
}

.kp-separator__sub {
    font-weight: 500;
    font-size: 1.15rem;
    opacity: 0.95;
    margin: 0;
}

/* Photos got a touch flat/dark compared to the old site; a mild brightness + saturation lift gives
   them back their 'sparkle' without looking edited. */
.kp-card__photo,
.kp-banner__img,
.kp-moodboard__img {
    filter: brightness(1.05) saturate(1.08);
}

/* ---------- Wide page banner (header photo chosen per page in /beheer) ---------- */
/* The maximum height is set per page via --kp-banner-max (default 340 px). On a phone or a small
   tablet the photo follows the width of the screen, because a banner of several hundred pixels
   would swallow the whole viewport there. */
.kp-banner__img,
.kp-banner__fill {
    width: 100%;
    height: clamp(180px, 26vw, var(--kp-banner-max, 340px));
    object-fit: cover;
    display: block;
}

/* Een film in de header van een pagina, precies zoals de brede strook op de homepage. De film ligt
   over de headerfoto heen en die foto blijft de terugval: hij is wat de bezoeker ziet zolang de film
   nog niet speelt, zodat er nooit een zwart vlak staat. hero-video.js zet is-playing zodra er echt
   beeld is en is-ending in de laatste seconde, zodat de sprong van het einde naar het begin niet te
   zien is. De overgang duurt even lang als FADE_SECONDS in dat script. */
.kp-banner--video {
    position: relative;
    overflow: hidden;
}

/* Het lege vlak dat de band zijn hoogte geeft wanneer er wel een film maar geen headerfoto is. */
.kp-banner__fill {
    background: var(--kp-pink-soft);
}

.kp-banner__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.kp-banner__video.is-playing {
    opacity: 1;
}

.kp-banner__video.is-playing.is-ending {
    opacity: 0;
}

/* From tablet-landscape up the height set per page is used as it was entered, so raising the
   number in /beheer really makes the banner taller. Without this the 26vw above capped every
   banner at roughly a quarter of the window width and the setting had no visible effect at all.
   The 70vh guard keeps an extreme value from filling the whole screen. */
@media (min-width: 992px) {
    .kp-banner__img,
    .kp-banner__fill {
        height: min(var(--kp-banner-max, 340px), 70vh);
    }
}

/* ---------- Inline photos placed in page text via [[foto:...]] shortcodes ---------- */
.kp-inline-foto {
    margin: 1.5rem 0;
}

.kp-inline-foto__img {
    max-width: 100%;
    border-radius: var(--kp-radius);
    display: block;
    filter: brightness(1.05) saturate(1.08);
}

.kp-inline-foto__caption {
    padding-top: 0.5rem;
    font-weight: 600;
    color: var(--kp-ink-soft);
    font-size: 0.95rem;
}

/* Uitlijning via shortcode-opties: [[foto:pad|Bijschrift|links;breedte=320]] enz. */
.kp-inline-foto--links {
    float: left;
    max-width: min(45%, 420px);
    margin: 0.35rem 1.5rem 1rem 0;
}

.kp-inline-foto--rechts {
    float: right;
    max-width: min(45%, 420px);
    margin: 0.35rem 0 1rem 1.5rem;
}

.kp-inline-foto--midden {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.kp-inline-foto--midden .kp-inline-foto__img {
    margin-inline: auto;
}

.kp-inline-foto--breed .kp-inline-foto__img {
    width: 100%;
}

/* Smalle schermen: naast-de-tekst wordt gewoon boven elkaar, anders blijft er
   te weinig ruimte voor de lopende tekst over. */
@media (max-width: 575.98px) {
    .kp-inline-foto--links,
    .kp-inline-foto--rechts {
        float: none;
        max-width: 100%;
        margin: 1.5rem 0;
    }
}

/* Placeholder shown when a referenced media file no longer exists on disk. */
.kp-media-missing__box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 1rem;
    background: repeating-linear-gradient(45deg, #f6f2f4, #f6f2f4 12px, #efe8ec 12px, #efe8ec 24px);
    border: 1px dashed #c9b7c1;
    border-radius: var(--kp-radius);
    color: var(--kp-ink-soft);
    font-weight: 600;
    text-align: center;
}

/* ---------- PDF download link placed via [[document:...]] shortcodes ---------- */
.kp-document-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--kp-pink);
    text-decoration: none;
    min-height: 48px;
}

.kp-document-link:hover {
    text-decoration: underline;
}

.kp-document-link__badge {
    background: var(--kp-pink);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
    letter-spacing: 0.05em;
}

/* ---------- Lightbox (clickable photos, js/lightbox.js) ---------- */
.kp-lightbox-link {
    display: block;
    cursor: zoom-in;
}

.kp-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(20, 10, 16, 0.88);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    cursor: zoom-out;
}

.kp-lightbox-overlay img {
    max-width: min(1200px, 92vw);
    max-height: 84vh;
    border-radius: var(--kp-radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.kp-lightbox-overlay figcaption {
    color: #fff;
    font-weight: 600;
    padding-top: 0.75rem;
}

.kp-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

/* ---------- Moodboards (old interieur gallery) ---------- */
.kp-moodboards {
    margin-top: 2rem;
}

.kp-moodboard {
    margin: 0;
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--kp-radius);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.kp-moodboard__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.kp-moodboard__caption {
    padding: 0.6rem 0.9rem;
    font-weight: 700;
    color: var(--kp-pink);
}

/* ---------- Quotes / testimonials ---------- */
.kp-quote {
    background: var(--kp-pink-soft);
    border-left: 4px solid var(--kp-pink);
    border-radius: 0 var(--kp-radius) var(--kp-radius) 0;
    padding: 1.25rem 1.5rem;
    height: 100%;
    margin: 0;
}

.kp-quote footer {
    font-weight: 700;
    color: var(--kp-pink-dark);
    margin-top: 0.5rem;
}

/* ---------- FAQ ---------- */
.kp-faq {
    max-width: 50rem;
    margin-top: 1.5rem;
}

.kp-faq__item {
    border: 1px solid #eee;
    border-radius: var(--kp-radius);
    margin-bottom: 0.75rem;
    background: #fff;
}

.kp-faq__question {
    padding: 1rem 1.25rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--kp-ink);
}

.kp-faq__item[open] .kp-faq__question {
    color: var(--kp-pink);
}

.kp-faq__answer {
    padding: 0 1.25rem 1rem;
    color: var(--kp-ink-soft);
}

/* ---------- Beheer (admin) ---------- */
.kp-admin {
    display: flex;
    min-height: 100vh;
    background: #f4f2f4;
}

.kp-admin__sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--kp-admin-bg);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1rem;
    /* Sidebar blijft in beeld bij lange pagina's, zodat "Website bekijken" en
       "Uitloggen" altijd zichtbaar zijn zonder te scrollen. */
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
}

.kp-admin__brand {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--kp-admin-accent);
    text-decoration: none;
    margin-bottom: 1.5rem;
}

.kp-admin__brand span {
    color: #fff;
    font-weight: 500;
    font-size: 1rem;
}

.kp-admin__nav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex-grow: 1;
}

.kp-admin__link {
    color: var(--kp-admin-text);
    text-decoration: none;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    font-weight: 600;
}

.kp-admin__link:hover {
    background: var(--kp-admin-hover);
    color: #fff;
}

/* Submenu Componenten in de beheer-sidebar (details/summary, geen JS nodig). */
.kp-admin__group {
    margin: 0;
}

.kp-admin__grouptitle {
    color: var(--kp-admin-text);
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.kp-admin__grouptitle::-webkit-details-marker {
    display: none;
}

.kp-admin__grouptitle::after {
    content: "▸";
    float: right;
    transition: transform 0.15s ease;
}

.kp-admin__group[open] > .kp-admin__grouptitle::after {
    transform: rotate(90deg);
}

.kp-admin__grouptitle:hover {
    background: var(--kp-admin-hover);
    color: #fff;
}

.kp-admin__groupitems {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.2rem;
}

.kp-admin__link--sub {
    padding-left: 1.6rem;
    font-weight: 500;
}

.kp-admin__footer {
    margin-top: auto;
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.kp-admin__logout {
    background: none;
    border: none;
    color: var(--kp-admin-text);
    font-weight: 600;
    padding: 0.55rem 0.7rem;
    cursor: pointer;
}

.kp-admin__version {
    margin: 0.35rem 0 0;
    padding: 0 0.7rem;
    color: var(--kp-admin-text);
    font-size: 0.75rem;
    opacity: 0.85;
}

/* Taalwissel van het beheer (NL/EN): twee kleine knoppen, de actieve taal is ingevuld. */
.kp-admin__lang {
    display: flex;
    gap: 0.35rem;
    padding: 0 0.7rem 0.6rem;
}

.kp-admin__langbtn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 4px;
    color: var(--kp-admin-text);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    /* Minimaal 44 px hoog/breed: ook op een touchscreen goed te raken. */
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
}

.kp-admin__langbtn--active {
    background: #fff;
    border-color: #fff;
    color: var(--kp-admin-accent);
    cursor: default;
}

/* Dezelfde taalwissel op de lichte inlogkaart: donkere tekst in plaats van roze op paars. */
.kp-login .kp-admin__lang {
    justify-content: center;
    padding: 0 0 1rem;
}

.kp-login .kp-admin__langbtn {
    border-color: var(--kp-admin-accent);
    color: var(--kp-admin-accent);
}

.kp-login .kp-admin__langbtn--active {
    background: var(--kp-admin-accent);
    border-color: var(--kp-admin-accent);
    color: #fff;
}

/* Een gekozen keuzerondje in het beheer krijgt de roze huisstijlkleur. Het Telerik-thema tekent
   hem in zijn eigen koraalrood, en rood leest als een waarschuwing terwijl het gewoon de gekozen
   optie is; dezelfde reden als bij de aan/uit-schakelaars. */
.kp-admin-panel .k-radio:checked {
    border-color: var(--kp-admin-accent);
    background-color: var(--kp-admin-accent);
}

.kp-admin__main {
    flex-grow: 1;
    padding: 1.75rem 2rem;
    min-width: 0;
}

.kp-admin__titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.kp-admin__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0;
}

.kp-admin__manual {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 48px;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: #fff;
    color: var(--kp-admin-accent);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    white-space: nowrap;
}

.kp-admin__manual:hover {
    background: var(--kp-admin-accent);
    color: #fff;
}

.kp-admin__subtitle {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.kp-admin-panel {
    background: #fff;
    border-radius: var(--kp-radius);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Een paneel binnen een tabblad zit al in het witte vlak van de tabbladen (instellingen, kleuren);
   een tweede kader met schaduw eromheen maakt er een doos in een doos van. */
.k-tabstrip-content > .kp-admin-panel {
    padding: 0.5rem 0;
    box-shadow: none;
}

/* Tegelrij van het dashboard: één tegel per teller die deze beheerder mag zien. De hele tegel is
   een link naar het bijbehorende scherm, zodat er niet op een klein tekstje gemikt hoeft te worden
   (ook prettig op een touchscreen). */
.kp-admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.kp-admin-stat {
    background: #fff;
    border-radius: var(--kp-radius);
    padding: 1.25rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

a.kp-admin-stat {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

a.kp-admin-stat:hover,
a.kp-admin-stat:focus-visible {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.kp-admin-stat__value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--kp-pink);
}

.kp-admin-stat__label {
    display: block;
    color: var(--kp-ink-soft);
    font-weight: 600;
}

.kp-admin-stat__link {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--kp-pink);
}

/* Aan/uit-schakelaar (KpToggle): overal in het beheer dezelfde vorm, in overzichten alleen-lezen. */
.kp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.kp-toggle__label {
    font-weight: 500;
}

/* Alleen tonen: geen handje en geen "uitgegrijsd" gevoel, de waarde moet leesbaar blijven. */
.kp-toggle--readonly .k-switch {
    cursor: default;
    opacity: 1;
}

/* Green when on, red when off. The Telerik theme fills an ON switch with its own accent colour
   (the coral red #ff6358) and leaves an OFF switch grey, which reads exactly the wrong way round:
   in an overview the state has to be visible without reading the label. The classes .k-switch-on /
   .k-switch-off and the part .k-switch-track come from the installed theme (kendo-theme-default,
   Telerik UI for Blazor 14.1.0); the AAN/UIT label inherits the colour of the track. No !important
   needed: app.css is loaded after the theme and these selectors are more specific. Deliberately
   scoped inside .kp-toggle, so the rest of the Telerik theme keeps its own colours. */
.kp-toggle .k-switch-on .k-switch-track {
    background-color: var(--kp-toggle-on);
    border-color: var(--kp-toggle-on);
    color: var(--kp-toggle-text);
}

.kp-toggle .k-switch-off .k-switch-track {
    background-color: var(--kp-toggle-off);
    border-color: var(--kp-toggle-off);
    color: var(--kp-toggle-text);
}

.kp-toggle .k-switch-on:focus .k-switch-track,
.kp-toggle .k-switch-on.k-focus .k-switch-track {
    outline: 2px solid color-mix(in srgb, var(--kp-toggle-on) 35%, transparent);
}

.kp-toggle .k-switch-off:focus .k-switch-track,
.kp-toggle .k-switch-off.k-focus .k-switch-track {
    outline: 2px solid color-mix(in srgb, var(--kp-toggle-off) 35%, transparent);
}

/* Taalvlag (KpFlag) als inline SVG; dezelfde maat in de knoppen en in de grid-rijen. */
.kp-flag {
    width: 22px;
    height: 11px;
    display: block;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* Taalkeuze bovenaan een beheerscherm (KpLanguageChoice). */
.kp-language-choice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
}

.kp-language-choice__label {
    font-weight: 600;
    color: var(--kp-ink-soft);
}

.kp-language-choice__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    /* Minimaal 44px hoog: een echte aanraakmaat op tablet. */
    min-height: 44px;
    padding: 0.4rem 0.8rem;
    background: #fff;
    border: 1px solid #d9d2d7;
    border-radius: 999px;
    font-weight: 700;
    color: var(--kp-ink-soft);
    cursor: pointer;
}

.kp-language-choice__btn:hover:not(:disabled) {
    border-color: var(--kp-pink);
}

.kp-language-choice__btn--selected {
    border-color: var(--kp-pink);
    background: var(--kp-pink);
    color: #fff;
}

.kp-language-choice__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.kp-language-choice__mark {
    color: #d08c00;
    font-size: 1.2rem;
    line-height: 1;
}

.kp-language-choice__hint {
    font-size: 0.9rem;
}

.kp-language-choice--compact .kp-language-choice__btn {
    min-height: 36px;
    padding: 0.2rem 0.6rem;
}

/* Vlaggetjes per rij in een overzicht (KpLanguageFlags). */
.kp-language-flags {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
}

.kp-language-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 40px blijft goed aan te tikken zonder de rijhoogte op te blazen. */
    min-width: 40px;
    min-height: 40px;
    padding: 0.35rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
}

.kp-language-flag:hover {
    border-color: var(--kp-pink);
}

.kp-language-flag--current {
    border-color: var(--kp-pink);
    background: rgba(255, 51, 153, 0.1);
}

.kp-language-flag--empty .kp-flag {
    opacity: 0.55;
}

.kp-language-flag--missing {
    cursor: default;
}

.kp-language-flag--missing:hover {
    border-color: transparent;
}

.kp-language-flag--missing .kp-flag {
    opacity: 0.3;
    filter: grayscale(1);
}

/* Die taalversie bestaat nog niet, maar is met één klik aan te maken: bleke vlag met een + erbij,
   zodat het verschil met een dood (grijs) vlaggetje zichtbaar is. */
.kp-language-flag--create {
    position: relative;
    border-style: dashed;
    border-color: rgba(255, 51, 153, 0.5);
}

.kp-language-flag--create .kp-flag {
    opacity: 0.5;
}

.kp-language-flag--create:hover .kp-flag {
    opacity: 1;
}

.kp-language-flag__mark {
    position: absolute;
    top: -2px;
    right: 1px;
    color: var(--kp-pink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

/* Zelfde signaal in de taalkeuze bovenaan/in een bewerkscherm. */
.kp-language-choice__btn--create {
    border-style: dashed;
}

.kp-language-choice__btn--create .kp-flag {
    opacity: 0.6;
}

.kp-language-choice__btn--create:hover .kp-flag {
    opacity: 1;
}

.kp-language-choice__btn--create .kp-language-choice__mark {
    color: var(--kp-pink);
    font-weight: 700;
}

/* Wachtscherm tijdens het vertalen: de ChatGPT-aanroep duurt bij een lange tekst tientallen
   seconden, dus het scherm laat zien dat er iets gebeurt en blokkeert klikken zolang dat duurt. */
.kp-admin-busy {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
}

.kp-admin-busy__box {
    background: #fff;
    border-radius: var(--kp-radius);
    padding: 1.5rem 2rem;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* Tekenteller onder een SEO-veld; oranje zodra de lengte Google in de weg zit. */
.kp-seo-hint {
    display: block;
    font-size: 0.85rem;
}

.kp-seo-hint--warn {
    color: #b26a00;
    font-weight: 600;
}

.kp-admin-fieldhint {
    font-size: 0.85rem;
    line-height: 1.35;
}

.kp-admin-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin: 1rem 0;
    flex-wrap: wrap;
}

/* Kleurveld van /beheer (KpColorField): de kleurenkiezer met de hexcode ernaast als invulveld.
   De code stond er eerder als platte tekst, dus een kleur uit het klembord moest met het oog op het
   kleurvlak worden teruggezocht. */
.kp-colorfield {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Een hexcode leest als code: gelijke tekenbreedte voorkomt dat 0 en o of 1 en l op elkaar lijken.
   De klasse landt op de wikkel van de TelerikTextBox, dus het lettertype gaat naar het invulvlak
   daarbinnen. */
.kp-colorfield__hex .k-input-inner {
    font-family: Consolas, "Cascadia Mono", Menlo, Monaco, "Courier New", monospace;
}

.kp-colorfield__hint {
    white-space: nowrap;
}

/* Voorbeeld naast de velden van een titelniveau op het tabblad "Titels" van /beheer/colors. Een
   titel verandert van grootte, dikte, letterafstand, hoofdletters en uitlijning tegelijk; dat leest
   niemand uit zes losse getallen. */
.kp-heading-row {
    margin-bottom: 1.5rem;
}

.kp-heading-preview__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--kp-ink-soft);
    margin-bottom: 0.35rem;
}

/* Het vlak achter het voorbeeld heeft de achtergrond van de site, niet het wit van het beheer:
   anders oogt een lichte titelkleur hier leesbaar terwijl hij dat op de site niet is. */
.kp-heading-preview__stage {
    background: var(--kp-bg);
    border: 1px solid #e5e5e5;
    border-radius: var(--kp-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 0.4rem;
    /* Een letterafstand of een lange titel mag het paneel niet uit elkaar duwen. */
    overflow-x: auto;
}

/* Het lettertype van de site (Inter), want een titel in een andere letter geeft een ander beeld
   van de dikte en de breedte. De kleur komt uit de stijl van het element zelf; is er geen eigen
   kleur ingesteld, dan erft de titel hier de algemene tekstkleur, precies zoals op de site. */
.kp-heading-preview__title {
    font-family: var(--kp-font);
    color: var(--kp-ink);
    line-height: 1.25;
    margin: 0;
}

.kp-heading-preview__body {
    font-family: var(--kp-font);
    color: var(--kp-ink);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0.6rem 0 0;
}

/* Uitklapbare uitleg achter een (i)-knopje (KpInfoPanel). De uitleg van een scherm werd maar één
   keer gelezen, maar duwde bij elk bezoek het echte werk (het uploadblok, de foto's) naar beneden. */
.kp-infopanel {
    margin-bottom: 1rem;
}

/* Terughoudende knop: het is uitleg, geen actie, dus hij mag niet met de knoppen van het scherm
   concurreren. */
.kp-infopanel__button {
    font-size: 0.9rem;
}

/* Het (i)-rondje voor de tekst; een getekend rondje in plaats van een emoji, zodat het op elk
   apparaat hetzelfde oogt. */
.kp-infopanel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    margin-right: 0.35rem;
    border-radius: 50%;
    background: var(--kp-pink);
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
}

.kp-infopanel__body {
    margin-top: 0.6rem;
    padding: 0.85rem 1rem;
    background: var(--kp-bg-tint);
    border-left: 3px solid var(--kp-pink);
    border-radius: var(--kp-radius);
    font-size: 0.9rem;
    line-height: 1.45;
}

/* Uploadblok van de mediabibliotheek: twee velden naast elkaar hebben de volle paneelhoogte niet
   nodig. */
.kp-admin-panel--tight {
    padding: 1rem 1.25rem;
}

/* Opslaan-balk die bovenaan het scherm blijft plakken, zodat de knop bij lange formulieren altijd
   zichtbaar is zonder scrollen. Hij stond eerder onderaan: dan moest de beheerder na het invullen
   eerst helemaal naar beneden voordat hij kon opslaan. */
.kp-admin-savebar {
    position: sticky;
    top: 0;
    z-index: 5;
    /* Dekkend wit: de balk schuift bij het scrollen over het formulier heen, en door een
       doorschijnende achtergrond schemerde de inhoud eronder er doorheen. */
    background: #fff;
    border-bottom: 1px solid #e9e4e8;
    margin: 0 -0.5rem 1rem;
    padding: 0.75rem 0.5rem;
    border-radius: 0 0 8px 8px;
}

/* Bewerkdialoog van het beheer (Class="kp-edit-dialog" op een TelerikDialog). De dialoog krijgt
   een vaste breedte mee, maar mag nooit buiten het venster vallen: daarom een bovengrens in vw/vh.
   De inhoud van een Telerik-dialoog (.k-window-content) scrollt zelf, dus op een klein scherm
   scrollt het formulier binnen de dialoog in plaats van de hele pagina eronder. */
.kp-edit-dialog {
    max-width: 96vw;
    max-height: 92vh;
}

/* Ook in een dialoog staat de knoppenbalk bovenaan en plakt hij daar. Het scrollende vlak van een
   Telerik-dialoog is .k-window-content met 1rem binnenmarge; de negatieve marges trekken de balk
   daar overheen, zodat hij de volle breedte pakt en meteen tegen de titelbalk aan begint.
   De `top` is negatief omdat een plakkende balk niet buiten de binnenmarge van zijn scrollvlak mag
   komen: met `top: 0` bleef er een strook van 1rem boven de balk waar de tekst doorheen schoof. */
.kp-edit-dialog .k-window-content > .kp-admin-savebar {
    top: -1rem;
    margin: -1rem -1rem 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0;
}

/* De twee lijsten in de dialoog "Tegels invoegen": de gekozen tegels en de pagina's die nog
   toegevoegd kunnen worden. Een site met twintig pagina's maakt die tweede lijst langer dan het
   scherm, en dan vallen de knoppen Invoegen/Annuleren onder de onderrand weg. Beide lijsten scrollen
   daarom zelf; de dialoog zelf blijft even hoog. */
.kp-tiles-picker__list {
    max-height: 15rem;
    overflow-y: auto;
}

/* Een klik op een rij opent het bewerkscherm, dus laat de aanwijzer dat ook zien. De datarij
   van een Telerik Grid is .k-master-row; grids zonder rijklik krijgen Class="kp-grid-static". */
.k-grid:not(.kp-grid-static) .k-master-row {
    cursor: pointer;
}

/* De volgorde-knoppen per rij (KpReorderButtons). Even groot als de taalvlaggen, zodat ze op een
   aanraakscherm net zo goed te raken zijn (40px) zonder de rijhoogte op te blazen. */
.kp-reorder {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
}

.kp-reorder__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0.35rem;
    color: var(--kp-ink);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
}

.kp-reorder__button:hover:enabled {
    border-color: var(--kp-pink);
    color: var(--kp-pink);
}

.kp-reorder__button:disabled {
    opacity: 0.3;
    cursor: default;
}

/* De sleepgreep van een rij (RowDraggable) is een grijp-aanwijzer, geen handje: slepen en klikken
   doen niet hetzelfde. */
.k-grid .k-drag-cell {
    cursor: grab;
}

.kp-admin__rowlink {
    color: var(--kp-pink);
    font-weight: 700;
    text-decoration: none;
}

.kp-admin-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.kp-admin-preview {
    max-width: 180px;
    max-height: 180px;
    object-fit: cover;
    border-radius: var(--kp-radius);
    border: 1px solid #e5e5e5;
}

.kp-admin-message {
    white-space: pre-wrap;
    background: var(--kp-bg-tint);
    border-radius: 8px;
    padding: 1rem;
}

/* ---------- Deelkaartje (tabblad Social media in het bewerkscherm van een pagina) ---------- */
/* Toont hoe WhatsApp, Facebook of LinkedIn een gedeelde link ongeveer weergeven: foto, adres,
   titel en de korte samenvatting. Alleen ter illustratie; elk platform tekent het net anders. */
.kp-share-preview {
    max-width: 420px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: var(--kp-radius);
    overflow: hidden;
}

.kp-share-preview__img {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
}

.kp-share-preview__nophoto {
    margin: 0;
    padding: 2.5rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    background: var(--kp-bg-tint);
}

.kp-share-preview__body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid #ededed;
}

.kp-share-preview__url {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--kp-ink-soft);
}

.kp-share-preview__title {
    font-weight: 600;
    line-height: 1.3;
}

.kp-share-preview__text {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--kp-ink-soft);
}

.kp-share-preview__missing {
    font-style: italic;
}

/* ---------- Pagina-voorbeeld (dialog in /beheer/paginas, iframe met de publieke pagina) ---------- */
.kp-preview-note {
    margin-bottom: 0.5rem;
}

.kp-preview-frame {
    width: 100%;
    height: min(70vh, 900px);
    border: 1px solid #e5e5e5;
    border-radius: var(--kp-radius);
    background: #fff;
    display: block;
}

/* Melding IN het voorbeeld-iframe: toont "Geklikt: ..." wanneer op een link wordt geklikt. */
.kp-preview-clicknote {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%) translateY(0.5rem);
    max-width: 90%;
    padding: 0.6rem 1.1rem;
    background: var(--kp-ink, #222);
    color: #fff;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
}

.kp-preview-clicknote.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---------- Media library (/beheer/media) ---------- */
/* Twee kolommen: foto's links, details van de aangeklikte foto rechts op 1/3 breedte.
   De detailkolom is sticky zodat hij direct in beeld staat zonder te scrollen. */
.kp-media-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

.kp-media-layout--detail {
    grid-template-columns: 2fr 1fr;
}

.kp-media-layout__list {
    min-width: 0;
}

.kp-media-layout__detail {
    min-width: 0;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.kp-media-detail {
    margin-top: 1rem;
}

/* Bijsnijden/spiegelen van een foto (KpImageCropper + js/image-crop.js). De dialoog is breed maar
   valt nooit buiten het venster; de foto schaalt mee zodat hij altijd helemaal te zien is. */
.kp-crop-dialog {
    max-width: 96vw;
    max-height: 92vh;
}

/* De voettekst van een Telerik-dialoog rekt zijn knoppen uit over de hele breedte
   (.k-actions-stretched). Met zeven knoppen (bijsnijden, twee keer spiegelen, twee keer draaien,
   wissen, sluiten) valt de rij om en werden de twee knoppen op de tweede regel loeibreed. Laat ze
   daarom hun eigen breedte houden. */
.kp-crop-dialog .k-actions .k-button {
    flex: 0 0 auto;
}

.kp-cropper {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
    /* Een geblokte achtergrond laat zien waar een doorzichtige PNG ophoudt. */
    background: repeating-conic-gradient(#f3eff2 0% 25%, #fff 0% 50%) 50% / 20px 20px;
    /* De verduistering buiten de selectie is een enorme box-shadow; zonder deze regel zou die de
       hele dialoog donker maken in plaats van alleen de foto. */
    overflow: hidden;
    touch-action: none;
    cursor: crosshair;
    user-select: none;
}

.kp-cropper__img {
    display: block;
    max-width: 100%;
    max-height: 60vh;
    width: auto;
    height: auto;
}

/* Zolang er niets geselecteerd is, blijft het selectievlak weg (JS zet display). */
.kp-cropper__sel {
    display: none;
    position: absolute;
    box-sizing: border-box;
    border: 2px dashed var(--kp-pink);
    /* De schaduw buiten de selectie maakt de rest van de foto donkerder. */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
    cursor: move;
}

.kp-cropper__handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 2px solid var(--kp-pink);
    border-radius: 50%;
}

.kp-cropper__handle[data-kp-corner="nw"] {
    top: -8px;
    left: -8px;
    cursor: nwse-resize;
}

.kp-cropper__handle[data-kp-corner="ne"] {
    top: -8px;
    right: -8px;
    cursor: nesw-resize;
}

.kp-cropper__handle[data-kp-corner="sw"] {
    bottom: -8px;
    left: -8px;
    cursor: nesw-resize;
}

.kp-cropper__handle[data-kp-corner="se"] {
    bottom: -8px;
    right: -8px;
    cursor: nwse-resize;
}

/* Het formaat van de selectie in echte fotopixels, linksonder over de foto heen. */
.kp-cropper__size {
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.8rem;
    line-height: 1.4;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .kp-media-layout--detail {
        grid-template-columns: 1fr;
    }

    .kp-media-layout__detail {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

.kp-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.kp-media-tile {
    position: relative;
    background: #fff;
    border: 2px solid #eee;
    border-radius: var(--kp-radius);
    overflow: visible;
    cursor: pointer;
    padding: 0;
    text-align: left;
}

.kp-media-tile--selected {
    border-color: var(--kp-pink);
}

.kp-media-tile__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: calc(var(--kp-radius) - 2px) calc(var(--kp-radius) - 2px) 0 0;
}

.kp-media-tile__missing {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(45deg, #f6f2f4, #f6f2f4 12px, #efe8ec 12px, #efe8ec 24px);
    color: var(--kp-ink-soft);
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
    padding: 0.5rem;
}

.kp-media-tile__name {
    display: block;
    padding: 0.4rem 0.6rem 0.1rem;
    font-size: 0.8rem;
    font-weight: 600;
    word-break: break-all;
}

.kp-media-tile__meta {
    display: block;
    padding: 0 0.6rem 0.4rem;
    font-size: 0.75rem;
    color: var(--kp-ink-soft);
}

.kp-media-tile__badge {
    display: inline-block;
    background: #b3261e;
    color: #fff;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    margin-left: 0.3rem;
}

/* Hover popup: where is this photo used on the website? */
.kp-media-tile__usage {
    display: none;
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: calc(100% + 0.25rem);
    z-index: 20;
    background: #2b2027;
    color: #fff;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    font-size: 0.78rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.kp-media-tile:hover .kp-media-tile__usage,
.kp-media-tile:focus-within .kp-media-tile__usage {
    display: block;
}

.kp-media-tile__usage ul {
    margin: 0.25rem 0 0;
    padding-left: 1rem;
}

.kp-media-usagelinks a {
    display: block;
    color: var(--kp-pink);
    font-weight: 600;
    text-decoration: none;
    padding: 0.15rem 0;
}

.kp-media-usagelinks a:hover {
    text-decoration: underline;
}

/* Photo picker grid inside dialogs (header photo / insert image). */
/* Uploading straight from a picker dialog (KpMediaUpload): a compact block above the tiles. */
.kp-media-upload .form-label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.kp-media-pick {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    max-height: 55vh;
    overflow-y: auto;
    padding: 0.25rem;
}

.kp-media-pick__tile {
    border: 2px solid #eee;
    border-radius: 8px;
    background: #fff;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.kp-media-pick__tile:hover,
.kp-media-pick__tile--selected {
    border-color: var(--kp-pink);
}

.kp-media-pick__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 6px 6px 0 0;
}

.kp-media-pick__name {
    display: block;
    padding: 0.3rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 600;
    word-break: break-all;
}

/* ---------- Nieuwe-pagina wizard (/beheer/paginas/nieuw) ---------- */
.kp-wizard {
    max-width: 46rem;
}

.kp-wizard__steps {
    display: flex;
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    gap: 0.25rem;
}

.kp-wizard__step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    color: var(--kp-ink-soft);
}

.kp-wizard__step--active {
    color: var(--kp-ink);
    font-weight: 700;
}

.kp-wizard__dot {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: #f1ecef;
    border: 2px solid #e2dbe0;
    color: var(--kp-ink-soft);
}

.kp-wizard__step--active .kp-wizard__dot {
    background: var(--kp-pink);
    border-color: var(--kp-pink);
    color: #fff;
}

.kp-wizard__step--done .kp-wizard__dot {
    background: #fff;
    border-color: var(--kp-pink);
    color: var(--kp-pink);
}

.kp-wizard__label {
    font-size: 0.78rem;
}

.kp-wizard__bar {
    height: 8px;
    border-radius: 999px;
    background: #f1ecef;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.kp-wizard__fill {
    height: 100%;
    background: var(--kp-pink);
    border-radius: 999px;
    transition: width 0.3s ease;
}

/* Taalkeuze: twee grote klikbare kaarten (ruime touch targets). */
.kp-wizard__langs {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.kp-wizard__lang {
    flex: 1;
    min-width: 10rem;
    max-width: 14rem;
    border: 2px solid #eee;
    border-radius: var(--kp-radius);
    background: #fff;
    padding: 1.25rem 1rem;
    cursor: pointer;
    text-align: center;
    font-weight: 700;
    font-size: 1.05rem;
}

.kp-wizard__lang:hover,
.kp-wizard__lang--selected {
    border-color: var(--kp-pink);
}

.kp-wizard__lang--selected {
    background: var(--kp-bg-tint);
}

.kp-wizard__flag {
    display: block;
    font-size: 2rem;
    margin-bottom: 0.35rem;
}

/* Laatste stap: overzicht van alle ingevoerde gegevens. */
.kp-wizard__summary {
    display: grid;
    grid-template-columns: 12rem 1fr;
    row-gap: 0.4rem;
    column-gap: 1rem;
    margin: 0;
}

.kp-wizard__summary dt {
    font-weight: 700;
    color: var(--kp-ink-soft);
}

.kp-wizard__summary dd {
    margin: 0;
    word-break: break-word;
}

/* Style guide dialog: samples rendered with the real public typography. */
.kp-styleguide-sample {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    background: #fff;
}

.kp-styleguide-sample > .kp-styleguide-sample__tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--kp-ink-soft);
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

@media (max-width: 767px) {
    .kp-admin {
        flex-direction: column;
    }

    .kp-admin__sidebar {
        width: 100%;
        flex-direction: column;
        /* Op mobiel staat de sidebar boven de inhoud; sticky/100vh zou daar de hele
           viewport innemen. */
        position: static;
        height: auto;
        align-self: stretch;
        overflow-y: visible;
    }
}

/* ---------- Handleiding (beheer) ---------- */
.kp-manual {
    min-height: 100vh;
    background: #f4f2f4;
}

.kp-manual__header {
    background: var(--kp-admin-bg);
    color: #fff;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.kp-manual__brand {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--kp-admin-accent);
    white-space: nowrap;
}

.kp-manual__brand span {
    color: #fff;
    font-weight: 500;
}

.kp-manual__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.kp-manual__navlink {
    color: var(--kp-admin-text);
    text-decoration: none;
    font-weight: 600;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
}

.kp-manual__navlink:hover {
    background: var(--kp-admin-hover);
    color: #fff;
}

.kp-manual__navlink--active {
    background: var(--kp-admin-accent);
    color: #fff;
}

.kp-manual__content {
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.kp-manual__content h1 {
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.kp-manual__content h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 1.5rem 0 0.6rem;
}

.kp-manual__screenshot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--kp-radius);
    border: 1px solid #e5dfe4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin: 1rem 0 1.5rem;
}

/* ---------- Login ---------- */
.kp-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--kp-pink) 0%, var(--kp-pink-dark) 70%);
    padding: 1rem;
}

.kp-login__card {
    background: #fff;
    border-radius: var(--kp-radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    padding: 2.25rem;
    width: 100%;
    max-width: 26rem;
}

.kp-login__title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--kp-pink);
    text-align: center;
}

.kp-login__title span {
    color: var(--kp-ink);
    font-weight: 500;
    font-size: 1.2rem;
}

.kp-login__subtitle {
    text-align: center;
    color: var(--kp-ink-soft);
    margin-bottom: 1.25rem;
}

/* Password field with a show/hide eye button inside it. */
.kp-password {
    position: relative;
}

.kp-password__input {
    padding-right: 2.75rem;
}

.kp-password__toggle {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.35rem 0.45rem;
    line-height: 1;
    opacity: 0.55;
    border-radius: 6px;
}

.kp-password__toggle:hover,
.kp-password__toggle--on {
    opacity: 1;
    color: var(--kp-pink);
}

.kp-password__icon {
    font-size: 1.15rem;
}

.kp-login__back {
    text-align: center;
    margin-top: 1.25rem;
}

.kp-login__back a {
    color: var(--kp-ink-soft);
    text-decoration: none;
}

/* ---------- CSS-editor (/beheer/css) ----------
   Overlay-techniek: een transparante textarea boven een <pre><code> met dezelfde
   metriek die de tekst gekleurd toont. Beide lagen MOETEN identieke font/padding
   houden, anders lopen cursor en kleuren uit elkaar. */
.kp-cssedit {
    position: relative;
    border: 1px solid #d6d3d7;
    border-radius: 8px;
    background: #1e1f26;
    height: 62vh;
    min-height: 380px;
    overflow: hidden;
}

.kp-cssedit__highlight,
.kp-cssedit__input {
    box-sizing: border-box;
    margin: 0;
    border: 0;
    width: 100%;
    height: 100%;
    padding: 14px 16px;
    font-family: Consolas, "Cascadia Mono", Menlo, Monaco, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.55;
    tab-size: 4;
    white-space: pre;
    word-wrap: normal;
    overflow: auto;
}

.kp-cssedit__highlight {
    position: absolute;
    inset: 0;
    color: #d5d8e0;
    pointer-events: none;
    /* Scrollt niet zelf; wordt via JS gelijkgezet met de textarea. */
    overflow: hidden;
}

.kp-cssedit__highlight code {
    font: inherit;
    color: inherit;
    background: none;
    padding: 0;
}

.kp-cssedit__input {
    position: relative;
    z-index: 1;
    background: transparent;
    color: transparent;
    caret-color: #ffffff;
    resize: none;
    outline: none;
}

.kp-cssedit__input::selection {
    background: rgba(120, 140, 255, 0.35);
    color: transparent;
}

.kp-cssedit--readonly {
    opacity: 0.85;
}

.kp-cssedit--readonly .kp-cssedit__input {
    cursor: default;
}

/* Tokenkleuren van de mini-highlighter (js/css-editor.js). */
.kp-css-cmt {
    color: #7a8194;
    font-style: italic;
}

.kp-css-str {
    color: #a5d18c;
}

.kp-css-at {
    color: #d18ce0;
}

.kp-css-hex {
    color: #e6c07b;
}

.kp-css-num {
    color: #e6a06b;
}

.kp-css-prop {
    color: #7fc7ff;
}

.kp-css-pun {
    color: #9aa0ae;
}

/* ---------- Versiehistorie: het verschil tussen twee versies (/beheer/paginas/{id}/historie) ----------
   Toegevoegde regels groen, verwijderde regels rood, met een + en een - ervoor: kleur alleen is
   voor een kleurenblinde beheerder geen verschil. De tekst wordt als tekst getoond (ook HTML),
   dus lange regels breken af in plaats van uit het paneel te lopen. */
.kp-diff {
    margin-top: 1rem;
}

.kp-diff__field {
    border-top: 1px solid #e6e6ea;
    padding-top: 0.75rem;
    margin-top: 0.75rem;
}

.kp-diff__fieldname {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.kp-diff__line {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.85rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    padding: 0.15rem 0.5rem 0.15rem 1.6rem;
    position: relative;
}

.kp-diff__line::before {
    position: absolute;
    left: 0.5rem;
    font-weight: 700;
}

.kp-diff__line--added {
    background: #e7f7ec;
    color: #14532d;
}

.kp-diff__line--added::before {
    content: "+";
}

.kp-diff__line--removed {
    background: #fdecec;
    color: #7f1d1d;
}

.kp-diff__line--removed::before {
    content: "-";
}

.kp-diff__line--unchanged {
    color: var(--kp-ink-soft);
}

.kp-diff__line--skipped {
    color: var(--kp-ink-soft);
    font-style: italic;
    background: #f6f6f8;
}

/* ---------- Blazor error UI (template default, restyled) ---------- */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}