/* ============================================================
   MEDIUMLOUNGE THEMA — "nieuwe tijd"
   Spiritueel & hedendaags: diepe indigo-nacht, mystiek violet,
   hemels goud. Laadt NA aurora.css en overschrijft alleen tokens
   + een handvol sfeer-elementen. Rollback: link-regel in de
   layout verwijderen.
   ============================================================ */

:root {
    /* Nacht: diep indigo-violet i.p.v. warm bruin */
    --bg:       oklch(0.17 0.045 295);
    --surface:  oklch(0.22 0.050 295);
    --hairline: oklch(0.33 0.040 295);
    --text:     oklch(0.94 0.015 300);
    --muted:    oklch(0.74 0.030 300);
    --dim:      oklch(0.56 0.030 295);

    /* Mystiek violet als hoofdaccent, goud voor sterren/hemel */
    --accent:   oklch(0.74 0.140 305);
    --signal:   oklch(0.68 0.150 25);
    --star:     oklch(0.82 0.110 85);

    /* Celest: helder hemelsblauw (Patricks swatch) — spaarzaam gebruiken */
    --celest:   oklch(0.78 0.125 220);
}

@media (prefers-color-scheme: light) {
    :root {
        /* Dag: lavendel-wit, zacht en licht */
        --bg:       oklch(0.975 0.010 300);
        --surface:  oklch(0.935 0.015 300);
        --hairline: oklch(0.840 0.020 300);
        --text:     oklch(0.240 0.040 295);
        --muted:    oklch(0.460 0.035 298);
        --dim:      oklch(0.640 0.025 298);
        --accent:   oklch(0.500 0.170 300);
        --signal:   oklch(0.500 0.160 25);
        --star:     oklch(0.600 0.120 85);
        --celest:   oklch(0.620 0.130 220);
    }
}

/* ── Bredere desktop-kolommen (voelde als mobiel op groot scherm) ── */

.page { max-width: 52rem; }
.page.wide { max-width: 75rem; }

/* Blokken met eigen max-breedte weer netjes gecentreerd in de bredere kolom */
.page .intro,
.landing-steps,
.bundles,
.landing-faq {
    margin-inline: auto;
}

/* Hero-tekst (hemelstand + intro) gecentreerd */
.home-hero,
.home-hero h1,
.home-hero .intro {
    text-align: center;
}

/* Sectie-labels ("Kies jouw sterrenbeeld" e.d.) gecentreerd
   (.eyebrow is een flexbox — daarom justify-content, niet text-align) */
.page > .eyebrow {
    justify-content: center;
    text-align: center;
}

/* ── Lange lijsten: twee kolommen naast elkaar op desktop ───── */

@media (min-width: 700px) {
    .sign-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 3rem;
    }
}

/* De consulentenkaarten stonden hier tot 12-09-2026 in twee kolommen. Dat
   houdt geen stand meer. De pagina is 75rem breed, een kolom dus 586px, en na
   de avatar blijft er 476px over voor de kanaalknoppen. Zodra een consulent
   vijf kanalen aanbiedt is die rij 938px. Omdat 1fr niet smaller wordt dan
   zijn eigen inhoud, rekte de linkerkolom mee op en schoof de tweede
   consulent het scherm uit. Gemeld door Patrick op 12-09-2026.

   Krapper zetten helpt niet: zonder icoon en op 0,75rem blijft de rij 807px,
   en in het Duits en het Zweeds staat er meer. Op een hele regel past hij in
   een keer, en met drie consulenten op de voorpagina levert een tweede kolom
   ook weinig op. */
.consultant-list {
    grid-template-columns: minmax(0, 1fr);
}

/* minmax(0, ...) in plaats van 1fr, ook op de kaart zelf. Zonder die nul mag
   een kind dat niet past de kolom oprekken in plaats van zelf af te breken,
   en dan loopt de hele lijst het scherm uit in plaats van alleen dat ene
   kind. Dat is precies wat hier gebeurde. De 3,5rem hieronder hoort bij de
   media-query op 640px in aurora.css; dit bestand laadt daarna, dus die moet
   mee. */
.consultant-card {
    grid-template-columns: 5rem minmax(0, 1fr);
}

@media (max-width: 640px) {
    .consultant-card {
        grid-template-columns: 3.5rem minmax(0, 1fr);
    }
}

/* ── Sterrenveld — subtiel, alleen sfeer ────────────────────── */

body {
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 12% 18%, oklch(0.9 0.05 300 / 0.55) 50%, transparent 51%),
        radial-gradient(1px 1px at 78% 9%,  oklch(0.9 0.08 85  / 0.50) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 55% 30%, oklch(0.85 0.10 220 / 0.40) 50%, transparent 51%),
        radial-gradient(1px 1px at 30% 55%, oklch(0.9 0.08 85  / 0.35) 50%, transparent 51%),
        radial-gradient(1px 1px at 88% 45%, oklch(0.85 0.10 220 / 0.45) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 8% 80%,  oklch(0.9 0.08 85  / 0.30) 50%, transparent 51%),
        radial-gradient(1px 1px at 65% 72%, oklch(0.9 0.05 300 / 0.35) 50%, transparent 51%),
        radial-gradient(1px 1px at 42% 92%, oklch(0.9 0.08 85  / 0.30) 50%, transparent 51%);
    opacity: 0.7;
}

@media (prefers-color-scheme: light) {
    body::before { opacity: 0.25; }
}

/* ── Header als eigen paarse band (met hemelse gloed erin) ──── */

header.brand {
    position: relative;
    background:
        radial-gradient(ellipse 55% 85% at 50% 12%,
            oklch(0.48 0.13 305 / 0.30),
            oklch(0.55 0.11 220 / 0.10) 55%,
            transparent 78%),
        linear-gradient(180deg, oklch(0.26 0.065 297), oklch(0.20 0.050 295));
    border-bottom: 1px solid oklch(0.38 0.06 300);
}

@media (prefers-color-scheme: light) {
    header.brand {
        background:
            radial-gradient(ellipse 55% 85% at 50% 12%,
                oklch(0.78 0.09 305 / 0.45),
                oklch(0.82 0.07 220 / 0.15) 55%,
                transparent 78%),
            linear-gradient(180deg, oklch(0.875 0.050 300), oklch(0.915 0.035 300));
        border-bottom: 1px solid oklch(0.80 0.045 300);
    }
}

/* ── Wordmark: gouden ster-punt + zachte gradient ───────────── */

.brand .wordmark {
    background: linear-gradient(105deg, var(--text) 55%, var(--accent) 85%, var(--star));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.brand .wordmark:hover {
    background: linear-gradient(105deg, var(--accent), var(--celest));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── Celest-accenten (Patricks hemelsblauw, spaarzaam) ──────── */

/* Tekst-selectie */
::selection { background: oklch(0.78 0.125 220 / 0.30); }

/* Eyebrow-regels: het kleine lijntje + label in hemelsblauw */
.eyebrow { color: var(--celest); }

/* Vandaag-teaser op de teken-pagina's: blauwe kantlijn */
.today-teaser { border-left-color: var(--celest); }

/* Aanwezigheids-bolletje "Nu bereikbaar": hemelsblauw i.p.v. groen */
.presence.on { color: var(--celest); }
.presence.on .dot { background: var(--celest); }

/* Link-hover in navigatie */
.brand nav a:hover { color: var(--celest); }

/* ── Sterrenbeeld-glyphs: zwevend hologram (direct zichtbaar) ── */

.sign-list .sign-glyph {
    position: relative;
    display: grid;
    place-items: center;
    padding-bottom: 8px;
}

/* Interstellar-put: STILSTAANDE schijf, alleen het licht erin stroomt
   naar het midden (lichtkern-laag krimpt/groeit via background-size) */
.sign-list .sign-glyph::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 88px;
    height: 88px;
    transform: translate(-50%, -52%);
    border-radius: 50%;
    background-image:
        /* Gouden glans-sluier: dicht bovenin, dunt uit naar onder */
        linear-gradient(168deg,
            oklch(0.90 0.095 88 / 0.26) 0%,
            oklch(0.88 0.090 88 / 0.12) 32%,
            oklch(0.88 0.090 88 / 0.04) 52%,
            transparent 68%),
        /* Goudstof: veel spikkels boven, steeds minder naar beneden */
        radial-gradient(1.3px 1.3px at 30% 10%, oklch(0.92 0.10 88 / 0.85) 50%, transparent 51%),
        radial-gradient(1px 1px at 55% 7%,  oklch(0.92 0.10 88 / 0.75) 50%, transparent 51%),
        radial-gradient(1.2px 1.2px at 72% 16%, oklch(0.92 0.10 88 / 0.70) 50%, transparent 51%),
        radial-gradient(1px 1px at 42% 20%, oklch(0.92 0.10 88 / 0.65) 50%, transparent 51%),
        radial-gradient(1px 1px at 20% 26%, oklch(0.92 0.10 88 / 0.55) 50%, transparent 51%),
        radial-gradient(1.1px 1.1px at 63% 30%, oklch(0.92 0.10 88 / 0.50) 50%, transparent 51%),
        radial-gradient(1px 1px at 80% 42%, oklch(0.92 0.10 88 / 0.35) 50%, transparent 51%),
        radial-gradient(1px 1px at 34% 50%, oklch(0.92 0.10 88 / 0.25) 50%, transparent 51%),
        radial-gradient(1px 1px at 58% 66%, oklch(0.92 0.10 88 / 0.15) 50%, transparent 51%),
        radial-gradient(circle,
            oklch(0.55 0.055 265 / 0.28) 0%,
            oklch(0.45 0.050 270 / 0.15) 40%,
            transparent 60%),
        radial-gradient(circle at 50% 32%,
            oklch(0.37 0.045 272 / 0.92) 0%,
            oklch(0.28 0.042 280 / 0.94) 52%,
            oklch(0.23 0.038 286 / 0.92) 70%,
            transparent 75%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 135% 135%, 100% 100%;
    box-shadow:
        inset 0 1px 1px oklch(0.90 0.02 280 / 0.14),
        inset 0 -8px 16px oklch(0.10 0.03 290 / 0.35);
    animation: none;
    pointer-events: none;
}

.sign-list .sign-glyph svg {
    position: relative;
    z-index: 1;
    color: oklch(0.86 0.060 88);
    transform: perspective(600px) rotateX(8deg);
    filter: drop-shadow(0 1px 3px oklch(0.10 0.03 290 / 0.5));
    transition: color 0.35s var(--ease-out), filter 0.35s var(--ease-out);
    will-change: transform;
}

/* Subtiele licht-ademing in het satijn — de schijf staat stil */
@keyframes kern-instroom {
    0%, 100% { background-size: 135% 135%, 100% 100%; }
    50%      { background-size: 65% 65%, 100% 100%; }
}

/* Hover: de nevel-schijf wervelt mee (aurora-strepen draaien rond) */
@keyframes put-roteer {
    from { transform: translate(-50%, -52%) rotate(0deg); }
    to   { transform: translate(-50%, -52%) rotate(360deg); }
}

/* Tweede goudstof-laag: pulseert in helderheid = flikkerende sterretjes (TEST) */
.sign-list .sign-glyph::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 88px;
    height: 88px;
    transform: translate(-50%, -52%);
    border-radius: 50%;
    background-image:
        radial-gradient(1.3px 1.3px at 46% 12%, oklch(0.94 0.10 88 / 0.9) 50%, transparent 51%),
        radial-gradient(1px 1px at 66% 9%,  oklch(0.94 0.10 88 / 0.8) 50%, transparent 51%),
        radial-gradient(1.2px 1.2px at 25% 18%, oklch(0.94 0.10 88 / 0.75) 50%, transparent 51%),
        radial-gradient(1px 1px at 82% 24%, oklch(0.94 0.10 88 / 0.6) 50%, transparent 51%),
        radial-gradient(1px 1px at 52% 34%, oklch(0.94 0.10 88 / 0.5) 50%, transparent 51%),
        radial-gradient(1px 1px at 30% 42%, oklch(0.94 0.10 88 / 0.35) 50%, transparent 51%),
        radial-gradient(1px 1px at 70% 56%, oklch(0.94 0.10 88 / 0.2) 50%, transparent 51%);
    opacity: 0.25;
    pointer-events: none;
}

.sign-title-block .glyph::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -52%);
    border-radius: 50%;
    background-image:
        radial-gradient(2.8px 2.8px at 46% 12%, oklch(0.94 0.10 88 / 0.9) 50%, transparent 51%),
        radial-gradient(2.2px 2.2px at 66% 9%,  oklch(0.94 0.10 88 / 0.8) 50%, transparent 51%),
        radial-gradient(2.6px 2.6px at 25% 18%, oklch(0.94 0.10 88 / 0.75) 50%, transparent 51%),
        radial-gradient(2.2px 2.2px at 82% 24%, oklch(0.94 0.10 88 / 0.6) 50%, transparent 51%),
        radial-gradient(2.2px 2.2px at 52% 34%, oklch(0.94 0.10 88 / 0.5) 50%, transparent 51%),
        radial-gradient(2.2px 2.2px at 30% 42%, oklch(0.94 0.10 88 / 0.35) 50%, transparent 51%),
        radial-gradient(2.2px 2.2px at 70% 56%, oklch(0.94 0.10 88 / 0.2) 50%, transparent 51%);
    opacity: 0.25;
    pointer-events: none;
}

@keyframes twinkel {
    0%, 100% { opacity: 0.15; }
    50%      { opacity: 1; }
}

/* ── Gimbal: extra binnenring die voorover tuimelt (TEST) ───── */

.sign-glyph .gimbal,
.sign-title-block .glyph .gimbal {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 76px;
    height: 76px;
    transform: translate(-50%, -52%) perspective(600px) rotate(45deg) rotateX(24deg);
    border-radius: 50%;
    border: 1.2px solid oklch(0.86 0.06 88 / 0.5);
    z-index: 1;
    pointer-events: none;
}

.gimbal.gimbal-groot {
    width: 172px;
    height: 172px;
    border-width: 1.5px;
}

@media (prefers-reduced-motion: no-preference) {
    .sign-glyph .gimbal { animation: gimbal-draai 10s linear infinite; }
    .sign-title-block .glyph .gimbal { animation: gimbal-draai 15s linear infinite; }
}

/* Tuimelt om een diagonale as (45 graden gekanteld) */
@keyframes gimbal-draai {
    0%   { transform: translate(-50%, -52%) perspective(600px) rotate(45deg) rotateX(0deg); }
    100% { transform: translate(-50%, -52%) perspective(600px) rotate(45deg) rotateX(360deg); }
}

/* Het medaillon slingert gyroscopisch tegengesteld, maar blijft altijd
   breed genoeg om het zegel te omvatten (max ±14 graden) */
@keyframes tegendraai {
    0%, 100% { transform: translate(-50%, -52%) perspective(600px) rotateX(6deg)  rotateY(14deg); }
    50%      { transform: translate(-50%, -52%) perspective(600px) rotateX(-2deg) rotateY(-14deg); }
}

/* Continue zweving + mee-ademende schaduw, per rij verspringend */
@media (prefers-reduced-motion: no-preference) {
    .sign-list .sign-glyph svg { animation: gyro 12s linear infinite; }
    .sign-title-block .glyph svg { animation: gyro-groot 17s linear infinite; }
    .sign-list .sign-glyph::before { animation: tegendraai 14s ease-in-out infinite; }
    .sign-title-block .glyph::before { animation: tegendraai 19s ease-in-out infinite; }
    .sign-list .sign-glyph::after { animation: twinkel 2.6s ease-in-out infinite, tegendraai 14s ease-in-out infinite; }
    .sign-title-block .glyph::after { animation: twinkel 3.2s ease-in-out infinite, tegendraai 19s ease-in-out infinite; }
    .sign-list li:nth-child(3n+2) .sign-glyph svg,
    .sign-list li:nth-child(3n+2) .sign-glyph::after,
    .sign-list li:nth-child(3n+2) .sign-glyph::before { animation-delay: -4s; }
    .sign-list li:nth-child(3n) .sign-glyph svg,
    .sign-list li:nth-child(3n) .sign-glyph::after,
    .sign-list li:nth-child(3n) .sign-glyph::before { animation-delay: -8s; }
}

@media (prefers-reduced-motion: reduce) {
    .sign-list .sign-glyph::before { animation: none; opacity: 0.7; }
}

/* Gyroscopisch: continue Y-rotatie met precessie-wiebel op de X-as */
@keyframes gyro {
    0%   { transform: perspective(600px) rotateX(8deg)  rotateY(0deg); }
    25%  { transform: perspective(600px) rotateX(-3deg) rotateY(90deg); }
    50%  { transform: perspective(600px) rotateX(8deg)  rotateY(180deg); }
    75%  { transform: perspective(600px) rotateX(-3deg) rotateY(270deg); }
    100% { transform: perspective(600px) rotateX(8deg)  rotateY(360deg); }
}

@keyframes gyro-groot {
    0%   { transform: perspective(700px) rotateX(6deg)  rotateY(0deg); }
    25%  { transform: perspective(700px) rotateX(-2deg) rotateY(90deg); }
    50%  { transform: perspective(700px) rotateX(6deg)  rotateY(180deg); }
    75%  { transform: perspective(700px) rotateX(-2deg) rotateY(270deg); }
    100% { transform: perspective(700px) rotateX(6deg)  rotateY(360deg); }
}

@keyframes holo-plas {
    0%, 100% { opacity: 1; scale: 1; }
    50%      { opacity: 0.55; scale: 0.82 1; }
}

/* Hover: het sterrenbeeld licht op in warm goud en draait rond */
.sign-list li a:hover .sign-glyph svg {
    color: oklch(0.90 0.10 90);
    filter: drop-shadow(0 0 6px oklch(0.90 0.09 90 / 0.7))
            drop-shadow(0 0 16px oklch(0.78 0.125 220 / 0.5));
}


/* Chips met mini-glyph (sterrenbeeld-linkjes) */
.chip-glyph {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.chip-glyph svg {
    color: var(--accent);
    transition: color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
    flex-shrink: 0;
}

.chip-glyph:hover svg {
    color: var(--star);
    transform: scale(1.15) rotate(-6deg);
}

/* Grote glyph op de teken-pagina's: zelfde hologram-behandeling */
.sign-title-block .glyph {
    position: relative;
}

.sign-title-block .glyph::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -52%);
    border-radius: 50%;
    background-image:
        linear-gradient(168deg,
            oklch(0.90 0.095 88 / 0.28) 0%,
            oklch(0.88 0.090 88 / 0.13) 32%,
            oklch(0.88 0.090 88 / 0.05) 52%,
            transparent 68%),
        radial-gradient(3px 3px at 30% 10%, oklch(0.92 0.10 88 / 0.85) 50%, transparent 51%),
        radial-gradient(2.2px 2.2px at 55% 7%,  oklch(0.92 0.10 88 / 0.75) 50%, transparent 51%),
        radial-gradient(2.7px 2.7px at 72% 16%, oklch(0.92 0.10 88 / 0.70) 50%, transparent 51%),
        radial-gradient(2.2px 2.2px at 42% 20%, oklch(0.92 0.10 88 / 0.65) 50%, transparent 51%),
        radial-gradient(2.2px 2.2px at 20% 26%, oklch(0.92 0.10 88 / 0.55) 50%, transparent 51%),
        radial-gradient(2.5px 2.5px at 63% 30%, oklch(0.92 0.10 88 / 0.50) 50%, transparent 51%),
        radial-gradient(2.2px 2.2px at 80% 42%, oklch(0.92 0.10 88 / 0.35) 50%, transparent 51%),
        radial-gradient(2.2px 2.2px at 34% 50%, oklch(0.92 0.10 88 / 0.25) 50%, transparent 51%),
        radial-gradient(2.2px 2.2px at 58% 66%, oklch(0.92 0.10 88 / 0.15) 50%, transparent 51%),
        radial-gradient(circle,
            oklch(0.55 0.055 265 / 0.24) 0%,
            oklch(0.45 0.050 270 / 0.12) 40%,
            transparent 60%),
        radial-gradient(circle at 50% 32%,
            oklch(0.37 0.045 272 / 0.90) 0%,
            oklch(0.28 0.042 280 / 0.92) 52%,
            oklch(0.23 0.038 286 / 0.90) 70%,
            transparent 75%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    box-shadow:
        inset 0 1px 1px oklch(0.90 0.02 280 / 0.12),
        inset 0 -10px 20px oklch(0.10 0.03 290 / 0.32);
    animation: none;
    pointer-events: none;
}

.sign-title-block .glyph svg {
    position: relative;
    z-index: 1;
    color: oklch(0.86 0.060 88);
    transform: perspective(700px) rotateX(6deg);
    filter: drop-shadow(0 1px 4px oklch(0.10 0.03 290 / 0.5));
}

/* De navigatie breekt af wanneer hij niet past. Hij deed dat alleen onder
   560px, maar de zes items plus hun iconen zijn samen 869px: tussen die twee
   breedtes liep de rij aan beide kanten buiten beeld en kreeg de hele pagina
   een horizontale schuifbalk. Op een tablet was dat de normale toestand.
   Boven 900px verandert deze regel niets, daar past alles toch op een lijn.
   Gemeten op 885px, 12-09-2026. */
.brand nav {
    flex-wrap: wrap;
}

/* ── Nav-iconen: gouden badge ───────────────────────────────── */

.brand nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.brand nav a svg {
    width: 1.45rem;
    height: 1.45rem;
    padding: 0.28rem;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--star);
    color: oklch(0.20 0.045 295);
    flex-shrink: 0;
}

@media (prefers-color-scheme: light) {
    .brand nav a svg { color: oklch(0.98 0.005 300); }
}

/* ── Iconen in de header-pills: gouden badge ────────────────── */

.pill svg {
    width: 1.45rem;
    height: 1.45rem;
    padding: 0.28rem;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--star);
    color: oklch(0.20 0.045 295);
}

.pill:hover svg {
    background: oklch(from var(--star) calc(l + 0.06) c h);
}

@media (prefers-color-scheme: light) {
    .pill svg { color: oklch(0.98 0.005 300); }
}

/* ── H1-accenten in goud-violet verloop ─────────────────────── */

.home-hero h1 em,
.section-title em {
    font-style: italic;
}

/* ── Maan-marker en sterren in hemels goud ──────────────────── */

.home-marker .moon-svg { color: var(--star); }
.stars, .rating .stars { color: var(--star); }

/* ── Kaarten met glazige rand-glans ─────────────────────────── */

.bundle,
.landing-step,
.today-teaser,
.consultant-card .avatar {
    box-shadow: 0 0 0 1px oklch(0.9 0.05 300 / 0.04) inset,
                0 12px 34px oklch(0.10 0.05 295 / 0.25);
}

@media (prefers-color-scheme: light) {
    .bundle,
    .landing-step,
    .today-teaser,
    .consultant-card .avatar {
        box-shadow: 0 10px 28px oklch(0.40 0.08 300 / 0.10);
    }
}

/* ── Brand-zegel: los medaillon links in de band, op wordmark-hoogte
   (TEST 2026-07-24, Mady). Zelfde recept als de sterrenbeeld-medaillons:
   satijnen-inkt schijf, goudglans + goudstof, vaste ring + tuimelende
   gimbal, fonkelster in het hart. ─────────────────────────────────── */

.brand .brand-zegel {
    position: absolute;
    left: clamp(1rem, 4vw, 3rem);
    top: 1.2rem;
    width: 4rem;
    height: 4rem;
    z-index: 5;
    border-radius: 50%;
    background-image:
        /* Gouden glans-sluier: dicht bovenin, dunt uit naar onder */
        linear-gradient(168deg,
            oklch(0.90 0.095 88 / 0.28) 0%,
            oklch(0.88 0.090 88 / 0.10) 38%,
            transparent 62%),
        /* Goudstof-sterretjes */
        radial-gradient(1.2px 1.2px at 30% 14%, oklch(0.92 0.10 88 / 0.85) 50%, transparent 51%),
        radial-gradient(1px 1px at 58% 10%, oklch(0.92 0.10 88 / 0.75) 50%, transparent 51%),
        radial-gradient(1px 1px at 74% 22%, oklch(0.92 0.10 88 / 0.60) 50%, transparent 51%),
        radial-gradient(1px 1px at 22% 32%, oklch(0.92 0.10 88 / 0.50) 50%, transparent 51%),
        radial-gradient(1px 1px at 66% 44%, oklch(0.92 0.10 88 / 0.35) 50%, transparent 51%),
        radial-gradient(1px 1px at 38% 62%, oklch(0.92 0.10 88 / 0.22) 50%, transparent 51%),
        /* Satijnen-inkt schijf: donker indigo, licht van boven */
        radial-gradient(circle at 50% 32%,
            oklch(0.37 0.045 272) 0%,
            oklch(0.28 0.042 280) 52%,
            oklch(0.23 0.038 286) 100%);
    background-repeat: no-repeat;
    box-shadow:
        inset 0 1px 1px oklch(0.90 0.02 280 / 0.18),
        inset 0 -0.35rem 0.6rem oklch(0.10 0.03 290 / 0.40),
        0 6px 16px oklch(0.10 0.03 290 / 0.30),
        0 2px 6px oklch(0.10 0.03 290 / 0.35);
    /* Wel aanklikbaar: dit is een link naar de voorpagina. Stond tot
       30-08-2026 op pointer-events: none, waardoor klikken er dwars
       doorheen gingen. De link zat er wel, hij deed alleen niets. */
    pointer-events: auto;
}

.brand .brand-zegel .o-ring,
.brand .brand-zegel .o-gimbal {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

/* Ring 1: wentelt als baan om de verticale as (geen statische ring meer) — celest-fluor */
.brand .brand-zegel .o-ring {
    inset: 6%;
    border: 1.2px solid oklch(0.82 0.14 220 / 0.95);
    box-shadow:
        0 0 5px oklch(0.82 0.14 220 / 0.65),
        0 0 12px oklch(0.82 0.14 220 / 0.30),
        inset 0 0 4px oklch(0.82 0.14 220 / 0.40);
    transform: perspective(300px) rotate(-15deg) rotateX(58deg);
}

/* Ring 2: de gimbal die om de diagonale as tuimelt — zelfde celest-fluor */
.brand .brand-zegel .o-gimbal {
    inset: 15%;
    border: 1.1px solid oklch(0.82 0.14 220 / 0.90);
    box-shadow:
        0 0 4px oklch(0.82 0.14 220 / 0.60),
        0 0 10px oklch(0.82 0.14 220 / 0.25),
        inset 0 0 3px oklch(0.82 0.14 220 / 0.35);
}

/* Ring 1 wentelt om z'n eigen (licht gekantelde) as, tegengesteld aan de gimbal */
@media (prefers-reduced-motion: no-preference) {
    .brand .brand-zegel .o-ring { animation: zegel-baan 13s linear infinite; }
}

@keyframes zegel-baan {
    0%   { transform: perspective(300px) rotate(-15deg) rotateX(0deg); }
    100% { transform: perspective(300px) rotate(-15deg) rotateX(-360deg); }
}

/* Fonkelster in het hart + kleine tweede ster rechtsboven */
.brand .brand-zegel .o-ster {
    position: absolute;
    inset: 20%;
    width: 60%;
    height: 60%;
    fill: oklch(0.88 0.070 88);
    filter: drop-shadow(0 1px 1px oklch(0.10 0.03 290 / 0.5));
}
.brand .brand-zegel .o-ster .klein {
    opacity: 0.75;
}

/* De ster schijnt op en dooft weer — ademend goud licht */
@media (prefers-reduced-motion: no-preference) {
    .brand .brand-zegel .o-ster { animation: ster-schijn 3.6s ease-in-out infinite; }
}

@keyframes ster-schijn {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
        filter: drop-shadow(0 1px 1px oklch(0.10 0.03 290 / 0.5));
    }
    50% {
        opacity: 1;
        transform: scale(1.07);
        filter: drop-shadow(0 0 5px oklch(0.94 0.10 88 / 0.95))
                drop-shadow(0 0 13px oklch(0.90 0.09 88 / 0.55));
    }
}

@media (prefers-reduced-motion: no-preference) {
    .brand .brand-zegel .o-gimbal {
        animation: wordmark-o-draai 10s linear infinite;
    }
}

@keyframes wordmark-o-draai {
    0%   { transform: perspective(300px) rotate(45deg) rotateX(0deg); }
    100% { transform: perspective(300px) rotate(45deg) rotateX(360deg); }
}

/* ── Wordmark-kleurverloop: donkerblauw → lichtblauw → paars → goud
   (Mady, één vloeiende overloop over het hele woord) ─────────────── */

/* MEDIUML effen donkerblauw; vanaf OUNGE loopt het over
   via lichtblauw en paars naar goud */
.brand .wordmark,
.footer-merk .wordmark {
    background: linear-gradient(105deg,
        oklch(0.60 0.100 265) 0%,
        oklch(0.60 0.100 265) 54%,
        oklch(0.78 0.125 220) 72%,
        oklch(0.74 0.140 305) 86%,
        oklch(0.82 0.110 85) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (prefers-color-scheme: light) {
    .brand .wordmark,
    .footer-merk .wordmark {
        background: linear-gradient(105deg,
            oklch(0.34 0.080 265) 0%,
            oklch(0.34 0.080 265) 54%,
            oklch(0.55 0.120 220) 72%,
            oklch(0.50 0.170 300) 86%,
            oklch(0.58 0.120 85) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

/* Op smalle schermen dichter op de rand en iets kleiner */
@media (max-width: 640px) {
    .brand .brand-zegel {
        width: 2.9rem;
        height: 2.9rem;
        top: 1.7rem;
    }
}

/* ── Flash-statusmelding (na registratie/e-mailbevestiging/reset) ── */

.flash-status {
    max-width: 42rem;
    margin: 1.5rem auto 0;
    padding: 0.9rem 1.4rem;
    border: 1px solid oklch(0.82 0.14 220 / 0.45);
    border-left: 3px solid var(--celest);
    border-radius: 0.5rem;
    font-family: var(--sans);
    font-size: var(--step-1);
    color: var(--text);
    background: oklch(0.82 0.14 220 / 0.08);
    text-align: center;
}

/* ===== Engelengetallen-cluster (2026-07-24) ===== */
.getallen-groep { margin-top: 3rem; }
.getallen-groep .section-title { font-size: var(--step-2); }
.getallen-grid { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.8rem; }
.getallen-grid a { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 1rem 0.5rem; border: 1px solid var(--hairline); border-radius: 0.8rem; text-decoration: none; transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out); }
.getallen-grid a:hover { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 6%, transparent); }
.getallen-grid .getal { font-family: var(--display); font-size: var(--step-3); color: var(--ink); letter-spacing: 0.04em; }
.getallen-grid .getal-alt { font-size: var(--step-1s); color: var(--muted); }
.getal-hero { font-family: var(--display); font-size: 3.4rem; line-height: 1; color: var(--accent); letter-spacing: 0.04em; min-width: 8rem; text-align: center; }

/* ── Sterrenbeeld-profiel-chips in 2 kolommen, zoals de sign-list erboven
   (2026-07-25, Mady) ─────────────────────────────────────────────────── */
.filter-bar--kolommen {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}
.filter-bar--kolommen .chip {
    display: flex;
    width: 100%;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}
.filter-bar--kolommen { grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) {
    .filter-bar--kolommen {
        grid-template-columns: repeat(4, 1fr);
        column-gap: 0.75rem;
    }
}

/* ── Voorpagina-titel in het wordmark-verloop: donkerblauw vlak,
   dan lichtblauw > violet > goud — zelfde recept als MEDIUMLOUNGE
   (2026-07-27, Mady) ─────────────────────────────────────────── */
.section-title--wordmark-verloop {
    background: linear-gradient(105deg,
        oklch(0.60 0.100 265) 0%,
        oklch(0.60 0.100 265) 40%,
        oklch(0.78 0.125 220) 56%,
        oklch(0.74 0.140 305) 80%,
        oklch(0.82 0.110 85) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.section-title--wordmark-verloop em {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: inherit;
}
@media (prefers-color-scheme: light) {
    .section-title--wordmark-verloop {
        background: linear-gradient(105deg,
            oklch(0.34 0.080 265) 0%,
            oklch(0.34 0.080 265) 40%,
            oklch(0.55 0.120 220) 56%,
            oklch(0.50 0.170 300) 80%,
            oklch(0.58 0.120 85) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

/* Kanaal-knoppen op kaarten. Stonden op nowrap met het doel "alle drie op een
   lijn" (2026-07-27, Mady). Sinds 11-09-2026 zijn het er vijf, videobellen
   kwam erbij, en die ene lijn haalt geen enkele taal meer: Videobellen is in
   het Nederlands al 210px breed. Ze breken nu af wanneer het niet past. De
   media-query op 500px die hetzelfde deed voor telefoons is daarmee
   overbodig geworden en hieronder weggehaald. (12-09-2026) */
.channel-buttons.compact { flex-wrap: wrap; gap: 0.45rem; }
.channel-buttons.compact .channel-btn { padding: 0.4rem 0.7rem; gap: 0.35rem; white-space: nowrap; }
.channel-buttons.compact .channel-btn .price { font-size: 0.72rem; }
/* Actieregel (Nu bereikbaar / ervaring / naar profiel) meer lucht boven (2026-07-27, Mady) */
.consultant-card .actions { margin-top: 1.1rem; }

/* Sterren direct naast de naam i.p.v. rechts uitgelijnd (gekozen 2026-07-27, Mady) */
.consultant-card .header { justify-content: flex-start; }

/* ===== Sterrenbeeld-verdieping (2026-07-28): feitenblok + inline CTA ===== */
.feiten-blok { border: 1px solid var(--hairline); border-radius: 0.8rem; padding: 1rem 1.4rem; margin-top: 1rem; }
.feiten-blok .feit { margin: 0.3rem 0; }
.feiten-blok .label { color: var(--muted); font-size: var(--step-1s); display: inline-block; min-width: 10rem; }
.cta-inline { margin-top: 2.5rem; }

/* ===== Footer (2026-07-28) =====
   Nav-kolommen komen uit het linkplan; merkblok en bodembalk zijn later die
   dag toegevoegd. Het wordmark-verloop wordt hergebruikt uit de header (de
   selector daar is uitgebreid met .footer-merk), zodat een merkbesluit van
   Mady automatisch ook in de footer landt.
   Bij livegang: de <p class="footer-dev"> uit de layout halen. */

.site-footer { margin-top: 6rem; padding: 0; text-align: left; letter-spacing: normal; }

.footer-binnen {
    max-width: 75rem;
    margin-inline: auto;
    padding: 3.5rem 1.5rem 2.75rem;
    display: grid;
    grid-template-columns: minmax(14rem, 0.9fr) 3fr;
    gap: 3rem 4rem;
    align-items: start;
}

/* Merkblok */
.footer-merk { display: flex; flex-direction: column; align-items: flex-start; }

.footer-merk .wordmark {
    font-family: var(--serif-display);
    font-weight: 400;
    font-size: var(--step-1);
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    text-decoration: none;
    display: inline-block;
    color: var(--text);
}

.footer-tagline {
    margin: 0.75rem 0 0;
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    text-transform: uppercase;
    color: var(--celest);
}

.footer-pitch {
    margin: 1.25rem 0 0;
    max-width: 26rem;
    font-family: var(--sans);
    font-size: var(--step-1s);
    line-height: 1.65;
    letter-spacing: normal;
    color: var(--muted);
}

/* De korte wettelijke regel onder de pitch. Zelfde maat als de pitch maar
   fletser: hij hoort er te staan en moet leesbaar zijn, maar hij mag de
   voettekst niet overheersen. De volledige tekst staat op /disclaimer.
   (Mady, 14-09-2026) */
.footer-disclaimer-kort {
    margin: 0.75rem 0 0;
    max-width: 26rem;
    font-family: var(--sans);
    font-size: var(--step-1s);
    line-height: 1.6;
    letter-spacing: normal;
    color: var(--dim);
}

.footer-disclaimer-kort a {
    color: var(--muted);
    text-underline-offset: 0.2em;
    /* Niet middenin afbreken. "Lees de" op de ene regel en "disclaimer" op de
       volgende leest als twee losse dingen; zo schuift de hele link mee naar
       de volgende regel. */
    white-space: nowrap;
}

.footer-disclaimer-kort a:hover,
.footer-disclaimer-kort a:focus-visible {
    color: var(--celest);
}

/* Kolommen */
.footer-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 2.5rem 2rem;
    padding: 0;
}

.footer-kolom { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; min-width: 0; }

.footer-kolom .footer-kop {
    margin: 0 0 0.5rem;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.footer-kolom a {
    color: var(--text);
    text-decoration: none;
    font-family: var(--sans);
    font-size: var(--step-1s);
    letter-spacing: normal;
    opacity: 0.8;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.footer-kolom a:hover { opacity: 1; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Sociale kanalen */
/* De vier iconen zijn samen 194px en de voetkolom is op een telefoon 149px
   breed, dus ze staken er 45px uit en trokken de hele pagina scheef. Gemeten
   op 375px, 12-09-2026. */
.social-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.15rem; }

.social-icoon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--text);
    transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.social-icoon svg { width: 1.15rem; height: 1.15rem; }
a.social-icoon:hover { border-color: var(--accent); color: var(--accent); }

/* Kanaal zonder URL: wel zichtbaar, niet klikbaar */
.social-icoon--leeg { opacity: 0.4; cursor: default; }

.social-nog-leeg {
    margin: 0.7rem 0 0;
    color: var(--dim);
    font-size: var(--step-1s);
    letter-spacing: normal;
}

.visueel-verborgen {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Bodembalk */
.footer-bodem {
    max-width: 75rem;
    margin-inline: auto;
    padding: 1.25rem 1.5rem 2rem;
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem 2rem;
    font-family: var(--sans);
    font-size: var(--step-1s);
    letter-spacing: normal;
    color: var(--dim);
}

.footer-bodem p { margin: 0; }
.footer-dev a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer-dev a:hover { color: var(--accent); }

@media (max-width: 900px) {
    .footer-binnen { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 3rem; }
}

@media (max-width: 900px) {
    .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
    .footer-bodem { flex-direction: column; align-items: flex-start; }
}

/* Juridische links en bedrijfsregel in de bodembalk */
/* Taalschakelaar in de footer. Rendert alleen op pagina's met een live
   vertaling; zie App\Support\Taalschakelaar. Bewust rustig vormgegeven: het
   Nederlandse publiek is verreweg de grootste groep en hoeft er niet naar te
   kijken, maar de link moet wel vindbaar en klikbaar zijn. */
.footer-talen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; margin: 0.9rem 0 0; }
.footer-talen-label { font-size: 0.85em; opacity: 0.6; }
.footer-talen ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0; padding: 0; list-style: none; }
.footer-talen a { color: inherit; text-decoration: none; opacity: 0.85; }
.footer-talen a:hover { opacity: 1; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.footer-talen [aria-current="true"] { opacity: 1; font-weight: 600; }

.footer-juridisch { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.footer-juridisch a { color: inherit; text-decoration: none; opacity: 0.85; }
.footer-juridisch a:hover { opacity: 1; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.footer-bedrijf { flex-basis: 100%; margin-top: 0.75rem; opacity: 0.85; }

/* ===== Informatie- en juridische pagina's (2026-07-28) =====
   Smallere leeskolom dan de contentpagina's: lange lopende tekst leest
   prettiger op ongeveer 70 tekens per regel. */

.info-page { max-width: 44rem; }
.info-page h2 { margin: 2.5rem 0 0.75rem; font-size: var(--step-2); }
.info-page h3 { margin: 1.75rem 0 0.5rem; font-size: var(--step-1p); font-weight: 500; color: var(--text); }
.info-page p { margin: 0 0 1rem; line-height: 1.75; color: var(--muted); }
.info-page li { line-height: 1.75; color: var(--muted); }
.info-page ul { margin: 0 0 1.25rem; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.info-page strong { color: var(--text); }
/* :not(.pill) want anders erft een knop de accent-kleur als tekstkleur,
   en staat er violet op violet. */
.info-page a:not(.pill) { color: var(--accent); text-underline-offset: 3px; }

.info-page .info-lead { margin-bottom: 2rem; color: var(--text); font-size: var(--step-1p); }
.info-page .info-meta { margin-top: 3rem; color: var(--dim); font-size: var(--step-1s); }

.info-page .info-concept {
    margin: 0 0 2rem;
    padding: 0.9rem 1.2rem;
    border: 1px solid var(--signal);
    border-radius: 0.7rem;
    color: var(--text);
    font-size: var(--step-1s);
    line-height: 1.6;
}

.info-verder {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline);
    font-family: var(--sans);
    font-size: var(--step-1s);
}

/* Tegelrij met doorverwijzingen naar de onderliggende pagina's van een hub */
.thema-tegels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.75rem;
}

.thema-tegels a {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
    font-family: var(--sans);
    font-size: var(--step-1s);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.thema-tegels a:hover { border-color: var(--accent); color: var(--accent); }

/* Terugverwijzing vanaf een onderliggende pagina naar de naslag-hub */
.thema-terug {
    margin: 2.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--hairline);
    max-width: 42rem;
    color: var(--muted);
    font-size: var(--step-1s);
    line-height: 1.7;
}

/* Genummerde stappen (levenspadgetal, dromen onthouden) */
.info-page ol.thema-stappen {
    margin: 0 0 1.5rem;
    padding-left: 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    line-height: 1.7;
    color: var(--muted);
}

/* Definitielijst voor bedrijfsgegevens */
.info-gegevens {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 1.5rem 0 2.5rem;
    padding: 0;
    border-top: 1px solid var(--hairline);
}

.info-gegevens__rij {
    display: grid;
    grid-template-columns: minmax(11rem, 14rem) 1fr;
    gap: 1.5rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--hairline);
}

.info-gegevens dt {
    margin: 0;
    color: var(--muted);
    font-family: var(--sans);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1.7;
}

.info-gegevens dd {
    margin: 0;
    color: var(--text);
    font-size: var(--step-1);
    line-height: 1.65;
}

@media (max-width: 560px) {
    .info-gegevens__rij { grid-template-columns: 1fr; gap: 0.35rem; }
}

.info-tabel-wrap { overflow-x: auto; margin: 0 0 1.5rem; }
.info-tabel { width: 100%; border-collapse: collapse; font-size: var(--step-1s); }
.info-tabel th,
.info-tabel td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; }
.info-tabel th { color: var(--text); font-family: var(--sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; }
.info-tabel td { color: var(--muted); line-height: 1.6; }
.info-tabel code { color: var(--celest); font-size: 0.9em; }

.info-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.5rem; margin: 2rem 0 1rem; }
.info-contact__blok { padding: 1.1rem 1.3rem; border: 1px solid var(--hairline); border-radius: 0.8rem; }
.info-page .info-contact__label { margin: 0 0 0.35rem; font-family: var(--sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.info-page .info-contact__waarde { margin: 0; color: var(--text); font-size: var(--step-1p); line-height: 1.5; }
.info-page .info-contact__toelichting { margin: 0.5rem 0 0; font-size: var(--step-1s); }

/* H1 altijd gecentreerd (Mady, 2026-07-31) */
h1 { display: table; margin-left: auto; margin-right: auto; max-width: 100%; text-align: center; }

/* H1 volgt het wordmark-verloop, op elke pagina (Mady, 2026-07-31).
   Zelfde recept als het wordmark: donkerblauw effen tot 54%, dan
   lichtblauw > violet > goud, verdeeld over de zin. */
h1 {
    background: linear-gradient(105deg,
        oklch(0.60 0.100 265) 0%,
        oklch(0.60 0.100 265) 40%,
        oklch(0.78 0.125 220) 56%,
        oklch(0.74 0.140 305) 80%,
        oklch(0.82 0.110 85) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
h1 em {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: inherit;
    font-style: italic;
}
@media (prefers-color-scheme: light) {
    h1 {
        background: linear-gradient(105deg,
            oklch(0.34 0.080 265) 0%,
            oklch(0.34 0.080 265) 40%,
            oklch(0.55 0.120 220) 56%,
            oklch(0.50 0.170 300) 80%,
            oklch(0.58 0.120 85) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

/* ============================================================
   Droomdagboek — /droomdagboek
   Schrijfveld links, herkende symbolen rechts. Onder 60rem
   stapelen ze, met de vangst eerst onder het veld.
   ============================================================ */

.dagboek {
    display: grid;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

@media (min-width: 60rem) {
    .dagboek {
        grid-template-columns: 1.15fr 0.85fr;
        align-items: start;
    }
}

.dagboek-schrijf {
    display: grid;
    gap: 0.6rem;
}

.dagboek-schrijf textarea {
    width: 100%;
    min-height: 16rem;
    resize: vertical;
    padding: 1.1rem 1.2rem;
    font-family: var(--serif-body);
    font-size: var(--step-0);
    line-height: 1.7;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 4px;
}

.dagboek-schrijf textarea::placeholder {
    color: var(--dim);
}

.dagboek-schrijf textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.dagboek-knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.cta-stil {
    background: transparent;
    color: var(--muted);
    border-color: var(--hairline);
}

.cta-stil:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.dagboek-melding {
    font-family: var(--sans);
    font-size: var(--step-1);
    color: var(--accent);
}

.dagboek-vangst {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 4px;
    overflow: hidden;
}

.dagboek-vangst-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid var(--hairline);
}

.dagboek-vangst-kop b {
    font-family: var(--serif-display);
    font-size: var(--step-2);
    line-height: 1;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.dagboek-lijst {
    display: grid;
    max-height: 26rem;
    overflow-y: auto;
}

.dagboek-treffer {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "naam pijl" "duiding pijl";
    gap: 0.1rem 0.8rem;
    align-items: center;
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid var(--hairline);
    text-decoration: none;
    color: var(--text);
}

.dagboek-lijst > :last-child {
    border-bottom: 0;
}

.dagboek-treffer b {
    grid-area: naam;
    font-family: var(--serif-display);
    font-size: var(--step-1p);
    font-weight: 600;
}

.dagboek-treffer span {
    grid-area: duiding;
    font-family: var(--sans);
    font-size: var(--step-1);
    color: var(--muted);
}

.dagboek-pijl {
    grid-area: pijl;
    color: var(--accent);
    font-size: var(--step-1p);
}

a.dagboek-treffer:hover {
    background: color-mix(in oklch, var(--accent) 12%, transparent);
}

a.dagboek-treffer:hover b {
    color: var(--accent);
}

a.dagboek-treffer:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.dagboek-treffer-kaal b {
    color: var(--muted);
    font-weight: 400;
}

.dagboek-leeg {
    margin: 0;
    padding: 1.6rem 1.1rem;
    color: var(--dim);
    font-style: italic;
}

/* ============================================================
   Lexiconzoeker en overzichtstabel op /dromen-betekenis
   ============================================================ */

.lexzoek {
    margin: 1.5rem 0 2.5rem;
    padding: 1.2rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 4px;
}

.lexzoek label {
    display: block;
    margin-bottom: 0.5rem;
}

.lexzoek input[type="search"] {
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: var(--serif-body);
    font-size: var(--step-1p);
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--hairline);
    border-radius: 4px;
}

.lexzoek input[type="search"]::placeholder {
    color: var(--dim);
}

.lexzoek input[type="search"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.lexzoek-hulp {
    margin: 0.55rem 0 0;
    font-family: var(--sans);
    font-size: var(--step-1);
    color: var(--muted);
}

.lexzoek-telling {
    margin: 1rem 0 0.5rem;
    font-family: var(--sans);
    font-size: var(--step-1);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.lexzoek-melding {
    margin: 1rem 0 0;
    font-family: var(--sans);
    font-size: var(--step-1);
    color: var(--muted);
}

.lexzoek-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: 4px;
    overflow: hidden;
}

.lexzoek-lijst li {
    margin: 0;
    background: var(--bg);
}

.lexzoek-lijst a,
.lexzoek-kaal {
    display: block;
    padding: 0.65rem 0.9rem;
    text-decoration: none;
    color: var(--text);
}

.lexzoek-lijst a:hover {
    background: color-mix(in oklch, var(--accent) 12%, transparent);
    color: var(--accent);
}

.lexzoek-lijst a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.lexzoek-kaal {
    color: var(--muted);
}

.lexzoek-duiding {
    display: block;
    font-family: var(--sans);
    font-size: var(--step-1);
    color: var(--muted);
    margin-top: 0.1rem;
}

.lexzoek mark {
    background: color-mix(in oklch, var(--accent) 22%, transparent);
    color: inherit;
    padding: 0 0.1em;
    border-radius: 2px;
}

/* De tabel scrollt binnen zijn eigen kader, zodat de pagina zelf nooit
   horizontaal meeschuift op een smal scherm. */
.lexoverzicht {
    overflow-x: auto;
    border: 1px solid var(--hairline);
    border-radius: 4px;
    margin: 1.2rem 0;
}

.lexoverzicht table {
    border-collapse: collapse;
    width: 100%;
    min-width: 30rem;
}

.lexoverzicht th,
.lexoverzicht td {
    text-align: left;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--hairline);
    vertical-align: top;
}

.lexoverzicht thead th {
    font-family: var(--sans);
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface);
    white-space: nowrap;
}

.lexoverzicht tbody th {
    font-family: var(--serif-display);
    font-size: var(--step-1p);
    font-weight: 600;
    white-space: nowrap;
}

.lexoverzicht tbody tr:last-child th,
.lexoverzicht tbody tr:last-child td {
    border-bottom: 0;
}

.lexoverzicht td {
    color: var(--muted);
}

/* ── Merkkop op smalle schermen ──────────────────────────────────────
   Op ruime schermen staat het zegel in de linkermarge naast de
   gecentreerde merknaam. Onder 560px is die marge er niet meer: het
   zegel kwam dan boven op de M te liggen, de naam liep rechts buiten
   beeld en de navigatie viel links weg. Hier staat het zegel daarom
   boven de naam, allebei op de as, en schaalt de naam mee met het
   scherm. Gemeten op 320, 375 en 430 px. */
@media (max-width: 560px) {

    .brand {
        padding-top: 6rem;
    }

    .brand .brand-zegel {
        left: 50%;
        top: 1.4rem;
        width: 3.5rem;
        height: 3.5rem;
        transform: translateX(-50%);
    }

    /* De wijde letterspatiëring is het karakter van het merk, dus die
       blijft; de lettergrootte volgt de schermbreedte. */
    .brand .wordmark {
        font-size: min(var(--step-3), 6.6vw);
    }

    .brand .tagline {
        letter-spacing: 0.14em;
    }

    /* De rij verspringt naar een tweede regel in plaats van buiten
       beeld te lopen. De marges per link maakten dat erger. */
    .brand nav {
        flex-wrap: wrap;
        gap: 0.85rem 1.4rem;
    }

    .brand nav a,
    .brand nav > * + * {
        margin: 0;
    }
}

/* ── Aanraakvlakken op telefoons en tablets ──────────────────────────
   Gemeten op de echte site: van de zestig links op de voorpagina waren
   er negenendertig lager dan 44 pixels en het kruimelpad zat op 15. Dat
   is de reden dat je op een telefoon naast een link tikt.

   Dit geldt alleen voor aanraakschermen, dus op een scherm met een muis
   verandert het ontwerp niet. Inline links midden in een zin blijven
   zoals ze zijn: vergroten zou de regelval kapotmaken, en de richtlijn
   zondert ze ook uit. */
@media (pointer: coarse) {

    /* De grootste groep: de kolommen in de voettekst en de juridische
       rij eronder. Blokken, dus een minimumhoogte volstaat. */
    .footer-nav .footer-kolom a,
    .footer-juridisch a {
        display: flex;
        align-items: center;
        min-height: 2.75rem;
    }

    /* Het kruimelpad stond op vijftien pixels, het laagste van de site. */
    .breadcrumb a {
        display: inline-block;
        padding-block: 0.7rem;
    }

    /* De hoofdnavigatie in de kop. De onderrand die de actieve pagina
       markeert blijft waar hij is. */
    .brand nav a {
        padding-top: 0.4rem;
        padding-bottom: 0.7rem;
    }

    /* De categorielabels onder de blogkaarten. */
    .blog-cat {
        display: inline-block;
        padding-block: 0.75rem;
    }

    /* De merknaam is op beide plekken een link naar de voorpagina. */
    .brand a.wordmark {
        padding-block: 0.15rem;
    }

    .footer-merk a.wordmark {
        display: inline-block;
        padding-block: 0.7rem;
    }

    /* De linkrij en het e-mailadres op de informatiepagina's. */
    .info-verder a,
    .info-contact__waarde a {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
    }

    /* De pillen en alles in een filterbalk: de blogfilters, maar ook de
       rij sterrenbeelden onder een horoscoop. */
    .pill,
    .chip,
    .filter-bar a {
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
    }

    /* De paginering onder het blog komt uit Laravel zelf, met eigen
       klassen. Daarom op het aria-label, dat blijft staan bij een
       volgende versie van het framework. */
    nav[aria-label="Pagination Navigation"] a,
    nav[aria-label="Pagination Navigation"] span[aria-current] {
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
    }
}
/* ── Uitgelichte afbeelding bij een blog ────────────────────── */

/* height:auto is hier geen opmaak maar noodzaak. Op de afbeelding staan
   width="1200" en height="675", zodat de browser de ruimte vasthoudt voordat
   de afbeelding binnen is en de tekst niet verspringt. Zonder height:auto neemt hij
   die 675 letterlijk en wordt de afbeelding uitgerekt. */
.blog-figure img,
.blog-thumb img {
    height: auto;
}

.blog-thumb img {
    height: 100%;
}

/* De dagvariant van de afbeeldingen is lavendel, net als de pagina eromheen. Zonder
   haarlijn loopt de afbeelding over in het wit van de pagina en houdt hij op een
   vorm te zijn. De schaduw is zo licht dat je hem niet als schaduw ziet; hij
   tilt het beeld net van het papier. */
.blog-figure {
    margin: 2.2rem 0 2.6rem;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    box-shadow: 0 14px 34px -24px color-mix(in oklch, var(--accent) 60%, transparent);
}

/* In het overzicht zit de afbeelding al in een kaart met een eigen rand. Daar zou
   een tweede lijn eromheen dubbel staan; alleen een scheiding naar de tekst. */
.blog-thumb {
    border-bottom: 1px solid var(--hairline);
}