/* ============================================
   AURORA — design system
   Wabi-sabi editorial · warm dark · clay accent
   Productie-fonts: Cormorant Garamond, EB Garamond, Inter
   (Fallback nu: systeem-serif; self-host in fase 3c indien nodig)
   ============================================ */

:root {
    --bg:       oklch(0.20 0.020 40);
    --surface:  oklch(0.25 0.025 40);
    --hairline: oklch(0.35 0.015 40);
    --text:     oklch(0.94 0.015 60);
    --muted:    oklch(0.72 0.015 60);
    --dim:      oklch(0.55 0.010 40);
    --accent:   oklch(0.75 0.13 55);
    --signal:   oklch(0.68 0.15 25);
    --star:     oklch(0.80 0.12 80);

    --serif-display: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
    --serif-body:    "EB Garamond", "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --sans:          "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;

    --step-1s: 0.75rem;
    --step-1:  0.8125rem;
    --step-0:  1rem;
    --step-1p: 1.1875rem;
    --step-2:  1.4375rem;
    --step-3:  1.75rem;
    --step-4:  2.25rem;
    --step-5:  3.5rem;
    --step-6:  5.5rem;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: light) {
    :root {
        --bg:       oklch(0.97 0.008 60);
        --surface:  oklch(0.93 0.012 60);
        --hairline: oklch(0.83 0.015 60);
        --text:     oklch(0.22 0.010 40);
        --muted:    oklch(0.45 0.012 40);
        --dim:      oklch(0.65 0.010 40);
        --accent:   oklch(0.55 0.15 45);
        --signal:   oklch(0.50 0.16 25);
        --star:     oklch(0.55 0.14 80);
    }
}

:root[data-theme="dark"] {
    --bg:       oklch(0.20 0.020 40);
    --surface:  oklch(0.25 0.025 40);
    --hairline: oklch(0.35 0.015 40);
    --text:     oklch(0.94 0.015 60);
    --muted:    oklch(0.72 0.015 60);
    --dim:      oklch(0.55 0.010 40);
    --accent:   oklch(0.75 0.13 55);
    --signal:   oklch(0.68 0.15 25);
    --star:     oklch(0.80 0.12 80);
}

:root[data-theme="light"] {
    --bg:       oklch(0.97 0.008 60);
    --surface:  oklch(0.93 0.012 60);
    --hairline: oklch(0.83 0.015 60);
    --text:     oklch(0.22 0.010 40);
    --muted:    oklch(0.45 0.012 40);
    --dim:      oklch(0.65 0.010 40);
    --accent:   oklch(0.55 0.15 45);
    --signal:   oklch(0.50 0.16 25);
    --star:     oklch(0.55 0.14 80);
}

* { box-sizing: border-box; }

html {
    background: var(--bg);
    color: var(--text);
    font-family: var(--serif-body);
    font-size: 17px;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "kern", "liga", "onum";
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: inherit; }
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ============================================
   Brand-header
   ============================================ */

.brand {
    padding: 2rem 1.5rem 1rem;
    text-align: center;
    border-bottom: 1px solid var(--hairline);
}

.brand .wordmark {
    font-family: var(--serif-display);
    font-weight: 400;
    font-size: var(--step-3);
    letter-spacing: 0.32em;
    margin: 0;
    color: var(--text);
    text-indent: 0.32em;
    text-decoration: none;
    display: inline-block;
}

.brand .wordmark:hover { color: var(--accent); }

.brand .tagline {
    margin: 0.5rem 0 0;
    font-family: var(--sans);
    font-size: var(--step-1s);
    color: var(--muted);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.brand nav {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-top: 1.25rem;
    font-family: var(--sans);
    font-size: var(--step-1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.brand nav a { margin: 0 1rem;
    text-decoration: none;
    color: var(--muted);
    padding-bottom: 0.375rem;
    border-bottom: 1px solid transparent;
    transition: color 220ms var(--ease-out), border-color 220ms var(--ease-out);
}

.brand nav a:hover, .brand nav a[aria-current="page"] {
    color: var(--accent);
    border-color: var(--accent);
}

/* ============================================
   Page container
   ============================================ */

.page {
    max-width: 44rem;
    margin: 0 auto;
    padding: 4rem 1.5rem 3rem;
}

.page.wide {
    max-width: 62rem;
}

.eyebrow {
    font-family: var(--sans);
    font-size: var(--step-1s);
    color: var(--muted);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.eyebrow-line::before,
.eyebrow-line::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--hairline);
}

/* ============================================
   Homepage hero
   ============================================ */

.home-hero h1 {
    font-family: var(--serif-display);
    font-weight: 400;
    font-size: clamp(2.5rem, 6vw, var(--step-5));
    line-height: 1.05;
    margin: 0 0 2rem;
    text-wrap: balance;
    font-style: italic;
}

.home-hero h1 em {
    font-style: normal;
    color: var(--accent);
    font-weight: 400;
}

.home-hero .intro {
    font-size: var(--step-1p);
    line-height: 1.75;
    margin: 0 auto;
    max-width: 34rem;
}

.home-hero .intro + .intro { margin-top: 1.25rem; }

/* ---- Moon-marker ---- */

.home-marker {
    display: flex;
    justify-content: center;
    margin: 3rem 0;
}

.moon-svg {
    width: 88px;
    height: 88px;
    color: var(--accent);
}

/* ============================================
   Sign-index (typografische lijst)
   ============================================ */

.sign-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sign-list li { border-bottom: 1px solid var(--hairline); }

.sign-list a {
    display: grid;
    grid-template-columns: 3.5rem 1fr auto auto;
    gap: 1.25rem;
    align-items: baseline;
    padding: 1.125rem 0;
    text-decoration: none;
    transition: color 220ms var(--ease-out);
}

.sign-list a:hover { color: var(--accent); }
.sign-list a:hover .sign-name { letter-spacing: 0.05em; }

.sign-list .sign-glyph {
    font-family: var(--serif-display);
    font-size: var(--step-3);
    color: var(--accent);
    font-style: italic;
    line-height: 1;
}

.sign-list .sign-name {
    font-family: var(--serif-display);
    font-size: var(--step-2);
    letter-spacing: 0.02em;
    transition: letter-spacing 220ms var(--ease-out);
}

.sign-list .sign-dates {
    font-family: var(--sans);
    font-size: var(--step-1s);
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.sign-list .sign-ready {
    font-family: var(--sans);
    font-size: 0.6875rem;
    color: var(--accent);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

@media (max-width: 640px) {
    .sign-list a { grid-template-columns: 3rem 1fr auto; gap: 0.75rem; padding: 1rem 0; }
    .sign-list .sign-dates { display: none; }
}

/* ============================================
   Sterrenbeeld-detail
   ============================================ */

.breadcrumb {
    font-family: var(--sans);
    font-size: var(--step-1s);
    color: var(--muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 3rem;
}
.breadcrumb a { text-decoration: none; color: inherit; }
.breadcrumb a:hover { color: var(--accent); }

.sign-title-block {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: end;
    margin: 0 0 4rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--hairline);
}

.sign-title-block .glyph {
    width: 200px;
    height: 200px;
    display: grid;
    place-items: center;
    color: var(--accent);
    flex-shrink: 0;
}

.sign-title-block .name {
    font-family: var(--serif-display);
    font-weight: 400;
    font-size: clamp(3rem, 8vw, var(--step-6));
    line-height: 0.95;
    margin: 0;
    letter-spacing: -0.01em;
}

.sign-title-block .meta {
    font-family: var(--sans);
    font-size: var(--step-1);
    color: var(--muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0.75rem 0 0;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .sign-title-block { grid-template-columns: 1fr; gap: 1.25rem; justify-items: start; }
    .sign-title-block .glyph { width: 140px; height: 140px; }
    .sign-title-block .glyph svg { width: 92px; height: 92px; }
    .sign-title-block .glyph::before,
    .sign-title-block .glyph::after { width: 140px; height: 140px; }
    .sign-title-block .glyph .gimbal.gimbal-groot { width: 118px; height: 118px; }
}

/* ---- Horoscoop body ---- */

.horoscope-body {
    font-family: var(--serif-body);
    font-size: var(--step-1p);
    line-height: 1.85;
    margin: 0;
    max-width: 40rem;
}

.horoscope-body p { margin: 0 0 1.4em; }

.horoscope-body p:first-of-type::first-letter {
    font-family: var(--serif-display);
    font-size: 4rem;
    float: left;
    line-height: 0.85;
    margin: 0.15rem 0.6rem 0 -0.15rem;
    color: var(--accent);
    font-style: italic;
}

.horoscope-body.placeholder {
    font-family: var(--sans);
    font-size: var(--step-1);
    color: var(--muted);
    line-height: 1.6;
    background: var(--surface);
    padding: 1.5rem;
    border-radius: 4px;
    border: 1px dashed var(--hairline);
    white-space: pre-wrap;
}
.horoscope-body.placeholder::first-letter { all: unset; }

/* ---- Sky-strip ---- */

a.brand-zegel { text-decoration: none; color: inherit; }

.sky-strip {
    margin: 4rem 0 3rem;
    padding: 2rem 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 1.5rem 1.25rem;
}

/* Op een regel op een breed scherm (Mady, 26-09): bij 0.7rem is de zin 791px, de strook 833px. */
.sky-intro {
    grid-column: 1 / -1;
    font-family: var(--sans);
    font-size: 0.7rem;
    color: var(--muted);
    margin: 0;
}

a.sky-item { display: block; text-decoration: none; color: inherit; }

a.sky-item[href] .value {
    text-decoration: underline;
    text-decoration-color: var(--hairline);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
    transition: text-decoration-color 0.2s;
}

a.sky-item[href]:hover .value,
a.sky-item[href]:focus-visible .value { text-decoration-color: var(--accent); }

.sky-item .label {
    font-family: var(--sans);
    font-size: 0.6875rem;
    color: var(--muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 0.25rem;
}

.sky-item .value {
    font-family: var(--serif-display);
    font-size: var(--step-1p);
    font-style: italic;
    margin: 0;
    color: var(--text);
}

.sky-item .badge {
    display: inline-block;
    font-family: var(--sans);
    font-size: 0.6875rem;
    color: var(--signal);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-left: 0.35rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid color-mix(in oklch, var(--signal) 40%, transparent);
    border-radius: 999px;
    vertical-align: middle;
}

/* ---- Focus-strip ---- */

.focus-strip { margin: 2rem 0 3rem; }
.focus-strip .label {
    font-family: var(--sans);
    font-size: 0.6875rem;
    color: var(--muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
}
.focus-bar { display: flex; height: 4px; border-radius: 2px; overflow: hidden; background: var(--hairline); }
.focus-bar span { display: block; height: 100%; }
.focus-strip .legend {
    display: flex;
    gap: 1.5rem;
    margin: 0.75rem 0 0;
    font-family: var(--sans);
    font-size: var(--step-1s);
    color: var(--muted);
    flex-wrap: wrap;
}
.focus-strip .legend .item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.focus-strip .legend .swatch {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* ============================================
   Consulenten-listing
   ============================================ */

.section-title {
    font-family: var(--serif-display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(2rem, 5vw, var(--step-4));
    line-height: 1.15;
    margin: 0 auto 1.25rem;
    text-wrap: balance;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 3rem;
    padding: 1rem 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    align-items: baseline;
}

.filter-bar .filter-label {
    font-family: var(--sans);
    font-size: var(--step-1s);
    color: var(--muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-right: 0.5rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-family: var(--sans);
    font-size: var(--step-1);
    color: var(--muted);
    text-decoration: none;
    transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out), background 200ms var(--ease-out);
    line-height: 1.1;
}

.chip:hover { color: var(--text); border-color: var(--muted); }
.chip[aria-current="true"] {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}

.consultant-list {
    display: grid;
    gap: 2.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.consultant-card {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: 1.5rem;
    align-items: start;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--hairline);
}

.consultant-list li:last-child .consultant-card { border-bottom: none; }

.consultant-card .avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: var(--surface);
    color: var(--muted);
    display: grid;
    place-items: center;
    font-family: var(--serif-display);
    font-size: var(--step-3);
    font-style: italic;
    overflow: hidden;
    flex-shrink: 0;
}

.consultant-card .avatar img { width: 100%; height: 100%; object-fit: cover; }

.consultant-card .header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.consultant-card .name {
    font-family: var(--serif-display);
    font-weight: 400;
    font-size: var(--step-3);
    margin: 0;
    line-height: 1.1;
}
.consultant-card .name a { text-decoration: none; }
.consultant-card .name a:hover { color: var(--accent); }

.consultant-card .rating {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--sans);
    font-size: var(--step-1);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.consultant-card .rating .stars { color: var(--star); letter-spacing: 0.05em; font-size: var(--step-1p); }

/* De beoordeling is een link naar "Wat anderen zeggen" op het profiel. Hij mag
   niet als gewone link opvallen -- geen onderstreping, dezelfde kleur -- maar
   moet bij hover wel laten zien dat er iets achter zit. De sterren houden hun
   eigen kleur, die staat op .stars zelf. */
a.rating,
.rating-link {
    text-decoration: none;
    color: inherit;
}
a.rating:hover,
a.rating:focus-visible,
.rating-link:hover,
.rating-link:focus-visible {
    color: var(--accent);
}

.consultant-card .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}
.consultant-card .tags li {
    font-family: var(--sans);
    font-size: 0.6875rem;
    color: var(--muted);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--hairline);
    border-radius: 4px;
}

.consultant-card .bio {
    margin: 0 0 1rem;
    font-family: var(--serif-body);
    font-size: var(--step-0);
    line-height: 1.7;
    max-width: 34rem;
}

.consultant-card .actions {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
    font-family: var(--sans);
    font-size: var(--step-1);
}

.consultant-card .actions .experience {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.consultant-card .actions .cta {
    color: var(--accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    font-size: var(--step-1s);
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: border-color 200ms var(--ease-out);
}

.consultant-card .actions .cta:hover { border-color: var(--accent); }

@media (max-width: 640px) {
    .consultant-card { grid-template-columns: 3.5rem 1fr; gap: 1rem; }
    .consultant-card .avatar { width: 3.5rem; height: 3.5rem; font-size: var(--step-2); }
    .consultant-card .name { font-size: var(--step-2); }
}

/* ============================================
   Consulent-detail
   ============================================ */

.consultant-page .hero {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 2rem;
    align-items: start;
    margin-bottom: 3rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--hairline);
}

.consultant-page .hero .avatar {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: var(--surface);
    color: var(--muted);
    display: grid;
    place-items: center;
    font-family: var(--serif-display);
    font-size: var(--step-5);
    font-style: italic;
    overflow: hidden;
}

.consultant-page .hero .name {
    font-family: var(--serif-display);
    font-weight: 400;
    font-size: clamp(2.5rem, 7vw, var(--step-6));
    line-height: 0.95;
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}

.consultant-page .hero .rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--sans);
    font-size: var(--step-1);
    color: var(--muted);
    margin: 0 0 1rem;
    font-variant-numeric: tabular-nums;
}
.consultant-page .hero .rating .stars { color: var(--star); font-size: var(--step-1p); }

/* De link om de sterren en het aantal heen mag de rij niet anders laten lopen:
   zelfde richting en dezelfde tussenruimte als de regel zelf. */
.consultant-page .hero .rating .rating-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.consultant-page .hero .bio-short {
    font-family: var(--serif-body);
    font-size: var(--step-1p);
    line-height: 1.7;
    color: var(--text);
    margin: 0;
    max-width: 40rem;
}

.consultant-page .bio-long {
    font-family: var(--serif-body);
    font-size: var(--step-1p);
    line-height: 1.85;
    max-width: 40rem;
    margin: 0 0 3rem;
}

.consultant-page .bio-long p { margin: 0 0 1.4em; }

.consultant-page .rates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0;
    margin: 3rem 0;
    border-top: 1px solid var(--hairline);
    /* Geen onderrand meer. Die viel vlak boven de lijn van het
       beoordelingenblok, en dan staan er twee strepen onder elkaar. */
}

.consultant-page .rates .rate {
    padding: 1.5rem;
    border-right: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.consultant-page .rates .rate:last-child { border-right: none; }

.consultant-page .rates .channel {
    font-family: var(--sans);
    font-size: 0.6875rem;
    color: var(--muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.consultant-page .rates .price {
    font-family: var(--serif-display);
    font-size: var(--step-3);
    color: var(--accent);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.consultant-page .rates .unit {
    font-family: var(--sans);
    font-size: var(--step-1s);
    color: var(--muted);
    letter-spacing: 0.06em;
}

.consultant-page .rates .rate.disabled .price {
    color: var(--dim);
    font-style: italic;
    font-size: var(--step-1p);
}

@media (max-width: 640px) {
    .consultant-page .hero { grid-template-columns: 1fr; }
    .consultant-page .rates .rate { border-right: none; border-bottom: 1px solid var(--hairline); }
    .consultant-page .rates .rate:last-child { border-bottom: none; }
}

/* ---- Reviews-block ---- */

/* Wie via de beoordeling op een kaart hier binnenkomt, moet zien dat hij ergens
   anders is uitgekomen en niet ergens midden op het profiel. Vandaar een lijn
   erboven en een eigen kleur voor de kop. De scroll-marge houdt de kop van de
   bovenrand van het scherm af. (Mady, 11-09-2026) */
.reviews-block {
    scroll-margin-top: 2rem;
    /* Het donkerblauw waarmee het wordmark-verloop begint, zodat de lijn en de
       kop eronder op elkaar aansluiten. Dat blauw staat niet als variabele in
       het thema; de waarden komen uit .section-title--wordmark-verloop.
       (Mady, 14-09-2026) */
    border-top: 1px solid oklch(0.60 0.100 265);
}

@media (prefers-color-scheme: light) {
    .reviews-block { border-top-color: oklch(0.34 0.080 265); }
}

.reviews-block .block-title {
    font-family: var(--serif-display);
    font-weight: 400;
    font-style: italic;
    font-size: var(--step-3);
    margin: 3rem 0 1.5rem;
    /* Geen eigen kleur hier: de kop draagt de klasse
       section-title--wordmark-verloop en die zet de letters op transparant met
       het verloop erachter. Een color-regel hier zou daar overheen gaan. */
    /* Zonder dit rekt het verloop over de hele kolom uit in plaats van over de
       letters, en zie je alleen het donkerblauwe begin ervan. */
    width: fit-content;
}

.review-item {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--hairline);
}

.review-item .head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 0.5rem;
}

.review-item .who {
    font-family: var(--serif-display);
    font-size: var(--step-1p);
    font-style: italic;
    color: var(--text);
}

.review-item .stars { color: var(--star); letter-spacing: 0.05em; }
.review-item .date {
    font-family: var(--sans);
    font-size: var(--step-1s);
    color: var(--muted);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}

.review-item .message {
    font-family: var(--serif-body);
    font-size: var(--step-0);
    line-height: 1.7;
    margin: 0;
}

.review-item .reply {
    margin: 1rem 0 0 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border-left: 2px solid var(--accent);
    font-family: var(--serif-body);
    font-size: var(--step-1);
    color: var(--muted);
    line-height: 1.6;
}

.review-item .reply .from {
    font-family: var(--sans);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 0.35rem;
}

/* ============================================
   Footer
   ============================================ */

footer {
    margin: 6rem 0 0;
    padding: 2rem 1.5rem;
    border-top: 1px solid var(--hairline);
    text-align: center;
    font-family: var(--sans);
    font-size: var(--step-1s);
    color: var(--dim);
    letter-spacing: 0.06em;
}

/* ============================================
   Reveal-on-scroll (subtiel, opt-in)
   ============================================ */

@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
    }
    .reveal.in-view {
        opacity: 1;
        transform: none;
    }
}

/* wkhtml/oude-browser flex-gap fallback */
.consultant-card .actions > * + * { margin-left: 1.5rem; }
.consultant-card .tags li + li    { margin-left: 0.4rem; }
.brand nav > * + *                { margin-left: 2rem; }
.focus-strip .legend .item + .item { margin-left: 1.5rem; }


/* ── Kanaal-knoppen (bellen / chatten / e-mail) ─────────────── */

.channel-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.channel-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--accent);
    border-radius: 2rem;
    font-family: var(--sans);
    font-size: var(--step-1);
    color: var(--accent);
    text-decoration: none;
    transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), filter 0.2s var(--ease-out);
}

.channel-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.channel-btn .price { color: var(--muted); font-size: var(--step-1s); }

.channel-btn:hover { background: var(--accent); color: var(--bg); }
.channel-btn:hover .price { color: var(--bg); opacity: 0.8; }

.channel-btn.channel-bel { background: var(--accent); color: var(--bg); }
.channel-btn.channel-bel .price { color: var(--bg); opacity: 0.8; }
.channel-btn.channel-bel:hover { filter: brightness(1.1); }

.channel-buttons.compact { margin-top: 0.9rem; }
.channel-buttons.compact .channel-btn { padding: 0.4rem 0.85rem; }

/* ── Aanwezigheid ───────────────────────────────────────────── */

.presence {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--sans);
    font-size: var(--step-1s);
    color: var(--dim);
}

.presence .dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--dim);
    flex-shrink: 0;
}

.presence.on { color: oklch(0.68 0.14 150); }
.presence.on .dot {
    background: oklch(0.68 0.14 150);
    animation: presence-pulse 2.4s var(--ease-out) infinite;
}

@keyframes presence-pulse {
    50% { opacity: 0.45; }
}


/* ── Header-acties (credits / inloggen) ─────────────────────── */

.brand-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 1rem;
    border-radius: 2rem;
    font-family: var(--sans);
    font-size: var(--step-1);
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), filter 0.2s var(--ease-out);
}

.pill svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.pill-accent { background: var(--accent); color: var(--bg); }
.pill-accent:hover { filter: brightness(1.1); }

.pill-ghost { border-color: var(--hairline); color: var(--muted); background: transparent; }
.pill-ghost:hover { border-color: var(--accent); color: var(--accent); }

.logout-form { display: inline-flex; margin: 0; }

/* ── Login-pagina ───────────────────────────────────────────── */

.auth-page { max-width: 26rem; }

.auth-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 2rem;
    font-family: var(--sans);
}

.auth-card label {
    font-size: var(--step-1s);
    color: var(--muted);
    margin-top: 0.9rem;
}

.auth-card input[type="email"],
.auth-card input[type="password"] {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 0.5rem;
    padding: 0.65rem 0.9rem;
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--step-0);
}

.auth-card input:focus {
    outline: none;
    border-color: var(--accent);
}

.auth-card .remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: var(--step-1s);
    color: var(--muted);
}

.auth-card .remember input { accent-color: var(--accent); }

.auth-submit {
    justify-content: center;
    margin-top: 1.4rem;
    border: none;
    font-size: var(--step-0);
}

.auth-card .form-error {
    color: var(--signal);
    font-size: var(--step-1s);
    margin-top: 0.8rem;
}

.auth-foot {
    color: var(--dim);
    font-size: var(--step-1s);
    margin-top: 1.4rem;
}

/* ── Credits-pagina ─────────────────────────────────────────── */

.wallet-saldo {
    font-family: var(--sans);
    font-size: var(--step-1p);
    margin-top: 1.5rem;
}

.wallet-saldo.muted { color: var(--muted); }
.wallet-saldo a { color: var(--accent); }

.bundles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
    max-width: 46rem;
}

.bundle {
    border: 1px solid var(--hairline);
    border-radius: 0.75rem;
    padding: 1.75rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--sans);
}

.bundle.featured { border-color: var(--accent); }

.bundle-label {
    font-size: var(--step-1s);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dim);
}

.bundle-price {
    font-family: var(--serif-display);
    font-size: var(--step-4);
    color: var(--text);
}

.bundle-credits { color: var(--muted); font-size: var(--step-1); }
.bundle-bonus { color: var(--accent); font-size: var(--step-1s); min-height: 1.2em; }

.bundle-cta { margin-top: 1rem; }

.credits-foot {
    color: var(--dim);
    font-family: var(--sans);
    font-size: var(--step-1s);
    margin-top: 2.5rem;
}


/* ── Evergreen teken-pagina ─────────────────────────────────── */

.today-teaser {
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--accent);
    border-radius: 0.5rem;
    padding: 1.5rem 1.75rem;
    margin: 2.5rem 0;
    font-family: var(--sans);
}

.today-teaser .teaser-text {
    color: var(--muted);
    font-family: var(--serif-body);
    font-size: var(--step-1p);
    margin: 0.75rem 0 1rem;
}

.kernwoorden {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 2.5rem;
}

.other-signs { margin-top: 4rem; }

/* ── Landing-pagina's (medium bellen / chatten) ─────────────── */

.landing-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.25rem;
    margin-top: 3rem;
    max-width: 52rem;
}

.landing-step {
    border: 1px solid var(--hairline);
    border-radius: 0.75rem;
    padding: 1.5rem;
    font-family: var(--sans);
}

.landing-step .step-num {
    font-family: var(--serif-display);
    font-size: var(--step-3);
    font-style: italic;
    color: var(--accent);
}

.landing-step h2 {
    font-size: var(--step-1p);
    margin: 0.5rem 0 0.5rem;
}

.landing-step p:not(.step-num) {
    color: var(--muted);
    font-size: var(--step-1);
    line-height: 1.55;
}

.landing-faq { margin-top: 4rem; max-width: 42rem; }

.landing-faq details {
    border-bottom: 1px solid var(--hairline);
    padding: 1rem 0;
    font-family: var(--sans);
}

.landing-faq summary {
    cursor: pointer;
    font-size: var(--step-1p);
    color: var(--text);
    list-style: none;
    position: relative;
    padding-right: 2rem;
}

.landing-faq summary::-webkit-details-marker { display: none; }

.landing-faq summary::after {
    content: '+';
    position: absolute;
    right: 0.25rem;
    top: 0;
    color: var(--accent);
    font-size: var(--step-2);
    line-height: 1;
    transition: transform 0.2s var(--ease-out);
}

.landing-faq details[open] summary::after { transform: rotate(45deg); }

.landing-faq details p {
    color: var(--muted);
    margin-top: 0.75rem;
    line-height: 1.6;
}

.landing-faq details a { color: var(--accent); }

/* === Belplatform CTA — STAP 3, 2026-07-29 =================================
 * "Bel nu"-blok op /consulent/{slug} en bevestigingspagina bel-gestart.
 * Zet visueel duidelijk onder de hero, boven het rates-overzicht.
 */
.cta-bel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 1.4rem 1.6rem;
    margin: 1.5rem 0;
    border: 1px solid var(--rule, #d9cfbf);
    border-radius: 6px;
    background: var(--surface-alt, rgba(255,255,255,0.4));
}
.cta-bel-error {
    align-self: stretch;
    padding: 0.6rem 0.9rem;
    background: rgba(180, 60, 60, 0.08);
    color: var(--warn, #a63030);
    font-family: var(--sans, sans-serif);
    font-size: 0.9rem;
    border-radius: 4px;
    margin: 0 0 0.4rem 0;
}
.cta-bel-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem 1.2rem;
    margin: 0;
}
.btn-bel-nu {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 1.4rem;
    font-family: var(--sans, sans-serif);
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    background: var(--accent, oklch(0.72 0.13 55));
    border: 0;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.btn-bel-nu:hover,
.btn-bel-nu:focus-visible {
    filter: brightness(1.08);
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.btn-bel-nu.disabled,
.btn-bel-nu[aria-disabled="true"] {
    background: var(--muted, #8b8071);
    cursor: not-allowed;
    filter: none;
    opacity: 0.7;
}
.cta-bel-tarief {
    font-family: var(--sans, sans-serif);
    font-size: 0.9rem;
    color: var(--muted, #675e51);
}

/* === Betaalnummer: kleine uitwijkregel onder de belknoppen ================
 * Besluit Patrick 18-08-2026: het 090-nummer niet groot in beeld brengen. Wij
 * houden aan een creditgesprek meer over dan aan een betaalnummergesprek, en de
 * consulent ook, dus dit is de uitwijk voor wie geen account wil en geen tweede
 * aanbod dat met de belknop concurreert.
 *
 * Vorm gevolgd van topconsulenten.nl: aanhef, nummer, boxnummer en tarief in
 * kleine letters onder de primaire knoppen. Het nummer mag iets opvallen omdat
 * je het moet kunnen overtypen; het tarief blijft de kleinste regel, maar staat
 * er wel, want boven 15 cent per minuut is die vermelding verplicht.
 */
.betaalnummer-uitwijk {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0.9rem 0 0;
    font-family: var(--sans, sans-serif);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--muted, #675e51);
}
.betaalnummer-uitwijk .bn-aanhef {
    opacity: 0.8;
}
.betaalnummer-uitwijk .bn-nummer {
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--ink, inherit);
}
.betaalnummer-uitwijk .bn-box strong {
    font-weight: 600;
    color: var(--ink, inherit);
}
.betaalnummer-uitwijk .bn-tarief {
    font-size: 0.76rem;
    opacity: 0.85;
}

/* === Belplatform callback-formulier — STAP 4, 2026-07-29 ==================
 * Uitklap-blok "Kan ... mij terugbellen?" onder de CTA-bel.
 */
.cta-callback {
    margin: 0 0 1.5rem 0;
}
.cta-callback summary {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    font-family: var(--sans, sans-serif);
    font-size: 0.95rem;
    color: var(--accent, oklch(0.72 0.13 55));
    background: transparent;
    border: 1px solid var(--rule, #d9cfbf);
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.cta-callback summary::-webkit-details-marker { display: none; }
.cta-callback summary::before {
    content: "☎ ";
    margin-right: 0.4rem;
}
.cta-callback[open] summary { margin-bottom: 1rem; }
.callback-form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    max-width: 480px;
    padding: 1.2rem 1.4rem;
    background: var(--surface-alt, rgba(255,255,255,0.4));
    border: 1px solid var(--rule, #d9cfbf);
    border-radius: 6px;
}
.callback-intro {
    font-family: var(--sans, sans-serif);
    font-size: 0.9rem;
    color: var(--muted, #675e51);
    margin: 0 0 0.4rem 0;
}
.callback-form label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-family: var(--sans, sans-serif);
    font-size: 0.9rem;
    color: var(--fg, #2b2419);
}
.callback-form label .opt {
    color: var(--muted, #8b8071);
    font-weight: 400;
}
.callback-form input,
.callback-form select,
.callback-form textarea {
    padding: 0.55rem 0.7rem;
    font-family: var(--sans, sans-serif);
    font-size: 0.95rem;
    color: var(--fg, #2b2419);
    background: #fff;
    border: 1px solid var(--rule, #d9cfbf);
    border-radius: 4px;
}
.callback-form input:focus,
.callback-form select:focus,
.callback-form textarea:focus {
    outline: 2px solid var(--accent, oklch(0.72 0.13 55));
    outline-offset: 1px;
}
.callback-form button {
    align-self: flex-start;
    margin-top: 0.3rem;
}

/* === Chat-room styling — 2026-07-30 =======================================
 * Livewire ChatRoom-component: topbar + messages + input.
 */
.chat-room {
    display: flex;
    flex-direction: column;
    height: min(calc(100vh - 220px), 720px);
    max-width: 720px;
    margin: 1rem auto;
    border: 1px solid var(--rule, #d9cfbf);
    border-radius: 8px;
    background: var(--surface, #fff);
    overflow: hidden;
}
.chat-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1.2rem;
    background: var(--surface-alt, #efe8de);
    border-bottom: 1px solid var(--rule, #d9cfbf);
    font-family: var(--sans, sans-serif);
    font-size: 0.9rem;
    flex-wrap: wrap;
}
.chat-topbar strong { margin: 0 0.6rem; }
.chat-back {
    color: var(--muted, #675e51);
    text-decoration: none;
    margin-right: 0.6rem;
}
.chat-status {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    font-size: 0.75rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--rule, #d9cfbf);
    color: var(--fg, #2b2419);
}
.chat-status.status-active { background: oklch(0.72 0.13 145); color: #fff; }
.chat-status.status-completed,
.chat-status.status-cancelled,
.chat-status.status-failed { background: var(--muted, #8b8071); color: #fff; }

.chat-meter {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    font-size: 0.85rem;
    color: var(--muted, #675e51);
}
.chat-meter .tarief { font-weight: 500; }
.chat-meter .saldo strong { color: var(--fg, #2b2419); }
.chat-meter .unmetered {
    padding: 0.1rem 0.5rem;
    background: rgba(255, 200, 0, 0.15);
    border-radius: 4px;
    color: #7d5f00;
}

.chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: var(--surface, #fff);
}
.chat-msg { display: flex; }
.chat-msg .bubble {
    padding: 0.55rem 0.9rem;
    max-width: 75%;
    border-radius: 12px;
    background: var(--surface-alt, #efe8de);
    color: var(--fg, #2b2419);
    font-family: var(--sans, sans-serif);
    font-size: 0.95rem;
    line-height: 1.35;
    box-shadow: 0 1px 1px rgba(0,0,0,0.03);
}
.chat-msg .bubble .body { white-space: pre-wrap; word-break: break-word; }
.chat-msg .bubble .ts {
    font-size: 0.7rem;
    color: var(--muted, #8b8071);
    text-align: right;
    margin-top: 0.2rem;
}
.chat-msg.mine { justify-content: flex-end; }
.chat-msg.mine .bubble {
    background: var(--accent, oklch(0.72 0.13 55));
    color: #fff;
}
.chat-msg.mine .bubble .ts { color: rgba(255,255,255,0.75); }

.chat-msg.role-system {
    justify-content: center;
    margin: 0.4rem 0;
}
.chat-msg.role-system .sys {
    font-family: var(--sans, sans-serif);
    font-size: 0.8rem;
    color: var(--muted, #8b8071);
    font-style: italic;
    padding: 0.3rem 0.7rem;
    background: rgba(0,0,0,0.04);
    border-radius: 6px;
    max-width: 90%;
    text-align: center;
}

.chat-input {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.8rem 1.2rem;
    border-top: 1px solid var(--rule, #d9cfbf);
    background: var(--surface-alt, #efe8de);
}
.chat-input textarea {
    padding: 0.6rem 0.75rem;
    font-family: var(--sans, sans-serif);
    font-size: 0.95rem;
    border: 1px solid var(--rule, #d9cfbf);
    border-radius: 6px;
    resize: vertical;
    min-height: 3.2rem;
    background: #fff;
}
.chat-input textarea:focus {
    outline: 2px solid var(--accent, oklch(0.72 0.13 55));
    outline-offset: 1px;
}
.chat-input-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
}
.chat-err {
    color: var(--warn, #a63030);
    font-family: var(--sans, sans-serif);
    font-size: 0.85rem;
    margin: 0;
}
.chat-closed {
    padding: 1rem 1.2rem;
    background: var(--surface-alt, #efe8de);
    border-top: 1px solid var(--rule, #d9cfbf);
    font-family: var(--sans, sans-serif);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.chat-closed .btn-bel-nu { align-self: flex-start; }

/* === Typing-indicator — 2026-07-31 =========================================
 * Wordt getoond boven de chat-input als de andere partij aan het typen is.
 * Alpine x-show togglet display; hier alleen de visuele styling.
 */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1.2rem 0.1rem 1.2rem;
    font-family: var(--sans, sans-serif);
    font-size: 0.85rem;
    color: var(--muted, #675e51);
    font-style: italic;
    background: var(--surface, #fff);
    border-top: 1px solid transparent;
}
.typing-indicator .dots {
    display: inline-flex;
    gap: 3px;
    margin-left: 4px;
}
.typing-indicator .dots span {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--muted, #8b8071);
    animation: typing-bounce 1.2s infinite ease-in-out both;
}
.typing-indicator .dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator .dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
    40% { transform: translateY(-4px); opacity: 1; }
}

/* === Blog — 2026-08-01 =====================================================
 * Grid, kaarten, detail-hero. Herbruikt aurora-tokens (--accent, --muted, --rule).
 */
.blog-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.4rem;
}
.blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface, #fff);
    border: 1px solid var(--rule, #d9cfbf);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.blog-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.blog-thumb {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--surface-alt, #efe8de);
    overflow: hidden;
}
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-body {
    padding: 1rem 1.2rem 1.2rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}
.blog-cat {
    display: inline-block;
    font-family: var(--sans, sans-serif);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent, oklch(0.72 0.13 55));
    text-decoration: none;
    margin-bottom: 0.2rem;
}
.blog-title {
    font-family: var(--serif, Georgia, serif);
    font-size: 1.15rem;
    line-height: 1.3;
    margin: 0;
    color: var(--fg, #2b2419);
}
.blog-title a { color: inherit; text-decoration: none; }
.blog-title a:hover { color: var(--accent, oklch(0.72 0.13 55)); }
.blog-excerpt {
    font-family: var(--sans, sans-serif);
    font-size: 0.9rem;
    color: var(--muted, #675e51);
    line-height: 1.5;
    margin: 0;
}
.blog-meta {
    font-family: var(--sans, sans-serif);
    font-size: 0.8rem;
    color: var(--muted, #8b8071);
    margin: 0.6rem 0 0 0;
}

/* Detail-view */
.blog-article { max-width: 720px; }
.blog-hero { margin: 1.5rem 0 1rem 0; }
.blog-hero .eyebrow {
    font-family: var(--sans, sans-serif);
    font-size: 0.8rem;
    color: var(--accent, oklch(0.72 0.13 55));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.4rem 0;
}
.blog-h1 {
    font-family: var(--serif, Georgia, serif);
    font-size: 2rem;
    line-height: 1.2;
    margin: 0.2rem 0 0.6rem 0;
    color: var(--fg, #2b2419);
}
.blog-figure {
    margin: 1.5rem 0;
    border-radius: 8px;
    overflow: hidden;
}
.blog-figure img { width: 100%; display: block; }
.blog-content {
    font-family: var(--serif, Georgia, serif);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--fg, #2b2419);
}
.blog-content p { margin: 0 0 1.1rem 0; }
.blog-related { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule, #d9cfbf); }
.blog-related .block-title {
    font-family: var(--serif, Georgia, serif);
    font-size: 1.3rem;
    margin: 0 0 1rem 0;
}

/* Pagination — mediumlounge-view (resources/views/pagination/mediumlounge.blade.php):
   één rij met Vorige, nummers, Volgende, en daaronder een muted regel
   "Toont X tot Y van Z" als lopende tekst, niet in kaders. */
.ml-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.ml-pagination__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.ml-pagination__item { margin: 0; }
.ml-pagination__link {
    display: inline-block;
    padding: 0.45rem 0.85rem;
    font-family: var(--sans, sans-serif);
    font-size: 0.9rem;
    line-height: 1;
    color: var(--muted, #675e51);
    background: var(--surface, #fff);
    border: 1px solid var(--rule, #d9cfbf);
    border-radius: 4px;
    text-decoration: none;
}
a.ml-pagination__link:hover { color: var(--accent, oklch(0.72 0.13 55)); }
.ml-pagination__item--current .ml-pagination__link {
    background: var(--accent, oklch(0.72 0.13 55));
    color: #fff;
    border-color: var(--accent, oklch(0.72 0.13 55));
}
.ml-pagination__item--disabled .ml-pagination__link {
    opacity: 0.5;
    cursor: default;
}
.ml-pagination__item--separator .ml-pagination__link {
    border-color: transparent;
    background: transparent;
    padding-inline: 0.25rem;
}
.ml-pagination__totals {
    margin: 0;
    font-family: var(--sans, sans-serif);
    font-size: var(--step-1s, 0.85rem);
    color: var(--muted, #675e51);
    text-align: center;
}

/* Welk-sterrenbeeld tool: datumtabel */
.sign-date-table { width: 100%; max-width: 42rem; border-collapse: collapse; font-size: var(--step-0); }
.sign-date-table th, .sign-date-table td { text-align: left; padding: .55rem .9rem .55rem 0; border-bottom: 1px solid color-mix(in oklab, currentColor 14%, transparent); }
.sign-date-table th { font-weight: 600; color: var(--muted); font-size: var(--step-1s); }

/* === Sterrenbeelden compatibiliteit — 2026-08-04 =============================
 * Hub-picker, 12x12 matrix, sub-page cards. Gebruikt aurora-tokens.
 */

/* Picker (2 dropdowns) */
.compat-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    max-width: 44rem;
    margin: 1.5rem 0 2.5rem 0;
}
.compat-picker label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-family: var(--sans, sans-serif);
    font-size: 0.9rem;
    color: var(--muted, #675e51);
    flex: 1;
    min-width: 10rem;
}
.compat-picker select {
    padding: 0.55rem 0.75rem;
    font-family: var(--serif, Georgia, serif);
    font-size: 1rem;
    border: 1px solid var(--rule, #d9cfbf);
    border-radius: 6px;
    background: var(--surface, #fff);
    color: var(--fg, #2b2419);
}

/* 12x12 matrix */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.compat-matrix-wrap {
    overflow-x: auto;
    margin: 1.5rem 0;
    -webkit-overflow-scrolling: touch;
}
.compat-matrix {
    border-collapse: separate;
    border-spacing: 3px;
    margin: 0 auto;
    font-family: var(--sans, sans-serif);
}
.compat-matrix th,
.compat-matrix td {
    text-align: center;
    vertical-align: middle;
    font-size: 0.8rem;
}
.compat-matrix thead th {
    padding: 0.4rem 0.3rem;
    font-weight: 500;
    color: var(--muted, #675e51);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.compat-matrix tbody th {
    padding: 0.4rem 0.7rem 0.4rem 0.3rem;
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
}
.compat-matrix tbody th a {
    color: var(--fg, #2b2419);
    text-decoration: none;
}
.compat-matrix tbody th a:hover {
    color: var(--accent, oklch(0.72 0.13 55));
}
.compat-cell {
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border-radius: 4px;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.compat-cell a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(43, 36, 25, 0.75);
    text-decoration: none;
    font-size: 1.05rem;
}
.compat-cell:hover {
    transform: scale(1.08);
    filter: brightness(1.06);
}

.compat-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text, rgba(43, 36, 25, 0.85));
}
.compat-symbol svg {
    display: block;
}

/* Blauw/wit/goud, afgeleid van de themakleuren: --celest is Patricks
   hemelsblauw, --star het goud. Zo volgen de cellen automatisch het
   licht- en donkerthema. Klassenamen zijn categorie-codes:
   groen=harmonieus, paars=magnetisch, rood=uitdagend, geel=comfort,
   grijs=neutraal (geen vlak, alleen een hairline). */
.compat-groen { background: color-mix(in oklch, var(--celest, oklch(0.62 0.13 220)) 34%, transparent); }
.compat-paars { background: color-mix(in oklch, var(--celest, oklch(0.62 0.13 220)) 72%, transparent); }
.compat-rood  { background: color-mix(in oklch, var(--celest, oklch(0.62 0.13 220)) 16%, transparent); }
.compat-geel  { background: color-mix(in oklch, var(--star,   oklch(0.60 0.12 85))  38%, transparent); }
.compat-grijs { background: transparent; box-shadow: inset 0 0 0 1px var(--hairline, rgba(43, 36, 25, 0.12)); }

/* Legenda */
.compat-legend { margin: 2rem 0; max-width: 44rem; }
.compat-legend ul { list-style: none; padding: 0; margin: 0.5rem 0 0 0; display: flex; flex-direction: column; gap: 0.5rem; }
.compat-legend li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-family: var(--sans, sans-serif);
    font-size: 0.9rem;
    color: var(--fg, #2b2419);
    line-height: 1.45;
}
.compat-swatch {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 3px;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

/* Sign-page: jump-nav + cards */
.compat-jumpnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1.5rem 0 2rem 0;
}
.compat-jumpnav a {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    font-family: var(--sans, sans-serif);
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--fg, #2b2419);
    border-radius: 3px;
    border: 1px solid transparent;
}
.compat-jumpnav a:hover { border-color: var(--rule, #d9cfbf); }

/* Tags volgen hetzelfde blauw/wit/goud-palet als de matrix, iets lichter
   omdat er tekst overheen loopt. */
.compat-groen-tag { background: color-mix(in oklch, var(--celest, oklch(0.62 0.13 220)) 26%, transparent); }
.compat-paars-tag { background: color-mix(in oklch, var(--celest, oklch(0.62 0.13 220)) 52%, transparent); }
.compat-rood-tag  { background: color-mix(in oklch, var(--celest, oklch(0.62 0.13 220)) 13%, transparent); }
.compat-geel-tag  { background: color-mix(in oklch, var(--star,   oklch(0.60 0.12 85))  30%, transparent); }
.compat-grijs-tag { background: transparent; box-shadow: inset 0 0 0 1px var(--hairline, rgba(43, 36, 25, 0.12)); }

.compat-cards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 2rem 0;
}
.compat-card {
    background: var(--surface, #fff);
    border: 1px solid var(--rule, #d9cfbf);
    border-radius: 8px;
    padding: 1.25rem 1.4rem;
    scroll-margin-top: 5rem;
}
.compat-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}
.compat-card-title {
    font-family: var(--serif, Georgia, serif);
    font-size: 1.3rem;
    line-height: 1.3;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    color: var(--fg, #2b2419);
}
.compat-card-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--accent, oklch(0.72 0.13 55));
}
.compat-plus {
    font-family: var(--serif, Georgia, serif);
    color: var(--muted, #8b8071);
    font-weight: normal;
}
.compat-tag {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    font-family: var(--sans, sans-serif);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    border-radius: 3px;
    color: var(--fg, #2b2419);
    white-space: nowrap;
}
.compat-blurb {
    font-family: var(--serif, Georgia, serif);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--fg, #2b2419);
    margin: 0 0 0.6rem 0;
}
.compat-meta {
    font-family: var(--sans, sans-serif);
    font-size: 0.83rem;
    color: var(--muted, #8b8071);
    margin: 0;
}
.compat-meta a { color: var(--muted, #8b8071); text-decoration: underline; text-decoration-color: var(--rule, #d9cfbf); }
.compat-meta a:hover { color: var(--accent, oklch(0.72 0.13 55)); }

/* FAQ-details styling die aansluit bij bestaand */
.faq-block { max-width: 44rem; margin: 1rem 0 2rem 0; }
.faq-block .faq-item {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--rule, #d9cfbf);
}
.faq-block .faq-item summary {
    cursor: pointer;
    font-family: var(--serif, Georgia, serif);
    font-size: 1.05rem;
    color: var(--fg, #2b2419);
    padding: 0.3rem 0;
}
.faq-block .faq-item[open] summary { color: var(--accent, oklch(0.72 0.13 55)); }
.faq-block .faq-item p {
    margin: 0.6rem 0 0.2rem 0;
    color: var(--muted, #675e51);
    line-height: 1.55;
    font-family: var(--sans, sans-serif);
    font-size: 0.95rem;
}

/* Sign-title-block (hergebruik) */
.sign-title-block {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin: 1rem 0 1.5rem 0;
    flex-wrap: wrap;
}
.sign-title-block .glyph {
    color: var(--accent, oklch(0.72 0.13 55));
    flex-shrink: 0;
}

/* ==========================================================================
   Tools: kaart van de dag + levenspadgetal
   Bewust een eigen .tool-resultaat in plaats van .ascendant-resultaat, want
   die klasse heeft geen stijl en zit al op twee bestaande pagina's.
   ========================================================================== */

.tool-resultaat {
    margin: 2.5rem 0 0 0;
    padding: 1.75rem;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: var(--surface);
}
.tool-resultaat .eyebrow {
    color: var(--accent);
    font-family: var(--sans);
    font-size: var(--step-1s);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.tool-resultaat .section-title { margin-top: 0.2rem; }

/* Titelregel binnen een toolresultaat: dezelfde opzet als .sign-title-block,
   maar zonder het 200px-medaillon en de scheidingslijn van de tekenpagina's. */
.tool-kop {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    align-items: center;
    margin: 0.4rem 0 1.25rem;
}
.tool-kop .meta {
    margin: 0.2rem 0 0 0;
    color: var(--muted);
    font-family: var(--sans);
    font-size: var(--step-1);
    letter-spacing: 0.04em;
}
@media (max-width: 640px) {
    .tool-kop { grid-template-columns: auto 1fr; gap: 0.9rem; }
}

/* Het getal of kaartnummer in de titelregel, op de plek van de sterrenbeeld-glyph */
.levenspad-cijfer,
.dagkaart-nummer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    font-family: var(--serif-display);
    font-size: var(--step-4);
    line-height: 1;
    color: var(--accent);
}

/* Rekenstappen onder het levenspadgetal */
.levenspad-som {
    margin: 1.5rem 0;
    padding: 1rem 1.2rem;
    border-left: 2px solid var(--accent);
    background: var(--bg);
    border-radius: 0 10px 10px 0;
}
.levenspad-som .som-titel {
    margin: 0 0 0.6rem 0;
    font-family: var(--sans);
    font-size: var(--step-1s);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.levenspad-som .som-regel {
    margin: 0.25rem 0;
    font-family: var(--sans);
    font-size: var(--step-0);
    color: var(--text);
}
.levenspad-som .som-regel .stap {
    display: inline-block;
    min-width: 4.5rem;
    color: var(--dim);
    font-size: var(--step-1);
}
.levenspad-som .som-uitleg {
    margin: 0.7rem 0 0 0;
    color: var(--muted);
    font-size: var(--step-1);
}

/* De twaalf uitgeschreven levenspadgetallen */
.levenspad-blok {
    margin: 2rem 0;
    padding-top: 1.2rem;
    border-top: 1px solid var(--hairline);
    scroll-margin-top: 2rem;
}
.levenspad-blok h3 {
    margin: 0 0 0.6rem 0;
    font-family: var(--serif-display);
    font-size: var(--step-2);
    color: var(--text);
}
.levenspad-blok p { max-width: 42rem; }

/* Trekscherm van de dagkaart */
.dagkaart-trek {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin: 2.5rem 0;
    padding: 2rem 1.5rem;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: var(--surface);
    text-align: center;
}
.dagkaart-rug {
    position: relative;
    width: 132px;
    height: 198px;
    border: 1px solid var(--accent);
    border-radius: 10px;
    background:
        radial-gradient(circle at 50% 42%, color-mix(in oklch, var(--accent) 22%, transparent), transparent 62%),
        var(--bg);
}
.dagkaart-rug::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid color-mix(in oklch, var(--accent) 45%, transparent);
    border-radius: 6px;
}
.dagkaart-rug .ster {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    transform: translate(-50%, -50%);
    background: var(--accent);
    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
    opacity: 0.85;
}
.dagkaart-vraag {
    max-width: 26rem;
    margin: 0 auto 1rem auto;
    color: var(--muted);
    font-size: var(--step-0);
}
.dagkaart-trek form { width: 100%; }
.dagkaart-trek .channel-btn { display: inline-flex; }

/* Uitnodiging om een account te maken, alleen voor uitgelogde bezoekers */
.dagkaart-account {
    margin: 2rem 0 0 0;
    padding: 1.2rem 1.4rem;
    border: 1px dashed var(--hairline);
    border-radius: 12px;
}
.dagkaart-account p {
    margin: 0 0 0.9rem 0;
    max-width: 40rem;
    color: var(--muted);
}
.dagkaart-account .pill { margin-right: 0.5rem; }

@media (max-width: 640px) {
    .tool-resultaat { padding: 1.2rem; }
    .levenspad-cijfer,
    .dagkaart-nummer { width: 64px; height: 64px; font-size: var(--step-3); }
    .dagkaart-rug { width: 108px; height: 162px; }
}

/* ==========================================================================
   Formuliervelden en het reviewformulier
   ========================================================================== */

/* De regel hierboven noemt alleen email en password, de types die er toen
   waren. Datum, tekst en textarea vielen daardoor terug op de browserstandaard
   en staken af tegen de rest. Nu delen ze dezelfde behandeling. */
.auth-card input[type="text"],
.auth-card input[type="date"],
.auth-card input[type="tel"],
.auth-card input[type="number"],
.auth-card textarea {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 0.5rem;
    padding: 0.65rem 0.9rem;
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--step-0);
}
.auth-card textarea {
    resize: vertical;
    min-height: 8rem;
    line-height: 1.55;
}
.auth-card textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.review-form .veld-uitleg {
    margin: 0.5rem 0 0 0;
    color: var(--dim);
    font-size: var(--step-1);
    line-height: 1.5;
}

/* ==========================================================================
   Het beoordelingsformulier
   ==========================================================================

   Twee formulieren delen deze opmaak: dat uit de uitnodigingsmail en het open
   formulier op het profiel. Wat hier verandert, verandert aan allebei.

   De toon is die van de rest van de site. Een warm vlak met een haarlijn
   eromheen, Garamond waar iemand proza schrijft, Inter alleen voor de kleine
   dienstteksten erboven. Iemand die net een gesprek heeft gehad vult geen
   formulier in, hij schrijft een briefje; dat mag je zien.

   De sterren staan op een rij en lopen van links vol. Nog steeds een gewone
   radiogroep, dus zonder javascript en met de pijltjes te bedienen. */

.review-form.auth-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 0.9rem;
    padding: 1.9rem 1.9rem 2.1rem;
    gap: 0;
    /* Een zweem van de accentkleur onder de kaart. Genoeg om hem van de
       achtergrond te tillen, te weinig om als slagschaduw op te vallen. */
    box-shadow:
        0 1px 2px color-mix(in oklch, var(--text) 7%, transparent),
        0 14px 34px -20px color-mix(in oklch, var(--accent) 40%, transparent);
}

.review-form.auth-card label {
    font-family: var(--sans);
    font-size: var(--step-1s);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 1.7rem;
}

/* De velden liggen op de paginakleur en niet op het vlak van de kaart, zodat
   ze een verdieping onder de kaart eromheen zitten. */
.review-form.auth-card input[type="text"],
.review-form.auth-card input[type="email"],
.review-form.auth-card textarea {
    background: var(--bg);
    border: 1px solid var(--hairline);
    border-radius: 0.6rem;
    padding: 0.8rem 1rem;
    margin-top: 0.5rem;
    transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

/* Wie hier schrijft, schrijft proza. Dus Garamond en niet Inter. */
.review-form.auth-card textarea {
    font-family: var(--serif-body);
    font-size: var(--step-1p);
    line-height: 1.7;
    min-height: 9.5rem;
}

.review-form.auth-card input[type="text"]::placeholder,
.review-form.auth-card textarea::placeholder {
    color: var(--dim);
    font-style: italic;
}

.review-form.auth-card input:focus,
.review-form.auth-card textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 20%, transparent);
}

/* ---- De sterrenrij ---- */

.review-form .sterren-keuze {
    margin: 0;
    padding: 0 0 1.6rem;
    border-bottom: 1px solid var(--hairline);
}

.review-form .sterren-keuze legend {
    font-family: var(--sans);
    font-size: var(--step-1s);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

/* In de opmaak staan de sterren van vijf naar één. Omgekeerd afbeelden zet ze
   voor het oog van laag naar hoog, en dan wijst de zusselector ~ precies naar
   de sterren links van de aangewezen ster. Daarmee vult de rij van links op
   zonder een regel javascript. */
.review-form .sterren-rij {
    flex-direction: row-reverse;
    justify-content: flex-end;
    position: relative;
    gap: 0.15rem;
    margin-top: 1rem;
}

.review-form .ster-optie {
    display: block;
    margin: 0;
    padding: 0.1rem;
    border: 0;
    border-radius: 0.4rem;
    background: none;
    line-height: 1;
}

.review-form .ster-optie:hover { border-color: transparent; }

/* Onzichtbaar maar wel aan te wijzen met de tabtoets, en de voorleessoftware
   leest hem gewoon voor. Daarom geen display:none. */
.review-form .ster-optie input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* De vijf tekens uit de opmaak wegzetten en er één ster voor in de plaats. */
.review-form .ster-tekens { font-size: 0; letter-spacing: 0; }

.review-form .ster-tekens::before {
    content: "☆";
    display: inline-block;
    font-size: var(--step-4);
    line-height: 1;
    color: var(--dim);
    transition: color 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}

/* De gekozen waarde vult de rij, maar alleen zolang er niet gewezen wordt.
   Zonder die :not(:hover) blijven de gekozen sterren staan terwijl je een
   lagere aanwijst, en dan telt de rij vier sterren waar je er twee bedoelt. */
.review-form .sterren-rij:not(:hover) .ster-optie:has(input:checked) .ster-tekens::before,
.review-form .sterren-rij:not(:hover) .ster-optie:has(input:checked) ~ .ster-optie .ster-tekens::before {
    content: "★";
    color: var(--star);
}

/* En waar je wel wijst, wint wat je aanwijst. */
.review-form .ster-optie:hover .ster-tekens::before,
.review-form .ster-optie:hover ~ .ster-optie .ster-tekens::before {
    content: "★";
    color: var(--star);
}

.review-form .ster-optie:hover .ster-tekens::before { transform: scale(1.12); }

.review-form .ster-optie:has(input:focus-visible) .ster-tekens::before {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 0.2rem;
}

/* "Goed", "Matig" en de rest blijven in de opmaak staan, want dat is de naam
   die de voorleessoftware bij elke ster noemt en waarop de keuze te bedienen
   is. Voor het oog zijn ze weg: vijf sterren zeggen het al. */
.review-form .ster-optie .ster-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---- De kleine dienstteksten ---- */

.review-form .veld-uitleg {
    margin: 0.55rem 0 0;
    color: var(--dim);
    font-family: var(--sans);
    font-size: var(--step-1);
    line-height: 1.6;
}

.review-form .auth-submit {
    margin-top: 2rem;
    padding: 0.8rem 1.4rem;
    font-family: var(--sans);
    letter-spacing: 0.04em;
}

@media (max-width: 640px) {
    .review-form.auth-card { padding: 1.4rem 1.2rem 1.7rem; }
    .review-form .ster-tekens::before { font-size: var(--step-3); }
}

/* ==========================================================================
   Podcast: overzicht, aflevering, speler en transcript
   ========================================================================== */

.podcast-lijst {
    list-style: none;
    margin: 2.5rem auto 0;
    padding: 0;
    max-width: 48rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.podcast-kaart {
    padding: 1.5rem;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: var(--surface);
    transition: border-color 0.2s var(--ease-out);
}
.podcast-kaart:hover { border-color: var(--accent); }
.podcast-kaart .eyebrow {
    margin: 0 0 0.3rem 0;
    color: var(--accent);
    font-family: var(--sans);
    font-size: var(--step-1s);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.podcast-kaart h2,
.podcast-kaart h3 {
    margin: 0 0 0.4rem 0;
    font-family: var(--serif-display);
    font-size: var(--step-2);
    font-weight: 400;
    line-height: 1.25;
}
.podcast-kaart h2 a,
.podcast-kaart h3 a { color: var(--text); text-decoration: none; }
.podcast-kaart h2 a:hover,
.podcast-kaart h3 a:hover { color: var(--accent); }
.podcast-kaart .meta {
    margin: 0;
    color: var(--muted);
    font-family: var(--sans);
    font-size: var(--step-1);
}
.podcast-kaart .samenvatting {
    margin: 0.9rem 0;
    color: var(--muted);
    line-height: 1.6;
}
.podcast-lijst.compact .podcast-kaart { padding: 1rem 1.2rem; }
.podcast-lijst.compact h3 { font-size: var(--step-1p); }

.podcast-leeg {
    max-width: 34rem;
    margin: 3rem auto;
    padding: 2rem;
    border: 1px dashed var(--hairline);
    border-radius: 14px;
    text-align: center;
}
.podcast-leeg h2 {
    margin: 0 0 0.8rem 0;
    font-family: var(--serif-display);
    font-size: var(--step-2);
    font-weight: 400;
}
.podcast-leeg p { color: var(--muted); line-height: 1.6; }

.podcast-abonneren {
    max-width: 48rem;
    margin: 2.5rem auto 0;
    padding: 1.4rem 1.6rem;
    border: 1px solid var(--hairline);
    border-radius: 12px;
}
.podcast-abonneren h2 {
    margin: 0 0 0.5rem 0;
    font-family: var(--serif-display);
    font-size: var(--step-1p);
    font-weight: 400;
}
.podcast-abonneren p { margin: 0.3rem 0; color: var(--muted); font-size: var(--step-1); }
.podcast-abonneren .feed-adres code {
    display: block;
    margin-top: 0.5rem;
    padding: 0.6rem 0.8rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 0.5rem;
    color: var(--text);
    font-size: var(--step-1);
    overflow-x: auto;
    white-space: nowrap;
}

.podcast-meta {
    color: var(--muted);
    font-family: var(--sans);
    font-size: var(--step-1);
}

.podcast-speler {
    margin: 1.8rem 0;
    max-width: 42rem;
}
.podcast-speler audio {
    width: 100%;
    border-radius: 0.5rem;
}

/* De video laadt pas na een klik, dus dit blok is tot dat moment een knop. */
.podcast-video {
    margin: 1.8rem 0;
    max-width: 42rem;
}
.podcast-video .video-start {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    width: 100%;
    padding: 2.5rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--step-0);
    cursor: pointer;
    transition: border-color 0.2s var(--ease-out);
}
.podcast-video .video-start:hover { border-color: var(--accent); }
.podcast-video .driehoek {
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 15px solid var(--accent);
}
.podcast-video .video-uitleg {
    margin: 0.6rem 0 0 0;
    color: var(--dim);
    font-size: var(--step-1);
    line-height: 1.5;
}
.podcast-video.geladen {
    position: relative;
    aspect-ratio: 16 / 9;
}
.podcast-video.geladen iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 12px;
}

.podcast-transcript {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--hairline);
}
.podcast-transcript .transcript-tekst {
    margin-top: 1.5rem;
    max-width: 42rem;
    font-family: var(--serif-body);
    font-size: var(--step-0);
    line-height: 1.8;
}
.podcast-transcript .transcript-tekst p { margin: 0 0 1.1rem 0; }

/* Blok op de homepage, onder de vouw */
.home-podcast {
    max-width: 48rem;
    margin: 4rem auto 0;
    padding: 1.8rem;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: var(--surface);
}
.home-podcast .eyebrow {
    margin: 0 0 0.4rem 0;
    color: var(--accent);
    font-family: var(--sans);
    font-size: var(--step-1s);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.home-podcast h2 {
    margin: 0 0 0.6rem 0;
    font-family: var(--serif-display);
    font-size: var(--step-2);
    font-weight: 400;
}
.home-podcast p { margin: 0 0 1rem 0; color: var(--muted); line-height: 1.6; }

@media (max-width: 640px) {
    .podcast-kaart { padding: 1.1rem; }
    .podcast-kaart h2 { font-size: var(--step-1p); }
    .podcast-abonneren { padding: 1.1rem; }
    .home-podcast { padding: 1.2rem; }
}


/* Eigen woorden en taal van de consulent (18-aug-2026). Bewust rustiger dan de
   specialisme-chips: die zijn navigatie, dit is kleur bij het profiel. */
.consultant-card .stijlwoorden {
    margin: 0 0 0.75rem;
    font-family: var(--sans);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--muted);
}
.consultant-card .stijlwoorden .talen {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.45rem;
    border-radius: 4px;
    border: 1px solid var(--hairline);
    color: var(--dim);
    font-size: 0.75rem;
    white-space: nowrap;
}
.consultant-card .stijlwoorden:empty { display: none; }

.profiel-specialismen { margin: 2rem 0; }
.profiel-specialismen .werkwijze {
    margin: 0.75rem 0 0;
    font-family: var(--sans);
    font-size: 0.875rem;
    color: var(--muted);
}
.profiel-specialismen .werkwijze.talen { color: var(--dim); }

/* Introductievideo op het consulentprofiel (21-09-2026).
   Een vaste maximale breedte, want een video van 1080 pixels breed duwt anders
   de hele kolom uit elkaar. Zwarte achtergrond zodat het frame niet flikkert
   tussen wit en beeld terwijl hij laadt. */
.profiel-introvideo { margin: 2rem 0; }
.profiel-introvideo .introvideo {
    display: block;
    width: 100%;
    max-width: 480px;
    border-radius: 12px;
    background: #000;
}

@media (max-width: 640px) {
    .consultant-card .stijlwoorden .talen { margin-left: 0; margin-top: 0.35rem; }
}

/* ------------------------------------------------------------------ */
/* De videokamer (videoconsult). Stond tot 08-09-2026 in
   resources/css/app.css, maar die wordt door geen enkele pagina geladen:
   de layout linkt dit bestand en @vite('resources/js/app.js') zonder css.
   Gemeten met twee browsers: het eigen beeld stond als los blok linksboven
   en het beeld van de ander liep uit het kader. Daarom staan de regels
   hier, waar ze wel aankomen. */
/* De videokamer. Het beeld van de ander vult de ruimte, het eigen beeld staat
   klein in de hoek; dat is wat mensen van elk ander videogesprek gewend zijn en
   daar wijken we niet vanaf. Op een telefoon staan ze onder elkaar, want naast
   elkaar wordt het beeld van de ander te klein om een gezicht in te lezen. */
.videokamer {
    position: relative;
    /* .cta-bel is een flex-kolom met align-items: flex-start; zonder deze
       breedte krimpt het kader tot de maat van het binnenkomende beeld
       (gemeten: 310 px in een kaart van 770 px). */
    width: 100%;
    background: #14110d;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}
.videokamer-ander,
.videokamer-ander video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.videokamer-eigen {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 28%;
    max-width: 200px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.videokamer-eigen video {
    width: 100%;
    height: auto;
    display: block;
    /* Jezelf zie je gespiegeld, zoals in een spiegel. De ander niet. */
    transform: scaleX(-1);
}
@media (max-width: 600px) {
    .videokamer { aspect-ratio: 3 / 4; }
    .videokamer-eigen { width: 34%; }
}

/* De regel met het tarief en het saldo boven de kamer. Stond tot 11-09-2026 op
   .rating, en die staat binnen .consultant-page op display:flex omdat het daar
   een rij met sterren is. Hier is het een lopende zin, en dan werd elk stukje
   tekst een los blok naast elkaar. Vandaar een eigen klasse. */
.videokamer-saldo {
    display: block;
    font-family: var(--sans);
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 1rem;
    max-width: 46ch;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
    .videokamer-saldo { font-size: var(--step--1); max-width: none; }
}