/* ==========================================================================
   F.A.M.E Fitness - DNN Theme
   Ported from the FameFitness.Portal (ASP.NET Core) design system:
   wwwroot/scss/base/_variables.scss, _mixins.scss, _page.scss
   wwwroot/scss/components/_navbar.scss, _buttons.scss, _footer.scss, _form.scss
   wwwroot/scss/layout/_home.scss
   Kleuren geverifieerd tegen https://famefitness.nl
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (Urbanist)
   Eén familie met echte gewichten, in WOFF2. Daardoor werkt font-weight
   overal zoals bedoeld en is de payload ~88KB in plaats van ~780KB TTF.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Urbanist';
    src: url('fonts/Urbanist-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Urbanist';
    src: url('fonts/Urbanist-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Urbanist';
    src: url('fonts/Urbanist-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Urbanist';
    src: url('fonts/Urbanist-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Urbanist';
    src: url('fonts/Urbanist-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Compatibiliteit: de oude familienamen blijven werken voor bestaande
   module-inhoud. Een browser haalt een face pas op als hij gebruikt wordt,
   dus deze regels kosten niets zolang niemand ze aanroept. */
@font-face { font-family: 'urbanist-regular';   src: url('fonts/Urbanist-Regular.woff2') format('woff2');   font-display: swap; }
@font-face { font-family: 'urbanist-italic';    src: url('fonts/Urbanist-Italic.woff2') format('woff2');    font-display: swap; }
@font-face { font-family: 'urbanist-semibold';  src: url('fonts/Urbanist-SemiBold.woff2') format('woff2');  font-display: swap; }
@font-face { font-family: 'urbanist-extrabold'; src: url('fonts/Urbanist-ExtraBold.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'urbanist-black';     src: url('fonts/Urbanist-Black.woff2') format('woff2');     font-display: swap; }

/* --------------------------------------------------------------------------
   2. Design tokens
   Kleuren ongewijzigd overgenomen uit _variables.scss en geverifieerd tegen
   famefitness.nl. Typografie, ruimte en randen zijn opnieuw gezet.
   -------------------------------------------------------------------------- */
:root {
    /* Kleur - onveranderd */
    --ff-primary: #25c0ff;
    --ff-primary-dark: #0099d8; /* darken($primary, 15%) - knopkleur */
    /* Wit op #0099d8 haalt 3.21:1. Dat is genoeg voor grote vette knoptekst
       (drempel 3:1), maar niet voor kleine tekst op een gevuld vlak. Dit is
       het lichtste blauw uit dezelfde reeks dat wel 4.5:1 haalt. */
    --ff-primary-deep: #007eb4;
    --ff-primary-hover: #00abf1; /* darken($primary, 7.5%) */
    --ff-black: #000;
    --ff-harmony: #0d0d0d; /* kaart-/tegelvlak */
    --ff-white: #fff;
    --ff-gray: #dbdcde;
    --ff-gray-100: #dedede;
    --ff-text: #696969;
    --ff-muted: rgba(0,0,0,.5);
    --ff-summer-green: #7acf1c;
    --ff-carrot-orange: #f29200;
    --ff-autumn-red: #c73535;

    /* Nieuw: gedempte tekst op donker, en de hairline die tegels
       losmaakt van de zwarte achtergrond. */
    --ff-on-dark-muted: #a7adb4;
    --ff-hairline: rgba(255,255,255,.08);
    --ff-hairline-strong: rgba(255,255,255,.16);

    /* Meldingen: donkere tekst op de signaalkleuren, zodat ze leesbaar zijn */
    --ff-on-signal: #10230a;

    --ff-radius: .25rem;
    --ff-radius-md: .5rem;
    --ff-radius-lg: 16px;
    --ff-radius-xl: 45px;
    --ff-nav-height: 80px;
    --ff-maxwidth: 1440px;

    /* Typografie ------------------------------------------------------------
       Basis 17px op mobiel, 18px vanaf tablet. De koppen volgen een
       ratio van ~1.22, zodat h2, h3 en h4 duidelijk van elkaar verschillen. */
    --ff-font-body: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ff-font-heading: var(--ff-font-body);
    --ff-font-button: var(--ff-font-body);
    --ff-weight-body: 400;
    --ff-weight-medium: 600;
    --ff-weight-heading: 800;
    --ff-weight-button: 900;

    --ff-leading-tight: 1.15;
    --ff-leading-heading: 1.18;
    --ff-leading-body: 1.65;

    --ff-text-sm: clamp(.875rem, .84rem + .16vw, .95rem);
    --ff-text-base: clamp(1rem, .96rem + .2vw, 1.125rem);
    --ff-text-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3rem);
    --ff-h6: clamp(1.05rem, 1rem + .25vw, 1.2rem);
    --ff-h5: clamp(1.2rem, 1.1rem + .45vw, 1.45rem);
    --ff-h4: clamp(1.4rem, 1.24rem + .72vw, 1.8rem);
    --ff-h3: clamp(1.65rem, 1.4rem + 1.12vw, 2.25rem);
    --ff-h2: clamp(1.95rem, 1.56rem + 1.75vw, 2.9rem);
    --ff-h1: clamp(2.3rem, 1.75rem + 2.45vw, 3.6rem);
    --ff-h1-hero: clamp(2.5rem, 1.7rem + 3.6vw, 4.25rem);

    /* Ruimte ----------------------------------------------------------------
       De sectieritmiek schaalt vloeiend in plaats van in vier harde stappen
       van 60 naar 150px. */
    --ff-space-2xs: .25rem;
    --ff-space-xs: .5rem;
    --ff-space-sm: .75rem;
    --ff-space-md: 1rem;
    --ff-space-lg: 1.5rem;
    --ff-space-xl: 2rem;
    --ff-space-2xl: 3rem;
    --ff-section-y: clamp(3.5rem, 2.2rem + 5.4vw, 6.5rem);
    --ff-gutter: clamp(1rem, .7rem + 1.2vw, 1.5rem);

    /* Beweging - één curve voor het hele thema */
    --ff-ease: cubic-bezier(.22, .61, .36, 1);
    --ff-dur: .28s;
    --ff-dur-slow: .5s;
    --ff-trans: all .5s ease-in-out;

    /* Diepte */
    --ff-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --ff-shadow-md: 0 6px 20px rgba(0,0,0,.45);
    --ff-shadow-lg: 0 16px 40px rgba(0,0,0,.55);
    --ff-glow: 0 0 0 1px rgba(37,192,255,.35), 0 12px 32px rgba(37,192,255,.14);
}

/* --------------------------------------------------------------------------
   3. Basis / page
   -------------------------------------------------------------------------- */
html {
    overflow-y: auto;
    scroll-behavior: smooth;
    height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background-color: var(--ff-black);
    color: var(--ff-white);
    font-family: var(--ff-font-body);
    font-weight: var(--ff-weight-body);
    font-size: var(--ff-text-base);
    line-height: var(--ff-leading-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Op zeer brede schermen groeit alleen de basis mee, niet de regelafstand */
@media (min-width: 120em) {
    body { font-size: 1.2rem; }
}

body.stop-scrolling { overflow: hidden; }

.fame-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* De navigatiebalk is fixed; de inhoud schuift er standaard onderdoor vandaan.
   Een hero heft dit weer op met een negatieve marge, zodat de achtergrond
   wel onder de balk doorloopt - net als op famefitness.nl. */
.fame-layout > .content {
    flex: 1 0 auto;
    padding-top: var(--ff-nav-height);
}

*, *::before, *::after { box-sizing: border-box; }

img {
    max-width: 100%;
    height: auto;
}

hr {
    margin-top: .5rem;
    margin-bottom: .7rem;
    border: 0;
    border-top: 1px solid var(--ff-primary);
}

/* --------------------------------------------------------------------------
   4. Typografie
   -------------------------------------------------------------------------- */
/* Koppen: één ratio van ~1.22, zodat elk niveau zichtbaar verschilt van
   het volgende. Het gewicht komt nu uit een echte ExtraBold-snede. */
.fame h1, .fame h2, .fame h3, .fame h4, .fame h5, .fame h6,
.fame .h1, .fame .h2, .fame .h3, .fame .h4, .fame .h5, .fame .h6 {
    font-family: var(--ff-font-heading);
    font-weight: var(--ff-weight-heading);
    line-height: var(--ff-leading-heading);
    letter-spacing: -.015em;
    color: var(--ff-white);
    margin-top: 0;
    margin-bottom: var(--ff-space-sm);
    text-wrap: balance;
    overflow-wrap: break-word;
}

.fame h1, .fame .h1 { font-size: var(--ff-h1); line-height: var(--ff-leading-tight); letter-spacing: -.025em; }
.fame h2, .fame .h2 { font-size: var(--ff-h2); letter-spacing: -.02em; }
.fame h3, .fame .h3 { font-size: var(--ff-h3); }
.fame h4, .fame .h4 { font-size: var(--ff-h4); letter-spacing: -.01em; }
.fame h5, .fame .h5 { font-size: var(--ff-h5); letter-spacing: -.005em; }
.fame h6, .fame .h6 { font-size: var(--ff-h6); letter-spacing: 0; }

/* Een kop die op een alinea volgt heeft lucht nodig, de eerste kop niet */
.fame * + h2, .fame * + h3, .fame * + h4 { margin-top: var(--ff-space-xl); }
.fame h2 + h3, .fame h3 + h4, .fame h4 + h5 { margin-top: var(--ff-space-sm); }

.fame p {
    line-height: var(--ff-leading-body);
    margin-top: 0;
    margin-bottom: var(--ff-space-md);
    color: var(--ff-white);
    text-wrap: pretty;
}

.fame p:last-child { margin-bottom: 0; }

/* Introalinea onder een sectiekop */
.fame .lead {
    font-size: var(--ff-text-lead);
    color: var(--ff-on-dark-muted);
    max-width: 60ch;
}

.fame a {
    color: var(--ff-white);
    text-decoration: none;
    transition: color var(--ff-dur) var(--ff-ease);
}

.fame a:hover { color: var(--ff-primary); }

/* Toetsenbordfocus: één ring, overal zichtbaar, ook op de zwarte
   achtergrond. :focus-visible raakt alleen toetsenbordgebruikers, dus de
   muisklik blijft schoon. */
.fame :focus-visible,
.fame-light :focus-visible,
.fame-popup :focus-visible {
    outline: 3px solid var(--ff-primary);
    outline-offset: 3px;
    border-radius: var(--ff-radius);
}

/* Op een lichte kaart of witte knop is de primaire kleur te licht */
.card-default :focus-visible,
.fame-light .fame-panel :focus-visible {
    outline-color: var(--ff-primary-dark);
}

/* Direct-naar-inhoud-link: onzichtbaar tot hij focus krijgt */
.skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -120%);
    z-index: 200;
    padding: .75rem 1.25rem;
    background-color: var(--ff-primary-deep);
    color: var(--ff-white);
    font-family: var(--ff-font-button);
    font-weight: var(--ff-weight-button);
    border-radius: 0 0 var(--ff-radius) var(--ff-radius);
    text-decoration: none;
    transition: transform var(--ff-dur) var(--ff-ease);
}

.skip-link:focus { transform: translate(-50%, 0); }

.fame strong { color: var(--ff-white); }

.fame .text-primary { color: var(--ff-primary); }
.fame .text-center { text-align: center; }
.fame .text-right { text-align: right; }
.fame .mx-auto { margin-left: auto; margin-right: auto; }
.fame .text--max-width { max-width: 33.75em; margin: 0 auto; }
.fame .active { color: var(--ff-white); }

/* check-list uit _page.scss */
.fame ul.list {
    position: relative;
    list-style: none;
    margin-left: 0;
    padding: 2rem 0 2rem 2em;
}

.fame ul.list li {
    position: relative;
    color: var(--ff-white);
    list-style: none;
}

.fame ul.list li::before {
    content: url('img/check.svg');
    top: 5px;
    position: absolute;
    left: -2em;
}

.fame .list-unstyled {
    list-style: none;
    padding-left: 0;
    color: var(--ff-white);
}

/* --------------------------------------------------------------------------
   5. Secties
   -------------------------------------------------------------------------- */
/* De sectieritmiek schaalt vloeiend mee met het scherm in plaats van in
   vier harde stappen. Zie --ff-section-y in de tokens.

   Ritme aan één kant. Elke sectie zet alleen ruimte bóven zich; de afsluiting
   onderaan de pagina komt van main.content. Dat scheelt de hele reeks
   "+ .page-section { padding-top: 0 }"-uitzonderingen die hier stond en die
   in DNN toch niet aansloeg: DNN zet om elke module een .DnnModule-div, dus
   twee page-sections in dezelfde pane zijn nooit elkaars buren. Gevolg was
   dubbele ruimte tussen secties en géén ruimte tussen modules zonder Fame-
   container. Zo blijft de afstand overal precies één --ff-section-y, ook als
   een sectie ertussenuit valt. */
.page-section {
    background-color: var(--ff-black);
    padding-top: var(--ff-section-y);
    padding-bottom: 0;
}

/* Een module zonder Fame-container (of met Blank.ascx) brengt zelf geen
   sectieritme mee en plakte daardoor tegen de vorige sectie aan. */
.section-pane > .DnnModule:not(:has(.page-section)) { padding-top: var(--ff-section-y); }

/* De onderkant van de laatste sectie tegen de footer aan. */
.fame-layout > .content { padding-bottom: var(--ff-section-y); }

.page-section h2 {
    margin-top: 0;
    margin-bottom: var(--ff-space-md);
}

/* Alleen een expliciet gemarkeerde intro krijgt de grote maat; een <strong>
   midden in een zin blijft gewoon een <strong>. */
.page-section .section-title strong,
.page-section .lead strong,
.page-section strong.underline {
    font-size: var(--ff-text-lead);
    font-weight: var(--ff-weight-heading);
}

/* Skin-secties zijn statische opmaak in de .ascx: staan alle panes erin leeg,
   dan blijft er anders een zwarte band over waar niets in staat. In de
   bewerkmodus blijven ze zichtbaar, anders valt er niets in te slepen. */
.fame .content > .page-section:has(.container .row > .DNNEmptyPane):not(:has(.container .row > :not(.DNNEmptyPane))),
.fame .content > .page-section.is-empty,
.fame .section-pane > .DnnModule.is-empty { display: none; }

.dnnEditState .fame .content > .page-section,
.dnnEditState .fame .section-pane > .DnnModule.is-empty { display: block; }

/* Een sectie direct onder de paginakop hoeft er niet nog eens 100px bij */
.inner-header + .page-section,
.inner-header + .hero-pane:empty + .page-section,
.inner-header + .hero-pane.DNNEmptyPane + .page-section { padding-top: var(--ff-space-2xl); }

.section-title {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--ff-space-xl);
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--ff-space-xs);
}

/* Fijn accentstreepje onder de sectiekop, in de primaire kleur - hetzelfde
   motief als de streep onder .card__title, nu ook op sectieniveau. */
.section-title > h1::after,
.section-title > h2::after,
.section-title > h3::after {
    content: '';
    display: block;
    width: 64px;
    height: 3px;
    margin: var(--ff-space-md) auto 0;
    border-radius: 3px;
    background-color: var(--ff-primary);
}

.section-title h1, .section-title h2, .section-title h3,
.section-title h4, .section-title h5 {
    text-align: center;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0;
}

.section-title p { text-align: center; }
.section-title span { margin-left: auto; }

.page-title {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--ff-space-md);
    justify-content: left;
}

.page-title h1, .page-title h2, .page-title h3,
.page-title h4, .page-title h5 {
    text-align: left;
    font-weight: 700;
}

.page-title p { text-align: left; }
.page-title span { margin-left: auto; }

.page-bottom {
    display: flex;
    justify-content: center;
}

/* Hero (uit layout/_home.scss)
   De achtergrondfoto komt van de redacteur, dus de leesbaarheid van de tekst
   mag er niet van afhangen: een verloop van links donker naar rechts open
   houdt de kop leesbaar zonder de foto plat te drukken. */
.hero-image {
    margin-top: calc(-1 * var(--ff-nav-height));
    padding-top: var(--ff-nav-height);
    min-height: max(520px, 80vh);
    background-color: var(--ff-black);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hero-image::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 28%),
        linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.15) 72%, rgba(0,0,0,0) 100%);
}

/* Zachte overgang naar de eerste zwarte sectie eronder */
.hero-image::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--ff-black) 100%);
}

/* De Home-skin zet de heropmaak zelf om de HeroPane heen, zodat het niet
   uitmaakt welke container aan de module hangt. Hangt de redacteur er tóch
   de Hero-container aan, dan zit er een .hero-image in een .hero-image;
   de binnenste wordt dan een gewone doorgeefluik zonder eigen hoogte,
   verloop of watermerk. */
.hero-image .hero-image {
    margin-top: 0;
    padding-top: 0;
    min-height: 0;
    overflow: visible;
    isolation: auto;
    background: none;
}

.hero-image .hero-image::before,
.hero-image .hero-image::after { content: none; }
.hero-image .hero-image > .container { padding: 0; max-width: none; }
.hero-image .hero-image .wrap-text { min-height: 0; display: block; }
.hero-image .hero-image .unstoppable,
.hero-image .hero-image #unstoppable { display: none; }

/* Een lege HeroPane mag geen scherm hoog zwart vlak achterlaten. DNN zet
   DNNEmptyPane op elke pane waar geen module in zit; daar sturen we op,
   en niet op "bevat geen .DnnModule" - dat zou de offline preview in
   Documentation/Preview.html ook wegpoetsen. */
.hero-section:has(.hero-pane.DNNEmptyPane) { display: none; }
.dnnEditState .hero-section { display: block; }

/* Zet de foto op de pane of op de sectie zelf. Beide werken:
   <div id="HeroPane" style="--ff-hero-image:url(/Portals/0/hero.jpg)"> */
.hero-pane[style*="--ff-hero-image"] .hero-image,
.hero-image[style*="--ff-hero-image"] { background-image: var(--ff-hero-image); }

/* Sinds de heropmaak in de skin staat, kan een redacteur er niet meer van
   buitenaf een CSS-variabele op zetten. De foto mag daarom ook uit de
   module-inhoud komen:
     <img class="hero-bg" src="/Portals/0/hero.jpg" alt="" />
     <div class="hero-bg" style="background-image:url(/Portals/0/hero.jpg)"></div>
   Hij loopt van rand tot rand en tot onder de navigatiebalk door. */
.hero-image .hero-bg {
    position: absolute;
    top: calc(-1 * var(--ff-nav-height));
    bottom: 0;
    left: 50%;
    width: 100vw;
    max-width: none;
    height: auto;
    margin: 0;
    transform: translateX(-50%);
    z-index: -2;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* .wrap-text maakt bewust géén eigen stapelcontext (geen z-index): anders
   komen het watermerk en de achtergrondfoto boven het verloop uit en is de
   kop niet meer leesbaar. De tekst tilt zichzelf op met z-index 1. */
.hero-image .wrap-text {
    display: flex;
    align-items: center;
    min-height: calc(max(520px, 80vh) - var(--ff-nav-height));
    width: 100%;
    max-width: var(--ff-maxwidth);
    margin: auto;
    position: relative;
}

.hero-image .hero-text {
    position: relative;
    z-index: 1;
    max-width: 34rem;
    padding: var(--ff-space-md);
}

.hero-image .hero-text h1 {
    font-size: var(--ff-h1-hero);
    line-height: var(--ff-leading-tight);
    letter-spacing: -.03em;
    margin-bottom: var(--ff-space-md);
    text-shadow: 0 2px 24px rgba(0,0,0,.5);
}

/* Wit blijft wit, op elk formaat. De vorige regel maakte deze alinea vanaf
   768px grijs, precies waar er een foto achter staat. */
.hero-image .hero-text p {
    color: var(--ff-white);
    font-size: var(--ff-text-lead);
    max-width: 46ch;
    text-shadow: 0 1px 12px rgba(0,0,0,.55);
}

.hero-image .btn { max-width: 225px; }

.hero-image .hero-text .btn + .btn { margin-left: var(--ff-space-sm); }

/* "GET FIT STAY FIT" watermerk - achter de tekst, boven de scrim.
   De klasse is leidend; het id blijft erbij voor pagina's waar een redacteur
   de oude opmaak in de module-inhoud heeft staan. */
.hero-image .unstoppable,
.hero-image #unstoppable {
    z-index: -1;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(-90deg);
    opacity: .1;
    min-width: 280px;
    pointer-events: none;
    user-select: none;
}

.hero-image .unstoppable ul,
.hero-image #unstoppable ul { list-style: none; margin: 0; padding: 0; }

.hero-image .unstoppable li,
.hero-image #unstoppable li {
    color: var(--ff-white);
    font-size: 28pt;
    font-family: var(--ff-font-heading);
    font-weight: var(--ff-weight-heading);
    letter-spacing: -.02em;
    white-space: nowrap;
}

@media (min-width: 30em) {
    .hero-image .unstoppable, .hero-image #unstoppable { min-width: 410px; }
    .hero-image .unstoppable li, .hero-image #unstoppable li { font-size: 38pt; }
}
@media (min-width: 48em) {
    .hero-image .unstoppable, .hero-image #unstoppable { right: 10px; }
    .hero-image .unstoppable li, .hero-image #unstoppable li { font-size: 65pt; }
}
@media (min-width: 64em) {
    .hero-image .unstoppable, .hero-image #unstoppable { right: 100px; }
    .hero-image .unstoppable li, .hero-image #unstoppable li { font-size: 75pt; }
}
@media (min-width: 85.375em) {
    .hero-image .unstoppable, .hero-image #unstoppable { right: 200px; }
    .hero-image .unstoppable li, .hero-image #unstoppable li { font-size: 80pt; }
}
@media (min-width: 120em) {
    .hero-image .unstoppable, .hero-image #unstoppable { right: 500px; }
    .hero-image .unstoppable li, .hero-image #unstoppable li { font-size: 90pt; }
}

/* Op een telefoon staat het watermerk anders dwars over de knop heen. */
@media (max-width: 29.99em) {
    .hero-image .unstoppable,
    .hero-image #unstoppable { top: 22%; opacity: .07; }
}

/* Quote-blok. Ook bruikbaar op een <blockquote>: de browser geeft dat element
   standaard 40px marge links en rechts, wat samen met width:100% op een
   telefoon een horizontale schuifbalk oplevert. */
.quote,
.testimonials .item {
    margin-left: 0;
    margin-right: 0;
}

.quote {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--ff-black);
    width: 100%;
}

.quote .text, .quote .author {
    text-align: center;
    color: var(--ff-white);
}

/* --------------------------------------------------------------------------
   6. Navigatie (uit components/_navbar.scss)
   -------------------------------------------------------------------------- */
nav.nav {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    height: var(--ff-nav-height);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ff-black);
    border-bottom: 1px solid transparent;
    transition: background-color var(--ff-dur) var(--ff-ease),
                border-color var(--ff-dur) var(--ff-ease),
                box-shadow var(--ff-dur) var(--ff-ease);
}

/* Bovenaan de pagina loopt de balk over de hero door; zodra je scrolt
   krijgt hij een eigen vlak met een hairline eronder. */
nav.nav.affixed {
    background-color: rgba(0,0,0,.88);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom-color: var(--ff-hairline);
    box-shadow: 0 2px 24px rgba(0,0,0,.6);
}

@supports not (backdrop-filter: blur(1px)) {
    nav.nav.affixed { background-color: rgba(0,0,0,.96); }
}

.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 15px;
    max-width: var(--ff-maxwidth);
}

.menu .menu-item { display: flex; align-items: center; }

/* Het woordmerk en het beeldmerk zitten in een enkele link */
.menu .brand {
    display: flex;
    align-items: center;
    min-height: 44px;
}

.menu #beeldmerk { width: 50px; height: auto; }

/* 184px is de werkelijke breedte van het bestand; op 200px werd het
   opgeschaald en dus zachter. */
.menu #logo {
    width: 184px;
    height: auto;
    padding-left: 1rem;
    display: none;
}

@media (min-width: 768px) {
    .menu #logo { display: block; }
}

.navbar { display: flex; align-items: center; }

.navbar .nav-items {
    list-style-type: none;
    display: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.navbar .nav-items > li { list-style: none; }

.navbar .nav-items > li:not(:last-child) > a { margin-right: 28px; }

.navbar .nav-items a {
    color: var(--ff-white);
    text-decoration: none;
    font-weight: var(--ff-weight-medium);
    font-size: var(--ff-text-sm);
    letter-spacing: .01em;
    position: relative;
}

.navbar .nav-items a:hover,
.navbar .nav-items a.active { color: var(--ff-primary); }

/* Een uitgeschakelde menupagina was een <a href="#">: een focusbare link die
   naar de bovenkant sprong. Nu een <span>, dus geen doodlopende link meer. */
.navbar .nav-items .nav-disabled,
.main-menu .nav-disabled,
footer.fame-footer .nav-disabled {
    color: var(--ff-on-dark-muted);
    cursor: default;
}

/* Fijne onderstreping bij de actieve pagina, in plaats van alleen kleur */
.navbar .nav-items > li > a:not(.btn)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--ff-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--ff-dur) var(--ff-ease);
}

.navbar .nav-items > li > a:not(.btn):hover::after,
.navbar .nav-items > li > a:not(.btn).active::after { transform: scaleX(1); }

.navbar .nav-items .btn {
    white-space: nowrap;
    min-height: 44px;
    padding: .5rem 1.25rem;
    /* Blijft klein in de balk, dus hier het blauw dat ook bij kleine tekst
       4.5:1 haalt. */
    background-color: var(--ff-primary-deep);
    font-size: var(--ff-text-sm);
}

.navbar .nav-items .btn:hover { background-color: var(--ff-primary-dark); }

.navbar .nav-items .btn:hover { color: var(--ff-white); }

/* Hamburger - is nu een echte <button>, dus de browserstijl gaat eraf */
.menuToggle {
    background: var(--ff-harmony);
    border: 1px solid var(--ff-hairline);
    height: 48px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--ff-radius-lg);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--ff-dur) var(--ff-ease);
}

.menuToggle:hover { border-color: var(--ff-hairline-strong); }

.nav-icon {
    width: 30px;
    height: 24px;
    position: relative;
    background-color: transparent;
    transform: rotate(0deg);
    transition: .5s ease-in-out;
    cursor: pointer;
}

.nav-icon span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background-color: var(--ff-primary);
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
    border-radius: 5px;
}

.nav-icon span:nth-child(1) { top: 0; }
.nav-icon span:nth-child(2), .nav-icon span:nth-child(3) { top: 10px; }
.nav-icon span:nth-child(4) { top: 20px; }

.menuToggle[aria-expanded="true"] .nav-icon span:nth-child(1),
.menuToggle[aria-expanded="true"] .nav-icon span:nth-child(4) {
    top: 18px;
    width: 0;
    left: 50%;
}

.menuToggle[aria-expanded="true"] .nav-icon span:nth-child(2) { transform: rotate(45deg); }
.menuToggle[aria-expanded="true"] .nav-icon span:nth-child(3) { transform: rotate(-45deg); }

/* Uitschuifmenu
   Het paneel stond buiten beeld geparkeerd maar bleef bereikbaar met Tab,
   terwijl aria-hidden="true" erop stond. visibility haalt het nu echt uit
   de tabvolgorde en uit de toegankelijkheidsboom. */
.side-menu-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: -100%;
    top: var(--ff-nav-height);
    background-color: var(--ff-black);
    border-left: 1px solid var(--ff-hairline);
    height: calc(100dvh - var(--ff-nav-height));
    width: 100%;
    max-width: 330px;
    visibility: hidden;
    transition: right var(--ff-dur-slow) var(--ff-ease),
                visibility 0s linear var(--ff-dur-slow);
    padding: 2rem var(--ff-gutter) 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.side-menu-container[data-open="true"] {
    right: 0;
    visibility: visible;
    box-shadow: -9px 2px 24px 0 rgba(37,192,255,.18);
    transition: right var(--ff-dur-slow) var(--ff-ease), visibility 0s;
}

.side-menu-container[data-open="true"] ul li a { display: flex; }

.main-menu {
    align-self: flex-start;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-menu li {
    margin-bottom: 1.5rem;
    list-style: none;
    position: relative;
}

.main-menu li a {
    display: flex;
    align-items: center;
    min-height: 48px;
    color: var(--ff-white);
    font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2rem);
    font-weight: var(--ff-weight-heading);
    letter-spacing: -.01em;
    position: relative;
    text-decoration: none;
    transition: color var(--ff-dur) var(--ff-ease);
    padding: 2px 0;
}

.main-menu li a.active,
.main-menu li a:hover { color: var(--ff-primary); }

/* Tweede niveau in het uitschuifmenu */
.main-menu li ul {
    list-style: none;
    margin: .5rem 0 0 0;
    padding: 0 0 0 1rem;
}

.main-menu li ul li { margin-bottom: .5rem; }

.main-menu li ul li a {
    font-size: var(--ff-text-base);
    font-weight: var(--ff-weight-medium);
    letter-spacing: 0;
    min-height: 44px;
    color: var(--ff-gray);
}

.sub-menu {
    margin-left: auto;
    margin-top: auto;
    margin-bottom: 6.65rem;
    list-style: none;
    padding: 0;
}

.sub-menu li {
    list-style: none;
    color: var(--ff-white);
    font-size: var(--ff-text-sm);
    text-align: right;
}

.sub-menu li a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 44px;
    text-decoration: none;
    color: var(--ff-on-dark-muted);
    text-align: right;
}

.sub-menu li a.active,
.sub-menu li a:hover { color: var(--ff-primary); }

@media (min-width: 992px) {
    .navbar .nav-items { display: flex; }
    .menuToggle { display: none; }
    .side-menu-container { display: none; }
}

/* Tussen 992 en 1200px is er weinig ruimte naast het logo: kleinere tussenruimte
   en tekst, zodat de balk niet omvalt of horizontaal gaat scrollen. */
@media (min-width: 992px) and (max-width: 1199px) {
    .navbar .nav-items > li:not(:last-child) > a { margin-right: 16px; }
    .navbar .nav-items a { font-size: .85rem; }
    .navbar .nav-items .btn { font-size: .9rem; padding: .5rem 1rem; }
    .menu #logo { width: 150px; padding-left: .5rem; }
}

/* Aanraakdoelen minimaal 44px - ook de links die eerder 21 tot 26px waren */
.menuToggle { min-width: 44px; min-height: 44px; }

.side-menu-container a,
.navbar .nav-items a,
.blog-filter a,
.blog-sidebar li a,
.pagination .page-link,
.card__readmore a,
.infoCard .block a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.blog-sidebar li a,
.navbar .nav-items .nav-dropdown li a { display: flex; }

/* --------------------------------------------------------------------------
   7. Knoppen (uit components/_buttons.scss)
   -------------------------------------------------------------------------- */
.btn,
.btn-primary,
.btn-sec,
.btn-default,
.btn-save,
.btn-delete,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    border: 2px solid transparent;
    border-radius: var(--ff-radius);
    cursor: pointer;
    padding: .7rem 1.5rem;
    min-height: 48px;
    transition: background-color var(--ff-dur) var(--ff-ease),
                border-color var(--ff-dur) var(--ff-ease),
                color var(--ff-dur) var(--ff-ease),
                transform var(--ff-dur) var(--ff-ease),
                box-shadow var(--ff-dur) var(--ff-ease);
    position: relative;
    font-family: var(--ff-font-button);
    font-weight: var(--ff-weight-button);
    /* Minimaal 18.8px: samen met gewicht 900 telt dit als grote tekst, en
       dan volstaat 3:1 voor wit op de knopkleur. */
    font-size: clamp(1.175rem, 1.12rem + .28vw, 1.3rem);
    letter-spacing: .01em;
    line-height: 1.2;
    color: var(--ff-white);
    text-decoration: none;
    text-align: center;
}

.btn:active, .btn-primary:active, .btn-sec:active { transform: translateY(1px); }

.btn-primary {
    background: var(--ff-primary-dark);
    border-color: var(--ff-primary);
    color: var(--ff-white);
}

.btn-primary:hover {
    background: var(--ff-primary-hover);
    border-color: var(--ff-primary);
    color: var(--ff-white);
    box-shadow: var(--ff-glow);
}

.btn-sec {
    background-color: transparent;
    color: var(--ff-white);
    border-color: var(--ff-white);
}

.btn-sec:hover {
    background-color: var(--ff-white);
    color: var(--ff-black);
}

/* Knop met alleen tekst, voor secundaire acties in een kaart of sectie */
.btn-link {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    font-family: var(--ff-font-button);
    font-weight: var(--ff-weight-button);
    color: var(--ff-primary);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: var(--ff-text-sm);
}

.btn-link::after {
    content: '';
    width: .5em;
    height: .5em;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--ff-dur) var(--ff-ease);
}

.btn-link:hover::after { transform: rotate(45deg) translate(2px, -2px); }

.btn-default {
    background: transparent;
    color: var(--ff-white);
    border: 2px solid var(--ff-primary);
}

.btn-default:hover { background: var(--ff-primary-dark); border-color: var(--ff-primary); }

.btn-save { background: var(--ff-summer-green); }
.btn-save:hover { background: #6bb518; }

.btn-delete, .btn-danger { background: var(--ff-autumn-red); }
.btn-delete:hover, .btn-danger:hover { background: #b52f2f; }

@media (max-width: 600px) {
    .page-bottom .btn {
        width: 100%;
        max-width: 250px;
        text-align: center;
        margin: 10px auto;
    }
}

/* Ronde pijlknop */
.next {
    cursor: pointer;
    border-radius: 50%;
    background-color: var(--ff-white);
    color: var(--ff-primary);
    background-image: url('img/arrow.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    width: 48px;
    height: 48px;
    border: none;
    transition: transform var(--ff-dur) var(--ff-ease);
}

.next:hover { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   8. Tegels / kaarten (uit layout/_home.scss)
   -------------------------------------------------------------------------- */
/* Tegels staan op #0d0d0d tegen een #000 achtergrond - dat verschil is te
   klein om de rand te zien. Een hairline maakt ze los zonder de huisstijl
   te veranderen. */
.tile,
.lessons .lesson,
.testimonials .item,
.slider .item {
    background-color: var(--ff-harmony);
    border: 1px solid var(--ff-hairline);
    border-radius: var(--ff-radius-lg);
    padding: var(--ff-space-lg);
    transition: border-color var(--ff-dur) var(--ff-ease),
                transform var(--ff-dur) var(--ff-ease),
                background-color var(--ff-dur) var(--ff-ease);
}

.tile:hover,
.lessons .lesson:hover,
.testimonials .item:hover {
    border-color: var(--ff-hairline-strong);
    transform: translateY(-2px);
}

.lessons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ff-gutter);
    margin-bottom: var(--ff-space-lg);
}

/* 1 -> 2 -> 3 -> 4 kolommen; gap-berekening voorkomt overloop op elke breedte */
.lessons .lesson { width: 100%; }

@media (min-width: 576px) { .lessons .lesson { width: calc((100% - var(--ff-gutter)) / 2); } }
@media (min-width: 992px) { .lessons .lesson { width: calc((100% - 2 * var(--ff-gutter)) / 3); } }
@media (min-width: 1200px) { .lessons .lesson { width: calc((100% - 3 * var(--ff-gutter)) / 4); } }

/* De tegeltitel is een niveau onder de sectiekop, dus h3. h2 blijft werken
   voor bestaande module-inhoud. */
.lessons .lesson h2,
.lessons .lesson h3 {
    color: var(--ff-primary);
    font-size: var(--ff-h5);
    margin-top: 0;
    margin-bottom: var(--ff-space-xs);
}

.lessons .lesson p { color: var(--ff-on-dark-muted); font-size: var(--ff-text-sm); }

.testimonials .item { padding: clamp(1rem, .5rem + 2vw, 2rem); }
.testimonials .item strong { color: var(--ff-white); font-size: var(--ff-text-lead); font-weight: var(--ff-weight-heading); }

.slider .item {
    width: 100%;
    max-width: 320px;
    margin: 1rem;
    border-radius: 12px;
}

.slider .item svg {
    fill: var(--ff-primary-dark);
    height: 50px;
    width: 100%;
}

.slider .item:hover {
    background-color: var(--ff-primary-dark);
    cursor: pointer;
}

.slider .item:hover svg { fill: var(--ff-white); }

/* Partnerlogo's */
.logos_container {
    border-radius: var(--ff-radius-lg);
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 100px;
    padding: 1.5rem 0;
}

.logos_container .logo_item { padding: .75rem; }

.logos_container .logo_image {
    max-height: 100%;
    max-width: 100%;
    transition: opacity .5s;
}

/* Flexgrid uit _grid.scss, nu met gap in plaats van negatieve procentmarges.
   Die -1.5% rekende over de breedte van de ouder: binnen een .container van
   1425px is dat 21px tegen 15px padding, dus het reviewblok stak op een breed
   scherm 6px links en rechts buiten elke andere sectie uit. Met een vaste gap
   klopt de uitlijning op elke breedte, en het is dezelfde berekening als
   .lessons hierboven. */
.flexgrid-3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ff-gutter);
}

.flexgrid-3._flex-start { justify-content: flex-start; }
.flexgrid-3 > * { margin: 0; width: 100%; }

@media (min-width: 480px) { .flexgrid-3 > * { width: calc((100% - var(--ff-gutter)) / 2); } }
@media (min-width: 768px) { .flexgrid-3 > * { width: calc((100% - 2 * var(--ff-gutter)) / 3); } }

/* --------------------------------------------------------------------------
   9. Formulieren (uit components/_form.scss)
   -------------------------------------------------------------------------- */
.fame input[type="text"],
.fame input[type="email"],
.fame input[type="password"],
.fame input[type="tel"],
.fame input[type="number"],
.fame input[type="search"],
.fame input[type="date"],
.fame select,
.fame textarea {
    font-family: var(--ff-font-body);
    font-size: var(--ff-text-base);
    color: var(--ff-white);
    background-color: var(--ff-harmony);
    border: 1px solid #2f2f2f;
    border-radius: var(--ff-radius-md);
    padding: .7rem .9rem;
    min-height: 48px;
    width: 100%;
    max-width: 100%;
    transition: border-color var(--ff-dur) var(--ff-ease),
                box-shadow var(--ff-dur) var(--ff-ease);
}

.fame input:focus,
.fame select:focus,
.fame textarea:focus {
    border-color: var(--ff-primary);
    box-shadow: 0 0 0 3px rgba(37,192,255,.2);
}

.fame input:focus:not(:focus-visible),
.fame select:focus:not(:focus-visible),
.fame textarea:focus:not(:focus-visible) { outline: 0; }

.fame label {
    color: var(--ff-white);
    display: inline-block;
    margin-bottom: .35rem;
    font-weight: var(--ff-weight-medium);
    font-size: var(--ff-text-sm);
}

/* #6c6b6b op #0d0d0d haalde 3.6:1 - net te weinig voor placeholdertekst */
.fame ::placeholder { color: #8b8b8b; font-family: var(--ff-font-body); opacity: 1; }

/* Aanmeldbalk (#subscribe) */
.subscribe {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--ff-space-lg);
    border: 1px solid var(--ff-hairline);
    border-radius: var(--ff-radius-xl);
    padding: var(--ff-space-lg) var(--ff-space-xl);
    background: linear-gradient(100.66deg, #0099d8 23.13%, rgba(13,13,13,.86) 97.79%);
}

.subscribe p { color: var(--ff-white); text-align: center; margin: 0; }

@media (max-width: 600px) {
    .subscribe { flex-direction: column; }
    .subscribe p { margin: 1em; }
}

/* --------------------------------------------------------------------------
   10. Meldingen (uit components/_alerts.scss)
   -------------------------------------------------------------------------- */
/* Wit op de signaalkleuren haalde 1.95:1 (groen) en 3.1:1 (oranje). De
   kleuren zelf blijven, de tekst wordt donker en de melding krijgt een
   gekleurde rand zodat hij ook op zwart afgebakend is. */
.alert {
    position: relative;
    padding: .875rem 2.5rem .875rem 1rem;
    margin-bottom: var(--ff-space-md);
    border-radius: var(--ff-radius-md);
    border-left: 4px solid transparent;
    color: var(--ff-on-signal);
    font-weight: var(--ff-weight-medium);
    line-height: 1.5;
}

.alert p, .alert a, .alert strong, .alert li { color: inherit; }
.alert a { text-decoration: underline; }

.alert-success {
    background-color: var(--ff-summer-green);
    border-left-color: #4e8a0d;
}

.alert-warning {
    background-color: var(--ff-carrot-orange);
    border-left-color: #9a5e00;
}

.alert-error, .alert-danger {
    background-color: var(--ff-autumn-red);
    border-left-color: #8a2020;
    color: var(--ff-white);
}

.alert-info {
    background-color: var(--ff-primary);
    border-left-color: var(--ff-primary-dark);
}

.alert .close {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    opacity: .7;
}

.alert .close:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   11. Footer (uit components/_footer.scss)
   -------------------------------------------------------------------------- */
footer.fame-footer {
    background-color: var(--ff-black);
    flex-shrink: 0;
    border-top: 1px solid var(--ff-hairline);
}

footer.fame-footer .container {
    padding-top: clamp(40px, 6vw, 75px);
    padding-bottom: clamp(40px, 6vw, 75px);
}

@media (max-width: 767px) {
    footer.fame-footer .row > [class*="col-"]:not(:last-child) { margin-bottom: 2.5rem; }
}

footer.fame-footer a,
footer.fame-footer p,
footer.fame-footer h2,
footer.fame-footer h3,
footer.fame-footer li { color: var(--ff-white); }

footer.fame-footer h2,
footer.fame-footer h3,
footer.fame-footer .footer-heading {
    font-size: var(--ff-h5);
    margin-top: 0;
    margin-bottom: var(--ff-space-md);
}

footer.fame-footer .footer-logo { margin-bottom: var(--ff-space-md); }

footer.fame-footer .footer-address {
    font-style: normal;
    color: var(--ff-on-dark-muted);
    line-height: 1.9;
}

footer.fame-footer .footer-address a { color: var(--ff-white); }
footer.fame-footer .footer-address a:hover { color: var(--ff-primary); }

footer.fame-footer a:hover {
    text-decoration: none;
    color: var(--ff-primary);
}

/* Footerlinks zijn aanraakdoelen, geen tekstregels */
footer.fame-footer .list-unstyled a,
footer.fame-footer .socials a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

footer.fame-footer ul { list-style: none; padding-left: 0; }

footer.fame-footer .socials .iconHolder { display: flex; gap: var(--ff-space-sm); margin-top: var(--ff-space-md); }
footer.fame-footer .socials svg { fill: var(--ff-white); }
footer.fame-footer .jump { display: inline-flex; transition: transform .2s ease-in-out; }
footer.fame-footer .jump:hover { transform: translateY(-4px); }

footer.fame-footer .footer-copyright {
    font-size: var(--ff-text-sm);
    color: var(--ff-on-dark-muted);
    text-align: center;
    padding: var(--ff-space-md);
    border-top: 1px solid var(--ff-hairline);
}

footer.fame-footer .footer-copyright p { margin-bottom: 0; }

/* Skin-objecten in de footer (Copyright / Terms / Privacy / Login) */
.SkinLink,
.SkinLink a,
.SkinObject,
.SkinObject a {
    color: var(--ff-white);
    font-family: var(--ff-font-body);
    font-size: 15px;
    text-decoration: none;
}

.SkinLink a:hover, .SkinObject a:hover { color: var(--ff-primary); }

/* --------------------------------------------------------------------------
   12. Zoeken / login / gebruiker in de navigatiebalk
   -------------------------------------------------------------------------- */
.nav-utility {
    display: flex;
    align-items: center;
    gap: 15px;
}

.nav-utility .searchBox input[type="text"] {
    background-color: var(--ff-harmony);
    border: 1px solid #2a2a2a;
    border-radius: var(--ff-radius);
    color: var(--ff-white);
    padding: .35rem .6rem;
    font-family: var(--ff-font-body);
    font-size: 14px;
}

.nav-utility a,
.nav-utility .SkinObject { color: var(--ff-white); font-size: 15px; }

.nav-utility a:hover { color: var(--ff-primary); }

/* --------------------------------------------------------------------------
   13. DNN-specifiek
   -------------------------------------------------------------------------- */
/* Panes */
.fame .DNNEmptyPane { display: none; }

/* Een lege pane wordt verborgen, maar de kolom ernaast hield zijn breedte:
   een Inner-pagina zonder LeftPane liet 25% dood vlak rechts staan. De
   overgebleven kolommen vullen de rij nu zelf op. */
.fame .row:has(> .DNNEmptyPane) > [class*="col-"]:not(.DNNEmptyPane) {
    flex: 1 1 0%;
    max-width: 100%;
}

/* In bewerkmodus zijn de lege panes juist wel zichtbaar, dus dan niet */
.dnnEditState .fame .row:has(> .DNNEmptyPane) > [class*="col-"]:not(.DNNEmptyPane) {
    flex: none;
}

/* Een rij waarin alles leeg is, hoeft geen ruimte te kosten */
.fame .row:not(:has(> [class*="col-"]:not(.DNNEmptyPane))) { display: none; }

.dnnEditState .fame .DNNEmptyPane {
    display: block;
    min-height: 60px;
    border: 1px dashed rgba(37,192,255,.5);
    margin-bottom: 10px;
}

/* Containers */
.fame-container { position: relative; }

.fame-container .fame-container-title h2,
.fame-container .fame-container-title h3 {
    font-family: var(--ff-font-heading);
    font-weight: var(--ff-weight-heading);
    color: var(--ff-white);
    margin-top: 0;
}

/* Een module zonder titel mag geen lege regel achterlaten */
.fame-container .fame-container-title:not(:has(:not(:empty))) { display: none; }

/* De standaardcontainer had geen enkele regel, dus twee modules in dezelfde
   pane plakten tegen elkaar. */
.fame-container-main + .fame-container-main,
.fame-container-main + .fame-container-card,
.fame-container-card + .fame-container-card,
.fame-container-card + .fame-container-main,
.fame-container-blank + .fame-container-main,
.fame-container-main + .fame-container-blank { margin-top: var(--ff-space-xl); }

/* Section.ascx zet zowel .fame-container-section als .page-section op
   hetzelfde element. Twee paddingschalen naast elkaar gaven tussen 768 en
   991px 150px waar de schaal 100px bedoelde; nu is er nog één bron.
   Hij volgt hetzelfde eenzijdige ritme als .page-section - deze regel staat
   later in het bestand en zou de padding daar anders weer overschrijven. */
.fame-container-section {
    padding-top: var(--ff-section-y);
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    background-color: var(--ff-black);
}

.fame-container-card {
    background-color: var(--ff-harmony);
    border: 1px solid var(--ff-hairline);
    border-radius: var(--ff-radius-lg);
    padding: var(--ff-space-lg);
    margin-bottom: var(--ff-space-md);
}

/* Module-actiemenu leesbaar houden op donkere achtergrond */
.fame .dnnActionMenu,
.fame .actionMenu,
.fame .dnnEditState .dnnModuleTitle { color: initial; }

.fame .actionMenu li a,
.fame .dnnActionMenu a { color: #333; }

/* DNN-formulieren binnen modules (module settings, login, register)
   krijgen hun eigen leesbare basis terug. */
.fame .dnnForm,
.fame .dnnForm p,
.fame .dnnForm label,
.fame .dnnForm td,
.fame .dnnForm th,
.fame .dnnForm li,
.fame .dnnFormItem label,
.fame .dnnLabel label { color: #333; }

.fame .dnnForm a { color: #1e6fa8; }

.fame .dnnForm input[type="text"],
.fame .dnnForm input[type="password"],
.fame .dnnForm input[type="email"],
.fame .dnnForm select,
.fame .dnnForm textarea {
    background-color: #fff;
    color: #333;
    border: 1px solid #c9c9c9;
}

/* HTML-module content erft de site-typografie.

   Dit is het grootste verschil tussen Documentation/Preview.html en een echte
   DNN-pagina. DNN's default.css zet:

       .Normal { font-size: 1rem; line-height: 1.125rem; }

   en elke HTML-module rendert zijn inhoud in <div class="Normal">. Met
   html op 16px komt dat neer op 16px tekst met 18px regelafstand - een
   regelhoogte van 1,125 waarbij de regels bijna tegen elkaar aan liggen.
   Het thema zet 18px met 1,65. In de preview klopte het dus wel en op de
   site niet, want daar zit die wrapper om alles heen.

   De vorige versie van deze regel pakte alleen kleur en lettertype, dus de
   maat en de regelafstand bleven van DNN. */
.fame .DnnModule .Normal,
.fame .DnnModule .NormalDeleted,
.fame .DnnModule .NormalDisabled,
.fame .DnnModule .SubHead,
.fame .DnnModule .Head {
    color: var(--ff-white);
    font-family: var(--ff-font-body);
    font-size: inherit;
    line-height: var(--ff-leading-body);
}

/* Bewerkbalk niet onder de vaste navigatiebalk laten vallen */
.dnnEditState .fame-layout > .content { padding-top: 0; }

/* --------------------------------------------------------------------------
   14. Login-/registratiepagina's (Edit-skin, lichte variant)
   -------------------------------------------------------------------------- */
/* fame-light staat op hetzelfde element als fame-layout, niet op body en
   niet erboven. De vorige twee selectors matchten daardoor nooit, waardoor
   de inlogpagina donkergrijs op zwart werd (1.9:1). */
.fame-light,
body:has(> form .fame-light) { background-color: #f4f5f7; }

.fame-light { min-height: 100vh; }

.fame-light,
.fame-light p,
.fame-light li,
.fame-light td { color: #333; }

.fame-light h1, .fame-light h2, .fame-light h3,
.fame-light h4, .fame-light h5, .fame-light h6 { color: #111; }

.fame-light a { color: var(--ff-primary-dark); }

.fame-light .fame-panel {
    background-color: #fff;
    border-radius: var(--ff-radius-lg);
    padding: 1.5rem;
    box-shadow: 0 4px 16px 0 rgba(22,42,90,.15);
}

/* --------------------------------------------------------------------------
   15. Hulpklassen
   -------------------------------------------------------------------------- */
.mt-3 { margin-top: 1rem; }
.mb-3 { margin-bottom: 1rem; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.bg-black { background-color: var(--ff-black); }
.bg-harmony { background-color: var(--ff-harmony); }
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* Terug naar boven. Stond eerder altijd in de tabvolgorde, ook geparkeerd
   op right:-70px. Nu echt verborgen tot .is-visible erop staat. */
.scrollTop {
    position: fixed;
    bottom: 25px;
    right: 15px;
    z-index: 90;
    background-color: var(--ff-primary-dark);
    border: 1px solid var(--ff-primary);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--ff-dur) var(--ff-ease),
                transform var(--ff-dur) var(--ff-ease),
                background-color var(--ff-dur) var(--ff-ease),
                visibility 0s linear var(--ff-dur);
}

.scrollTop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--ff-dur) var(--ff-ease),
                transform var(--ff-dur) var(--ff-ease),
                background-color var(--ff-dur) var(--ff-ease),
                visibility 0s;
}

.scrollTop:hover { background-color: var(--ff-primary-hover); }
.scrollTop svg { fill: var(--ff-white); width: 18px; }

/* --------------------------------------------------------------------------
   16. Skin-layouts: panes en koppen
   -------------------------------------------------------------------------- */
/* Panes over de volle breedte */
.hero-pane,
.notice-pane,
.section-pane { width: 100%; }

.notice-pane { background-color: var(--ff-primary-dark); }

.notice-pane:empty { display: none; }

.notice-pane p,
.notice-pane h2,
.notice-pane h3 { color: var(--ff-white); }

/* Paginakop van de Inner-layout: kruimelpad boven de titel, en een fijne
   lijn eronder zodat de kop van de inhoud loskomt. */
.inner-header {
    background-color: var(--ff-black);
    padding-top: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
    padding-bottom: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
    border-bottom: 1px solid var(--ff-hairline);
}

.inner-header .page-title { gap: var(--ff-space-sm); margin-bottom: 0; }
.inner-header .page-title h1 { margin-top: 0; margin-bottom: 0; }

.inner-header .breadcrumb,
.inner-header .breadcrumb a {
    color: var(--ff-on-dark-muted);
    font-size: var(--ff-text-sm);
}

.inner-header .breadcrumb { order: -1; margin-bottom: var(--ff-space-xs); }

/* Kleine bovenkop, bijvoorbeeld boven de blogtitel */
.page-kicker {
    color: var(--ff-primary);
    font-family: var(--ff-font-button);
    font-weight: var(--ff-weight-button);
    font-size: var(--ff-text-sm);
    text-transform: uppercase;
    letter-spacing: .12em;
    margin: 0 0 var(--ff-space-xs);
}

.inner-header .breadcrumb a:hover { color: var(--ff-primary); }

/* Dropdown in de bovenbalk (tweede menuniveau) */
.navbar .nav-items li.has-children { position: relative; }

.navbar .nav-items .nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background-color: var(--ff-harmony);
    border-radius: var(--ff-radius);
    padding: .5rem 0;
    margin: 0;
    list-style: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
    z-index: 110;
}

.navbar .nav-items li.has-children:hover > .nav-dropdown,
.navbar .nav-items li.has-children:focus-within > .nav-dropdown { display: block; }

.navbar .nav-items .nav-dropdown li a {
    display: block;
    padding: .4rem 1rem;
    margin-right: 0;
    white-space: nowrap;
}

/* Footernavigatie uit DDRMenu */
footer.fame-footer .list-unstyled li { margin-bottom: .25rem; }

/* --------------------------------------------------------------------------
   17. Edit-/popup-layout
   -------------------------------------------------------------------------- */
.edit-header {
    background-color: var(--ff-black);
    padding: 15px 0;
}

.edit-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.edit-header-utility { display: flex; align-items: center; gap: 15px; }
.edit-header-utility a { color: var(--ff-white); }
.edit-header-utility a:hover { color: var(--ff-primary); }

.fame-light .content { padding: 30px 0 60px; }

.fame-light .breadcrumb,
.fame-light .breadcrumb a { color: #6c6b6b; font-size: 14px; }

.edit-footer {
    background-color: var(--ff-black);
    padding: 15px 0;
    text-align: center;
}

.edit-footer a, .edit-footer span { color: var(--ff-white); }

.fame-popup { padding: 15px; background-color: #fff; }
.fame-popup, .fame-popup p, .fame-popup label, .fame-popup td { color: #333; }

/* Nieuwsbriefveld in de aanmeldbalk (uit layout/_home.scss #subscribe) */
.mini-form {
    background-color: #ececec;
    border-radius: 40px;
    height: 75px;
    width: 100%;
    display: flex;
    align-items: center;
    max-width: 450px;
}

.mini-form input {
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
    height: inherit;
    border: none;
    background-color: transparent;
    width: 100%;
    font-size: 15pt;
    padding-left: 15px;
    color: #333;
}

.mini-form input:focus:not(:focus-visible) { outline: 0; }
.mini-form:focus-within { box-shadow: var(--ff-glow); }

.mini-form button {
    /* Kleine tekst op een gevuld vlak, dus het diepere blauw */
    background-color: var(--ff-primary-deep);
    border-radius: 40px;
    border: none;
    color: var(--ff-white);
    height: 60px;
    display: flex;
    align-items: center;
    padding: .8rem 1.6rem;
    margin-left: auto;
    margin-right: 7.5px;
    font-size: var(--ff-text-base);
    font-family: var(--ff-font-button);
    font-weight: var(--ff-weight-button);
    cursor: pointer;
}

.mini-form button:hover { background-color: var(--ff-primary-dark); }

@media (max-width: 600px) {
    .mini-form {
        flex-direction: column;
        height: 150px;
        border-radius: 30px;
    }

    .mini-form button {
        width: calc(100% - 15px);
        margin: auto auto 7.5px;
    }
}

/* --------------------------------------------------------------------------
   18. Responsive vangnet voor module-inhoud
   Modules leveren HTML die de skin niet kent. Deze regels voorkomen dat die
   inhoud de pagina horizontaal laat scrollen.
   -------------------------------------------------------------------------- */
html { scroll-padding-top: calc(var(--ff-nav-height) + 20px); }

.fame img,
.fame video,
.fame canvas,
.fame iframe,
.fame embed,
.fame object {
    max-width: 100%;
}

.fame iframe { border: 0; }

.fame pre {
    overflow-x: auto;
    max-width: 100%;
}

.fame p,
.fame li,
.fame dd,
.fame td { overflow-wrap: break-word; }

/* Brede tabellen scrollen binnen hun eigen kader in plaats van de pagina */
.fame .table-scroll,
.fame .dnnTableWrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

@media (max-width: 767px) {
    .fame .ContainerPane table,
    .fame .DnnModule table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Responsieve video-embed (YouTube, Vimeo) */
.embed-responsive {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    border-radius: var(--ff-radius);
}

.embed-responsive > iframe,
.embed-responsive > video,
.embed-responsive > object,
.embed-responsive > embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Bewerkmodus op mobiel: DNN-panelen mogen niet buiten beeld vallen */
@media (max-width: 767px) {
    .dnnEditState .fame .DnnModule { max-width: 100%; overflow-x: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .fame *,
    .fame *::before,
    .fame *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    /* De reveal mag nooit inhoud verborgen laten als beweging uit staat */
    .fame [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   Zachte reveal bij het in beeld scrollen. fame.js zet data-reveal op de
   secties; zonder JavaScript blijft alles gewoon zichtbaar.
   -------------------------------------------------------------------------- */
.js-reveal .fame [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s var(--ff-ease), transform .6s var(--ff-ease);
    will-change: opacity, transform;
}

.js-reveal .fame [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* --------------------------------------------------------------------------
   19. Blog / nieuws
   Geport uit wwwroot/scss/components/_news.scss, _pagination.scss en
   layout/_nieuws.scss van FameFitness.Portal.
   -------------------------------------------------------------------------- */

/* 19.1 Layout van de blogpagina */
.blog-layout { width: 100%; }

.blog-sidebar > div:not(:empty) { margin-bottom: 1.5rem; }

.blog-sidebar h2,
.blog-sidebar h3 {
    font-size: clamp(1.15rem, .9rem + .9vw, 1.5rem);
    margin-top: 0;
}

.blog-sidebar ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.blog-sidebar li { border-bottom: 1px solid #1e1e1e; }
.blog-sidebar li:last-child { border-bottom: 0; }

.blog-sidebar li a {
    padding: .5rem 0;
    color: var(--ff-white);
    font-size: var(--ff-text-sm);
}

.blog-sidebar li a:hover { color: var(--ff-primary); }

/* 19.2 Kaartenraster
   Werkt met de markup uit het bronproject:
   .blog-deck > .card-default > .figure-link > figure.figure.figurebg._square */
/* Grid in plaats van flex: gelijke hoogtes en één gutter in beide
   richtingen. De kaarten hadden eerder 24px tussen kolommen en 66px
   tussen rijen, door een margin-bottom bovenop de gap. */
.blog-deck {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ff-gutter);
}

@media (min-width: 576px) { .blog-deck { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .blog-deck { grid-template-columns: repeat(3, 1fr); } }

.blog-deck > * { width: auto; min-width: 0; }

.card-default {
    display: flex;
    flex-direction: column;
    background: var(--ff-white);
    border: 1px solid transparent;
    border-radius: var(--ff-radius-lg);
    overflow: hidden;
    height: 100%;
    transition: transform var(--ff-dur) var(--ff-ease),
                box-shadow var(--ff-dur) var(--ff-ease),
                border-color var(--ff-dur) var(--ff-ease);
}

.card-default:hover {
    transform: translateY(-4px);
    box-shadow: var(--ff-shadow-md);
    border-color: var(--ff-primary);
}

.card-default .figure { transition: transform var(--ff-dur-slow) var(--ff-ease); }
.card-default:hover .figure { transform: scale(1.03); }

.card-default .figure-link { display: block; }

.card-default .figure,
.card-default figure {
    margin: 0;
    aspect-ratio: 5 / 4;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    overflow: hidden;
}

.card-default .figure._square { aspect-ratio: 1 / 1; }

.card-default .figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bij .figurebg staat de afbeelding al als achtergrond. De img blijft staan
   voor zoekmachines en schermlezers - visibility:hidden haalde hem juist uit
   de toegankelijkheidsboom, inclusief de alt-tekst. */
.card-default .figurebg img {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.card-default .figurebg { position: relative; }

.card-default .card__title {
    position: relative;
    text-align: center;
    color: #111;
    font-size: clamp(1.05rem, .9rem + .6vw, 1.35rem);
    margin: 0;
    padding: 1.25rem 1rem .75rem;
}

.card-default .card__title::after {
    content: '';
    width: 75px;
    height: 3px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--ff-primary);
}

.card-default .card__meta {
    text-align: center;
    color: var(--ff-muted);
    font-size: .8125em;
    padding: .75rem 1rem 0;
}

.card-default .card__teasertext {
    padding: var(--ff-space-md) var(--ff-space-md) 0;
    line-height: 1.55;
    text-align: center;
    color: #5a5a5a;
    font-size: var(--ff-text-sm);
}

.card-default .card__teasertext p { color: inherit; margin: .5em 0; }

.card-default .card__readmore {
    margin-top: auto;
    padding: 1rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: .875em;
}

.card-default .card__title,
.card-default a,
.card-default .card__readmore a { color: #111; }

.card-default .card__readmore a:hover { color: var(--ff-primary-dark); }

.card-default .readmore {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
}

.card-default .card__sharebuttons { display: none; }

/* Donkere variant, past bij de tegels elders op de site */
.card-default._dark {
    background: var(--ff-harmony);
    border-color: var(--ff-hairline);
}

.card-default._dark .card__title,
.card-default._dark a,
.card-default._dark .card__readmore a { color: var(--ff-white); }

.card-default._dark .card__teasertext { color: var(--ff-on-dark-muted); }
.card-default._dark .card__readmore a:hover { color: var(--ff-primary); }

/* 19.3 Artikelpagina
   Een regellengte van ~68 tekens leest het prettigst; de artikelkop mag
   groter dan de rest, of de module nu h1 of h2 gebruikt. */
.blog-article {
    max-width: 68ch;
    margin: 0 auto;
}

.blog-article > h1:first-child,
.blog-article > h2:first-child {
    font-size: var(--ff-h1);
    line-height: var(--ff-leading-tight);
    letter-spacing: -.025em;
    margin-top: 0;
}

.blog-article .article-meta {
    color: var(--ff-on-dark-muted);
    font-size: var(--ff-text-sm);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: var(--ff-space-xl);
}

.blog-article p,
.blog-article li { line-height: var(--ff-leading-body); }

.blog-article > p:first-of-type {
    font-size: var(--ff-text-lead);
    color: var(--ff-gray);
}

.blog-article a {
    color: var(--ff-primary);
    text-decoration: underline;
}

.blog-article ul,
.blog-article ol {
    padding-left: 1.5rem;
    margin-bottom: 1em;
}

.blog-article ul li { list-style: disc; }
.blog-article ol li { list-style: decimal; }

.blog-article img {
    border-radius: var(--ff-radius);
    margin: 1.5rem 0;
}

.blog-article figure { margin: 1.5rem 0; }

.blog-article figcaption {
    color: var(--ff-gray);
    font-size: .85rem;
    text-align: center;
}

.blog-article blockquote {
    margin: var(--ff-space-xl) 0;
    padding: var(--ff-space-md) 0 var(--ff-space-md) var(--ff-space-lg);
    border-left: 3px solid var(--ff-primary);
    color: var(--ff-white);
    font-size: var(--ff-text-lead);
    font-style: italic;
}

.blog-article blockquote p:last-child { margin-bottom: 0; }

.blog-article hr { margin: 2rem 0; }

/* 19.4 Paginering (bronproject _pagination.scss, omgezet naar donkere achtergrond) */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: 0;
    margin: 2rem 0 0;
    list-style: none;
}

.pagination .page-item .page-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    font-weight: var(--ff-weight-medium);
    color: var(--ff-primary);
    background-color: var(--ff-harmony);
    border: 1px solid #2f2f2f;
    min-width: 44px;
    min-height: 44px;
    text-align: center;
    transition: background-color var(--ff-dur) var(--ff-ease), color var(--ff-dur) var(--ff-ease);
}

.pagination .page-item .page-link:hover {
    color: var(--ff-white);
    background-color: var(--ff-primary-deep);
}

.pagination .page-item .page-link:focus:not(:focus-visible) { box-shadow: none; }

.pagination .page-item.active .page-link {
    color: var(--ff-white);
    background-color: var(--ff-primary-deep);
    border-color: var(--ff-primary);
}

/* #6c757d op #0d0d0d haalde 4.14:1; net onder de grens voor kleine tekst */
.pagination .page-item.disabled .page-link {
    color: #8b9199;
    pointer-events: none;
    cursor: auto;
}

.pagination .page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: var(--ff-radius);
    border-bottom-left-radius: var(--ff-radius);
}

.pagination .page-item:last-child .page-link {
    border-top-right-radius: var(--ff-radius);
    border-bottom-right-radius: var(--ff-radius);
}

/* DNN's eigen pager */
.fame .dnnPager,
.fame .dnnPager a,
.fame .dnnPager span { color: var(--ff-white); }

.fame .dnnPager a:hover { color: var(--ff-primary); }

/* 19.5 Categoriebalk (bronproject #articles .nav) */
/* Categoriebalk als rij pillen: op elke breedte horizontaal scrollbaar in
   plaats van een kolom op mobiel. */
.blog-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ff-space-xs);
    margin-bottom: var(--ff-space-xl);
    padding-left: 0;
    list-style: none;
}

.blog-filter li { list-style: none; }

.blog-filter a {
    color: var(--ff-on-dark-muted);
    padding: .35rem .9rem;
    border: 1px solid var(--ff-hairline);
    border-radius: 999px;
    font-size: var(--ff-text-sm);
    font-weight: var(--ff-weight-medium);
    white-space: nowrap;
    transition: color var(--ff-dur) var(--ff-ease),
                border-color var(--ff-dur) var(--ff-ease),
                background-color var(--ff-dur) var(--ff-ease);
}

.blog-filter a:hover {
    color: var(--ff-white);
    border-color: var(--ff-hairline-strong);
}

.blog-filter a.active {
    color: var(--ff-black);
    background-color: var(--ff-primary);
    border-color: var(--ff-primary);
}

/* 19.6 Vangnet voor onbekende blogmodules
   Zolang een module zijn eigen klassen gebruikt, pakt dit blok de kale
   HTML-elementen binnen de blogpanes op. */
.blog-pane .DnnModule h1 a,
.blog-pane .DnnModule h2 a,
.blog-pane .DnnModule h3 a,
.blog-pane .DnnModule h4 a { color: var(--ff-white); }

.blog-pane .DnnModule h1 a:hover,
.blog-pane .DnnModule h2 a:hover,
.blog-pane .DnnModule h3 a:hover,
.blog-pane .DnnModule h4 a:hover { color: var(--ff-primary); }

.blog-pane .DnnModule ul,
.blog-pane .DnnModule ol { padding-left: 1.5rem; }

.blog-pane .DnnModule ul li { list-style: disc; }
.blog-pane .DnnModule ol li { list-style: decimal; }

.blog-pane .DnnModule img { border-radius: var(--ff-radius); }

/* --------------------------------------------------------------------------
   20. Contactpagina
   Geport uit wwwroot/scss/layout/_contact.scss van FameFitness.Portal.
   -------------------------------------------------------------------------- */
.contact-section {
    display: flex;
    flex-direction: column;
    background-color: var(--ff-black);
}

/* Kaartpane: de skin zet de inhoud al onder de vaste balk, dus hier geen
   extra marge zoals in het bronproject. */
.map-pane {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.map-pane iframe,
.map-pane > div { width: 100%; height: 100%; border: 0; }

@media (min-width: 768px) { .map-pane { height: 420px; } }
@media (min-width: 992px) { .map-pane { height: 550px; } }

.contact-section .layout-1 {
    padding: 1rem 0 3rem;
    color: var(--ff-white);
}

/* De formulierkolom schuift op desktop over de kaart heen. Zonder eigen
   vlak stonden de bovenste labels met witte tekst rechtstreeks op de lichte
   kaarttegels, dus de kolom krijgt hier zijn eigen paneel. */
@media (min-width: 768px) { .contact-section .layout-1 { margin-top: -120px; } }
@media (min-width: 992px) { .contact-section .layout-1 { margin-top: -170px; } }

@media (min-width: 768px) {
    .contact-section .layout-1 > .container > .row > .fame-form {
        background-color: rgba(13,13,13,.94);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid var(--ff-hairline);
        border-radius: var(--ff-radius-lg);
        padding: var(--ff-space-xl);
        box-shadow: var(--ff-shadow-lg);
    }
}

.contact-section .layout-1 strong { color: inherit; }
.contact-section .layout-1 .text { margin: 1rem 0; color: var(--ff-white); }

/* Infokaart naast het formulier */
.infoCard {
    margin-left: auto;
    margin-right: auto;
    min-height: 290px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ff-space-md);
    padding: var(--ff-space-lg) var(--ff-space-md);
    background-color: var(--ff-harmony);
    max-width: 420px;
    border-radius: var(--ff-radius-lg);
    border: 2px solid var(--ff-primary);
    box-shadow: var(--ff-shadow-lg);
}

.infoCard .block {
    width: 100%;
    padding: .5rem;
    text-align: center;
}

.infoCard .block h2,
.infoCard .block h3 {
    color: var(--ff-primary);
    font-size: var(--ff-h5);
    margin-bottom: var(--ff-space-2xs);
}

.infoCard .block .text,
.infoCard .block p { color: var(--ff-white); text-align: center; }

.infoCard .block a {
    text-decoration: underline;
    font-style: italic;
    color: var(--ff-white);
}

.infoCard .block a:hover { color: var(--ff-primary); }

.infoCard .block ul { list-style: none; padding-inline-start: 0; }
.infoCard .block li { color: var(--ff-white); }

@media (max-width: 767px) { .infoCard { margin-top: 2rem; } }

/* Afbeelding met blauwe balk (layout-2 uit het bronproject) */
.img-holder {
    position: relative;
    overflow: hidden;
    padding: 1rem;
    margin: 1rem 0;
}

.img-holder::after {
    content: ' ';
    background-color: var(--ff-primary);
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 100%;
}

.img-holder img {
    position: relative;
    z-index: 1;
    border-radius: var(--ff-radius);
    box-shadow: 0 4px 16px 0 rgba(22,42,90,.35);
}

/* --------------------------------------------------------------------------
   21. Formuliermodules (.fame-form)
   Alles binnen de container Form.ascx krijgt de vormgeving van het
   contactformulier van famefitness.nl. Werkt met 2sxc / Mobius Forms,
   met Form and List (UserDefinedTable) en met kale HTML-formulieren.

   Let op: sectie 13 geeft .dnnForm bewust een lichte, leesbare opmaak voor
   beheerschermen. Dit blok staat later en wint binnen .fame-form.
   -------------------------------------------------------------------------- */
.fame-form { width: 100%; }

/* 21.1 Rijen en velden -------------------------------------------------- */
.fame-form .form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}

.fame-form .form-row:not(:last-child) { margin-bottom: 1rem; }
.fame-form .form-row > [class*="col-"] { padding-right: 5px; padding-left: 5px; }

.fame-form .form-group,
.fame-form .mobius-group,
.fame-form .dnnFormItem { margin-bottom: 1rem; }

/* 21.2 Invoervelden ----------------------------------------------------- */
.fame-form input[type="text"],
.fame-form input[type="email"],
.fame-form input[type="tel"],
.fame-form input[type="url"],
.fame-form input[type="number"],
.fame-form input[type="date"],
.fame-form input[type="time"],
.fame-form input[type="search"],
.fame-form input[type="password"],
.fame-form select,
.fame-form textarea,
.fame-form .formBox,
.fame-form .form-control,
.fame-form .dnnForm input[type="text"],
.fame-form .dnnForm input[type="email"],
.fame-form .dnnForm input[type="password"],
.fame-form .dnnForm select,
.fame-form .dnnForm textarea {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 16px 14px;
    font-size: 17px;
    font-family: var(--ff-font-body);
    color: var(--ff-white);
    background-color: #212121;
    border: 3px solid var(--ff-primary);
    border-radius: var(--ff-radius);
    box-shadow: 0 4px 16px 0 rgba(22,42,90,.35);
    outline: 0;
    -webkit-appearance: none;
    appearance: none;
    margin-bottom: 1rem;
}

.fame-form select,
.fame-form select.form-control {
    /* eigen pijltje, want appearance staat uit */
    background-image: linear-gradient(45deg, transparent 50%, var(--ff-primary) 50%),
                      linear-gradient(135deg, var(--ff-primary) 50%, transparent 50%);
    background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
    background-size: 7px 7px, 7px 7px;
    background-repeat: no-repeat;
    padding-right: 44px;
}

.fame-form textarea {
    resize: vertical;
    min-height: 160px;
    line-height: normal;
}

.fame-form ::placeholder {
    color: var(--ff-white);
    font-weight: bold;
    opacity: .85;
}

.fame-form input:focus,
.fame-form select:focus,
.fame-form textarea:focus,
.fame-form .form-control:focus {
    border-color: var(--ff-white);
    box-shadow: 0 0 0 3px rgba(37,192,255,.35);
}

/* Autofill niet wit laten worden */
.fame-form input:-webkit-autofill,
.fame-form input:-webkit-autofill:hover,
.fame-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ff-white);
    -webkit-box-shadow: 0 0 0 1000px #212121 inset;
}

/* 21.3 Labels ----------------------------------------------------------- */
.fame-form label,
.fame-form .dnnLabel label,
.fame-form .dnnFormItem > label,
.fame-form .form-label {
    display: inline-block;
    margin-bottom: .35rem;
    color: var(--ff-white);
    font-family: var(--ff-font-body);
    font-size: 1rem;
    width: auto;
    float: none;
    text-align: left;
}

.fame-form .app-mobius6-field-required::after,
.fame-form label.required::after {
    content: ' *';
    color: var(--ff-primary);
}

.fame-form .small-infotext,
.fame-form .dnnFormHelp,
.fame-form .form-text {
    color: var(--ff-gray);
    font-size: .85rem;
}

/* 21.4 Keuzevakjes en keuzerondjes -------------------------------------- */
.fame-form input[type="checkbox"],
.fame-form input[type="radio"] {
    width: 1.35em;
    height: 1.35em;
    min-height: 0;
    margin-right: .6rem;
    accent-color: var(--ff-primary);
    vertical-align: -3px;
    flex: none;
}

/* Het vakje zelf is klein, dus het label eromheen levert het aanraakdoel.
   Klikken op de tekst schakelt het vakje mee. */
.fame-form .form-check,
.fame-form .checkbox,
.fame-form .radio { margin-bottom: .5rem; }

.fame-form .form-check-label,
.fame-form .checkbox label,
.fame-form .radio label {
    color: var(--ff-white);
    display: flex;
    align-items: center;
    min-height: 44px;
    cursor: pointer;
    font-size: var(--ff-text-base);
    font-weight: var(--ff-weight-body);
}

/* 21.5 Knoppen ---------------------------------------------------------- */
.fame-form button[type="submit"],
.fame-form input[type="submit"],
.fame-form .dnnPrimaryAction,
.fame-form a.dnnPrimaryAction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 2px solid var(--ff-primary);
    border-radius: var(--ff-radius);
    cursor: pointer;
    padding: .7rem 1.5rem;
    min-height: 48px;
    transition: background-color var(--ff-dur) var(--ff-ease), box-shadow var(--ff-dur) var(--ff-ease);
    font-family: var(--ff-font-button);
    font-weight: var(--ff-weight-button);
    font-size: clamp(1.175rem, 1.12rem + .28vw, 1.3rem);
    line-height: 1.2;
    color: var(--ff-white);
    background: var(--ff-primary-dark);
    text-shadow: 1px 1px 3px #0c0c0c;
    text-decoration: none;
}

.fame-form button[type="submit"]:hover,
.fame-form input[type="submit"]:hover,
.fame-form .dnnPrimaryAction:hover { background: var(--ff-primary-hover); color: var(--ff-white); }

.fame-form button[type="submit"][disabled],
.fame-form input[type="submit"][disabled] { opacity: .6; cursor: not-allowed; }

.fame-form button svg.icon,
.fame-form button svg {
    width: 20px;
    max-height: 30px;
    fill: var(--ff-white);
}

.fame-form .dnnSecondaryAction,
.fame-form a.dnnSecondaryAction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .7rem 1.5rem;
    min-height: 48px;
    border: 2px solid var(--ff-white);
    border-radius: var(--ff-radius);
    background: transparent;
    color: var(--ff-white);
    font-family: var(--ff-font-button);
    font-weight: var(--ff-weight-button);
    font-size: clamp(1.175rem, 1.12rem + .28vw, 1.3rem);
    text-decoration: none;
}

@media (max-width: 600px) {
    .fame-form button[type="submit"],
    .fame-form input[type="submit"],
    .fame-form .dnnPrimaryAction { width: 100%; }
}

/* 21.6 Validatie en meldingen ------------------------------------------- */
.fame-form .pristine-error,
.fame-form .field-validation-error,
.fame-form .dnnFormMessage.dnnFormError,
.fame-form span[id*="Validator"],
.fame-form .invalid-feedback {
    display: block;
    color: #ff8a8a;
    font-size: .9rem;
    margin: -.5rem 0 1rem;
}

.fame-form .has-error input,
.fame-form .has-error textarea,
.fame-form .invalid,
.fame-form input.invalid,
.fame-form textarea.invalid,
.fame-form select.invalid,
.fame-form .input-validation-error {
    border-color: var(--ff-autumn-red);
    animation: fame-shake .82s cubic-bezier(.36,.07,.19,.97) both;
}

.fame-form .app-mobius6-message,
.fame-form .alert,
.fame-form .dnnFormMessage {
    display: block;
    padding: .85rem 1rem;
    margin-bottom: var(--ff-space-md);
    border-radius: var(--ff-radius-md);
    color: var(--ff-white);
    background-color: var(--ff-harmony);
    border: 1px solid #2f2f2f;
}

/* Groen en oranje zijn te licht voor witte tekst (1.95:1 en 3.1:1), dus daar
   staat de tekst donker. Rood houdt wel wit. */
.fame-form .alert-success,
.fame-form .dnnFormMessage.dnnFormSuccess {
    background-color: var(--ff-summer-green);
    border-color: #4e8a0d;
    color: var(--ff-on-signal);
}

.fame-form .alert-warning {
    background-color: var(--ff-carrot-orange);
    border-color: #9a5e00;
    color: var(--ff-on-signal);
}

.fame-form .alert-success a,
.fame-form .alert-success strong,
.fame-form .alert-warning a,
.fame-form .alert-warning strong { color: inherit; }

.fame-form .alert-danger,
.fame-form .alert-error,
.fame-form .dnnFormMessage.dnnFormValidationSummary { background-color: var(--ff-autumn-red); border-color: var(--ff-autumn-red); }

.fame-form .validation-summary-errors ul { list-style: none; padding-left: 0; margin: 0; }

@keyframes fame-shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* 21.7 2sxc / Mobius Forms --------------------------------------------- */
.fame-form .app-mobius6-wrapper { width: 100%; }

.fame-form .mobius-groups { width: 100%; }

.fame-form .mobius-group.row {
    margin-right: -15px;
    margin-left: -15px;
}

/* Mobius zet kolombreedtes zonder responsive prefix (col-6 blijft ook op een
   telefoon 50%). Onder 576px zetten we de velden onder elkaar. */
@media (max-width: 575px) {
    .fame-form .mobius-group > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Stappenbalk van het formulier met meerdere stappen */
.fame-form .app-mobius-steps {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
}

.fame-form .app-mobius-step {
    padding: .35rem .85rem;
    border-radius: var(--ff-radius);
    background-color: var(--ff-harmony);
    color: var(--ff-gray);
    font-size: .9rem;
}

.fame-form .app-mobius-step.active,
.fame-form .app-mobius-step.finished {
    background-color: var(--ff-primary-dark);
    color: var(--ff-white);
}

.fame-form .recaptcha { margin-bottom: 1rem; }
.fame-form .hiddenInputStyle { display: none; }

/* De reCAPTCHA-badge mag niet onder de terug-naar-boven-knop vallen */
.grecaptcha-badge { z-index: 2; }

/* 21.8 Form and List (UserDefinedTable) --------------------------------- */
.fame-form .dnnFormAndList { width: 100%; }

/* Tabelweergave van het formulier: de tabelcellen als blokken tonen,
   zodat het formulier ook op mobiel bruikbaar blijft. */
.fame-form .dnnFormAndList table,
.fame-form table.UDT_Table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

.fame-form .dnnFormAndList td,
.fame-form .dnnFormAndList th {
    padding: .25rem 0;
    vertical-align: top;
    color: var(--ff-white);
    background: transparent;
    border: 0;
}

@media (max-width: 767px) {
    .fame-form .dnnFormAndList table,
    .fame-form .dnnFormAndList tbody,
    .fame-form .dnnFormAndList tr,
    .fame-form .dnnFormAndList td {
        display: block;
        width: 100%;
    }
}

.fame-form .UDT_Caption,
.fame-form .UDT_UponSubmit { color: var(--ff-white); }

.fame-form .UDT_UponSubmit {
    padding: .85rem 1rem;
    border-radius: var(--ff-radius);
    background-color: var(--ff-harmony);
    border: 1px solid #2a2a2a;
}

/* Lijstweergave van Form and List */
.fame-form .UDT_Table_Head,
.fame-form .dnnGridHeader,
.fame-form .DataGrid_Header {
    background-color: var(--ff-primary-dark);
    color: var(--ff-white);
    font-family: var(--ff-font-heading);
    font-weight: var(--ff-weight-heading);
    padding: .5rem .75rem;
    text-align: left;
}

.fame-form .UDT_Table_Item,
.fame-form .DataGrid_Item { background-color: var(--ff-harmony); }

.fame-form .UDT_Table_AlternateItem,
.fame-form .DataGrid_AlternatingItem { background-color: #141414; }

.fame-form .UDT_Table_Item td,
.fame-form .UDT_Table_AlternateItem td,
.fame-form .DataGrid_Item td,
.fame-form .DataGrid_AlternatingItem td { padding: .5rem .75rem; }

/* DNN's eigen tekstklassen binnen het formulier */
.fame-form .Normal,
.fame-form .NormalBold,
.fame-form .SubHead,
.fame-form .Head { color: var(--ff-white); font-family: var(--ff-font-body); }

.fame-form .NormalBold,
.fame-form .SubHead { font-weight: 700; }

/* 21.9 Lichte variant, voor een formulier op een lichte achtergrond ----- */
.fame-form._light input[type="text"],
.fame-form._light input[type="email"],
.fame-form._light input[type="tel"],
.fame-form._light select,
.fame-form._light textarea,
.fame-form._light .form-control {
    background-color: var(--ff-white);
    color: #333;
    box-shadow: none;
}

.fame-form._light ::placeholder { color: var(--ff-muted); font-weight: normal; }
.fame-form._light label { color: #333; }


/* --------------------------------------------------------------------------
   22. Cookiebanner en -voorkeuren (js/fame-cookieconsent.js)
   De banner en het voorkeurenvenster worden door dat script opgebouwd; hier
   staat alleen de vormgeving. Dezelfde tokens als de rest van het thema, dus
   de banner erft automatisch de kleuren en de knopstijlen.
   -------------------------------------------------------------------------- */

/* 22.1 Banner ------------------------------------------------------------
   Onderaan het scherm, boven de "terug naar boven"-knop (z-index 90) maar
   onder een geopend voorkeurenvenster. */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    background-color: var(--ff-harmony);
    border-top: 1px solid var(--ff-hairline-strong);
    box-shadow: var(--ff-shadow-lg);
    color: var(--ff-white);
    padding: var(--ff-space-lg) var(--ff-gutter);
    opacity: 0;
    transform: translateY(100%);
    transition: opacity var(--ff-dur) var(--ff-ease),
                transform var(--ff-dur) var(--ff-ease);
}

.cookie-banner.is-visible {
    opacity: 1;
    transform: none;
}

.cookie-banner-inner {
    max-width: var(--ff-maxwidth);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ff-space-lg);
}

.cookie-banner-text {
    flex: 1 1 min(30rem, 100%);
    min-width: 0;
}

.cookie-banner-title {
    font-family: var(--ff-font-heading);
    font-weight: var(--ff-weight-heading);
    font-size: var(--ff-h5);
    line-height: var(--ff-leading-heading);
    margin: 0 0 var(--ff-space-2xs);
}

.cookie-banner-text p {
    margin: 0;
    font-size: var(--ff-text-sm);
    color: var(--ff-gray);
}

.cookie-banner-text a {
    color: var(--ff-primary);
    text-decoration: underline;
}

.cookie-banner-text a:hover { color: var(--ff-white); }

/* De drie knoppen hebben bewust hetzelfde formaat: weigeren mag niet
   moeilijker zijn dan accepteren. */
.cookie-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ff-space-sm);
    align-items: center;
}

.cookie-banner-actions .btn { flex: 1 1 auto; }

/* Onder de tabletgrens onder elkaar, elk over de volle breedte. */
@media (max-width: 767px) {
    .cookie-banner { padding: var(--ff-space-md); }
    .cookie-banner-inner { gap: var(--ff-space-md); }
    .cookie-banner-actions { width: 100%; }
    .cookie-banner-actions .btn { flex: 1 1 100%; }
}

/* De banner ligt over de "terug naar boven"-knop heen. Die knop een stukje
   verplaatsen helpt niet - de banner is op mobiel bijna een half scherm hoog -
   dus hij blijft weg zolang de melding open staat. */
html.has-cookie-banner .scrollTop {
    opacity: 0;
    visibility: hidden;
}

/* De focusring uit hoofdstuk 4 is bereikt via .fame; banner en venster hangen
   los in de body, dus die krijgen hem hier. */
.cookie-banner :focus-visible,
.cookie-dialog :focus-visible,
.cookie-placeholder :focus-visible {
    outline: 3px solid var(--ff-primary);
    outline-offset: 3px;
    border-radius: var(--ff-radius);
}

/* 22.2 Voorkeurenvenster ------------------------------------------------- */
.cookie-dialog {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ff-gutter);
    opacity: 0;
    transition: opacity var(--ff-dur) var(--ff-ease);
}

.cookie-dialog[hidden] { display: none; }
.cookie-dialog.is-open { opacity: 1; }

.cookie-dialog-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,.75);
}

.cookie-dialog-panel {
    position: relative;
    width: min(46rem, 100%);
    max-height: calc(100vh - 2 * var(--ff-gutter));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: var(--ff-harmony);
    border: 1px solid var(--ff-hairline-strong);
    border-radius: var(--ff-radius-lg);
    box-shadow: var(--ff-shadow-lg);
    padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
    transform: translateY(12px);
    transition: transform var(--ff-dur) var(--ff-ease);
}

.cookie-dialog.is-open .cookie-dialog-panel { transform: none; }

.cookie-dialog-title {
    font-family: var(--ff-font-heading);
    font-weight: var(--ff-weight-heading);
    font-size: var(--ff-h4);
    line-height: var(--ff-leading-heading);
    margin: 0 2.5rem var(--ff-space-xs) 0;
}

.cookie-dialog-intro,
.cookie-dialog-more {
    font-size: var(--ff-text-sm);
    color: var(--ff-on-dark-muted);
    margin: 0 0 var(--ff-space-lg);
}

.cookie-dialog-more { margin: var(--ff-space-md) 0 0; }

.cookie-dialog-more a {
    color: var(--ff-primary);
    text-decoration: underline;
}

.cookie-dialog-close {
    position: absolute;
    top: var(--ff-space-sm);
    right: var(--ff-space-sm);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--ff-white);
    cursor: pointer;
    transition: background-color var(--ff-dur) var(--ff-ease);
}

.cookie-dialog-close:hover { background-color: rgba(255,255,255,.1); }
.cookie-dialog-close svg { width: 20px; height: 20px; }

/* 22.3 Categorieën ------------------------------------------------------- */
.cookie-groups {
    display: flex;
    flex-direction: column;
    gap: var(--ff-space-md);
}

.cookie-group {
    background-color: rgba(255,255,255,.03);
    border: 1px solid var(--ff-hairline);
    border-radius: var(--ff-radius-md);
    padding: var(--ff-space-md);
}

.cookie-group-text {
    margin: var(--ff-space-2xs) 0 0;
    font-size: var(--ff-text-sm);
    color: var(--ff-on-dark-muted);
}

/* Schakelaar. Onder de vormgeving zit een gewone checkbox: die kent de
   browser al, dus toetsenbord, schermlezer en formulierstatus kloppen
   vanzelf. Het vinkje zelf staat buiten beeld in plaats van op display:none,
   want dan is het niet meer focusbaar. */
.cookie-switch {
    display: flex;
    align-items: center;
    gap: var(--ff-space-sm);
    cursor: pointer;
    font-family: var(--ff-font-heading);
    font-weight: var(--ff-weight-medium);
}

.cookie-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.cookie-switch-track {
    flex: 0 0 auto;
    position: relative;
    width: 46px;
    height: 26px;
    border-radius: 13px;
    background-color: #2a2a2a;
    border: 1px solid var(--ff-hairline-strong);
    transition: background-color var(--ff-dur) var(--ff-ease),
                border-color var(--ff-dur) var(--ff-ease);
}

.cookie-switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--ff-white);
    transition: transform var(--ff-dur) var(--ff-ease);
}

.cookie-switch-input:checked + .cookie-switch-track {
    background-color: var(--ff-primary-dark);
    border-color: var(--ff-primary);
}

.cookie-switch-input:checked + .cookie-switch-track::after { transform: translateX(20px); }

.cookie-switch-input:focus-visible + .cookie-switch-track {
    outline: 2px solid var(--ff-primary);
    outline-offset: 2px;
}

/* Noodzakelijk staat vast aan: wel zichtbaar aan, niet bedienbaar. */
.cookie-switch-input:disabled + .cookie-switch-track {
    background-color: var(--ff-primary-dark);
    border-color: var(--ff-primary);
    opacity: .55;
}

.cookie-switch-input:disabled ~ .cookie-switch-label { color: var(--ff-on-dark-muted); }
.cookie-switch-input:disabled { cursor: default; }

.cookie-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ff-space-sm);
    margin-top: var(--ff-space-lg);
}

.cookie-dialog-actions .btn { flex: 1 1 12rem; }

@media (max-width: 600px) {
    .cookie-dialog-actions .btn { flex: 1 1 100%; }
}

/* 22.4 Geblokkeerde inhoud ----------------------------------------------
   Staat in de plaats van een kaart of video zolang de bijbehorende categorie
   niet is toegestaan. */
.cookie-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ff-space-md);
    min-height: 220px;
    padding: var(--ff-space-xl) var(--ff-space-md);
    text-align: center;
    background-color: var(--ff-harmony);
    border: 1px dashed var(--ff-hairline-strong);
    border-radius: var(--ff-radius-md);
}

.cookie-placeholder-text {
    margin: 0;
    max-width: 34rem;
    font-size: var(--ff-text-sm);
    color: var(--ff-gray);
}

.cookie-placeholder-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ff-space-md);
}

.cookie-placeholder-link {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    min-height: 44px;
}

iframe.is-blocked { display: none; }

/* De cookielink in de footer staat tussen de copyrightregel; als knop
   opgemaakt zodat hij ook zonder javascript-url werkt. */
.cookie-settings-link {
    background: transparent;
    border: 0;
    padding: 0;
    margin-left: .35rem;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.cookie-settings-link:hover { color: var(--ff-primary); }

/* 22.5 Minder beweging --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .cookie-banner,
    .cookie-dialog,
    .cookie-dialog-panel,
    .cookie-switch-track,
    .cookie-switch-track::after { transition: none; }

    .cookie-banner { transform: none; }
}

/* --------------------------------------------------------------------------
   23. Aanmeldschermen (Auth.ascx en de DNN-modules erin)
   Dekt de markup die DNN zelf levert voor Account Login (inclusief de
   DNN-aanbieder), Wachtwoord vergeten (SendPassword), Wachtwoord opnieuw
   instellen (PasswordReset) en Wachtwoord wijzigen (Password) - dat laatste
   is het scherm dat een uitgenodigde gebruiker bij zijn eerste aanmelding
   krijgt. Zelf registreren kan op deze site niet, dus het registratie-
   formulier van DNN staat hier bewust niet bij.

   Bereik: .fame:not(.fame-light). Daarmee geldt het ook wanneer de
   inlogmodule op een gewone donkere pagina staat, terwijl de Edit-layout -
   die voor beheerschermen bewust licht is - erbuiten blijft. Sectie 13 geeft
   .dnnForm daar donkere tekst; op een zwarte pagina is dat onleesbaar, dus
   hieronder wint de donkere variant met een klasse extra specificiteit.

   DNN laadt op elke pagina zijn eigen default.css
   (Resources/Shared/stylesheets/dnndefault/8.0.0/). Daar staan een zwevend
   label van 32% breed, rechts uitgelijnd, witte velden van 12px en blauwe
   verloopknoppen. Die regels worden hieronder gericht overschreven.
   -------------------------------------------------------------------------- */

/* 23.1 De layout zelf ---------------------------------------------------- */
/* Geen vaste navigatiebalk op deze layout, dus ook geen ruimte ervoor.
   De gloed bovenin is dezelfde blauwtint als de rest van het thema. */
.fame-auth > .content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ff-space-2xl) var(--ff-gutter);
    background-image: radial-gradient(70% 45% at 50% 0%, rgba(37,192,255,.16) 0%, rgba(37,192,255,0) 70%);
}

.auth-shell {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.auth-logo {
    display: block;
    text-align: center;
    margin-bottom: var(--ff-space-xl);
}

.auth-card {
    background-color: var(--ff-harmony);
    border: 1px solid var(--ff-hairline);
    border-radius: var(--ff-radius-lg);
    padding: clamp(1.25rem, .85rem + 2vw, 2.5rem);
    box-shadow: var(--ff-shadow-lg);
}

.fame-auth .auth-title {
    margin: 0 0 var(--ff-space-lg);
    font-size: var(--ff-h3);
    line-height: var(--ff-leading-heading);
    color: var(--ff-white);
    text-align: center;
}

.auth-pane:not(:empty) + .auth-pane:not(:empty) { margin-top: var(--ff-space-lg); }

.auth-back {
    margin: var(--ff-space-lg) 0 0;
    text-align: center;
    font-size: var(--ff-text-sm);
}

.auth-back a { color: var(--ff-on-dark-muted); }
.auth-back a:hover { color: var(--ff-primary); }

.auth-footer {
    flex: none;
    padding: var(--ff-space-md) var(--ff-gutter) var(--ff-space-xl);
    text-align: center;
    color: var(--ff-on-dark-muted);
    font-size: var(--ff-text-sm);
}

.auth-footer a,
.auth-footer .cookie-settings-link { color: var(--ff-on-dark-muted); }

.auth-footer a:hover,
.auth-footer .cookie-settings-link:hover { color: var(--ff-primary); }

/* De skinobjecten in de voettekst staan zonder scheiding achter elkaar; een
   punt ertussen scheelt een wrapper per object. */
.auth-footer > * + *::before {
    content: "\00b7";
    margin: 0 .5rem;
    color: var(--ff-hairline-strong);
}

/* 23.2 De modulewrapper -------------------------------------------------- */
.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword),
.fame:not(.fame-light) :is(.loginContent, .LoginPanel, .LoginContainerGroup, .LoginContainer, .dnnSendPasswordContent, .dnnPasswordResetContent, .associateContent) {
    width: 100%;
    max-width: 100%;
    margin: 0;
    color: var(--ff-white);
}

/* label staat hier ook in: sectie 13 zet alle labels binnen .dnnForm op
   #333, en een keuzevakjeslabel zit niet in een .dnnLabel-wrapper. */
.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) :is(p, li, td, span, label, h2, h3, h4) { color: var(--ff-white); }

.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) :is(h2, h3, h4) {
    margin: 0 0 var(--ff-space-md);
    font-family: var(--ff-font-heading);
    font-weight: var(--ff-weight-heading);
    font-size: var(--ff-h4);
}

.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) a:not(.dnnPrimaryAction):not(.dnnSecondaryAction) {
    color: var(--ff-primary);
    text-decoration: underline;
}

/* 23.3 Labels boven het veld --------------------------------------------- */
/* DNN laat het label naast het veld zweven op 32% breedte, rechts
   uitgelijnd. Op een kaart van 520px levert dat twee smalle kolommen op. */
.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) .dnnFormItem {
    position: relative;
    display: block;
    clear: both;
    margin-bottom: var(--ff-space-md);
}

.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) .dnnLabel {
    float: none;
    display: block;
    position: relative;
    width: 100%;
    padding-right: 20px;
    margin: 0 0 .35rem;
    text-align: left;
}

.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) :is(.dnnLabel label, label.dnnFormLabel, .dnnLabel span) {
    display: inline-block;
    margin: 0;
    color: var(--ff-white);
    font-family: var(--ff-font-body);
    font-weight: var(--ff-weight-medium);
    font-size: var(--ff-text-sm);
    text-align: left;
}

/* Verplicht veld: rood op zwart valt uit de toon, dus dezelfde ster als in
   het contactformulier. */
.fame:not(.fame-light) div.dnnFormItem.dnnFormRequired > div.dnnLabel span:after,
.fame:not(.fame-light) :is(.dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) span.dnnFormRequired:after { color: var(--ff-primary); }

/* Lege labels laten anders een gat vallen: het aanmeldformulier heeft er drie
   (bij "onthoud mij", bij de knop en boven de links). */
.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset) label.dnnFormLabel:empty { display: none; }
.fame:not(.fame-light) .dnnFormItem > span.dnnFormLabel:has(+ .dnnLoginActions) { display: none; }

/* Het vraagtekentje van de helptekst hangt rechtsboven in het label */
.fame:not(.fame-light) :is(.dnnLoginService, .dnnSendPassword, .dnnPassword) a.dnnFormHelp { top: 0; }

/* 23.4 Velden ------------------------------------------------------------ */
.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"], select, textarea) {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    margin: 0;
    padding: .7rem .9rem;
    font-family: var(--ff-font-body);
    font-size: var(--ff-text-base);
    color: var(--ff-white);
    background: #151515;
    border: 1px solid var(--ff-hairline-strong);
    border-radius: var(--ff-radius-md);
    box-shadow: none;
    transition: border-color var(--ff-dur) var(--ff-ease),
                box-shadow var(--ff-dur) var(--ff-ease);
}

.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) :is(input, select, textarea):focus {
    border-color: var(--ff-primary);
    box-shadow: 0 0 0 3px rgba(37,192,255,.25);
}

.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) ::placeholder { color: #8b8b8b; opacity: 1; }

/* Chrome kleurt een ingevuld veld anders lichtblauw, met donkere tekst die
   op deze achtergrond niet meer te lezen is. */
.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) :is(input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus) {
    -webkit-text-fill-color: var(--ff-white);
    -webkit-box-shadow: 0 0 0 1000px #151515 inset;
    caret-color: var(--ff-white);
}

/* Onthoud mij: het vakje is klein, het label eromheen levert het doelvlak */
.fame:not(.fame-light) .dnnLoginRememberMe {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
}

.fame:not(.fame-light) .dnnLoginRememberMe input[type="checkbox"] {
    /* zonder font-size erbij rekent 1.35em met de 13px van het besturings-
       systeem, en dan is het vakje 18px in plaats van 24px */
    font-size: inherit;
    width: 1.35em;
    height: 1.35em;
    min-height: 0;
    margin: 0;
    flex: none;
    accent-color: var(--ff-primary);
}

.fame:not(.fame-light) .dnnLoginRememberMe label {
    margin: 0;
    color: var(--ff-white);
    cursor: pointer;
    font-size: var(--ff-text-base);
    font-weight: var(--ff-weight-body);
}

/* 23.5 Knoppen en acties -------------------------------------------------- */
/* input[type="submit"] staat bewust naast de :is()-lijst en niet erin: een
   attribuutselector binnen :is() telt mee voor de hele selector, en dan
   verliezen de uitzonderingen verderop het van deze basisregel. */
.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) :is(.dnnPrimaryAction, .dnnSecondaryAction),
.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    min-width: 0;
    margin: 0;
    padding: .7rem 1.5rem;
    border: 2px solid var(--ff-primary);
    border-radius: var(--ff-radius);
    background: var(--ff-primary-dark);
    color: var(--ff-white);
    font-family: var(--ff-font-button);
    font-weight: var(--ff-weight-button);
    font-size: clamp(1.175rem, 1.12rem + .28vw, 1.3rem);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transition: background-color var(--ff-dur) var(--ff-ease),
                border-color var(--ff-dur) var(--ff-ease),
                color var(--ff-dur) var(--ff-ease);
}

.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) .dnnPrimaryAction:hover,
.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) input[type="submit"]:hover {
    background: var(--ff-primary-hover);
    border-color: var(--ff-primary);
    color: var(--ff-white);
}

.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) .dnnSecondaryAction {
    background: transparent;
    border-color: var(--ff-white);
}

.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) .dnnSecondaryAction:hover {
    background: var(--ff-white);
    color: var(--ff-black);
}

/* Aanmelden is bezig: DNN zet dnnDisabledAction op de knop */
.fame:not(.fame-light) .dnnDisabledAction,
.fame:not(.fame-light) :is(.dnnPrimaryAction, .dnnSecondaryAction)[disabled] {
    opacity: .6;
    pointer-events: none;
}

.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) ul.dnnActions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ff-space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) ul.dnnActions > li {
    float: none;
    margin: 0;
    list-style: none;
}

/* Op de smalle kaart staan de knoppen onder elkaar over de volle breedte;
   dat is op een telefoon het verschil tussen mikken en raken. */
.fame-auth :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) ul.dnnActions { flex-direction: column; }

.fame-auth :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) ul.dnnActions > li,
.fame-auth :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) ul.dnnActions :is(.dnnPrimaryAction, .dnnSecondaryAction),
.fame-auth :is(.dnnLoginService, .dnnPasswordReset) .dnnFormItem > :is(.dnnPrimaryAction, .dnnSecondaryAction) { width: 100%; }

/* De knoprij van het aanmeldformulier: "Aanmelden", met eronder eventueel
   "Annuleren". */
.fame-auth .dnnLoginService .dnnFormItem:has(> .dnnPrimaryAction) {
    display: flex;
    flex-direction: column;
    gap: var(--ff-space-sm);
    margin-top: var(--ff-space-lg);
}

/* "Wachtwoord vergeten?" is geen tweede hoofdactie: als knop naast
   "Aanmelden" trekt hij evenveel aandacht als het inloggen zelf. */
.fame:not(.fame-light) .dnnLoginActions { display: block; width: 100%; }

.fame:not(.fame-light) .dnnLoginActions ul.dnnActions {
    flex-direction: row;
    justify-content: center;
    gap: var(--ff-space-md);
    margin-top: var(--ff-space-md);
}

.fame:not(.fame-light) .dnnLoginActions ul.dnnActions > li { width: auto; }

.fame:not(.fame-light) .dnnLoginActions ul.dnnActions .dnnSecondaryAction {
    display: inline-flex;
    width: auto;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ff-primary);
    font-family: var(--ff-font-body);
    font-weight: var(--ff-weight-medium);
    font-size: var(--ff-text-base);
    text-decoration: underline;
}

.fame:not(.fame-light) .dnnLoginActions ul.dnnActions .dnnSecondaryAction:hover {
    background: transparent;
    color: var(--ff-white);
}

/* Het wachtwoordscherm zet zijn velden in een fieldset met de standaardrand
   en -marge van de browser, en zijn kop krijgt van DNN #222 mee. */
.fame:not(.fame-light) .dnnPassword fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.fame:not(.fame-light) :is(.dnnLogin, .dnnPassword) .dnnFormSectionHead,
.fame:not(.fame-light) :is(.dnnLogin, .dnnPassword) .dnnFormSectionHead span {
    color: var(--ff-white);
    font-family: var(--ff-font-heading);
    font-weight: var(--ff-weight-heading);
    font-size: var(--ff-h4);
}

/* 23.6 Meldingen en validatie -------------------------------------------- */
.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) .dnnFormMessage {
    display: block;
    margin: 0 0 var(--ff-space-md);
    padding: .875rem 1rem;
    border: 1px solid rgba(37,192,255,.45);
    border-radius: var(--ff-radius-md);
    background: rgba(37,192,255,.12);
    color: var(--ff-white);
    font-size: var(--ff-text-sm);
    line-height: 1.5;
}

.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) .dnnFormMessage:empty { display: none; }

.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) .dnnFormMessage.dnnFormSuccess {
    background: rgba(122,207,28,.14);
    border-color: var(--ff-summer-green);
}

.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) .dnnFormMessage.dnnFormWarning {
    background: rgba(242,146,0,.14);
    border-color: var(--ff-carrot-orange);
}

.fame:not(.fame-light) :is(.dnnLogin, .dnnLoginService, .dnnSendPassword, .dnnPasswordReset, .dnnPassword) :is(.dnnFormMessage.dnnFormError, .dnnFormMessage.dnnFormValidationSummary) {
    background: rgba(199,53,53,.2);
    border-color: var(--ff-autumn-red);
}

/* DNN toont een validatiefout als tekstballon boven het veld, absoluut
   gepositioneerd en 200px breed. Op de kaart past dat niet; hieronder staat
   de melding gewoon onder het veld waar hij bij hoort. */
.fame:not(.fame-light) .dnnFormItem span.dnnFormMessage.dnnFormError {
    position: static;
    width: auto;
    margin-top: .35rem;
    padding: .5rem .75rem;
    border: 1px solid var(--ff-autumn-red);
    background: rgba(199,53,53,.2);
    color: var(--ff-white);
    font-size: var(--ff-text-sm);
    text-align: left;
}

.fame:not(.fame-light) .dnnFormItem span.dnnFormMessage.dnnFormError:after { display: none; }

.fame:not(.fame-light) .dnnFormError :is(input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select, textarea) { border-color: var(--ff-autumn-red); }

/* 23.7 Wachtwoordmeter ---------------------------------------------------- */
/* Onder elk wachtwoordveld hangt DNN een sterktemeter
   (dnn.PasswordStrength.js). Die staat op 45% breed en met grijstinten die
   op zwart wegvallen. */
.fame:not(.fame-light) .password-strength-container {
    display: block;
    width: 100%;
    max-width: 100%;
}

.fame:not(.fame-light) .password-strength-container .min-length-text { color: var(--ff-on-dark-muted); }

.fame:not(.fame-light) .password-strength-container .meter div span { background-color: rgba(255,255,255,.18); }

.fame:not(.fame-light) .password-strength-container .meter label {
    color: var(--ff-white);
    font-size: var(--ff-text-sm);
}

/* Een goedgekeurd veld krijgt van DNN een wit vlak met een vinkje erin, met
   !important erachter. Alleen de kleur gaat terug; het vinkje blijft. */
.fame:not(.fame-light) .dnnFormItem input:is(.validate-success, .validate-fail, .matched, .unmatched) { background-color: #151515 !important; }

/* 23.8 Aanbieders: tabbladen en sociale knoppen --------------------------- */
.fame:not(.fame-light) .dnnLogin .LoginTabGroup {
    display: flex;
    gap: .25rem;
    height: auto;
    margin: 0 0 var(--ff-space-lg);
    border-bottom: 1px solid var(--ff-hairline-strong);
}

.fame:not(.fame-light) .dnnLogin .LoginTabGroup span {
    min-width: 0;
    margin: 0;
    padding: .5rem 1rem;
    border: 1px solid var(--ff-hairline);
    border-bottom: 0;
    border-radius: var(--ff-radius) var(--ff-radius) 0 0;
    background: transparent;
    color: var(--ff-white);
    font-family: var(--ff-font-body);
    font-weight: var(--ff-weight-medium);
}

.fame:not(.fame-light) .dnnLogin .LoginTabGroup span.LoginTabSelected {
    background: rgba(37,192,255,.12);
    border-color: var(--ff-primary);
    color: var(--ff-primary);
}

.fame:not(.fame-light) .dnnSocialRegistration ul.buttonList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ff-space-sm);
    margin: var(--ff-space-md) 0 0;
    padding: 0;
    list-style: none;
}

.fame:not(.fame-light) .dnnSocialRegistration ul.buttonList li { margin: 0; list-style: none; }

/* 23.9 Smalle schermen ---------------------------------------------------- */
@media (max-width: 480px) {
    .fame-auth > .content { padding: var(--ff-space-lg) var(--ff-space-md); }

    .auth-card { border-radius: var(--ff-radius-md); }

    .fame:not(.fame-light) .dnnLoginActions ul.dnnActions {
        flex-direction: column;
        align-items: center;
        gap: var(--ff-space-xs);
    }
}