/*
 * Sparkle Reis — vormgeving "Van nacht naar dageraad" (sinds 0.5.0).
 *
 * De hemel is het verhaal: achter elke pagina staan een lucht met een horizon en een sterrenveld.
 * Per sleutel schuift de tint een stap op (sr-licht-0 … sr-licht-8 op <body>); bij de vijfde
 * sleutel breekt de dag aan. King (sr-thema-king) blijft nacht: daar groeit de gloed.
 * Een tintklasse mag ook op een losse sectie staan (.sr-band, .sr-tint): zo loopt de voorpagina
 * zelf van nacht naar dag. De chart van de generator kleurt mee via de --hd-*-variabelen.
 *
 * Lettertypen: Fraunces en Source Serif 4 (SIL Open Font License 1.1, zie assets/fonts/), zelf gehost.
 */

@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-opsz-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin-opsz-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-latin-wght-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

/* Geregistreerd, zodat de hemel vloeiend van tint wisselt (zonder @property: een directe wissel). */
@property --sr-bg { syntax: "<color>"; inherits: true; initial-value: #120C0B; }
@property --sr-bg2 { syntax: "<color>"; inherits: true; initial-value: #1A0F0E; }
@property --sr-gloed { syntax: "<color>"; inherits: true; initial-value: #7A2E2A; }
@property --sr-gloed-a { syntax: "<number>"; inherits: true; initial-value: 0.18; }
@property --sr-gloed-y { syntax: "<percentage>"; inherits: true; initial-value: 104%; }
@property --sr-sterren { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --sr-inkt { syntax: "<color>"; inherits: true; initial-value: #F8EFDF; }
@property --sr-gedempt { syntax: "<color>"; inherits: true; initial-value: #CDBDA8; }
@property --sr-accent { syntax: "<color>"; inherits: true; initial-value: #E9CC84; }
@property --sr-rand { syntax: "<color>"; inherits: true; initial-value: #A08A74; }
@property --sr-lijn { syntax: "<color>"; inherits: true; initial-value: #3A2A24; }
@property --sr-goud { syntax: "<color>"; inherits: true; initial-value: #D9B25A; }
@property --sr-vlak { syntax: "<color>"; inherits: true; initial-value: #221C1A; }

body.sr-reis, .sr-licht-0 {
	--sr-bg: #120C0B; --sr-bg2: #1A0F0E; --sr-gloed: #7A2E2A; --sr-gloed-a: 0.18; --sr-sterren: 1;
	--sr-inkt: #F8EFDF; --sr-gedempt: #CDBDA8; --sr-accent: #E9CC84; --sr-rand: #A08A74; --sr-lijn: #3A2A24; --sr-goud: #D9B25A;
	--sr-vlak: #221C1A; --sr-knop-bg: linear-gradient(135deg,#F8E9B2 0%,#E3BE63 24%,#C39231 50%,#ECCD7C 74%,#BC8A2E 100%); --sr-knop-vast: #D9B25A; --sr-knop-inkt: #1F120B;
	--sr-schema: dark; --sr-gloed-y: 104%;
	--sr-nadruk: linear-gradient(100deg,#F8E9B2 0%,#E3BE63 45%,#F3DC9E 70%,#D9B25A 100%); --sr-goudlijn: #D9B25A; --sr-goudglans: linear-gradient(135deg,#F8E9B2 0%,#C39231 30%,#F3DC9E 55%,#A87A2C 80%,#ECCD7C 100%); --sr-papier: #F5E8CF; --sr-schaduw: 0 0 0;
	--hd-midden-boven: #F3DD9C; --hd-midden-onder: #B98A33; --hd-vast-rand: #F8EBC0; --hd-arcering: #F6E3A8; --hd-ster: #DDB766; --hd-buis-buiten: #403935; --hd-buis-binnen: #1E1716; --hd-open-vul: #1B1513; --hd-open-rand: #8A7052; --hd-ontwerp: #D08A48; --hd-persoon: #B5505F; --hd-badge-tekst: #FFF6E4; --hd-gedempt: #B3A088; --hd-pil-tekst: #F3EADA; --hd-pil-o1: #7A5636; --hd-pil-o2: #5C4029; --hd-pil-p1: #6A323C; --hd-pil-p2: #4B222B; --hd-wit: #FFFFFF; --hd-schaduw: #000000; --hd-gedempt-vast: #4A3312; --hd-halo-kern: 0.2; --hd-halo-rand: 0.07; --hd-schaduw-dekking: 0.5; --hd-glans-dekking: 0.18; --hd-pil-rand-dekking: 0.14;
}
.sr-licht-1, body.sr-reis.sr-licht-1 {
	--sr-bg: #170E0D; --sr-bg2: #25110F; --sr-gloed: #8C3326; --sr-gloed-a: 0.3; --sr-sterren: 0.95;
	--sr-inkt: #F8EFDF; --sr-gedempt: #CFC0AB; --sr-accent: #E9CC84; --sr-rand: #A48E78; --sr-lijn: #40302A; --sr-goud: #D9B25A;
	--sr-vlak: #271E1C; --sr-knop-bg: linear-gradient(135deg,#F8E9B2 0%,#E3BE63 24%,#C39231 50%,#ECCD7C 74%,#BC8A2E 100%); --sr-knop-vast: #D9B25A; --sr-knop-inkt: #1F120B;
	--sr-schema: dark; --sr-gloed-y: 104%;
	--sr-nadruk: linear-gradient(100deg,#F8E9B2 0%,#E3BE63 45%,#F3DC9E 70%,#D9B25A 100%); --sr-goudlijn: #D9B25A; --sr-goudglans: linear-gradient(135deg,#F8E9B2 0%,#C39231 30%,#F3DC9E 55%,#A87A2C 80%,#ECCD7C 100%); --sr-papier: #F5E8CF; --sr-schaduw: 0 0 0;
	--hd-midden-boven: #F3DD9C; --hd-midden-onder: #B98A33; --hd-vast-rand: #F8EBC0; --hd-arcering: #F6E3A8; --hd-ster: #DDB766; --hd-buis-buiten: #443B37; --hd-buis-binnen: #221918; --hd-open-vul: #201715; --hd-open-rand: #8A7052; --hd-ontwerp: #D08A48; --hd-persoon: #B5505F; --hd-badge-tekst: #FFF6E4; --hd-gedempt: #B3A088; --hd-pil-tekst: #F3EADA; --hd-pil-o1: #7A5636; --hd-pil-o2: #5C4029; --hd-pil-p1: #6A323C; --hd-pil-p2: #4B222B; --hd-wit: #FFFFFF; --hd-schaduw: #000000; --hd-gedempt-vast: #4A3312; --hd-halo-kern: 0.2; --hd-halo-rand: 0.07; --hd-schaduw-dekking: 0.5; --hd-glans-dekking: 0.18; --hd-pil-rand-dekking: 0.14;
}
.sr-licht-2, body.sr-reis.sr-licht-2 {
	--sr-bg: #1E0F11; --sr-bg2: #331417; --sr-gloed: #A0402A; --sr-gloed-a: 0.38; --sr-sterren: 0.85;
	--sr-inkt: #F8EFDF; --sr-gedempt: #D4C5B1; --sr-accent: #EBD08C; --sr-rand: #AD9781; --sr-lijn: #4A3530; --sr-goud: #DDB760;
	--sr-vlak: #2D1F1F; --sr-knop-bg: linear-gradient(135deg,#F8E9B2 0%,#E3BE63 24%,#C39231 50%,#ECCD7C 74%,#BC8A2E 100%); --sr-knop-vast: #D9B25A; --sr-knop-inkt: #1F120B;
	--sr-schema: dark; --sr-gloed-y: 104%;
	--sr-nadruk: linear-gradient(100deg,#F8E9B2 0%,#E3BE63 45%,#F3DC9E 70%,#D9B25A 100%); --sr-goudlijn: #D9B25A; --sr-goudglans: linear-gradient(135deg,#F8E9B2 0%,#C39231 30%,#F3DC9E 55%,#A87A2C 80%,#ECCD7C 100%); --sr-papier: #F5E8CF; --sr-schaduw: 0 0 0;
	--hd-midden-boven: #F3DD9C; --hd-midden-onder: #B98A33; --hd-vast-rand: #F8EBC0; --hd-arcering: #F6E3A8; --hd-ster: #DDB766; --hd-buis-buiten: #4A3C3A; --hd-buis-binnen: #291A1B; --hd-open-vul: #271819; --hd-open-rand: #8A7052; --hd-ontwerp: #D08A48; --hd-persoon: #B5505F; --hd-badge-tekst: #FFF6E4; --hd-gedempt: #B3A088; --hd-pil-tekst: #F3EADA; --hd-pil-o1: #7A5636; --hd-pil-o2: #5C4029; --hd-pil-p1: #6A323C; --hd-pil-p2: #4B222B; --hd-wit: #FFFFFF; --hd-schaduw: #000000; --hd-gedempt-vast: #4A3312; --hd-halo-kern: 0.2; --hd-halo-rand: 0.07; --hd-schaduw-dekking: 0.5; --hd-glans-dekking: 0.18; --hd-pil-rand-dekking: 0.14;
}
.sr-licht-3, body.sr-reis.sr-licht-3 {
	--sr-bg: #28101A; --sr-bg2: #45161E; --sr-gloed: #B4502B; --sr-gloed-a: 0.44; --sr-sterren: 0.7;
	--sr-inkt: #FAF2E3; --sr-gedempt: #DBCDBA; --sr-accent: #EFD694; --sr-rand: #BBA58F; --sr-lijn: #58393A; --sr-goud: #E2BE68;
	--sr-vlak: #372028; --sr-knop-bg: linear-gradient(135deg,#F8E9B2 0%,#E3BE63 24%,#C39231 50%,#ECCD7C 74%,#BC8A2E 100%); --sr-knop-vast: #D9B25A; --sr-knop-inkt: #1F120B;
	--sr-schema: dark; --sr-gloed-y: 104%;
	--sr-nadruk: linear-gradient(100deg,#F8E9B2 0%,#E3BE63 45%,#F3DC9E 70%,#D9B25A 100%); --sr-goudlijn: #D9B25A; --sr-goudglans: linear-gradient(135deg,#F8E9B2 0%,#C39231 30%,#F3DC9E 55%,#A87A2C 80%,#ECCD7C 100%); --sr-papier: #F5E8CF; --sr-schaduw: 0 0 0;
	--hd-midden-boven: #F3DD9C; --hd-midden-onder: #B98A33; --hd-vast-rand: #F8EBC0; --hd-arcering: #F6E3A8; --hd-ster: #DDB766; --hd-buis-buiten: #523D42; --hd-buis-binnen: #331B24; --hd-open-vul: #301922; --hd-open-rand: #8A7052; --hd-ontwerp: #D08A48; --hd-persoon: #B5505F; --hd-badge-tekst: #FFF6E4; --hd-gedempt: #B3A088; --hd-pil-tekst: #F3EADA; --hd-pil-o1: #7A5636; --hd-pil-o2: #5C4029; --hd-pil-p1: #6A323C; --hd-pil-p2: #4B222B; --hd-wit: #FFFFFF; --hd-schaduw: #000000; --hd-gedempt-vast: #4A3312; --hd-halo-kern: 0.2; --hd-halo-rand: 0.07; --hd-schaduw-dekking: 0.5; --hd-glans-dekking: 0.18; --hd-pil-rand-dekking: 0.14;
}
.sr-licht-4, body.sr-reis.sr-licht-4 {
	--sr-bg: #35121F; --sr-bg2: #5A1B24; --sr-gloed: #C8662E; --sr-gloed-a: 0.5; --sr-sterren: 0.5;
	--sr-inkt: #FBF4E6; --sr-gedempt: #E6DACA; --sr-accent: #F3DC9E; --sr-rand: #CDB9A4; --sr-lijn: #6E4444; --sr-goud: #E8C672;
	--sr-vlak: #43222D; --sr-knop-bg: linear-gradient(135deg,#F8E9B2 0%,#E3BE63 24%,#C39231 50%,#ECCD7C 74%,#BC8A2E 100%); --sr-knop-vast: #D9B25A; --sr-knop-inkt: #1F120B;
	--sr-schema: dark; --sr-gloed-y: 104%;
	--sr-nadruk: linear-gradient(100deg,#F8E9B2 0%,#E3BE63 45%,#F3DC9E 70%,#D9B25A 100%); --sr-goudlijn: #D9B25A; --sr-goudglans: linear-gradient(135deg,#F8E9B2 0%,#C39231 30%,#F3DC9E 55%,#A87A2C 80%,#ECCD7C 100%); --sr-papier: #F5E8CF; --sr-schaduw: 0 0 0;
	--hd-midden-boven: #F3DD9C; --hd-midden-onder: #B98A33; --hd-vast-rand: #F8EBC0; --hd-arcering: #F6E3A8; --hd-ster: #DDB766; --hd-buis-buiten: #5D3F47; --hd-buis-binnen: #3F1D29; --hd-open-vul: #3D1B27; --hd-open-rand: #8A7052; --hd-ontwerp: #D08A48; --hd-persoon: #B5505F; --hd-badge-tekst: #FFF6E4; --hd-gedempt: #B3A088; --hd-pil-tekst: #F3EADA; --hd-pil-o1: #7A5636; --hd-pil-o2: #5C4029; --hd-pil-p1: #6A323C; --hd-pil-p2: #4B222B; --hd-wit: #FFFFFF; --hd-schaduw: #000000; --hd-gedempt-vast: #4A3312; --hd-halo-kern: 0.2; --hd-halo-rand: 0.07; --hd-schaduw-dekking: 0.5; --hd-glans-dekking: 0.18; --hd-pil-rand-dekking: 0.14;
}
.sr-licht-5, body.sr-reis.sr-licht-5 {
	--sr-bg: #E4B88C; --sr-bg2: #EBC597; --sr-gloed: #F7DDA4; --sr-gloed-a: 0.7; --sr-sterren: 0;
	--sr-inkt: #2A1814; --sr-gedempt: #4A2F27; --sr-accent: #641A2C; --sr-rand: #7A543C; --sr-lijn: #C99B70; --sr-goud: #7F5210;
	--sr-vlak: #EFD4B6; --sr-knop-bg: linear-gradient(160deg,#7C2338 0%,#571426 55%,#6B1C2F 100%); --sr-knop-vast: #641A2C; --sr-knop-inkt: #FFF4DC;
	--sr-schema: light; --sr-gloed-y: 104%;
	--sr-nadruk: linear-gradient(100deg,#7C2338,#571426); --sr-goudlijn: #A87A2C; --sr-goudglans: linear-gradient(135deg,#C9A050 0%,#8C5E12 30%,#D9B66A 55%,#94640F 80%,#C9A050 100%); --sr-papier: #FFFCF4; --sr-schaduw: 90 58 30;
	--hd-midden-boven: #F6E6BE; --hd-midden-onder: #DDBC7C; --hd-vast-rand: #B58A3A; --hd-arcering: #B08D4C; --hd-ster: #B8862B; --hd-buis-buiten: #D9C6A6; --hd-buis-binnen: #F3DFCB; --hd-open-vul: #F7EBDF; --hd-open-rand: #B9A27F; --hd-ontwerp: #A5652F; --hd-persoon: #6B2233; --hd-badge-tekst: #FBF7EE; --hd-gedempt: #7D6C57; --hd-pil-tekst: #FBF7EE; --hd-pil-o1: #A5652F; --hd-pil-o2: #7F4A20; --hd-pil-p1: #6B2233; --hd-pil-p2: #4E1826; --hd-wit: #FFFFFF; --hd-schaduw: #5A3A1E; --hd-gedempt-vast: #7D6C57; --hd-halo-kern: 0.16; --hd-halo-rand: 0.06; --hd-schaduw-dekking: 0.16; --hd-glans-dekking: 0.4; --hd-pil-rand-dekking: 0.28;
}
.sr-licht-6, body.sr-reis.sr-licht-6 {
	--sr-bg: #EDCEA5; --sr-bg2: #F1D6B0; --sr-gloed: #F9E6BA; --sr-gloed-a: 0.7; --sr-sterren: 0;
	--sr-inkt: #2A1814; --sr-gedempt: #52372D; --sr-accent: #6B1F31; --sr-rand: #80603F; --sr-lijn: #D5B58C; --sr-goud: #86580F;
	--sr-vlak: #F5E0C5; --sr-knop-bg: linear-gradient(160deg,#7C2338 0%,#571426 55%,#6B1C2F 100%); --sr-knop-vast: #641A2C; --sr-knop-inkt: #FFF4DC;
	--sr-schema: light; --sr-gloed-y: 104%;
	--sr-nadruk: linear-gradient(100deg,#7C2338,#571426); --sr-goudlijn: #A87A2C; --sr-goudglans: linear-gradient(135deg,#C9A050 0%,#8C5E12 30%,#D9B66A 55%,#94640F 80%,#C9A050 100%); --sr-papier: #FFFCF4; --sr-schaduw: 90 58 30;
	--hd-midden-boven: #F6E6BE; --hd-midden-onder: #DDBC7C; --hd-vast-rand: #B58A3A; --hd-arcering: #B08D4C; --hd-ster: #B8862B; --hd-buis-buiten: #D9C6A6; --hd-buis-binnen: #F7E9D7; --hd-open-vul: #FAF1E6; --hd-open-rand: #B9A27F; --hd-ontwerp: #A5652F; --hd-persoon: #6B2233; --hd-badge-tekst: #FBF7EE; --hd-gedempt: #7D6C57; --hd-pil-tekst: #FBF7EE; --hd-pil-o1: #A5652F; --hd-pil-o2: #7F4A20; --hd-pil-p1: #6B2233; --hd-pil-p2: #4E1826; --hd-wit: #FFFFFF; --hd-schaduw: #5A3A1E; --hd-gedempt-vast: #7D6C57; --hd-halo-kern: 0.16; --hd-halo-rand: 0.06; --hd-schaduw-dekking: 0.16; --hd-glans-dekking: 0.4; --hd-pil-rand-dekking: 0.28;
}
.sr-licht-7, body.sr-reis.sr-licht-7 {
	--sr-bg: #F4E1C3; --sr-bg2: #F6E6CC; --sr-gloed: #FCF0D2; --sr-gloed-a: 0.7; --sr-sterren: 0;
	--sr-inkt: #2A1814; --sr-gedempt: #5A4034; --sr-accent: #6B1F31; --sr-rand: #8A6A48; --sr-lijn: #DFC9A6; --sr-goud: #8C5E12;
	--sr-vlak: #F9ECD6; --sr-knop-bg: linear-gradient(160deg,#7C2338 0%,#571426 55%,#6B1C2F 100%); --sr-knop-vast: #641A2C; --sr-knop-inkt: #FFF4DC;
	--sr-schema: light; --sr-gloed-y: 104%;
	--sr-nadruk: linear-gradient(100deg,#7C2338,#571426); --sr-goudlijn: #A87A2C; --sr-goudglans: linear-gradient(135deg,#C9A050 0%,#8C5E12 30%,#D9B66A 55%,#94640F 80%,#C9A050 100%); --sr-papier: #FFFCF4; --sr-schaduw: 90 58 30;
	--hd-midden-boven: #F6E6BE; --hd-midden-onder: #DDBC7C; --hd-vast-rand: #B58A3A; --hd-arcering: #B08D4C; --hd-ster: #B8862B; --hd-buis-buiten: #D9C6A6; --hd-buis-binnen: #FAF2E4; --hd-open-vul: #FCF7EE; --hd-open-rand: #B9A27F; --hd-ontwerp: #A5652F; --hd-persoon: #6B2233; --hd-badge-tekst: #FBF7EE; --hd-gedempt: #7D6C57; --hd-pil-tekst: #FBF7EE; --hd-pil-o1: #A5652F; --hd-pil-o2: #7F4A20; --hd-pil-p1: #6B2233; --hd-pil-p2: #4E1826; --hd-wit: #FFFFFF; --hd-schaduw: #5A3A1E; --hd-gedempt-vast: #7D6C57; --hd-halo-kern: 0.16; --hd-halo-rand: 0.06; --hd-schaduw-dekking: 0.16; --hd-glans-dekking: 0.4; --hd-pil-rand-dekking: 0.28;
}
.sr-licht-8, body.sr-reis.sr-licht-8 {
	--sr-bg: #F9F1E2; --sr-bg2: #FBF5EA; --sr-gloed: #FFF6DC; --sr-gloed-a: 0.8; --sr-sterren: 0;
	--sr-inkt: #2A1814; --sr-gedempt: #5F4A3D; --sr-accent: #6B1F31; --sr-rand: #8F7353; --sr-lijn: #E6D8BE; --sr-goud: #946414;
	--sr-vlak: #FCF5E8; --sr-knop-bg: linear-gradient(160deg,#7C2338 0%,#571426 55%,#6B1C2F 100%); --sr-knop-vast: #641A2C; --sr-knop-inkt: #FFF4DC;
	--sr-schema: light; --sr-gloed-y: -8%;
	--sr-nadruk: linear-gradient(100deg,#7C2338,#571426); --sr-goudlijn: #A87A2C; --sr-goudglans: linear-gradient(135deg,#C9A050 0%,#8C5E12 30%,#D9B66A 55%,#94640F 80%,#C9A050 100%); --sr-papier: #FFFCF4; --sr-schaduw: 90 58 30;
	--hd-midden-boven: #F6E6BE; --hd-midden-onder: #DDBC7C; --hd-vast-rand: #B58A3A; --hd-arcering: #B08D4C; --hd-ster: #B8862B; --hd-buis-buiten: #D9C6A6; --hd-buis-binnen: #FCF9F2; --hd-open-vul: #FDFBF7; --hd-open-rand: #B9A27F; --hd-ontwerp: #A5652F; --hd-persoon: #6B2233; --hd-badge-tekst: #FBF7EE; --hd-gedempt: #7D6C57; --hd-pil-tekst: #FBF7EE; --hd-pil-o1: #A5652F; --hd-pil-o2: #7F4A20; --hd-pil-p1: #6B2233; --hd-pil-p2: #4E1826; --hd-wit: #FFFFFF; --hd-schaduw: #5A3A1E; --hd-gedempt-vast: #7D6C57; --hd-halo-kern: 0.16; --hd-halo-rand: 0.06; --hd-schaduw-dekking: 0.16; --hd-glans-dekking: 0.4; --hd-pil-rand-dekking: 0.28;
}


body.sr-reis {
	--sr-r1: 4px; --sr-r2: 8px; --sr-r3: 16px; --sr-r4: 24px; --sr-r5: 40px; --sr-r6: 64px; --sr-r7: 104px;
	--sr-tekst-s: clamp(0.9375rem, 0.9rem + 0.12vw, 1rem);
	--sr-tekst-m: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	--sr-tekst-l: clamp(1.3125rem, 1.15rem + 0.8vw, 1.625rem);
	--sr-tekst-xl: clamp(2.125rem, 1.45rem + 3vw, 3.75rem);
	--sr-tekst-xxl: clamp(2.375rem, 1.3rem + 4.6vw, 5rem);
	--sr-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--sr-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--sr-label: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
	--sr-duur-1: 180ms; --sr-duur-2: 420ms; --sr-duur-3: 900ms; --sr-duur-tint: 1800ms;
	--sr-zacht: cubic-bezier(0.22, 0.61, 0.36, 1);
	--sr-boog: 999px 999px var(--sr-r3) var(--sr-r3);

	margin: 0;
	min-height: 100vh;
	background-color: var(--sr-bg);
	color: var(--sr-inkt);
	color-scheme: var(--sr-schema);
	font-family: var(--sr-serif);
	font-size: var(--sr-tekst-m);
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	transition: --sr-bg var(--sr-duur-tint) var(--sr-zacht), --sr-bg2 var(--sr-duur-tint) var(--sr-zacht), --sr-gloed var(--sr-duur-tint) var(--sr-zacht),
		--sr-gloed-a var(--sr-duur-tint) var(--sr-zacht), --sr-gloed-y var(--sr-duur-tint) var(--sr-zacht), --sr-sterren var(--sr-duur-tint) var(--sr-zacht),
		--sr-inkt var(--sr-duur-3) var(--sr-zacht), --sr-gedempt var(--sr-duur-3) var(--sr-zacht), --sr-accent var(--sr-duur-3) var(--sr-zacht),
		--sr-rand var(--sr-duur-3) var(--sr-zacht), --sr-lijn var(--sr-duur-3) var(--sr-zacht), --sr-goud var(--sr-duur-3) var(--sr-zacht), --sr-vlak var(--sr-duur-tint) var(--sr-zacht);
}
html:has(body.sr-reis) { background: #120C0B; scroll-behavior: smooth; }
.sr-reis *, .sr-reis *::before, .sr-reis *::after { box-sizing: border-box; }

/* ---------- De hemel: twee vaste lagen achter alles ---------- */

/* Laag 1: de lucht (boven → horizon), de gloed bij de horizon, en papierkorrel. */
body.sr-reis::before,
.sr-band::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .5 0 0 0 0 .38 .16 0 0 0 -.03'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
		radial-gradient(ellipse 130% var(--sr-gloed-h, 46%) at 50% var(--sr-gloed-y), color-mix(in srgb, var(--sr-gloed) calc(var(--sr-gloed-a) * 100%), transparent) 0%, color-mix(in srgb, var(--sr-gloed) calc(var(--sr-gloed-a) * 38%), transparent) 45%, transparent 78%),
		linear-gradient(180deg, var(--sr-bg) 0%, var(--sr-bg) 38%, var(--sr-bg2) 100%);
}
/* Laag 2: het sterrenveld. Dooft met --sr-sterren; onderaan vervaagt het in de horizon. */
body.sr-reis::after,
.sr-band::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: var(--sr-sterren);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620'%3E%3Ccircle cx='148.0' cy='566.4' r='0.6' fill='%23E9CC84' opacity='0.28'/%3E%3Ccircle cx='530.6' cy='223.8' r='0.6' fill='%23FFF4DC' opacity='0.94'/%3E%3Ccircle cx='603.1' cy='329.4' r='0.6' fill='%23FFF4DC' opacity='0.67'/%3E%3Ccircle cx='482.0' cy='483.5' r='0.6' fill='%23FFF4DC' opacity='0.85'/%3E%3Ccircle cx='224.7' cy='298.5' r='0.6' fill='%23E9CC84' opacity='0.83'/%3E%3Ccircle cx='222.0' cy='110.9' r='1.5' fill='%23FFF4DC' opacity='0.57'/%3E%3Cpath d='M222.0 105.9Q222.0 110.9 227.0 110.9Q222.0 110.9 222.0 115.9Q222.0 110.9 217.0 110.9Q222.0 110.9 222.0 105.9Z' fill='%23F3DC9E' opacity='.8'/%3E%3Ccircle cx='282.9' cy='67.0' r='0.6' fill='%23FFF4DC' opacity='0.79'/%3E%3Ccircle cx='52.4' cy='375.5' r='1' fill='%23FFF4DC' opacity='0.66'/%3E%3Ccircle cx='218.7' cy='193.9' r='0.6' fill='%23FFF4DC' opacity='0.47'/%3E%3Ccircle cx='98.1' cy='542.0' r='0.6' fill='%23FFF4DC' opacity='0.95'/%3E%3Ccircle cx='300.4' cy='110.5' r='0.6' fill='%23E9CC84' opacity='0.66'/%3E%3Ccircle cx='305.5' cy='108.4' r='0.6' fill='%23FFF4DC' opacity='0.25'/%3E%3Ccircle cx='428.8' cy='471.2' r='0.6' fill='%23FFF4DC' opacity='0.77'/%3E%3Ccircle cx='547.4' cy='230.2' r='0.6' fill='%23FFF4DC' opacity='0.83'/%3E%3Ccircle cx='312.2' cy='298.7' r='1' fill='%23E9CC84' opacity='0.48'/%3E%3Ccircle cx='548.6' cy='128.4' r='0.6' fill='%23E9CC84' opacity='0.75'/%3E%3Ccircle cx='129.5' cy='32.3' r='0.6' fill='%23E9CC84' opacity='0.78'/%3E%3Ccircle cx='130.6' cy='315.8' r='1' fill='%23FFF4DC' opacity='0.48'/%3E%3Ccircle cx='218.4' cy='127.4' r='1' fill='%23FFF4DC' opacity='0.73'/%3E%3Ccircle cx='433.8' cy='273.0' r='0.6' fill='%23FFF4DC' opacity='0.49'/%3E%3Ccircle cx='62.3' cy='239.3' r='0.6' fill='%23E9CC84' opacity='0.85'/%3E%3Ccircle cx='479.8' cy='143.6' r='0.6' fill='%23FFF4DC' opacity='0.30'/%3E%3Ccircle cx='460.3' cy='510.1' r='0.6' fill='%23E9CC84' opacity='0.29'/%3E%3Ccircle cx='463.1' cy='270.1' r='1.5' fill='%23E9CC84' opacity='0.39'/%3E%3Cpath d='M463.1 265.1Q463.1 270.1 468.1 270.1Q463.1 270.1 463.1 275.1Q463.1 270.1 458.1 270.1Q463.1 270.1 463.1 265.1Z' fill='%23F3DC9E' opacity='.8'/%3E%3Ccircle cx='174.8' cy='525.6' r='1' fill='%23E9CC84' opacity='0.92'/%3E%3Ccircle cx='18.2' cy='547.9' r='0.6' fill='%23E9CC84' opacity='0.42'/%3E%3Ccircle cx='573.1' cy='517.1' r='0.6' fill='%23FFF4DC' opacity='0.51'/%3E%3Ccircle cx='115.3' cy='16.7' r='0.6' fill='%23FFF4DC' opacity='0.79'/%3E%3Ccircle cx='54.3' cy='227.2' r='0.6' fill='%23E9CC84' opacity='0.38'/%3E%3Ccircle cx='343.3' cy='314.1' r='0.6' fill='%23FFF4DC' opacity='0.29'/%3E%3Ccircle cx='419.7' cy='145.5' r='0.6' fill='%23FFF4DC' opacity='0.77'/%3E%3Ccircle cx='464.1' cy='267.5' r='0.6' fill='%23E9CC84' opacity='0.31'/%3E%3Ccircle cx='363.8' cy='94.5' r='1' fill='%23FFF4DC' opacity='0.70'/%3E%3Ccircle cx='286.7' cy='166.9' r='0.6' fill='%23FFF4DC' opacity='0.46'/%3E%3Ccircle cx='8.4' cy='488.3' r='0.6' fill='%23FFF4DC' opacity='0.78'/%3E%3Ccircle cx='330.1' cy='178.7' r='0.6' fill='%23E9CC84' opacity='0.80'/%3E%3Ccircle cx='17.4' cy='201.7' r='0.6' fill='%23FFF4DC' opacity='0.62'/%3E%3Ccircle cx='564.1' cy='264.9' r='1' fill='%23FFF4DC' opacity='0.94'/%3E%3Ccircle cx='152.0' cy='267.0' r='1.5' fill='%23FFF4DC' opacity='0.35'/%3E%3Ccircle cx='585.7' cy='85.2' r='0.6' fill='%23FFF4DC' opacity='0.63'/%3E%3Ccircle cx='111.7' cy='422.7' r='1' fill='%23FFF4DC' opacity='0.29'/%3E%3Ccircle cx='539.9' cy='281.2' r='0.6' fill='%23FFF4DC' opacity='0.77'/%3E%3Ccircle cx='179.4' cy='245.5' r='0.6' fill='%23E9CC84' opacity='0.93'/%3E%3Ccircle cx='385.9' cy='67.2' r='0.6' fill='%23FFF4DC' opacity='0.91'/%3E%3Ccircle cx='361.1' cy='502.1' r='0.6' fill='%23E9CC84' opacity='0.36'/%3E%3Ccircle cx='407.4' cy='139.8' r='0.6' fill='%23E9CC84' opacity='0.64'/%3E%3Ccircle cx='228.1' cy='538.3' r='1' fill='%23FFF4DC' opacity='0.25'/%3E%3Ccircle cx='253.6' cy='515.7' r='1' fill='%23E9CC84' opacity='0.45'/%3E%3Ccircle cx='604.3' cy='0.5' r='1.5' fill='%23FFF4DC' opacity='0.62'/%3E%3Cpath d='M604.3 -4.5Q604.3 0.5 609.3 0.5Q604.3 0.5 604.3 5.5Q604.3 0.5 599.3 0.5Q604.3 0.5 604.3 -4.5Z' fill='%23F3DC9E' opacity='.8'/%3E%3Ccircle cx='541.4' cy='256.9' r='0.6' fill='%23E9CC84' opacity='0.84'/%3E%3Ccircle cx='299.3' cy='162.6' r='0.6' fill='%23FFF4DC' opacity='0.52'/%3E%3Ccircle cx='443.1' cy='521.1' r='0.6' fill='%23FFF4DC' opacity='0.76'/%3E%3Ccircle cx='258.2' cy='409.3' r='1' fill='%23FFF4DC' opacity='0.87'/%3E%3Ccircle cx='473.1' cy='288.1' r='0.6' fill='%23FFF4DC' opacity='0.32'/%3E%3Ccircle cx='192.2' cy='276.7' r='0.6' fill='%23FFF4DC' opacity='0.30'/%3E%3Ccircle cx='519.5' cy='604.4' r='1' fill='%23FFF4DC' opacity='0.68'/%3E%3Ccircle cx='537.3' cy='108.9' r='1' fill='%23FFF4DC' opacity='0.50'/%3E%3Ccircle cx='94.2' cy='499.2' r='0.6' fill='%23FFF4DC' opacity='0.54'/%3E%3Ccircle cx='250.8' cy='303.8' r='1' fill='%23FFF4DC' opacity='0.74'/%3E%3Ccircle cx='48.3' cy='347.0' r='0.6' fill='%23FFF4DC' opacity='0.38'/%3E%3Ccircle cx='145.7' cy='272.8' r='1' fill='%23E9CC84' opacity='0.45'/%3E%3Ccircle cx='270.4' cy='112.9' r='0.6' fill='%23FFF4DC' opacity='0.85'/%3E%3Ccircle cx='529.6' cy='474.3' r='1.5' fill='%23FFF4DC' opacity='0.73'/%3E%3Cpath d='M529.6 469.3Q529.6 474.3 534.6 474.3Q529.6 474.3 529.6 479.3Q529.6 474.3 524.6 474.3Q529.6 474.3 529.6 469.3Z' fill='%23F3DC9E' opacity='.8'/%3E%3Ccircle cx='443.3' cy='227.1' r='0.6' fill='%23E9CC84' opacity='0.90'/%3E%3Ccircle cx='108.3' cy='301.1' r='0.6' fill='%23FFF4DC' opacity='0.28'/%3E%3Ccircle cx='200.3' cy='157.9' r='1.5' fill='%23FFF4DC' opacity='0.46'/%3E%3Ccircle cx='480.4' cy='294.6' r='0.6' fill='%23FFF4DC' opacity='0.80'/%3E%3Ccircle cx='116.1' cy='388.6' r='1' fill='%23FFF4DC' opacity='0.27'/%3E%3Ccircle cx='79.1' cy='577.8' r='1' fill='%23FFF4DC' opacity='0.54'/%3E%3Ccircle cx='171.2' cy='523.4' r='1' fill='%23FFF4DC' opacity='0.43'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='430' height='430'%3E%3Ccircle cx='105.3' cy='156.8' r='0.6' fill='%23FFF4DC' opacity='0.75'/%3E%3Ccircle cx='352.2' cy='110.8' r='1' fill='%23FFF4DC' opacity='0.88'/%3E%3Ccircle cx='99.9' cy='209.9' r='0.6' fill='%23E9CC84' opacity='0.43'/%3E%3Ccircle cx='101.0' cy='99.0' r='0.6' fill='%23FFF4DC' opacity='0.28'/%3E%3Ccircle cx='180.5' cy='209.3' r='1' fill='%23E9CC84' opacity='0.75'/%3E%3Ccircle cx='183.6' cy='330.3' r='0.6' fill='%23FFF4DC' opacity='0.48'/%3E%3Ccircle cx='368.9' cy='253.7' r='0.6' fill='%23FFF4DC' opacity='0.34'/%3E%3Ccircle cx='364.9' cy='133.6' r='0.6' fill='%23FFF4DC' opacity='0.90'/%3E%3Ccircle cx='31.3' cy='235.1' r='0.6' fill='%23FFF4DC' opacity='0.93'/%3E%3Ccircle cx='61.9' cy='97.2' r='0.6' fill='%23FFF4DC' opacity='0.71'/%3E%3Ccircle cx='241.5' cy='402.2' r='0.6' fill='%23FFF4DC' opacity='0.44'/%3E%3Ccircle cx='30.6' cy='265.6' r='0.6' fill='%23FFF4DC' opacity='0.48'/%3E%3Ccircle cx='18.8' cy='300.6' r='0.6' fill='%23FFF4DC' opacity='0.90'/%3E%3Ccircle cx='178.4' cy='429.4' r='0.6' fill='%23FFF4DC' opacity='0.64'/%3E%3Ccircle cx='128.6' cy='310.9' r='0.6' fill='%23FFF4DC' opacity='0.65'/%3E%3Ccircle cx='405.1' cy='279.9' r='1.5' fill='%23FFF4DC' opacity='0.92'/%3E%3Ccircle cx='172.9' cy='135.9' r='0.6' fill='%23E9CC84' opacity='0.95'/%3E%3Ccircle cx='116.1' cy='291.1' r='0.6' fill='%23FFF4DC' opacity='0.35'/%3E%3Ccircle cx='227.4' cy='391.4' r='0.6' fill='%23E9CC84' opacity='0.63'/%3E%3Ccircle cx='362.5' cy='221.5' r='0.6' fill='%23FFF4DC' opacity='0.88'/%3E%3Ccircle cx='54.6' cy='284.7' r='0.6' fill='%23FFF4DC' opacity='0.76'/%3E%3Ccircle cx='267.3' cy='170.5' r='0.6' fill='%23FFF4DC' opacity='0.40'/%3E%3Ccircle cx='165.5' cy='18.4' r='0.6' fill='%23E9CC84' opacity='0.90'/%3E%3Ccircle cx='263.0' cy='271.8' r='1' fill='%23FFF4DC' opacity='0.85'/%3E%3Ccircle cx='184.9' cy='197.6' r='1' fill='%23FFF4DC' opacity='0.58'/%3E%3Ccircle cx='254.3' cy='31.8' r='1' fill='%23E9CC84' opacity='0.91'/%3E%3Ccircle cx='363.6' cy='234.5' r='0.6' fill='%23E9CC84' opacity='0.59'/%3E%3Ccircle cx='165.5' cy='178.6' r='0.6' fill='%23E9CC84' opacity='0.79'/%3E%3Ccircle cx='319.6' cy='236.2' r='0.6' fill='%23FFF4DC' opacity='0.59'/%3E%3Ccircle cx='139.7' cy='195.9' r='0.6' fill='%23FFF4DC' opacity='0.71'/%3E%3Ccircle cx='17.2' cy='129.7' r='0.6' fill='%23E9CC84' opacity='0.69'/%3E%3Ccircle cx='106.7' cy='393.3' r='1' fill='%23FFF4DC' opacity='0.28'/%3E%3Ccircle cx='271.3' cy='42.4' r='0.6' fill='%23E9CC84' opacity='0.47'/%3E%3Ccircle cx='427.3' cy='50.0' r='0.6' fill='%23E9CC84' opacity='0.75'/%3E%3C/svg%3E");
	background-size: 620px 620px, 430px 430px;
	background-position: 0 0, 140px 90px;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 88%);
	mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 88%);
}

/* Een band is een sectie met een eigen tint (voorpagina: de zeven etappes lopen van nacht naar licht). */
.sr-band {
	position: relative;
	isolation: isolate;
	color: var(--sr-inkt);
	color-scheme: var(--sr-schema);
	background: var(--sr-bg);
}
.sr-band::before { position: absolute; z-index: -2; }
.sr-band::after { position: absolute; z-index: -1; }

/* ---------- Basis ---------- */

.sr-reis .sr-binnen,
.sr-reis .sr-drempel,
.sr-reis .sr-kaartpagina,
.sr-reis .sr-poort,
.sr-reis .sr-aankomst,
.sr-reis .sr-terugblik,
.sr-reis .sr-herkenning,
.sr-reis .sr-tekst,
.sr-reis .sr-proef,
.sr-reis .sr-sleutel {
	width: 100%;
	max-width: 42rem;
	margin-inline: auto;
	padding-inline: 20px;
	color: var(--sr-inkt);
}
.sr-reis .sr-binnen--breed { max-width: 72rem; }

.sr-reis a { color: var(--sr-accent); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
.sr-reis a:hover { text-decoration-thickness: 2px; }
.sr-reis :focus-visible { outline: 2px solid var(--sr-accent); outline-offset: 3px; border-radius: 4px; }
.sr-reis [hidden] { display: none !important; }
.sr-reis .sr-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sr-reis ::selection { background: var(--sr-goud); color: var(--sr-bg); }

/* Het opschrift: kapitalen met een gouden ruitje ervoor. */
.sr-opschrift,
.sr-voortgang,
.sr-etappe__status,
.sr-feiten dt {
	font-family: var(--sr-label);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sr-accent);
	line-height: 1.5;
}
.sr-opschrift { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--sr-r3); }
.sr-opschrift::before { content: ""; flex: none; width: 7px; height: 7px; transform: rotate(45deg); background: var(--sr-goudglans); box-shadow: 0 0 10px color-mix(in srgb, var(--sr-goud) 60%, transparent); }
.sr-opschrift--midden { justify-content: center; }
.sr-opschrift--midden::after { content: ""; flex: none; width: 7px; height: 7px; transform: rotate(45deg); background: var(--sr-goudglans); }

.sr-groot {
	display: block;
	font-family: var(--sr-display);
	font-size: var(--sr-tekst-xl);
	font-weight: 340;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.018em;
	line-height: 1.06;
	color: var(--sr-inkt);
	margin: 0 0 var(--sr-r4);
	padding: 0;
	text-wrap: balance;
}
/* Nadruk in een kop: cursief en in goud (nacht) of bordeaux (dag). */
.sr-groot em, .sr-kop em {
	font-style: italic;
	font-weight: 380;
	color: var(--sr-accent);
	background: var(--sr-nadruk);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	padding-inline-end: 0.06em;
}
.sr-proef .sr-groot,
.sr-herkenning .sr-groot,
.sr-sleutel .sr-groot,
.sr-ontgrendeld .sr-groot,
.sr-stap label.sr-groot,
.sr-keuze legend.sr-groot,
.sr-groot--m { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem); line-height: 1.2; font-variation-settings: "opsz" 60; letter-spacing: -0.01em; }
.sr-lood { font-size: var(--sr-tekst-l); line-height: 1.45; margin: 0 0 var(--sr-r4); font-weight: 350; }
.sr-klein { font-size: var(--sr-tekst-s); line-height: 1.55; color: var(--sr-gedempt); margin: var(--sr-r2) 0; }
.sr-kop { font-family: var(--sr-display); font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem); font-weight: 360; font-variation-settings: "opsz" 60; letter-spacing: -0.01em; line-height: 1.2; margin: var(--sr-r5) 0 var(--sr-r3); color: var(--sr-inkt); text-wrap: balance; }
.sr-terugnaar { margin: 0 0 var(--sr-r4); font-size: var(--sr-tekst-s); }
.sr-terugnaar a { display: inline-flex; align-items: center; min-height: 44px; }

/* Een gouden haarlijn die naar de randen uitdooft: de scheiding tussen delen. */
.sr-haarlijn { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--sr-goudlijn) 18%, var(--sr-goudlijn) 82%, transparent); opacity: 0.7; }

.sr-melding { border-left: 3px solid var(--sr-rand); background: var(--sr-vlak); padding: var(--sr-r3); border-radius: 0 var(--sr-r2) var(--sr-r2) 0; font-size: var(--sr-tekst-s); margin: 0 0 var(--sr-r4); }

/* ---------- Knoppen en velden ---------- */

.sr-knop {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 14px 30px;
	border: 0;
	border-radius: 999px;
	background: var(--sr-knop-bg);
	background-color: var(--sr-knop-vast);
	color: var(--sr-knop-inkt) !important;
	font-family: var(--sr-label);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.25;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	/* Glans: een lichte bovenrand, een donkere onderrand, een fijne binnenlijn en een zachte gloed eronder. */
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 0.55),
		inset 0 -1px 0 rgb(0 0 0 / 0.22),
		inset 0 0 0 4px transparent,
		0 10px 28px -10px color-mix(in srgb, var(--sr-knop-vast) 70%, transparent),
		0 2px 6px rgb(var(--sr-schaduw) / 0.3);
	transition: transform var(--sr-duur-1) var(--sr-zacht), box-shadow var(--sr-duur-2) var(--sr-zacht), filter var(--sr-duur-2) var(--sr-zacht);
}
.sr-knop::after { content: ""; position: absolute; inset: 4px; border-radius: inherit; border: 1px solid color-mix(in srgb, var(--sr-knop-inkt) 28%, transparent); pointer-events: none; }
.sr-knop:hover { transform: translateY(-2px); filter: brightness(1.06); }
.sr-knop:active { transform: translateY(0); }
.sr-knop:focus-visible { outline: 2px solid var(--sr-inkt); outline-offset: 4px; border-radius: 999px; }
.sr-knop[disabled] { opacity: 0.6; cursor: default; transform: none; }
.sr-knop--rand { background: transparent; color: var(--sr-inkt) !important; box-shadow: inset 0 0 0 1.5px var(--sr-rand); }
.sr-knop--rand::after { display: none; }
.sr-knop--rand:hover { box-shadow: inset 0 0 0 1.5px var(--sr-inkt); background: color-mix(in srgb, var(--sr-inkt) 6%, transparent); filter: none; }
.sr-knop--stil { background: none; box-shadow: none; color: var(--sr-gedempt) !important; text-decoration: underline; padding-inline: var(--sr-r2); text-transform: none; letter-spacing: 0; font-weight: 400; font-family: var(--sr-serif); font-size: var(--sr-tekst-s); min-height: 44px; }
.sr-knop--stil::after { display: none; }
.sr-knoppen { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: var(--sr-r4) 0 0; }
.sr-tekstknop { background: none; border: 0; min-height: 44px; padding: var(--sr-r2) 0; color: var(--sr-gedempt); font: inherit; font-size: var(--sr-tekst-s); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.sr-pijl { width: 18px; height: 10px; flex: none; }

.sr-veld {
	display: block;
	width: 100%;
	min-height: 56px;
	padding: 14px 18px;
	margin: var(--sr-r3) 0;
	border: 1px solid var(--sr-rand);
	border-radius: 14px;
	background: color-mix(in srgb, var(--sr-vlak) 80%, transparent);
	color: var(--sr-inkt);
	font: inherit;
	transition: border-color var(--sr-duur-1) var(--sr-zacht), box-shadow var(--sr-duur-2) var(--sr-zacht);
}
.sr-veld::placeholder { color: var(--sr-gedempt); opacity: 1; font-style: italic; }
.sr-veld:focus-visible { outline: 0; border-color: var(--sr-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sr-accent) 35%, transparent); border-radius: 14px; }
/* Een schrijfveld heeft lijntjes, als een bladzijde uit een notitieboek. */
textarea.sr-veld {
	min-height: calc(2 * 2rem + 30px);
	resize: vertical;
	line-height: 2rem;
	padding-block: 14px;
	background-image: repeating-linear-gradient(180deg, transparent 0, transparent calc(2rem - 1px), color-mix(in srgb, var(--sr-rand) 45%, transparent) calc(2rem - 1px), color-mix(in srgb, var(--sr-rand) 45%, transparent) 2rem);
	background-position: 0 -4px;
	background-origin: content-box;
	background-clip: border-box;
	font-style: italic;
}
.sr-form label { display: block; }

.sr-vink { display: flex !important; gap: 14px; align-items: flex-start; font-size: var(--sr-tekst-s); line-height: 1.5; margin: var(--sr-r3) 0; padding-block: 4px; min-height: 44px; cursor: pointer; }
.sr-vink input, .sr-keuze__optie input {
	appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0;
	border: 1.5px solid var(--sr-rand); border-radius: 6px; background: var(--sr-vlak); display: grid; place-content: center; cursor: pointer;
}
.sr-keuze__optie input { border-radius: 50%; }
.sr-vink input::after { content: ""; width: 12px; height: 7px; border-left: 2px solid var(--sr-bg); border-bottom: 2px solid var(--sr-bg); transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform var(--sr-duur-1) var(--sr-zacht); }
.sr-vink input:checked { background: var(--sr-accent); border-color: var(--sr-accent); }
.sr-vink input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.sr-keuze__optie input::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--sr-accent); transform: scale(0); transition: transform var(--sr-duur-1) var(--sr-zacht); }
.sr-keuze__optie input:checked { border-color: var(--sr-accent); }
.sr-keuze__optie input:checked::after { transform: scale(1); }

.sr-keuze { border: 0; padding: 0; margin: 0; min-width: 0; }
.sr-keuze legend { padding: 0; }
.sr-keuze__optie {
	position: relative;
	display: flex !important;
	gap: var(--sr-r3);
	align-items: center;
	min-height: 68px;
	padding: 12px 18px;
	margin-bottom: 12px;
	border: 1px solid var(--sr-rand);
	border-radius: 18px;
	background: color-mix(in srgb, var(--sr-vlak) 70%, transparent);
	font-size: var(--sr-tekst-l);
	font-family: var(--sr-display);
	font-variation-settings: "opsz" 36;
	line-height: 1.25;
	cursor: pointer;
	transition: border-color var(--sr-duur-1) var(--sr-zacht), background-color var(--sr-duur-2) var(--sr-zacht), transform var(--sr-duur-1) var(--sr-zacht);
}
.sr-keuze__optie:hover { border-color: var(--sr-inkt); transform: translateX(3px); }
.sr-keuze__optie:has(input:checked) { border-color: var(--sr-accent); box-shadow: inset 0 0 0 1px var(--sr-accent), 0 0 34px -12px var(--sr-goud); background: var(--sr-vlak); }
.sr-keuze__optie:has(input:focus-visible) { outline: 2px solid var(--sr-accent); outline-offset: 3px; }
.sr-keuze__optie input:focus-visible { outline: 0; }
.sr-keuze__teken { flex: none; width: 44px; height: 44px; margin-left: auto; color: var(--sr-goud); }
.sr-keuze__teken * { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }

/* ---------- De chart: één tekening, gekleurd door --hd-* ---------- */

.sr-chart { display: block; width: 100%; height: auto; }
.sr-chart text { font-family: var(--sr-serif); }
.sr-chart--reis [data-variable], .sr-chart--reis [data-deel="kolommen"] { display: none; }

/* ---------- Sitekop (Bricks) ---------- */

.sr-sitekop { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--sr-r3); max-width: 76rem; margin: 0 auto; padding: 4px 20px; }
.sr-reis main { overflow-x: clip; }
.sr-sitekop__merk { white-space: nowrap; font-family: var(--sr-display); font-size: 1.25rem; font-style: italic; font-weight: 400; letter-spacing: 0.01em; color: var(--sr-inkt) !important; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.sr-sitekop__merk svg { width: 18px; height: 18px; color: var(--sr-goud); }
.sr-sitekop nav { display: flex; gap: 0; margin-right: -8px; }
@media (min-width: 44rem) { .sr-sitekop nav a { font-size: 0.75rem; letter-spacing: 0.18em; padding: 0 14px; } }
.sr-sitekop nav a { white-space: nowrap; font-family: var(--sr-label); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--sr-gedempt); display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
.sr-sitekop nav a:hover { color: var(--sr-inkt); }

/* ---------- De drempel ---------- */

.sr-reis .sr-drempel { max-width: 76rem; padding-inline: 0; }
.sr-stap { position: relative; padding: var(--sr-r4) 20px; }
.sr-js .sr-stap { display: none; }
.sr-js .sr-stap.is-actief { display: grid; align-content: center; min-height: calc(100svh - 64px); animation: sr-komt var(--sr-duur-3) var(--sr-zacht) both; }
.sr-js .sr-stap:not(.sr-stap--begin).is-actief { max-width: 40rem; margin-inline: auto; }

/* Stap 1: de inleiding. Op een telefoon hangt de chart als een gouden amulet boven de tekst
   (tussen merk en menu); vanaf 60rem staat ze groot naast de tekst. */
.sr-js .sr-stap--begin.is-actief { align-content: start; padding-top: 0; padding-bottom: 20px; }
.sr-stap--begin .sr-stap__beeld { position: relative; width: 6.25rem; margin: -18px auto 8px; pointer-events: none; }
.sr-stap--begin .sr-stap__beeld::before { content: ""; position: absolute; inset: -12% -70%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--sr-goud) 30%, transparent), color-mix(in srgb, var(--sr-gloed) 30%, transparent) 50%, transparent 72%); }
.sr-stap--begin .sr-stap__beeld::after { content: ""; position: absolute; left: 50%; top: 52%; width: 15rem; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid color-mix(in srgb, var(--sr-goudlijn) 35%, transparent); box-shadow: 0 0 0 26px color-mix(in srgb, var(--sr-goudlijn) 5%, transparent), inset 0 0 0 22px color-mix(in srgb, var(--sr-goudlijn) 4%, transparent); z-index: -1; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 78%); mask-image: linear-gradient(180deg, #000 40%, transparent 78%); }
.sr-stap--begin .sr-groot { font-size: clamp(1.9375rem, 1.1rem + 3.7vw, 4.25rem); margin-bottom: 14px; }
.sr-stap--begin .sr-opschrift { margin-bottom: 12px; }
.sr-stap--begin .sr-lood { font-size: 1.0625rem; line-height: 1.5; color: var(--sr-inkt); max-width: 34rem; margin-bottom: 16px; }
.sr-stap__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 0; }
.sr-stap__acties a:not(.sr-knop) { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--sr-tekst-s); }
.sr-stap--begin .sr-klein { font-size: 0.875rem; line-height: 1.45; margin: 12px 0 0; display: flex; gap: 10px; align-items: baseline; }
.sr-gratis { flex: none; font-family: var(--sr-label); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sr-accent); border: 1px solid var(--sr-goud); border-radius: 999px; padding: 3px 10px 2px; }

.sr-voortgang { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--sr-r4); color: var(--sr-gedempt); }
.sr-voortgang__maan { display: inline-flex; gap: 6px; }
.sr-voortgang__maan i { width: 18px; height: 3px; border-radius: 2px; background: var(--sr-lijn); }
.sr-voortgang__maan i.is-gedaan { background: var(--sr-goud); }
.sr-terugknop { background: none; border: 0; min-height: 44px; padding: 0; margin-top: var(--sr-r3); color: var(--sr-gedempt); font: inherit; font-size: var(--sr-tekst-s); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; justify-self: start; }
.sr-stap .sr-keuze + p { margin: var(--sr-r4) 0 0; }
.sr-stap__vraag { font-size: 1.125rem; line-height: 1.5; margin: 0 0 20px; color: var(--sr-inkt); }
.sr-stap .sr-keuze .sr-groot { margin-bottom: 14px; }
.sr-stap .sr-voortgang { margin-bottom: 18px; }
@media (max-width: 30rem) { .sr-keuze__optie { min-height: 60px; margin-bottom: 10px; font-size: 1.25rem; } .sr-stap .sr-keuze + p { margin-top: 18px; } .sr-js .sr-stap:not(.sr-stap--begin).is-actief { align-content: start; padding-top: 12px; } }

.sr-terug { max-width: 76rem; margin: 0 auto; padding: 0 20px; font-size: var(--sr-tekst-s); color: var(--sr-gedempt); }
.sr-terug summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }

@media (min-width: 60rem) {
	.sr-terug { padding-inline: 40px; }
	.sr-js .sr-stap--begin.is-actief { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); column-gap: var(--sr-r6); align-content: center; align-items: center; padding: var(--sr-r4) 40px var(--sr-r6); }
	.sr-stap--begin .sr-stap__beeld { grid-column: 2; grid-row: 1; width: 100%; max-width: 34rem; margin: 0; justify-self: center; }
	.sr-stap--begin .sr-stap__beeld::before { inset: 0 -12%; }
	.sr-stap--begin .sr-stap__beeld::after { display: none; }
	.sr-stap--begin .sr-stap__tekst { grid-column: 1; grid-row: 1; }
	.sr-stap--begin .sr-lood { font-size: 1.25rem; }
}

/* De horizon: een grote boog die oplicht, onder het eerste scherm. */
.sr-horizon { position: relative; height: 84px; overflow: hidden; pointer-events: none; margin-top: -30px; }
.sr-horizon::before {
	content: ""; position: absolute; left: 50%; top: 26px; width: max(150vw, 900px); aspect-ratio: 3.2; transform: translateX(-50%); border-radius: 50%;
	border-top: 1px solid var(--sr-goudlijn);
	background: radial-gradient(ellipse 60% 100% at 50% 0%, color-mix(in srgb, var(--sr-gloed) 55%, transparent), transparent 60%);
	box-shadow: 0 -1px 26px 0 color-mix(in srgb, var(--sr-goud) 45%, transparent), 0 -18px 80px -8px color-mix(in srgb, #C8662E 40%, transparent);
}

/* ---------- Voorpagina ---------- */

.sr-sectie { padding-block: var(--sr-r6); }
.sr-sectie__kop { max-width: 46rem; }
.sr-sectie .sr-groot { font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem); }
@media (min-width: 60rem) { .sr-sectie { padding-block: var(--sr-r7); } }

/* Wat is Human Design: de chart met drie aanwijzers. */
.sr-uitleg { display: grid; gap: var(--sr-r4); align-items: center; }
.sr-uitleg__kop .sr-lood { margin-bottom: 0; }
.sr-uitleg__beeld { position: relative; width: min(100%, 26rem); margin-inline: auto; }
.sr-uitleg__beeld::before { content: ""; position: absolute; inset: 4% -8%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--sr-goud) 20%, transparent), transparent 72%); }
.sr-wijzer {
	position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
	width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
	background: var(--sr-bg); color: var(--sr-accent); border: 1.5px solid var(--sr-goud);
	font-family: var(--sr-label); font-size: 0.8125rem; font-weight: 700;
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--sr-bg) 55%, transparent), 0 0 22px var(--sr-goud);
}
.sr-uitleg__lijst { list-style: none; margin: var(--sr-r4) 0; padding: 0; display: grid; gap: var(--sr-r3); }
.sr-uitleg__lijst li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; }
.sr-uitleg__lijst .sr-wijzer { position: static; transform: none; box-shadow: none; margin-top: 2px; }
.sr-uitleg__lijst strong { font-family: var(--sr-display); font-weight: 480; font-size: 1.125em; display: block; line-height: 1.3; }
.sr-uitleg__lijst span.sr-uitleg__sub { color: var(--sr-gedempt); font-size: var(--sr-tekst-s); }
.sr-uitleg__tekst p { margin: 0 0 1em; max-width: 36rem; }
.sr-drie { list-style: none; margin: var(--sr-r5) 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--sr-lijn); }
.sr-drie li { padding: var(--sr-r3) 0; border-bottom: 1px solid var(--sr-lijn); display: grid; grid-template-columns: 2.6rem 1fr; column-gap: var(--sr-r3); align-items: baseline; }
.sr-drie__nr { font-family: var(--sr-display); font-style: italic; font-size: 1.75rem; line-height: 1; color: var(--sr-goud); font-variation-settings: "opsz" 144; }
.sr-drie strong { font-family: var(--sr-display); font-weight: 420; font-size: var(--sr-tekst-l); line-height: 1.25; display: block; }
.sr-drie span.sr-drie__sub { color: var(--sr-gedempt); grid-column: 2; }
@media (min-width: 60rem) {
	.sr-uitleg { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); grid-template-areas: "beeld kop" "beeld tekst"; gap: var(--sr-r4) var(--sr-r7); }
	.sr-uitleg__kop { grid-area: kop; align-self: end; }
	.sr-uitleg__beeld { grid-area: beeld; }
	.sr-uitleg__tekst { grid-area: tekst; align-self: start; }
	.sr-uitleg__beeld { width: 100%; max-width: 30rem; }
	.sr-drie { grid-template-columns: repeat(3, 1fr); border-top: 0; gap: var(--sr-r5); }
	.sr-drie li { border-bottom: 0; border-top: 1px solid var(--sr-goudlijn); padding-top: var(--sr-r4); grid-template-columns: 1fr; row-gap: 8px; }
	.sr-drie span.sr-drie__sub { grid-column: 1; }
}

/* Lezen, proberen, terugkomen: drie stappen aan één gouden draad. */
.sr-wat { list-style: none; margin: var(--sr-r5) 0 var(--sr-r4); padding: 0; position: relative; display: grid; gap: var(--sr-r4); counter-reset: wat; }
.sr-wat::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 1px; background: linear-gradient(180deg, var(--sr-goudlijn), color-mix(in srgb, var(--sr-goudlijn) 30%, transparent)); }
.sr-wat li { position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: var(--sr-r3); }
.sr-wat__teken { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sr-bg); border: 1px solid var(--sr-goud); color: var(--sr-accent); box-shadow: 0 0 20px -6px var(--sr-goud); }
.sr-wat__teken svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sr-wat h3 { font-family: var(--sr-display); font-weight: 400; font-size: var(--sr-tekst-l); line-height: 1.2; margin: 8px 0 4px; }
.sr-wat p { margin: 0; color: var(--sr-gedempt); }
.sr-spiegel { font-family: var(--sr-display); font-style: italic; font-size: var(--sr-tekst-l); line-height: 1.35; color: var(--sr-inkt); margin: var(--sr-r5) 0 0; }
@media (min-width: 60rem) {
	.sr-wat { grid-template-columns: repeat(3, 1fr); gap: var(--sr-r5); }
	.sr-wat::before { left: 22px; right: 12%; top: 22px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, var(--sr-goudlijn), color-mix(in srgb, var(--sr-goudlijn) 20%, transparent)); }
	.sr-wat li { grid-template-columns: 1fr; row-gap: var(--sr-r3); }
}

/* De zeven etappes: zeven banden, van nacht naar dageraad. */
.sr-etappes__kop { padding-bottom: var(--sr-r5); }
.sr-tinten { list-style: none; margin: 0; padding: 0; display: grid; }
.sr-tint {
	position: relative; isolation: isolate; overflow: hidden;
	display: grid; grid-template-columns: 4.25rem 1fr; column-gap: 6px; align-items: start;
	padding: 26px 20px 28px;
	color: var(--sr-inkt);
	background:
		radial-gradient(ellipse 90% 120% at 100% 100%, color-mix(in srgb, var(--sr-gloed) calc(var(--sr-gloed-a) * 90%), transparent), transparent 70%),
		linear-gradient(180deg, var(--sr-bg), var(--sr-bg2));
}
.sr-tint::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: var(--sr-sterren); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620'%3E%3Ccircle cx='148.0' cy='566.4' r='0.6' fill='%23E9CC84' opacity='0.28'/%3E%3Ccircle cx='530.6' cy='223.8' r='0.6' fill='%23FFF4DC' opacity='0.94'/%3E%3Ccircle cx='603.1' cy='329.4' r='0.6' fill='%23FFF4DC' opacity='0.67'/%3E%3Ccircle cx='482.0' cy='483.5' r='0.6' fill='%23FFF4DC' opacity='0.85'/%3E%3Ccircle cx='224.7' cy='298.5' r='0.6' fill='%23E9CC84' opacity='0.83'/%3E%3Ccircle cx='222.0' cy='110.9' r='1.5' fill='%23FFF4DC' opacity='0.57'/%3E%3Cpath d='M222.0 105.9Q222.0 110.9 227.0 110.9Q222.0 110.9 222.0 115.9Q222.0 110.9 217.0 110.9Q222.0 110.9 222.0 105.9Z' fill='%23F3DC9E' opacity='.8'/%3E%3Ccircle cx='282.9' cy='67.0' r='0.6' fill='%23FFF4DC' opacity='0.79'/%3E%3Ccircle cx='52.4' cy='375.5' r='1' fill='%23FFF4DC' opacity='0.66'/%3E%3Ccircle cx='218.7' cy='193.9' r='0.6' fill='%23FFF4DC' opacity='0.47'/%3E%3Ccircle cx='98.1' cy='542.0' r='0.6' fill='%23FFF4DC' opacity='0.95'/%3E%3Ccircle cx='300.4' cy='110.5' r='0.6' fill='%23E9CC84' opacity='0.66'/%3E%3Ccircle cx='305.5' cy='108.4' r='0.6' fill='%23FFF4DC' opacity='0.25'/%3E%3Ccircle cx='428.8' cy='471.2' r='0.6' fill='%23FFF4DC' opacity='0.77'/%3E%3Ccircle cx='547.4' cy='230.2' r='0.6' fill='%23FFF4DC' opacity='0.83'/%3E%3Ccircle cx='312.2' cy='298.7' r='1' fill='%23E9CC84' opacity='0.48'/%3E%3Ccircle cx='548.6' cy='128.4' r='0.6' fill='%23E9CC84' opacity='0.75'/%3E%3Ccircle cx='129.5' cy='32.3' r='0.6' fill='%23E9CC84' opacity='0.78'/%3E%3Ccircle cx='130.6' cy='315.8' r='1' fill='%23FFF4DC' opacity='0.48'/%3E%3Ccircle cx='218.4' cy='127.4' r='1' fill='%23FFF4DC' opacity='0.73'/%3E%3Ccircle cx='433.8' cy='273.0' r='0.6' fill='%23FFF4DC' opacity='0.49'/%3E%3Ccircle cx='62.3' cy='239.3' r='0.6' fill='%23E9CC84' opacity='0.85'/%3E%3Ccircle cx='479.8' cy='143.6' r='0.6' fill='%23FFF4DC' opacity='0.30'/%3E%3Ccircle cx='460.3' cy='510.1' r='0.6' fill='%23E9CC84' opacity='0.29'/%3E%3Ccircle cx='463.1' cy='270.1' r='1.5' fill='%23E9CC84' opacity='0.39'/%3E%3Cpath d='M463.1 265.1Q463.1 270.1 468.1 270.1Q463.1 270.1 463.1 275.1Q463.1 270.1 458.1 270.1Q463.1 270.1 463.1 265.1Z' fill='%23F3DC9E' opacity='.8'/%3E%3Ccircle cx='174.8' cy='525.6' r='1' fill='%23E9CC84' opacity='0.92'/%3E%3Ccircle cx='18.2' cy='547.9' r='0.6' fill='%23E9CC84' opacity='0.42'/%3E%3Ccircle cx='573.1' cy='517.1' r='0.6' fill='%23FFF4DC' opacity='0.51'/%3E%3Ccircle cx='115.3' cy='16.7' r='0.6' fill='%23FFF4DC' opacity='0.79'/%3E%3Ccircle cx='54.3' cy='227.2' r='0.6' fill='%23E9CC84' opacity='0.38'/%3E%3Ccircle cx='343.3' cy='314.1' r='0.6' fill='%23FFF4DC' opacity='0.29'/%3E%3Ccircle cx='419.7' cy='145.5' r='0.6' fill='%23FFF4DC' opacity='0.77'/%3E%3Ccircle cx='464.1' cy='267.5' r='0.6' fill='%23E9CC84' opacity='0.31'/%3E%3Ccircle cx='363.8' cy='94.5' r='1' fill='%23FFF4DC' opacity='0.70'/%3E%3Ccircle cx='286.7' cy='166.9' r='0.6' fill='%23FFF4DC' opacity='0.46'/%3E%3Ccircle cx='8.4' cy='488.3' r='0.6' fill='%23FFF4DC' opacity='0.78'/%3E%3Ccircle cx='330.1' cy='178.7' r='0.6' fill='%23E9CC84' opacity='0.80'/%3E%3Ccircle cx='17.4' cy='201.7' r='0.6' fill='%23FFF4DC' opacity='0.62'/%3E%3Ccircle cx='564.1' cy='264.9' r='1' fill='%23FFF4DC' opacity='0.94'/%3E%3Ccircle cx='152.0' cy='267.0' r='1.5' fill='%23FFF4DC' opacity='0.35'/%3E%3Ccircle cx='585.7' cy='85.2' r='0.6' fill='%23FFF4DC' opacity='0.63'/%3E%3Ccircle cx='111.7' cy='422.7' r='1' fill='%23FFF4DC' opacity='0.29'/%3E%3Ccircle cx='539.9' cy='281.2' r='0.6' fill='%23FFF4DC' opacity='0.77'/%3E%3Ccircle cx='179.4' cy='245.5' r='0.6' fill='%23E9CC84' opacity='0.93'/%3E%3Ccircle cx='385.9' cy='67.2' r='0.6' fill='%23FFF4DC' opacity='0.91'/%3E%3Ccircle cx='361.1' cy='502.1' r='0.6' fill='%23E9CC84' opacity='0.36'/%3E%3Ccircle cx='407.4' cy='139.8' r='0.6' fill='%23E9CC84' opacity='0.64'/%3E%3Ccircle cx='228.1' cy='538.3' r='1' fill='%23FFF4DC' opacity='0.25'/%3E%3Ccircle cx='253.6' cy='515.7' r='1' fill='%23E9CC84' opacity='0.45'/%3E%3Ccircle cx='604.3' cy='0.5' r='1.5' fill='%23FFF4DC' opacity='0.62'/%3E%3Cpath d='M604.3 -4.5Q604.3 0.5 609.3 0.5Q604.3 0.5 604.3 5.5Q604.3 0.5 599.3 0.5Q604.3 0.5 604.3 -4.5Z' fill='%23F3DC9E' opacity='.8'/%3E%3Ccircle cx='541.4' cy='256.9' r='0.6' fill='%23E9CC84' opacity='0.84'/%3E%3Ccircle cx='299.3' cy='162.6' r='0.6' fill='%23FFF4DC' opacity='0.52'/%3E%3Ccircle cx='443.1' cy='521.1' r='0.6' fill='%23FFF4DC' opacity='0.76'/%3E%3Ccircle cx='258.2' cy='409.3' r='1' fill='%23FFF4DC' opacity='0.87'/%3E%3Ccircle cx='473.1' cy='288.1' r='0.6' fill='%23FFF4DC' opacity='0.32'/%3E%3Ccircle cx='192.2' cy='276.7' r='0.6' fill='%23FFF4DC' opacity='0.30'/%3E%3Ccircle cx='519.5' cy='604.4' r='1' fill='%23FFF4DC' opacity='0.68'/%3E%3Ccircle cx='537.3' cy='108.9' r='1' fill='%23FFF4DC' opacity='0.50'/%3E%3Ccircle cx='94.2' cy='499.2' r='0.6' fill='%23FFF4DC' opacity='0.54'/%3E%3Ccircle cx='250.8' cy='303.8' r='1' fill='%23FFF4DC' opacity='0.74'/%3E%3Ccircle cx='48.3' cy='347.0' r='0.6' fill='%23FFF4DC' opacity='0.38'/%3E%3Ccircle cx='145.7' cy='272.8' r='1' fill='%23E9CC84' opacity='0.45'/%3E%3Ccircle cx='270.4' cy='112.9' r='0.6' fill='%23FFF4DC' opacity='0.85'/%3E%3Ccircle cx='529.6' cy='474.3' r='1.5' fill='%23FFF4DC' opacity='0.73'/%3E%3Cpath d='M529.6 469.3Q529.6 474.3 534.6 474.3Q529.6 474.3 529.6 479.3Q529.6 474.3 524.6 474.3Q529.6 474.3 529.6 469.3Z' fill='%23F3DC9E' opacity='.8'/%3E%3Ccircle cx='443.3' cy='227.1' r='0.6' fill='%23E9CC84' opacity='0.90'/%3E%3Ccircle cx='108.3' cy='301.1' r='0.6' fill='%23FFF4DC' opacity='0.28'/%3E%3Ccircle cx='200.3' cy='157.9' r='1.5' fill='%23FFF4DC' opacity='0.46'/%3E%3Ccircle cx='480.4' cy='294.6' r='0.6' fill='%23FFF4DC' opacity='0.80'/%3E%3Ccircle cx='116.1' cy='388.6' r='1' fill='%23FFF4DC' opacity='0.27'/%3E%3Ccircle cx='79.1' cy='577.8' r='1' fill='%23FFF4DC' opacity='0.54'/%3E%3Ccircle cx='171.2' cy='523.4' r='1' fill='%23FFF4DC' opacity='0.43'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='430' height='430'%3E%3Ccircle cx='105.3' cy='156.8' r='0.6' fill='%23FFF4DC' opacity='0.75'/%3E%3Ccircle cx='352.2' cy='110.8' r='1' fill='%23FFF4DC' opacity='0.88'/%3E%3Ccircle cx='99.9' cy='209.9' r='0.6' fill='%23E9CC84' opacity='0.43'/%3E%3Ccircle cx='101.0' cy='99.0' r='0.6' fill='%23FFF4DC' opacity='0.28'/%3E%3Ccircle cx='180.5' cy='209.3' r='1' fill='%23E9CC84' opacity='0.75'/%3E%3Ccircle cx='183.6' cy='330.3' r='0.6' fill='%23FFF4DC' opacity='0.48'/%3E%3Ccircle cx='368.9' cy='253.7' r='0.6' fill='%23FFF4DC' opacity='0.34'/%3E%3Ccircle cx='364.9' cy='133.6' r='0.6' fill='%23FFF4DC' opacity='0.90'/%3E%3Ccircle cx='31.3' cy='235.1' r='0.6' fill='%23FFF4DC' opacity='0.93'/%3E%3Ccircle cx='61.9' cy='97.2' r='0.6' fill='%23FFF4DC' opacity='0.71'/%3E%3Ccircle cx='241.5' cy='402.2' r='0.6' fill='%23FFF4DC' opacity='0.44'/%3E%3Ccircle cx='30.6' cy='265.6' r='0.6' fill='%23FFF4DC' opacity='0.48'/%3E%3Ccircle cx='18.8' cy='300.6' r='0.6' fill='%23FFF4DC' opacity='0.90'/%3E%3Ccircle cx='178.4' cy='429.4' r='0.6' fill='%23FFF4DC' opacity='0.64'/%3E%3Ccircle cx='128.6' cy='310.9' r='0.6' fill='%23FFF4DC' opacity='0.65'/%3E%3Ccircle cx='405.1' cy='279.9' r='1.5' fill='%23FFF4DC' opacity='0.92'/%3E%3Ccircle cx='172.9' cy='135.9' r='0.6' fill='%23E9CC84' opacity='0.95'/%3E%3Ccircle cx='116.1' cy='291.1' r='0.6' fill='%23FFF4DC' opacity='0.35'/%3E%3Ccircle cx='227.4' cy='391.4' r='0.6' fill='%23E9CC84' opacity='0.63'/%3E%3Ccircle cx='362.5' cy='221.5' r='0.6' fill='%23FFF4DC' opacity='0.88'/%3E%3Ccircle cx='54.6' cy='284.7' r='0.6' fill='%23FFF4DC' opacity='0.76'/%3E%3Ccircle cx='267.3' cy='170.5' r='0.6' fill='%23FFF4DC' opacity='0.40'/%3E%3Ccircle cx='165.5' cy='18.4' r='0.6' fill='%23E9CC84' opacity='0.90'/%3E%3Ccircle cx='263.0' cy='271.8' r='1' fill='%23FFF4DC' opacity='0.85'/%3E%3Ccircle cx='184.9' cy='197.6' r='1' fill='%23FFF4DC' opacity='0.58'/%3E%3Ccircle cx='254.3' cy='31.8' r='1' fill='%23E9CC84' opacity='0.91'/%3E%3Ccircle cx='363.6' cy='234.5' r='0.6' fill='%23E9CC84' opacity='0.59'/%3E%3Ccircle cx='165.5' cy='178.6' r='0.6' fill='%23E9CC84' opacity='0.79'/%3E%3Ccircle cx='319.6' cy='236.2' r='0.6' fill='%23FFF4DC' opacity='0.59'/%3E%3Ccircle cx='139.7' cy='195.9' r='0.6' fill='%23FFF4DC' opacity='0.71'/%3E%3Ccircle cx='17.2' cy='129.7' r='0.6' fill='%23E9CC84' opacity='0.69'/%3E%3Ccircle cx='106.7' cy='393.3' r='1' fill='%23FFF4DC' opacity='0.28'/%3E%3Ccircle cx='271.3' cy='42.4' r='0.6' fill='%23E9CC84' opacity='0.47'/%3E%3Ccircle cx='427.3' cy='50.0' r='0.6' fill='%23E9CC84' opacity='0.75'/%3E%3C/svg%3E"); background-size: 620px 620px, 430px 430px; pointer-events: none; }
.sr-tint__lucht { position: absolute; right: 20px; top: 26px; width: 84px; height: 54px; overflow: hidden; border-bottom: 1px solid var(--sr-goudlijn); pointer-events: none; }
.sr-tint__lucht::before { content: ""; position: absolute; left: 50%; top: 100%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; transform: translateY(var(--zon, 60%)); background: radial-gradient(circle at 40% 35%, #FFF6D8, #F3D27A 45%, #D9A441 100%); box-shadow: 0 0 0 7px rgb(243 210 122 / 0.22), 0 0 0 16px rgb(243 210 122 / 0.1), 0 0 44px 10px rgb(232 160 80 / 0.55); }
.sr-tint.sr-licht-1 { --zon: 150%; } .sr-tint.sr-licht-2 { --zon: 105%; } .sr-tint.sr-licht-3 { --zon: 72%; } .sr-tint.sr-licht-4 { --zon: 38%; }
.sr-tint.sr-licht-5 { --zon: -8%; } .sr-tint.sr-licht-6 { --zon: -62%; } .sr-tint.sr-licht-7 { --zon: -112%; }
.sr-tint > div { padding-right: 96px; }
.sr-tint__nr { font-family: var(--sr-display); font-style: italic; font-weight: 300; font-size: 3.75rem; line-height: 0.9; font-variation-settings: "opsz" 144; color: var(--sr-accent); background: var(--sr-nadruk); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: 0.08em; }
.sr-tint h3 { font-family: var(--sr-display); font-weight: 380; font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem); line-height: 1.15; margin: 4px 0 6px; letter-spacing: -0.01em; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.sr-tint p { margin: 0; color: var(--sr-gedempt); line-height: 1.5; }
.sr-tint__duur { display: block; margin-top: 10px; font-family: var(--sr-label); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sr-gedempt); }
@media (min-width: 60rem) {
	.sr-tinten { grid-template-columns: repeat(7, 1fr); max-width: 90rem; margin-inline: auto; }
	.sr-tint { grid-template-columns: 1fr; align-content: end; min-height: 34rem; padding: 28px 20px 34px; transition: flex var(--sr-duur-2); background: radial-gradient(ellipse 160% 60% at 50% 100%, color-mix(in srgb, var(--sr-gloed) calc(var(--sr-gloed-a) * 100%), transparent), transparent 75%), linear-gradient(180deg, var(--sr-bg), var(--sr-bg2)); }
	.sr-tint__lucht { left: 0; right: 0; top: 0; width: auto; height: 40%; }
	.sr-tint { min-height: 36rem; }
	.sr-tint h3 { min-height: 2.35em; align-content: start; }
	.sr-tint h3 .sr-gratis { position: absolute; left: 20px; top: 20px; }
	.sr-tint__lucht::before { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
	.sr-tint > div { padding-right: 0; }
	.sr-tint__nr { font-size: 6.5rem; margin-bottom: var(--sr-r3); }
	.sr-tint h3 { font-size: 1.625rem; }
	.sr-tint p { font-size: 1rem; min-height: 6.2em; }
	.sr-tint + .sr-tint { border-left: 1px solid color-mix(in srgb, var(--sr-goudlijn) 30%, transparent); }
}
.sr-etappes__voet { padding-block: var(--sr-r4) var(--sr-r6); }

/* Eerlijk vooraf: een toegangsbewijs in twee helften. */
.sr-kaartje { display: grid; margin: var(--sr-r5) 0 var(--sr-r4); border-radius: 22px; border: 1px solid transparent; background: linear-gradient(var(--sr-vlak), var(--sr-vlak)) padding-box, var(--sr-goudglans) border-box; box-shadow: 0 30px 60px -34px rgb(var(--sr-schaduw) / 0.45); }
.sr-kaartje__deel { padding: 26px 24px 28px; }
.sr-kaartje__deel + .sr-kaartje__deel { border-top: 1.5px dashed var(--sr-rand); position: relative; }
.sr-kaartje h3 { font-family: var(--sr-display); font-weight: 380; font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); line-height: 1.15; margin: 0 0 var(--sr-r3); }
.sr-kaartje__prijs { font-family: var(--sr-display); font-size: 2.75rem; font-weight: 340; line-height: 1; font-variation-settings: "opsz" 144; margin: var(--sr-r3) 0 4px; }
.sr-lijst { list-style: none; padding: 0; margin: 0 0 var(--sr-r3); }
.sr-lijst li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.sr-lijst li::before { content: ""; position: absolute; left: 4px; top: 0.55em; width: 8px; height: 8px; transform: rotate(45deg); border: 1.5px solid var(--sr-goud); }
.sr-lijst--gedaan li::before { width: 13px; height: 7px; top: 0.48em; left: 2px; border: 0; border-left: 2px solid var(--sr-goud); border-bottom: 2px solid var(--sr-goud); transform: rotate(-45deg); }
@media (min-width: 48rem) {
	.sr-kaartje { grid-template-columns: 1fr 1fr; }
	.sr-kaartje__deel { padding: 36px 40px 40px; }
	.sr-kaartje__deel + .sr-kaartje__deel { border-top: 0; border-left: 1.5px dashed var(--sr-rand); }
}

/* Vragen. */
.sr-vragen { margin-top: var(--sr-r4); border-top: 1px solid var(--sr-lijn); }
.sr-vraag { border-bottom: 1px solid var(--sr-lijn); }
.sr-vraag summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: var(--sr-r3); align-items: center; min-height: 64px; padding: 14px 0; font-family: var(--sr-display); font-size: var(--sr-tekst-l); font-weight: 400; line-height: 1.25; }
.sr-vraag summary::-webkit-details-marker { display: none; }
.sr-vraag summary::after { content: ""; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--sr-rand); background: linear-gradient(var(--sr-accent), var(--sr-accent)) center / 12px 1.5px no-repeat, linear-gradient(var(--sr-accent), var(--sr-accent)) center / 1.5px 12px no-repeat; transition: transform var(--sr-duur-2) var(--sr-zacht); }
.sr-vraag[open] summary::after { transform: rotate(45deg); }
.sr-vraag p { margin: 0 0 var(--sr-r4); max-width: 38rem; color: var(--sr-gedempt); }

@media (min-width: 60rem) { .sr-vragenblok { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sr-r6); align-items: start; } .sr-vragenblok .sr-vragen { margin-top: 0; } }
.sr-slot { text-align: center; padding-block: var(--sr-r6) var(--sr-r5); }
.sr-slot .sr-groot { max-width: 20ch; margin-inline: auto; }
.sr-slot .sr-knoppen { justify-content: center; }
.sr-sitevoet { text-align: center; padding: var(--sr-r4) 20px var(--sr-r5); font-family: var(--sr-label); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sr-gedempt); }

/* ---------- De kaart ---------- */

.sr-reis .sr-kaartpagina { max-width: 76rem; padding-block: var(--sr-r3) var(--sr-r6); }
.sr-kaartkop { max-width: 40rem; }
.sr-kaartkop .sr-groot { margin-bottom: var(--sr-r3); }
.sr-feitjes { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 var(--sr-r4); padding: 0; list-style: none; font-size: var(--sr-tekst-s); color: var(--sr-gedempt); }
.sr-feitjes b { font-weight: 400; color: var(--sr-inkt); font-family: var(--sr-display); font-style: italic; font-size: 1.125em; }

.sr-kaart { display: grid; gap: var(--sr-r4); margin-block: var(--sr-r3) var(--sr-r4); }
.sr-kaart__beeld { position: relative; width: calc(100% + 24px); max-width: 38rem; margin-inline: -12px; justify-self: center; }
.sr-kaart__veld { position: relative; }
.sr-kaart__veld::before { content: ""; position: absolute; inset: 6% 2%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--sr-goud) 20%, transparent), color-mix(in srgb, var(--sr-gloed) 16%, transparent) 55%, transparent 74%); }
.sr-kaart__onder { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: -1; }
.sr-kaart__veld { isolation: isolate; }
.sr-kaart__over { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sr-kaart__legenda { margin: var(--sr-r3) 12px 0; font-size: var(--sr-tekst-s); line-height: 1.5; color: var(--sr-gedempt); text-align: center; }
.sr-kaart__woorden { display: block; margin-top: 6px; }

/* De baan om de chart, en de lijntjes van elke plek naar haar centrum. */
.sr-baan { fill: none; stroke: var(--sr-goudlijn); stroke-width: 1; stroke-opacity: 0.5; stroke-dasharray: 1 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sr-baan--af { stroke-dasharray: none; stroke-opacity: 0.85; stroke-width: 1.25; }
.sr-draad { fill: none; stroke: var(--sr-rand); stroke-width: 1; stroke-opacity: 0.7; vector-effect: non-scaling-stroke; }
.sr-draad.is-gesloten { stroke-dasharray: 2 5; stroke-opacity: 0.45; }
.sr-draad.is-poort { stroke-dasharray: 2 5; }
.sr-draad.is-voltooid { stroke: var(--sr-goud); stroke-width: 1.5; stroke-opacity: 1; }
.sr-draad.is-beschikbaar, .sr-draad.is-bezig { stroke: var(--sr-inkt); stroke-opacity: 0.9; }
/* De gloed achter een centrum zegt mee in welke toestand de etappe is (de plek zegt het in vorm en woord). */
.sr-krans { fill: none; stroke: none; stroke-linejoin: round; }
.sr-krans.is-voltooid { stroke: var(--sr-goud); stroke-width: 26; opacity: 0.55; filter: blur(7px); }
.sr-krans.is-beschikbaar, .sr-krans.is-bezig { stroke: var(--sr-inkt); stroke-width: 20; opacity: 0.4; filter: blur(8px); animation: sr-adem 3.6s ease-in-out infinite; }
@keyframes sr-adem { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: 0.3; } }

/* Een plek: de aanklikbare etappe op de baan. Minstens 44 px, vorm én teken per toestand. */
.sr-plek {
	position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
	width: 46px; height: 46px; display: grid; place-items: center;
	border-radius: 50%;
	font-family: var(--sr-display); font-size: 1.25rem; font-weight: 420; line-height: 1; font-variation-settings: "opsz" 36;
	color: var(--sr-inkt) !important; text-decoration: none;
	background: var(--sr-bg);
	border: 1.5px solid var(--sr-rand);
	transition: transform var(--sr-duur-1) var(--sr-zacht), box-shadow var(--sr-duur-2) var(--sr-zacht);
}
a.sr-plek:hover { transform: translate(-50%, -50%) scale(1.08); }
.sr-plek:focus-visible { outline: 2px solid var(--sr-accent); outline-offset: 4px; border-radius: 50%; }
.sr-plek__teken { position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 50%; display: none; place-items: center; background: var(--sr-bg); border: 1px solid var(--sr-goud); color: var(--sr-accent); }
.sr-plek__teken svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-plek__naam { position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--sr-label); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sr-gedempt); display: none; }
.sr-plek.is-gesloten { border-style: dashed; color: var(--sr-gedempt) !important; background: color-mix(in srgb, var(--sr-bg) 80%, transparent); }
.sr-plek.is-beschikbaar { border-color: var(--sr-inkt); border-width: 2px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--sr-inkt) 12%, transparent); }
.sr-plek.is-beschikbaar::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid var(--sr-inkt); animation: sr-puls 3.6s ease-out infinite; }
@keyframes sr-puls { 0% { transform: scale(0.82); opacity: 0.9; } 70%, 100% { transform: scale(1.3); opacity: 0; } }
.sr-plek.is-bezig { border-color: var(--sr-inkt); border-width: 2px; background: conic-gradient(from 0deg, color-mix(in srgb, var(--sr-goud) 45%, var(--sr-bg)) 0 50%, var(--sr-bg) 50% 100%); }
.sr-plek.is-voltooid { border: 0; background: var(--sr-knop-bg); color: var(--sr-knop-inkt) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 -1px 0 rgb(0 0 0 / 0.25), 0 0 26px -2px var(--sr-goud); }
.sr-plek.is-voltooid .sr-plek__teken { display: grid; }
/* Achter de poort: de plek heeft de vorm van een boog. Geen hangslot. */
.sr-plek.is-poort { border-radius: 23px 23px 6px 6px; border-color: var(--sr-goud); box-shadow: inset 0 0 0 3px var(--sr-bg), inset 0 0 0 4px color-mix(in srgb, var(--sr-goud) 55%, transparent); }
/* Thuiskomst: de zon. Gesloten is ze een bleke schijf; voltooid straalt ze. */
.sr-plek--zon { width: 52px; height: 52px; }
.sr-plek--zon.is-voltooid { background: radial-gradient(circle at 40% 35%, #FFF6D8, #F3D27A 45%, #D9A441 100%); color: #2A1814 !important; }
.sr-plek--zon .sr-plek__naam { top: auto; bottom: calc(100% + 7px); }
.sr-plek--zon.is-voltooid { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0 0 0 7px color-mix(in srgb, var(--sr-goud) 22%, transparent), 0 0 0 16px color-mix(in srgb, var(--sr-goud) 10%, transparent), 0 0 60px 6px var(--sr-goud); }
@media (min-width: 44rem) { .sr-plek { width: 52px; height: 52px; font-size: 1.375rem; } .sr-plek--zon { width: 60px; height: 60px; } .sr-plek__naam { display: block; } }

/* De sleutel bij de kaart: elke toestand in vorm en woord. */
.sr-kaart__sleutel { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; margin: 14px 12px 0; padding: 0; font-family: var(--sr-label); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sr-gedempt); }
.sr-kaart__sleutel li { display: inline-flex; align-items: center; gap: 8px; }
.sr-kaart__sleutel .sr-plek { position: relative; left: auto; top: auto; transform: none; width: 20px; height: 20px; flex: none; box-shadow: none; border-width: 1.5px; }
.sr-kaart__sleutel .sr-plek::before { display: none; }
.sr-kaart__sleutel .sr-plek.is-poort { border-radius: 10px 10px 3px 3px; }
.sr-kaart__sleutel .sr-plek__teken { width: 12px; height: 12px; right: -4px; bottom: -4px; }
.sr-kaart__sleutel .sr-plek__teken svg { width: 7px; height: 7px; }

/* De route: een lijst met een draad, geen dozen. */
.sr-kaart__route .sr-kop { margin-top: 0; }
.sr-kaart__lijst { list-style: none; margin: var(--sr-r3) 0 0; padding: 0; position: relative; }
.sr-kaart__lijst::before { content: ""; position: absolute; left: 22px; top: 30px; bottom: 30px; width: 1px; background: linear-gradient(180deg, var(--sr-goudlijn), color-mix(in srgb, var(--sr-rand) 50%, transparent) 60%); opacity: 0.7; }
.sr-etappe { position: relative; display: grid; grid-template-columns: 46px 1fr; column-gap: var(--sr-r3); padding: 12px 0; align-items: start; }
.sr-etappe__link { display: contents; color: var(--sr-inkt) !important; text-decoration: none; }
.sr-etappe__nr { grid-column: 1; grid-row: 1 / span 3; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--sr-rand); background: var(--sr-bg); font-family: var(--sr-display); font-size: 1.25rem; font-weight: 420; position: relative; z-index: 1; }
.sr-etappe__naam { grid-column: 2; font-family: var(--sr-display); font-size: var(--sr-tekst-l); font-weight: 400; line-height: 1.2; padding-top: 2px; font-variation-settings: "opsz" 36; }
a.sr-etappe__link:hover .sr-etappe__naam { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a.sr-etappe__link::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
a.sr-etappe__link:focus-visible { outline: 0; }
a.sr-etappe__link:focus-visible::after { outline: 2px solid var(--sr-accent); outline-offset: 2px; }
.sr-etappe__status { grid-column: 2; color: var(--sr-gedempt); margin-top: 3px; display: inline-flex; align-items: center; gap: 8px; }
.sr-etappe__sub { grid-column: 2; margin: 2px 0 0; color: var(--sr-gedempt); font-size: var(--sr-tekst-s); line-height: 1.5; }
.sr-etappe.is-voltooid .sr-etappe__nr { border: 0; background: var(--sr-knop-bg); color: var(--sr-knop-inkt); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 0 18px -4px var(--sr-goud); }
.sr-etappe.is-voltooid .sr-etappe__status::before { content: ""; width: 11px; height: 6px; border-left: 2px solid var(--sr-goud); border-bottom: 2px solid var(--sr-goud); transform: rotate(-45deg) translateY(-2px); }
.sr-etappe.is-beschikbaar .sr-etappe__nr, .sr-etappe.is-bezig .sr-etappe__nr { border: 2px solid var(--sr-inkt); box-shadow: 0 0 0 5px color-mix(in srgb, var(--sr-inkt) 12%, transparent); }
.sr-etappe.is-bezig .sr-etappe__nr { background: conic-gradient(from 0deg, color-mix(in srgb, var(--sr-goud) 45%, var(--sr-bg)) 0 50%, var(--sr-bg) 50% 100%); }
.sr-etappe.is-beschikbaar .sr-etappe__status, .sr-etappe.is-bezig .sr-etappe__status { color: var(--sr-accent); }
.sr-etappe.is-poort .sr-etappe__nr { border-radius: 23px 23px 6px 6px; border-color: var(--sr-goud); }
.sr-etappe.is-gesloten .sr-etappe__nr { border-style: dashed; color: var(--sr-gedempt); }
.sr-etappe.is-gesloten .sr-etappe__naam { color: var(--sr-gedempt); }
.sr-kaartlinks { font-size: var(--sr-tekst-s); margin-top: var(--sr-r4); }
.sr-kaartlinks a { display: inline-flex; min-height: 44px; align-items: center; }
.sr-volledig { margin-top: var(--sr-r4); font-size: var(--sr-tekst-s); border-top: 1px solid var(--sr-lijn); }
.sr-volledig summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; color: var(--sr-accent); }
.sr-volledig__chart { max-width: 44rem; margin: var(--sr-r3) auto; }

@media (min-width: 60rem) {
	.sr-reis .sr-kaartpagina { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); column-gap: var(--sr-r6); align-items: start; padding-inline: 40px; }
	.sr-kaart { display: contents; }
	.sr-kaartkop { grid-column: 2; grid-row: 1; padding-top: var(--sr-r4); }
	.sr-kaart__beeld { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 48px; width: 100%; margin: 0; max-width: min(42rem, calc((100vh - 150px) * 0.744)); }
	.sr-kaart__route { grid-column: 2; grid-row: 2; padding-top: var(--sr-r4); }
	/* Thuis: de kop staat gecentreerd boven de kaart. */
	.sr-kaartpagina--thuis .sr-kaartkop { grid-column: 1 / -1; padding-bottom: var(--sr-r4); }
	.sr-kaartpagina--thuis .sr-kaart__beeld { grid-row: 2; }
}

/* Welkom thuis. */
.sr-thuis { text-align: center; max-width: 46rem; margin-inline: auto; }
.sr-thuis .sr-groot { font-size: var(--sr-tekst-xxl); }
.sr-thuis .sr-knoppen { justify-content: center; }
.sr-thuis .sr-lood { max-width: 34rem; margin-inline: auto; font-size: var(--sr-tekst-m); color: var(--sr-gedempt); }

/* ---------- Je eigen woorden: altijd op een strookje papier ---------- */

.sr-eigen {
	position: relative;
	margin: var(--sr-r3) 0 var(--sr-r4);
	padding: 22px 24px 24px 28px;
	border: 0;
	border-radius: 3px 14px 3px 14px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .5 0 0 0 0 .38 .16 0 0 0 -.03'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
		linear-gradient(105deg, color-mix(in srgb, var(--sr-papier) 100%, #000 0%) 0%, color-mix(in srgb, var(--sr-papier) 94%, #8A5A14) 100%);
	color: #2A1814;
	font-family: var(--sr-display);
	font-style: italic;
	font-weight: 380;
	font-variation-settings: "opsz" 40;
	font-size: var(--sr-tekst-l);
	line-height: 1.35;
	white-space: pre-wrap;
	box-shadow: 0 1px 0 rgb(255 255 255 / 0.6) inset, 0 18px 40px -18px rgb(var(--sr-schaduw) / 0.55), 0 2px 5px rgb(var(--sr-schaduw) / 0.18);
	transform: rotate(-0.6deg);
}
.sr-eigen::before { content: ""; position: absolute; left: 12px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #C39231, #7C2338); }
.sr-eigen:empty { display: none; }
.sr-eigen--groot { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem); line-height: 1.25; padding: 30px 30px 32px 36px; }
.sr-thuis .sr-eigen { text-align: left; display: inline-block; max-width: 34rem; margin-block: var(--sr-r3) var(--sr-r4); }

/* ---------- Een etappe ---------- */

.sr-reis .sr-aankomst { padding-block: var(--sr-r2) var(--sr-r5); text-align: center; }
.sr-aankomst .sr-terugnaar { text-align: left; margin-bottom: var(--sr-r2); }
.sr-aankomst .sr-opschrift { justify-content: center; }
.sr-aankomst .sr-groot { font-size: var(--sr-tekst-xxl); margin-bottom: var(--sr-r3); }
.sr-aankomst .sr-lood { max-width: 26rem; margin-inline: auto; font-style: italic; font-family: var(--sr-display); font-weight: 340; }
.sr-aankomst .sr-klein { display: inline-flex; align-items: center; gap: 10px; }
.sr-aankomst .sr-klein svg { width: 16px; height: 16px; fill: none; stroke: var(--sr-goud); stroke-width: 1.4; }

.sr-reis .sr-terugblik, .sr-reis .sr-herkenning, .sr-reis .sr-tekst { padding-block: var(--sr-r4) var(--sr-r5); }
.sr-terugblik__regel { margin: 0 0 var(--sr-r2); max-width: 36rem; color: var(--sr-gedempt); }
.sr-terugblik .sr-eigen { max-width: 34rem; }
.sr-herkenning .sr-klein svg, .sr-prive svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.sr-hoofdstuk { padding-block: var(--sr-r3) var(--sr-r5); }
.sr-hoofdstuk__kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px var(--sr-r3); margin-bottom: var(--sr-r3); }
.sr-hoofdstuk__kop .sr-opschrift { flex-basis: 100%; margin: 0; }
.sr-hoofdstuk__titel { font-family: var(--sr-display); font-size: clamp(1.875rem, 1.4rem + 2.2vw, 2.875rem); font-weight: 350; font-variation-settings: "opsz" 144; letter-spacing: -0.015em; line-height: 1.1; color: var(--sr-inkt); flex-basis: 100%; }
.sr-hoofdstuk__sub { color: var(--sr-gedempt); font-style: italic; margin: 0 0 var(--sr-r4); }
.sr-pil { display: inline-flex; align-items: center; min-height: 30px; font-family: var(--sr-label); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sr-inkt); border: 1px solid var(--sr-goud); border-radius: 999px; padding: 3px 14px 2px; background: color-mix(in srgb, var(--sr-goud) 12%, transparent); }

.sr-proza { max-width: 36rem; }
.sr-proza p { margin: 0 0 1.15em; }
/* Het hoofdstuk opent met een gouden initiaal. */
.sr-hoofdstuk:not(.sr-hoofdstuk--meer) .sr-proza > p:first-child { font-size: var(--sr-tekst-l); line-height: 1.45; }
.sr-hoofdstuk:not(.sr-hoofdstuk--meer) .sr-proza > p:first-child::first-letter { float: left; font-family: var(--sr-display); font-size: 4.1em; line-height: 0.82; font-weight: 340; font-style: italic; padding: 0.06em 0.12em 0 0; color: var(--sr-goud); }
.sr-proza h3 { font-family: var(--sr-display); font-size: clamp(1.3125rem, 1.2rem + 0.6vw, 1.5625rem); font-weight: 420; line-height: 1.25; margin: 1.9em 0 0.5em; color: var(--sr-inkt); }
.sr-proza ul { list-style: none; padding: 0; margin: 0 0 1.15em; }
.sr-proza ul li { position: relative; padding-left: 28px; margin-bottom: 0.6em; }
.sr-proza ul li::before { content: ""; position: absolute; left: 4px; top: 0.6em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--sr-goud); }
.sr-proza blockquote { margin: 1.4em 0; padding-left: var(--sr-r3); border-left: 2px solid var(--sr-goud); font-style: italic; }

/* Oefening, vragen, alchemiezin. */
.sr-proza section[data-blok] { position: relative; margin: var(--sr-r5) 0; padding: 24px 22px 24px 24px; border-radius: 4px 20px 20px 4px; background: var(--sr-vlak); border-left: 2px solid var(--sr-goud); }
.sr-proza section[data-blok]::before { display: flex; align-items: center; gap: 12px; font-family: var(--sr-label); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sr-accent); margin-bottom: 12px; }
.sr-proza section[data-blok="oefening"]::before { content: "Oefening"; }
.sr-proza section[data-blok="reflectie"]::before { content: "Vragen aan jou"; }
.sr-proza section[data-blok="alchemie"]::before { content: "Alchemiezin"; justify-content: center; }
.sr-proza section[data-blok="notitie"]::before { content: "Goed om te weten"; }
.sr-proza section[data-blok] > :last-child { margin-bottom: 0; }
.sr-proza section[data-blok="reflectie"] ol { list-style: none; counter-reset: vraag; padding: 0; margin: 0; }
.sr-proza section[data-blok="reflectie"] li { counter-increment: vraag; display: grid; grid-template-columns: 2rem 1fr; margin-bottom: 0.7em; font-family: var(--sr-display); font-size: 1.125em; line-height: 1.35; font-variation-settings: "opsz" 30; }
.sr-proza section[data-blok="reflectie"] li::before { content: counter(vraag); font-style: italic; color: var(--sr-goud); font-size: 1.2em; line-height: 1.1; }
.sr-proza section[data-blok="alchemie"] {
	margin: var(--sr-r6) 0; padding: 40px 26px 44px; text-align: center; border-left: 0; border-radius: 999px 999px 20px 20px;
	border: 1px solid transparent;
	background: radial-gradient(ellipse 80% 55% at 50% 0%, color-mix(in srgb, var(--sr-goud) 22%, transparent), transparent 70%) padding-box, linear-gradient(var(--sr-vlak), var(--sr-vlak)) padding-box, var(--sr-goudglans) border-box;
	box-shadow: inset 0 0 0 5px var(--sr-vlak), inset 0 0 0 6px color-mix(in srgb, var(--sr-goudlijn) 45%, transparent);
	font-family: var(--sr-display); font-style: italic; font-weight: 360; font-size: clamp(1.4375rem, 1.2rem + 1.2vw, 1.9375rem); line-height: 1.3; font-variation-settings: "opsz" 72;
}
.sr-proza section[data-blok="alchemie"]::before { padding-top: 26px; }

.sr-tekst__meer { margin: var(--sr-r4) 0 var(--sr-r2); }
.sr-hoofdstuk__duur { margin-left: auto; font-size: var(--sr-tekst-s); color: var(--sr-gedempt); white-space: nowrap; }
details.sr-hoofdstuk--meer { padding-block: 0; border-top: 1px solid var(--sr-lijn); }
details.sr-hoofdstuk--meer:last-child { border-bottom: 1px solid var(--sr-lijn); }
details.sr-hoofdstuk--meer > summary { list-style: none; cursor: pointer; padding: 16px 44px 16px 0; min-height: 64px; margin: 0; position: relative; row-gap: 4px; }
details.sr-hoofdstuk--meer > summary::-webkit-details-marker { display: none; }
details.sr-hoofdstuk--meer > summary::after { content: ""; position: absolute; right: 0; top: 50%; margin-top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--sr-rand); background: linear-gradient(var(--sr-accent), var(--sr-accent)) center / 12px 1.5px no-repeat, linear-gradient(var(--sr-accent), var(--sr-accent)) center / 1.5px 12px no-repeat; transition: transform var(--sr-duur-2) var(--sr-zacht); }
details.sr-hoofdstuk--meer[open] > summary::after { transform: rotate(45deg); }
details.sr-hoofdstuk--meer .sr-hoofdstuk__titel { font-size: var(--sr-tekst-l); flex-basis: auto; font-variation-settings: "opsz" 36; letter-spacing: 0; line-height: 1.2; }
details.sr-hoofdstuk--meer[open] { padding-bottom: var(--sr-r4); }

/* De proef: een band over de volle breedte, met een kompasroos. */
.sr-reis .sr-proef { max-width: none; padding: var(--sr-r6) 20px; margin-block: var(--sr-r4); text-align: center; position: relative; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--sr-gloed) 26%, transparent) 50%, transparent); }
.sr-proef::before, .sr-proef::after { content: ""; position: absolute; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--sr-goudlijn), transparent); opacity: 0.7; }
.sr-proef::before { top: 0; } .sr-proef::after { bottom: 0; }
.sr-proef > * { max-width: 36rem; margin-inline: auto; }
.sr-proef .sr-opschrift { justify-content: center; }
.sr-proef__roos { width: 60px; height: 60px; margin: 0 auto var(--sr-r3); display: block; color: var(--sr-goud); }
.sr-proef__roos * { fill: none; stroke: currentColor; stroke-width: 1; }
.sr-proef__roos .v { fill: currentColor; stroke: none; }
.sr-proef .sr-groot { font-size: clamp(1.4375rem, 1.2rem + 1.2vw, 2rem); line-height: 1.3; font-weight: 350; }

/* De sleutel. */
.sr-reis .sr-sleutel { padding-block: var(--sr-r5) var(--sr-r6); }
.sr-sleutel > .sr-form, .sr-ontgrendeld {
	position: relative; padding: 30px 22px 28px; border-radius: 26px; border: 1px solid transparent;
	background: linear-gradient(var(--sr-vlak), var(--sr-vlak)) padding-box, var(--sr-goudglans) border-box;
	box-shadow: 0 40px 80px -40px rgb(var(--sr-schaduw) / 0.6), 0 0 90px -40px var(--sr-goud);
}
.sr-sleutel__teken { width: 54px; height: 54px; display: block; margin: -58px auto 12px; padding: 12px; border-radius: 50%; background: var(--sr-knop-bg); color: var(--sr-knop-inkt); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), 0 0 0 6px var(--sr-bg), 0 0 30px var(--sr-goud); }
.sr-sleutel__teken * { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sr-sleutel .sr-opschrift { justify-content: center; }
.sr-sleutel label.sr-groot { text-align: center; }
.sr-sleutel .sr-knoppen .sr-knop { flex: 1 1 15rem; }
.sr-ontgrendeld { text-align: center; animation: sr-komt var(--sr-duur-3) var(--sr-zacht) both; }
.sr-ontgrendeld .sr-eigen { text-align: left; display: inline-block; max-width: 30rem; }
.sr-ontgrendeld .sr-knoppen { justify-content: center; }
.sr-slotzin { font-size: var(--sr-tekst-m); line-height: 1.5; margin: 0 auto var(--sr-r3); max-width: 30rem; color: var(--sr-gedempt); }
.sr-tintzin > span:first-child { white-space: nowrap; }
.sr-tintzin { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin: var(--sr-r4) 0 0; font-family: var(--sr-display); font-style: italic; font-size: var(--sr-tekst-l); color: var(--sr-inkt); }
/* De tintmeter: negen streepjes, van nacht naar licht. Geen percentage, wel een gevoel van richting. */
.sr-tintmeter { display: inline-flex; gap: 4px; }
.sr-tintmeter i { width: 14px; height: 14px; border-radius: 50%; background: var(--sr-bg); border: 1px solid color-mix(in srgb, currentColor 55%, transparent); }
.sr-tintmeter i.is-nu { outline: 1.5px solid currentColor; outline-offset: 3px; }
@media (min-width: 44rem) { .sr-sleutel > .sr-form, .sr-ontgrendeld { padding: 44px 48px 40px; } }

/* De dageraad-veeg: bij een sleutel trekt er één keer licht over de pagina. */
.sr-veeg { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 120% 70% at 50% 110%, color-mix(in srgb, #F3DC9E 75%, transparent), color-mix(in srgb, #C8662E 35%, transparent) 45%, transparent 75%); }
.sr-veeg.is-aan { animation: sr-veeg 2600ms var(--sr-zacht) both; }
@keyframes sr-veeg { 0% { opacity: 0; transform: translateY(30%); } 35% { opacity: 0.85; } 100% { opacity: 0; transform: translateY(-20%); } }
@keyframes sr-komt { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- De poort ---------- */

.sr-reis .sr-poort { max-width: 68rem; padding-block: var(--sr-r2) var(--sr-r6); }
.sr-poort__kop { text-align: center; max-width: 40rem; margin-inline: auto; }
.sr-poort__kop .sr-opschrift { justify-content: center; }
.sr-poort__kop .sr-lood { font-size: var(--sr-tekst-m); color: var(--sr-gedempt); }
.sr-poort__gedaan { display: inline-block; text-align: left; margin-top: var(--sr-r2); }
/* De poort zelf: een boog waar het licht al doorheen valt. */
.sr-poort__kaart {
	position: relative; isolation: isolate; width: min(60vw, 19rem); aspect-ratio: 0.74; margin: 0 auto var(--sr-r4); border-radius: 999px 999px 10px 10px; overflow: hidden;
	border: 1.5px solid transparent;
	background: linear-gradient(180deg, #F9F1E2 0%, #F4E1C3 34%, #E9BF90 62%, #B45E3A 88%, #5A1B24 100%) padding-box, var(--sr-goudglans) border-box;
	box-shadow: 0 0 0 8px var(--sr-bg), 0 0 0 9px color-mix(in srgb, var(--sr-goudlijn) 60%, transparent), 0 0 120px -10px color-mix(in srgb, #E9BF90 55%, transparent), 0 40px 80px -30px rgb(0 0 0 / 0.7);
}
.sr-poort__kaart::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .5 0 0 0 0 .38 .16 0 0 0 -.03'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: multiply; opacity: 0.8; }
.sr-poort__kaart .sr-chart { position: absolute; left: 4%; top: 6%; width: 92%; height: auto; }
.sr-poort__kolommen { display: grid; gap: var(--sr-r4); margin-top: var(--sr-r5); }
.sr-poort .sr-kop { margin-top: 0; }
.sr-poort__lijst { list-style: none; margin: 0; padding: 0; }
.sr-poort__lijst li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 14px 0; border-top: 1px solid var(--sr-lijn); }
.sr-poort__lijst li > .sr-poort__nr { grid-row: 1 / span 3; width: 40px; height: 40px; border-radius: 20px 20px 5px 5px; border: 1px solid var(--sr-goud); display: grid; place-items: center; font-family: var(--sr-display); font-size: 1.125rem; }
.sr-poort__lijst strong { font-family: var(--sr-display); font-weight: 420; font-size: var(--sr-tekst-l); line-height: 1.2; }
.sr-poort__lijst .sr-klein { margin: 2px 0 0; display: block; }
.sr-poort__titels { display: block; margin-top: 6px; font-size: var(--sr-tekst-s); font-style: italic; color: var(--sr-inkt); }
.sr-poort__aanbod { position: relative; padding: 30px 22px; border-radius: 26px; border: 1px solid transparent; background: linear-gradient(var(--sr-vlak), var(--sr-vlak)) padding-box, var(--sr-goudglans) border-box; box-shadow: 0 40px 80px -40px rgb(var(--sr-schaduw) / 0.6), 0 0 90px -46px var(--sr-goud); }
.sr-prijs { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; font-family: var(--sr-display); font-size: 4rem; font-weight: 320; line-height: 1; font-variation-settings: "opsz" 144; margin: var(--sr-r3) 0 var(--sr-r3); letter-spacing: -0.02em; }
.sr-prijs small { font-family: var(--sr-serif); font-size: var(--sr-tekst-s); letter-spacing: 0; color: var(--sr-gedempt); font-weight: 400; line-height: 1.4; }
.sr-poort__aanbod .sr-form label { font-family: var(--sr-label); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sr-accent); margin-top: var(--sr-r4); }
.sr-poort__aanbod .sr-veld { margin: 8px 0; }
.sr-poort__aanbod .sr-knop { width: 100%; margin-top: 10px; }
.sr-poort__uitgang { text-align: center; margin: var(--sr-r5) auto 0; max-width: 34rem; }
.sr-poort__uitgang .sr-klein { margin-top: var(--sr-r3); }
@media (min-width: 60rem) {
	.sr-poort__top { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sr-r6); align-items: center; }
	.sr-poort__kop { text-align: left; margin: 0; }
	.sr-poort__kop .sr-opschrift { justify-content: flex-start; }
	.sr-poort__kaart { width: 100%; max-width: 21rem; margin: 0 0 0 auto; }
	.sr-poort__kolommen { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--sr-r6); align-items: start; margin-top: var(--sr-r6); }
	.sr-poort__aanbod { position: sticky; top: 64px; padding: 44px 44px 40px; }
}

/* ---------- Minder beweging ---------- */

@media (prefers-reduced-motion: reduce) {
	html:has(body.sr-reis) { scroll-behavior: auto; }
	body.sr-reis, .sr-reis *, .sr-reis *::before, .sr-reis *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
	.sr-veeg { display: none; }
	.sr-plek.is-beschikbaar::before { display: none; }
}

html:has(body.sr-licht-5), html:has(body.sr-licht-6), html:has(body.sr-licht-7), html:has(body.sr-licht-8) { background: #F4E1C3; }
body.sr-reis { isolation: isolate; }

/* =====================================================================================
 * Aanvullingen bij het ontwerp: alles wat de plugin toont en het prototype niet uitwerkte.
 * ===================================================================================== */

/* ---------- Basis, vervolg ---------- */

.sr-reis .sr-logboek,
.sr-reis .sr-bewaar {
	width: 100%;
	max-width: 42rem;
	margin-inline: auto;
	padding-inline: 20px;
	color: var(--sr-inkt);
}
/* De secties die de plugin zelf in Bricks zet (sr-sectie--drempel, --kaart, --etappe-kop …) zijn alleen
   een omhulsel: het onderdeel erin bepaalt zelf zijn breedte en witruimte. */
.sr-reis [class*="sr-sectie--"] { padding-block: 0; width: 100%; }
.sr-reis [class*="sr-sectie--"] > .sr-binnen { max-width: none; padding-inline: 0; }

.sr-reis [tabindex="-1"]:focus { outline: none; }
.sr-melding:empty { display: none; }
.sr-melding--fout { border-left-color: var(--sr-accent); color: var(--sr-inkt); }
html:not(.sr-js) .sr-reis .sr-alleen-js { display: none; }
.sr-terug .sr-form label { font-size: var(--sr-tekst-s); }
.sr-knop .sr-pijl { transition: transform var(--sr-duur-1) var(--sr-zacht); }
.sr-knop:hover .sr-pijl { transform: translateX(4px); }
.sr-prive svg { flex: none; }

/* Een paneel: het vlak met de gouden haarlijn (sleutel, aanbod, bewaren, gegevens). */
.sr-paneel,
.sr-logboek__beheer {
	position: relative; padding: 30px 22px 28px; border-radius: 26px; border: 1px solid transparent;
	background: linear-gradient(var(--sr-vlak), var(--sr-vlak)) padding-box, var(--sr-goudglans) border-box;
	box-shadow: 0 40px 80px -40px rgb(var(--sr-schaduw) / 0.6), 0 0 90px -46px var(--sr-goud);
}
@media (min-width: 44rem) { .sr-paneel, .sr-logboek__beheer { padding: 44px 48px 40px; } }

/* ---------- King: het blijft nacht, de gloed groeit ---------- */

body.sr-reis.sr-thema-king.sr-licht-5, .sr-thema-king .sr-licht-5 {
	--sr-bg: #35121F; --sr-bg2: #5A1B24; --sr-gloed: #C05A2C; --sr-gloed-a: 0.55; --sr-sterren: 0.42;
	--sr-inkt: #FBF4E6; --sr-gedempt: #E6DACA; --sr-accent: #F3DC9E; --sr-rand: #CDB9A4; --sr-lijn: #6E4444; --sr-goud: #E8C672;
	--sr-vlak: #43222D; --sr-knop-bg: linear-gradient(135deg,#F8E9B2 0%,#E3BE63 24%,#C39231 50%,#ECCD7C 74%,#BC8A2E 100%); --sr-knop-vast: #D9B25A; --sr-knop-inkt: #1F120B;
	--sr-schema: dark; --sr-gloed-y: 104%;
	--sr-nadruk: linear-gradient(100deg,#F8E9B2 0%,#E3BE63 45%,#F3DC9E 70%,#D9B25A 100%); --sr-goudlijn: #D9B25A; --sr-goudglans: linear-gradient(135deg,#F8E9B2 0%,#C39231 30%,#F3DC9E 55%,#A87A2C 80%,#ECCD7C 100%); --sr-papier: #F5E8CF; --sr-schaduw: 0 0 0;
	--hd-midden-boven: #F3DD9C; --hd-midden-onder: #B98A33; --hd-vast-rand: #F8EBC0; --hd-arcering: #F6E3A8; --hd-ster: #DDB766; --hd-buis-buiten: #5D3F47; --hd-buis-binnen: #3F1D29; --hd-open-vul: #3D1B27; --hd-open-rand: #8A7052; --hd-ontwerp: #D08A48; --hd-persoon: #B5505F; --hd-badge-tekst: #FFF6E4; --hd-gedempt: #B3A088; --hd-pil-tekst: #F3EADA; --hd-pil-o1: #7A5636; --hd-pil-o2: #5C4029; --hd-pil-p1: #6A323C; --hd-pil-p2: #4B222B; --hd-wit: #FFFFFF; --hd-schaduw: #000000; --hd-gedempt-vast: #4A3312; --hd-halo-kern: 0.2; --hd-halo-rand: 0.07; --hd-schaduw-dekking: 0.5; --hd-glans-dekking: 0.18; --hd-pil-rand-dekking: 0.14;
	--sr-gloed-h: 50%;
}
body.sr-reis.sr-thema-king.sr-licht-6, .sr-thema-king .sr-licht-6 {
	--sr-bg: #35121F; --sr-bg2: #5A1B24; --sr-gloed: #BA552B; --sr-gloed-a: 0.6; --sr-sterren: 0.36;
	--sr-inkt: #FBF4E6; --sr-gedempt: #E6DACA; --sr-accent: #F3DC9E; --sr-rand: #CDB9A4; --sr-lijn: #6E4444; --sr-goud: #E8C672;
	--sr-vlak: #43222D; --sr-knop-bg: linear-gradient(135deg,#F8E9B2 0%,#E3BE63 24%,#C39231 50%,#ECCD7C 74%,#BC8A2E 100%); --sr-knop-vast: #D9B25A; --sr-knop-inkt: #1F120B;
	--sr-schema: dark; --sr-gloed-y: 104%;
	--sr-nadruk: linear-gradient(100deg,#F8E9B2 0%,#E3BE63 45%,#F3DC9E 70%,#D9B25A 100%); --sr-goudlijn: #D9B25A; --sr-goudglans: linear-gradient(135deg,#F8E9B2 0%,#C39231 30%,#F3DC9E 55%,#A87A2C 80%,#ECCD7C 100%); --sr-papier: #F5E8CF; --sr-schaduw: 0 0 0;
	--hd-midden-boven: #F3DD9C; --hd-midden-onder: #B98A33; --hd-vast-rand: #F8EBC0; --hd-arcering: #F6E3A8; --hd-ster: #DDB766; --hd-buis-buiten: #5D3F47; --hd-buis-binnen: #3F1D29; --hd-open-vul: #3D1B27; --hd-open-rand: #8A7052; --hd-ontwerp: #D08A48; --hd-persoon: #B5505F; --hd-badge-tekst: #FFF6E4; --hd-gedempt: #B3A088; --hd-pil-tekst: #F3EADA; --hd-pil-o1: #7A5636; --hd-pil-o2: #5C4029; --hd-pil-p1: #6A323C; --hd-pil-p2: #4B222B; --hd-wit: #FFFFFF; --hd-schaduw: #000000; --hd-gedempt-vast: #4A3312; --hd-halo-kern: 0.2; --hd-halo-rand: 0.07; --hd-schaduw-dekking: 0.5; --hd-glans-dekking: 0.18; --hd-pil-rand-dekking: 0.14;
	--sr-gloed-h: 55%;
}
body.sr-reis.sr-thema-king.sr-licht-7, .sr-thema-king .sr-licht-7 {
	--sr-bg: #35121F; --sr-bg2: #5A1B24; --sr-gloed: #B4502B; --sr-gloed-a: 0.65; --sr-sterren: 0.3;
	--sr-inkt: #FBF4E6; --sr-gedempt: #E6DACA; --sr-accent: #F3DC9E; --sr-rand: #CDB9A4; --sr-lijn: #6E4444; --sr-goud: #E8C672;
	--sr-vlak: #43222D; --sr-knop-bg: linear-gradient(135deg,#F8E9B2 0%,#E3BE63 24%,#C39231 50%,#ECCD7C 74%,#BC8A2E 100%); --sr-knop-vast: #D9B25A; --sr-knop-inkt: #1F120B;
	--sr-schema: dark; --sr-gloed-y: 104%;
	--sr-nadruk: linear-gradient(100deg,#F8E9B2 0%,#E3BE63 45%,#F3DC9E 70%,#D9B25A 100%); --sr-goudlijn: #D9B25A; --sr-goudglans: linear-gradient(135deg,#F8E9B2 0%,#C39231 30%,#F3DC9E 55%,#A87A2C 80%,#ECCD7C 100%); --sr-papier: #F5E8CF; --sr-schaduw: 0 0 0;
	--hd-midden-boven: #F3DD9C; --hd-midden-onder: #B98A33; --hd-vast-rand: #F8EBC0; --hd-arcering: #F6E3A8; --hd-ster: #DDB766; --hd-buis-buiten: #5D3F47; --hd-buis-binnen: #3F1D29; --hd-open-vul: #3D1B27; --hd-open-rand: #8A7052; --hd-ontwerp: #D08A48; --hd-persoon: #B5505F; --hd-badge-tekst: #FFF6E4; --hd-gedempt: #B3A088; --hd-pil-tekst: #F3EADA; --hd-pil-o1: #7A5636; --hd-pil-o2: #5C4029; --hd-pil-p1: #6A323C; --hd-pil-p2: #4B222B; --hd-wit: #FFFFFF; --hd-schaduw: #000000; --hd-gedempt-vast: #4A3312; --hd-halo-kern: 0.2; --hd-halo-rand: 0.07; --hd-schaduw-dekking: 0.5; --hd-glans-dekking: 0.18; --hd-pil-rand-dekking: 0.14;
	--sr-gloed-h: 60%;
}
body.sr-reis.sr-thema-king.sr-licht-8, .sr-thema-king .sr-licht-8 {
	--sr-bg: #35121F; --sr-bg2: #5A1B24; --sr-gloed: #B4502B; --sr-gloed-a: 0.7; --sr-sterren: 0.24;
	--sr-inkt: #FBF4E6; --sr-gedempt: #E6DACA; --sr-accent: #F3DC9E; --sr-rand: #CDB9A4; --sr-lijn: #6E4444; --sr-goud: #E8C672;
	--sr-vlak: #43222D; --sr-knop-bg: linear-gradient(135deg,#F8E9B2 0%,#E3BE63 24%,#C39231 50%,#ECCD7C 74%,#BC8A2E 100%); --sr-knop-vast: #D9B25A; --sr-knop-inkt: #1F120B;
	--sr-schema: dark; --sr-gloed-y: 104%;
	--sr-nadruk: linear-gradient(100deg,#F8E9B2 0%,#E3BE63 45%,#F3DC9E 70%,#D9B25A 100%); --sr-goudlijn: #D9B25A; --sr-goudglans: linear-gradient(135deg,#F8E9B2 0%,#C39231 30%,#F3DC9E 55%,#A87A2C 80%,#ECCD7C 100%); --sr-papier: #F5E8CF; --sr-schaduw: 0 0 0;
	--hd-midden-boven: #F3DD9C; --hd-midden-onder: #B98A33; --hd-vast-rand: #F8EBC0; --hd-arcering: #F6E3A8; --hd-ster: #DDB766; --hd-buis-buiten: #5D3F47; --hd-buis-binnen: #3F1D29; --hd-open-vul: #3D1B27; --hd-open-rand: #8A7052; --hd-ontwerp: #D08A48; --hd-persoon: #B5505F; --hd-badge-tekst: #FFF6E4; --hd-gedempt: #B3A088; --hd-pil-tekst: #F3EADA; --hd-pil-o1: #7A5636; --hd-pil-o2: #5C4029; --hd-pil-p1: #6A323C; --hd-pil-p2: #4B222B; --hd-wit: #FFFFFF; --hd-schaduw: #000000; --hd-gedempt-vast: #4A3312; --hd-halo-kern: 0.2; --hd-halo-rand: 0.07; --hd-schaduw-dekking: 0.5; --hd-glans-dekking: 0.18; --hd-pil-rand-dekking: 0.14;
	--sr-gloed-h: 66%;
}
html:has(body.sr-thema-king) { background: #120C0B !important; }

.sr-thema-king .sr-tintmeter i { background: color-mix(in srgb, var(--sr-gloed) calc(var(--sr-gloed-a) * 100%), var(--sr-bg)); }
/* De poort bij King: geen ochtendlicht in de boog, wel een gloed die al op je wacht. */
.sr-thema-king .sr-poort__kaart { background: radial-gradient(ellipse 110% 60% at 50% 100%, #C8662E 0%, #7A2E2A 38%, transparent 76%) padding-box, linear-gradient(180deg, #1E0F11 0%, #35121F 60%, #5A1B24 100%) padding-box, var(--sr-goudglans) border-box; box-shadow: 0 0 0 8px var(--sr-bg), 0 0 0 9px color-mix(in srgb, var(--sr-goudlijn) 60%, transparent), 0 0 120px -10px color-mix(in srgb, #C8662E 55%, transparent), 0 40px 80px -30px rgb(0 0 0 / 0.7); }
.sr-thema-king .sr-poort__kaart::after { mix-blend-mode: normal; opacity: 0.5; }

/* ---------- De drempel: de stappen na de inleiding ---------- */

.sr-drempel__melding { max-width: 40rem; margin: var(--sr-r3) auto 0; }
.sr-stap__vraag { display: block; }
.sr-stap p.sr-stap__vraag { max-width: 34rem; }
.sr-stap__verder { margin: var(--sr-r4) 0 0; }
.sr-stap .sr-melding--fout { margin: var(--sr-r3) 0 0; }
.sr-stap .sr-groot--m { margin-bottom: 14px; }
.sr-stap label.sr-groot em { font-style: italic; }
.sr-js .sr-terug[hidden] { display: none; }
.sr-terug .sr-form { max-width: 26rem; padding-bottom: var(--sr-r4); }
.sr-terug .sr-veld { margin: 8px 0 var(--sr-r3); }

/* De wending: het antwoord op de lijfvraag komt terug als een cursieve regel met een gouden lijn. */
.sr-js [data-sr-bij-lijf] { display: none; }
.sr-js [data-sr-bij-lijf].is-gekozen { display: block; }
.sr-wending { margin: 0 0 var(--sr-r4); padding-left: 18px; border-left: 2px solid var(--sr-goud); font-family: var(--sr-display); font-style: italic; font-weight: 360; font-size: var(--sr-tekst-l); line-height: 1.35; color: var(--sr-inkt); font-variation-settings: "opsz" 40; }
.sr-stappenlijst { list-style: none; margin: var(--sr-r3) 0 var(--sr-r3); padding: 0; border-top: 1px solid var(--sr-lijn); }
.sr-stappenlijst li { display: grid; grid-template-columns: 2.4rem 1fr; column-gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--sr-lijn); }
.sr-stappenlijst__nr { font-family: var(--sr-display); font-style: italic; font-size: 1.5rem; line-height: 1; color: var(--sr-goud); font-variation-settings: "opsz" 144; }

/* De datum: drie velden met grote cijfers. */
.sr-datum { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 12px; max-width: 26rem; margin-top: var(--sr-r3); }
.sr-datum__deel span { display: block; font-family: var(--sr-label); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sr-accent); }
.sr-datum__deel .sr-veld,
.sr-tijd .sr-veld { margin: 8px 0 0; min-height: 72px; padding-inline: 10px; text-align: center; font-family: var(--sr-display); font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem); font-weight: 360; font-variation-settings: "opsz" 72; font-variant-numeric: lining-nums; letter-spacing: 0.02em; }
.sr-datum__deel .sr-veld::placeholder { font-style: normal; opacity: 0.45; }
.sr-veld[aria-invalid="true"] { border-color: var(--sr-accent); box-shadow: 0 0 0 1px var(--sr-accent); }
.sr-tijd { max-width: 14rem; margin: var(--sr-r3) 0 var(--sr-r2); }
.sr-tijd .sr-veld[disabled] { opacity: 0.45; }
.sr-stap__toelichting { max-width: 34rem; }

/* De plaats: een zoekveld met een lijst eronder (combobox). */
.sr-zoek { position: relative; margin-top: var(--sr-r3); }
.sr-zoek__teken { position: absolute; left: 18px; top: 18px; width: 20px; height: 20px; fill: none; stroke: var(--sr-goud); stroke-width: 1.5; stroke-linecap: round; pointer-events: none; }
.sr-zoek .sr-veld { margin: 0; padding-left: 50px; font-size: var(--sr-tekst-l); font-family: var(--sr-display); font-variation-settings: "opsz" 36; }
.sr-zoek .sr-veld::placeholder { font-family: var(--sr-serif); font-size: var(--sr-tekst-m); }
.sr-zoek__lijst { list-style: none; margin: 8px 0 0; padding: 6px; max-height: 17.5rem; overflow-y: auto; border-radius: 18px; border: 1px solid transparent; background: linear-gradient(var(--sr-vlak), var(--sr-vlak)) padding-box, var(--sr-goudglans) border-box; box-shadow: 0 30px 60px -30px rgb(var(--sr-schaduw) / 0.7); }
.sr-zoek__lijst li { display: flex; align-items: center; min-height: 52px; padding: 8px 14px; border-radius: 12px; cursor: pointer; font-family: var(--sr-display); font-size: 1.1875rem; line-height: 1.25; font-variation-settings: "opsz" 36; }
.sr-zoek__lijst li:hover,
.sr-zoek__lijst li[aria-selected="true"] { background: color-mix(in srgb, var(--sr-goud) 16%, transparent); }
.sr-zoek__lijst li[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--sr-goud), inset 0 0 0 1px color-mix(in srgb, var(--sr-goud) 55%, transparent); }
.sr-zoek__status { min-height: 1.6em; }

/* De toon: twee keuzes met een regel uitleg. */
.sr-keuze__optie > span { min-width: 0; }
.sr-keuze__optie strong { font-weight: 440; }
.sr-keuze__sub { display: block; margin-top: 3px; font-family: var(--sr-serif); font-size: var(--sr-tekst-s); line-height: 1.45; color: var(--sr-gedempt); }
.sr-keuze--toon .sr-keuze__optie { align-items: center; padding-block: 16px; }
.sr-stap .sr-prive { max-width: 36rem; margin-top: var(--sr-r3); }
.sr-stap .sr-keuze + .sr-prive + p, .sr-stap .sr-keuze + .sr-melding { margin-top: var(--sr-r3); }

/* ---------- De kaart, vervolg ---------- */

.sr-kaartkop .sr-melding { margin-bottom: var(--sr-r4); }
.sr-kaart__veld .sr-chart { position: relative; }
span.sr-plek { cursor: default; }
.sr-kaartlinks { color: var(--sr-gedempt); }
.sr-volledig__chart--papier { padding: var(--sr-r3); background: #F6F1E7; border-radius: 14px; }
.sr-volledig__chart svg { display: block; width: 100%; height: auto; }
.sr-vooraf { font-size: var(--sr-tekst-s); border-top: 1px solid var(--sr-lijn); }
.sr-volledig + .sr-vooraf { margin-top: 0; }
.sr-vooraf summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; color: var(--sr-accent); }
.sr-vooraf__tekst { padding-block: var(--sr-r3) var(--sr-r4); font-size: var(--sr-tekst-m); }
.sr-vooraf .sr-hoofdstuk__titel { display: block; font-size: var(--sr-tekst-l); font-weight: 400; line-height: 1.2; margin: 0 0 var(--sr-r3); font-variation-settings: "opsz" 36; letter-spacing: 0; }
.sr-kaart__lijst .sr-etappe__link { cursor: default; }
.sr-kaart__lijst a.sr-etappe__link { cursor: pointer; }

/* De onthulling: de chart komt op, centrum voor centrum, daarna de baan en de plekken. */
.is-onthulling .sr-kaart__veld .sr-chart [data-center] { opacity: 0; animation: sr-verschijn 900ms var(--sr-zacht) 300ms forwards; }
.is-onthulling .sr-kaart__veld .sr-chart [data-center="ajna"] { animation-delay: 550ms; }
.is-onthulling .sr-kaart__veld .sr-chart [data-center="throat"] { animation-delay: 800ms; }
.is-onthulling .sr-kaart__veld .sr-chart [data-center="g"] { animation-delay: 1050ms; }
.is-onthulling .sr-kaart__veld .sr-chart [data-center="heart"] { animation-delay: 1300ms; }
.is-onthulling .sr-kaart__veld .sr-chart [data-center="spleen"],
.is-onthulling .sr-kaart__veld .sr-chart [data-center="solar_plexus"] { animation-delay: 1550ms; }
.is-onthulling .sr-kaart__veld .sr-chart [data-center="sacral"] { animation-delay: 1800ms; }
.is-onthulling .sr-kaart__veld .sr-chart [data-center="root"] { animation-delay: 2050ms; }
.is-onthulling .sr-kaart__over,
.is-onthulling .sr-kaart__onder { opacity: 0; animation: sr-verschijn 900ms var(--sr-zacht) 2200ms forwards; }
.is-onthulling .sr-kaart__veld .sr-plek { opacity: 0; animation: sr-verschijn 600ms var(--sr-zacht) calc(2300ms + var(--i, 0) * 110ms) forwards; }
@keyframes sr-verschijn { to { opacity: 1; } }

/* Terugval zonder chart van de generator: het eigen schema van de negen centra. */
.sr-kaart__veld--schema { max-width: 26rem; margin-inline: auto; padding: 0 12px; }
.sr-kaart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.sr-kaart__net line { stroke: var(--sr-lijn); stroke-width: 0.75; vector-effect: non-scaling-stroke; }
.sr-kaart__lijnen line { stroke: var(--sr-goud); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sr-centrum { fill: var(--sr-bg); stroke: var(--sr-rand); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill var(--sr-duur-3) var(--sr-zacht), stroke var(--sr-duur-2) var(--sr-zacht); }
.sr-centrum--open { stroke-dasharray: 4 5; }
.sr-centrum--vast { fill: color-mix(in srgb, var(--sr-goud) 30%, var(--sr-bg)); stroke: var(--sr-inkt); stroke-width: 2; }
.sr-centrum.is-voltooid { fill: color-mix(in srgb, var(--sr-goud) 55%, var(--sr-bg)); stroke: var(--sr-goud); stroke-width: 3; stroke-dasharray: none; filter: drop-shadow(0 0 5px var(--sr-goud)); }
.sr-centrum.is-beschikbaar, .sr-centrum.is-bezig { stroke: var(--sr-inkt); stroke-width: 3; }
.sr-centrum.is-hier { stroke: var(--sr-inkt); stroke-width: 3.5; }
.sr-kaart__nr { font-family: var(--sr-display); font-size: 17px; font-weight: 500; fill: var(--sr-inkt); pointer-events: none; }
.sr-kaart__naam { font-family: var(--sr-label); font-size: 9px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--sr-gedempt); pointer-events: none; }
.sr-kaart__link { cursor: pointer; }
.sr-kaart__link:hover .sr-centrum { stroke-width: 4; }
.sr-kaart__link:focus-visible { outline: 2px solid var(--sr-accent); outline-offset: 4px; }
.sr-kaart__link:focus-visible .sr-centrum { stroke: var(--sr-accent); stroke-width: 5; }
.sr-stap__beeld .sr-kaart__svg .sr-centrum, .sr-poort__kaart .sr-centrum { animation: none; }
.sr-poort__kaart .sr-kaart__svg { position: absolute; left: 14%; top: 10%; width: 72%; height: auto; }

/* ---------- Een etappe, vervolg ---------- */

/* Het zegel: een rond venster waardoor je naar je eigen stuk van de chart kijkt.
   --cx, --cy (middelpunt in chartcoördinaten) en --zoom staan op het element; de plugin zet ze om in de viewBox. */
.sr-zegel { position: relative; width: min(62vw, 17rem); aspect-ratio: 1; margin: 10px auto 44px; }
.sr-zegel__venster {
	position: absolute; inset: 0; border-radius: 50%; overflow: hidden; isolation: isolate;
	border: 1px solid transparent;
	background: radial-gradient(ellipse 90% 60% at 50% 100%, color-mix(in srgb, var(--sr-gloed) 55%, transparent), transparent 70%) padding-box, linear-gradient(180deg, color-mix(in srgb, var(--sr-bg) 86%, #000), var(--sr-bg2)) padding-box, var(--sr-goudglans) border-box;
	box-shadow: 0 0 0 6px var(--sr-bg), 0 0 0 7px color-mix(in srgb, var(--sr-goudlijn) 55%, transparent), 0 30px 70px -30px rgb(var(--sr-schaduw) / 0.7), 0 0 90px -16px color-mix(in srgb, var(--sr-goud) 50%, transparent);
}
/* Een zachte rand aan de binnenkant: het glas van het venster. */
.sr-zegel__venster::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sr-goudlijn) 30%, transparent), inset 0 0 34px 4px color-mix(in srgb, var(--sr-bg) 62%, transparent), inset 0 10px 24px -14px rgb(255 255 255 / 0.25); }
.sr-zegel .sr-chart,
.sr-zegel .sr-kaart__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sr-zegel .sr-krans.is-beschikbaar, .sr-zegel .sr-krans.is-bezig { stroke-width: 12; opacity: 0.6; filter: blur(5px); }
.sr-zegel .sr-krans.is-voltooid { stroke-width: 16; opacity: 0.7; filter: blur(6px); }
.sr-zegel__nr { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--sr-knop-bg); background-color: var(--sr-knop-vast); color: var(--sr-knop-inkt); font-family: var(--sr-display); font-size: 1.375rem; font-weight: 440; line-height: 1; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 0 0 5px var(--sr-bg), 0 0 0 6px color-mix(in srgb, var(--sr-goudlijn) 55%, transparent), 0 6px 18px rgb(var(--sr-schaduw) / 0.45); }
.sr-zegel--schema .sr-zegel__venster { padding: 0; }
.sr-zegel--schema .sr-centrum { animation: none; }
@media (min-width: 44rem) { .sr-zegel { width: 19rem; } }
.sr-aankomst .sr-melding { text-align: left; }
.sr-aankomst__duur { margin-top: var(--sr-r3); }

/* De terugblik en Thuiskomst: de eigen zinnen op een rij. */
.sr-terugblik .sr-groot { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem); line-height: 1.2; font-variation-settings: "opsz" 60; letter-spacing: -0.01em; }
.sr-terugblik > [data-sr-met-notitie] { margin-bottom: var(--sr-r3); }
.sr-zinnen { list-style: none; margin: var(--sr-r4) 0; padding: 0; display: grid; gap: var(--sr-r4); }
.sr-zin__naam { margin: 0; font-family: var(--sr-label); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sr-accent); }
.sr-zin .sr-eigen { margin: 10px 0 6px; max-width: 34rem; }
.sr-zin__kies { display: none; color: var(--sr-accent); }
.sr-js .sr-zin__kies { display: inline-flex; align-items: center; }
.sr-zin__kies[aria-pressed="true"] { color: var(--sr-inkt); font-weight: 600; text-decoration: none; }
.sr-zin__kies[aria-pressed="true"]::before { content: ""; width: 12px; height: 7px; margin-right: 10px; border-left: 2px solid var(--sr-goud); border-bottom: 2px solid var(--sr-goud); transform: rotate(-45deg) translateY(-2px); }
.sr-zin:has([aria-pressed="true"]) .sr-eigen { box-shadow: 0 0 0 2px var(--sr-goud), 0 18px 40px -18px rgb(var(--sr-schaduw) / 0.55); }
.sr-zinnen__status:empty { display: none; }
.sr-zinkiezer { margin: 0 0 var(--sr-r3); }
.sr-zinkiezer__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sr-zinknop { display: block; width: 100%; min-height: 48px; padding: 10px 16px; border: 1px solid var(--sr-rand); border-radius: 14px; background: transparent; color: var(--sr-inkt); font-family: var(--sr-display); font-size: var(--sr-tekst-m); font-style: italic; line-height: 1.4; text-align: left; white-space: pre-wrap; cursor: pointer; }
.sr-zinknop:hover, .sr-zinknop[aria-pressed="true"] { border-color: var(--sr-accent); background: color-mix(in srgb, var(--sr-goud) 10%, transparent); }
.sr-zinknop[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--sr-accent); }

/* De tekst uit de bibliotheek: alles wat de generator kan leveren (h3, h4, p, ul, ol, li, strong, em, blockquote, blokken). */
.sr-hoofdstuk__kop .sr-pil { margin: 0; }
.sr-proza h4 { font-family: var(--sr-label); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.5; margin: 2em 0 0.6em; color: var(--sr-accent); }
.sr-proza h3:first-child, .sr-proza h4:first-child { margin-top: 0; }
.sr-proza strong { font-weight: 620; color: var(--sr-inkt); }
.sr-proza em { font-style: italic; }
.sr-proza ol { list-style: none; counter-reset: stap; padding: 0; margin: 0 0 1.15em; }
.sr-proza ol > li { counter-increment: stap; position: relative; padding-left: 2.1rem; margin-bottom: 0.6em; }
.sr-proza ol > li::before { content: counter(stap); position: absolute; left: 0; top: -0.05em; font-family: var(--sr-display); font-style: italic; font-size: 1.2em; color: var(--sr-goud); }
.sr-proza li > ul, .sr-proza li > ol { margin: 0.5em 0 0; }
.sr-proza blockquote { font-family: var(--sr-display); font-size: 1.125em; line-height: 1.4; font-variation-settings: "opsz" 40; color: var(--sr-inkt); }
.sr-proza blockquote p:last-child { margin-bottom: 0; }
.sr-proza section[data-blok="reflectie"] ol > li { padding-left: 0; }
.sr-proza section[data-blok="reflectie"] ol > li::before { position: static; }
.sr-proza section[data-blok] ul:last-child li:last-child { margin-bottom: 0; }
.sr-proza section[data-blok="alchemie"] p { margin-bottom: 0.4em; }
details.sr-hoofdstuk--meer > .sr-proza, details.sr-hoofdstuk--meer > .sr-hoofdstuk__sub { margin-top: var(--sr-r2); }
details.sr-hoofdstuk--meer .sr-opschrift::before { display: none; }
details.sr-hoofdstuk--meer > summary:focus-visible { outline: 2px solid var(--sr-accent); outline-offset: 2px; border-radius: 8px; }
@media (max-width: 30rem) { details.sr-hoofdstuk--meer .sr-hoofdstuk__duur { margin-left: 0; flex-basis: 100%; } }

/* De sleutel en het ontgrendelmoment, vervolg. */
.sr-sleutel > .sr-form, .sr-sleutel > .sr-ontgrendeld { margin-top: 27px; }
.sr-sleutel__oversla { margin: 8px 0 0; text-align: center; }
.sr-sleutel .sr-form .sr-vink { font-size: var(--sr-tekst-s); }
.sr-ontgrendeld .sr-groot { max-width: 30rem; margin-inline: auto; }
.sr-ontgrendeld__open { margin: 10px 0 0; }
.sr-ontgrendeld__open:empty { display: none; }
.sr-ontgrendeld__genoeg { margin: 8px 0 0; }
.sr-dageraad { color: var(--sr-inkt); font-family: var(--sr-display); font-style: italic; font-size: var(--sr-tekst-l); line-height: 1.35; padding-top: var(--sr-r3); border-top: 1px solid var(--sr-lijn); animation: sr-komt var(--sr-duur-3) var(--sr-zacht) 1200ms both; }
.sr-tintmeter i { transition: outline-color var(--sr-duur-3) var(--sr-zacht); }

/* ---------- De poort, vervolg ---------- */

.sr-poort__lijst li:last-child { border-bottom: 1px solid var(--sr-lijn); }
.sr-poort__lijst li > strong { align-self: center; }
.sr-poort__lijst li > .sr-poort__titels { grid-column: 2; margin-top: 2px; color: var(--sr-gedempt); }
.sr-poort__kop .sr-melding { text-align: left; }
.sr-poort__aanbod .sr-opschrift { margin-bottom: var(--sr-r2); }
.sr-poort__aanbod .sr-melding { margin: var(--sr-r3) 0 0; }
.sr-poort__betalen .sr-knop { width: 100%; }
.sr-poort__kolommen > :only-child { grid-column: 1 / -1; width: 100%; max-width: 34rem; margin-inline: auto; position: relative; top: auto; }
.sr-poort__uitgang .sr-haarlijn { margin-bottom: var(--sr-r5); }
.sr-poort__nogniet { font-family: var(--sr-display); font-style: italic; font-size: var(--sr-tekst-l); line-height: 1.35; margin: 0 0 var(--sr-r3); }

/* ---------- Het logboek ---------- */

.sr-reis .sr-logboek, .sr-reis .sr-bewaar { padding-block: var(--sr-r2) var(--sr-r6); }
.sr-logboek__kop .sr-groot { font-size: clamp(2.125rem, 1.5rem + 2.8vw, 3.5rem); }
.sr-logboek__verhaal { max-width: 36rem; font-family: var(--sr-display); font-style: italic; font-weight: 340; }
.sr-feiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0 var(--sr-r4); margin: var(--sr-r5) 0; padding: 0; border-top: 1px solid var(--sr-goudlijn); }
.sr-feiten > div { padding: var(--sr-r3) 0; border-bottom: 1px solid var(--sr-lijn); }
.sr-feiten dt { color: var(--sr-gedempt); letter-spacing: 0.18em; }
.sr-feiten dd { margin: 4px 0 0; font-family: var(--sr-display); font-size: var(--sr-tekst-l); line-height: 1.25; font-variation-settings: "opsz" 36; }
/* De etappes als een draad met zeven knopen, net als de route bij de kaart. */
.sr-logboek__lijst { list-style: none; margin: 0; padding: 0; position: relative; }
.sr-logboek__lijst::before { content: ""; position: absolute; left: 22px; top: 30px; bottom: 30px; width: 1px; background: linear-gradient(180deg, var(--sr-goudlijn), color-mix(in srgb, var(--sr-rand) 50%, transparent) 60%); opacity: 0.7; }
.sr-logboek__etappe { position: relative; padding: 14px 0 14px 62px; min-height: 74px; }
.sr-logboek__nr { position: absolute; left: 0; top: 12px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1.5px dashed var(--sr-rand); background: var(--sr-bg); color: var(--sr-gedempt); font-family: var(--sr-display); font-size: 1.25rem; font-weight: 420; line-height: 1; }
.sr-logboek__etappe.is-voltooid .sr-logboek__nr { border: 0; background: var(--sr-knop-bg); background-color: var(--sr-knop-vast); color: var(--sr-knop-inkt); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 0 18px -4px var(--sr-goud); }
.sr-logboek__etappe .sr-kop { margin: 0; font-size: var(--sr-tekst-l); font-weight: 400; line-height: 1.2; padding-top: 2px; font-variation-settings: "opsz" 36; letter-spacing: 0; }
.sr-logboek__etappe:not(.is-voltooid) .sr-kop { color: var(--sr-gedempt); }
.sr-logboek__datum { margin: 3px 0 0; font-family: var(--sr-label); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.sr-logboek__etappe.is-voltooid .sr-logboek__datum { color: var(--sr-accent); }
.sr-logboek__notitie { margin-top: var(--sr-r3); }
.sr-logboek__notitie .sr-klein { margin: 0; }
.sr-logboek__notitie .sr-eigen { margin: 10px 0 6px; max-width: 34rem; }
.sr-logboek__beheer { margin-top: var(--sr-r6); }
.sr-logboek__beheer .sr-kop { margin-top: 0; }
.sr-logboek__beheer .sr-knoppen .sr-knop--rand { flex: 1 1 15rem; }
.sr-logboek__beheer .sr-knoppen .sr-knop--stil { flex-basis: 100%; }
.sr-logboek__bewaar { margin: var(--sr-r3) 0 0; font-size: var(--sr-tekst-s); }

/* ---------- Je guide als PDF ---------- */

/* Het blok: een gouden haarlijn, het opschrift, één zin, de knop en de melding. Geen eigen vlak:
   het staat in een paneel (Thuiskomst), onder de draad van het logboek of onder "Welkom thuis". */
.sr-gids { position: relative; margin: var(--sr-r5) 0 0; padding: var(--sr-r5) 0 0; text-align: center; }
.sr-gids::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--sr-goudlijn) 18%, var(--sr-goudlijn) 82%, transparent); opacity: 0.7; }
.sr-gids .sr-opschrift { justify-content: center; margin-bottom: var(--sr-r2); }
.sr-gids__tekst { max-width: 30rem; margin: 0 auto var(--sr-r3); font-size: var(--sr-tekst-m); line-height: 1.5; color: var(--sr-inkt); }
.sr-gids__form { margin: 0; }
.sr-gids__melding .sr-melding { max-width: 34rem; margin: var(--sr-r3) auto 0; text-align: left; overflow-wrap: anywhere; }
.sr-gids--logboek { margin-top: var(--sr-r6); }
.sr-gids--kaart { max-width: 34rem; margin-inline: auto; }
/* Onderweg: één rustige regel met de datum waarop de guide uiterlijk vrijkomt. */
.sr-gidsregel { margin: var(--sr-r4) 0 0; max-width: 34rem; }
.sr-gidsregel--beheer { padding: 10px 14px; border: 1px dashed var(--sr-rand); border-radius: var(--sr-r2); color: var(--sr-inkt); text-align: left; }
.sr-gidsregel--beheer strong { font-weight: 600; }
.sr-thuis .sr-gidsregel--beheer, .sr-ontgrendeld .sr-gidsregel--beheer { margin-inline: auto; }
@media print { .sr-gids, .sr-gidsregel { display: none !important; } }

/* ---------- Bewaar je reis ---------- */

.sr-reis .sr-bewaar { max-width: 36rem; }
.sr-bewaar .sr-paneel { margin-top: 37px; }
.sr-paneel > .sr-sleutel__teken { margin-top: -58px; }
.sr-bewaar .sr-opschrift { justify-content: center; }
.sr-bewaar .sr-groot { text-align: center; }
.sr-bewaar .sr-form label:not(.sr-vink) { font-family: var(--sr-label); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sr-accent); margin-top: var(--sr-r4); }
.sr-bewaar .sr-veld { margin: 8px 0; }
.sr-bewaar .sr-form .sr-knop { width: 100%; margin-top: 10px; }
.sr-bewaar__terug { text-align: center; font-size: var(--sr-tekst-s); margin-top: var(--sr-r4); }
.sr-bewaar__terug a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Minder beweging, vervolg ---------- */

@media (prefers-reduced-motion: reduce) {
	.is-onthulling .sr-kaart__veld .sr-chart [data-center], .is-onthulling .sr-kaart__over, .is-onthulling .sr-kaart__onder, .is-onthulling .sr-kaart__veld .sr-plek { opacity: 1; animation: none !important; }
	.sr-krans.is-beschikbaar, .sr-krans.is-bezig { animation: none !important; }
	.sr-knop:hover, .sr-keuze__optie:hover, a.sr-plek:hover { transform: none; }
	a.sr-plek:hover { transform: translate(-50%, -50%); }
}

/* ---------- Afdrukken of bewaren als PDF: licht papier, geen hemel ---------- */

@media print {
	html:has(body.sr-reis) { background: #fff !important; }
	body.sr-reis {
		--sr-bg: #fff !important; --sr-bg2: #fff !important; --sr-vlak: #fff !important;
		--sr-inkt: #1d1915 !important; --sr-gedempt: #4a4035 !important; --sr-accent: #5a3f0d !important;
		--sr-rand: #8a7a66 !important; --sr-lijn: #cfc4b0 !important; --sr-goud: #8a6410 !important; --sr-goudlijn: #8a6410 !important;
		--sr-papier: #fff !important; --sr-schaduw: 0 0 0 !important;
		--sr-knop-bg: none !important; --sr-knop-vast: #fff !important; --sr-knop-inkt: #1d1915 !important;
		--sr-nadruk: none !important; --sr-goudglans: linear-gradient(#8a7a66, #8a7a66) !important;
		background: #fff !important; color: #1d1915 !important; min-height: 0; transition: none !important;
	}
	body.sr-reis::before, body.sr-reis::after, .sr-veeg, .sr-horizon { display: none !important; }
	.sr-reis *, .sr-reis *::before, .sr-reis *::after { box-shadow: none !important; text-shadow: none !important; animation: none !important; transition: none !important; }
	.sr-groot em, .sr-kop em { background: none !important; -webkit-text-fill-color: currentColor !important; color: inherit !important; }
	.sr-reis #brx-header, .sr-reis #brx-footer, .sr-reis > header, .sr-reis > footer,
	.sr-reis .wp-site-blocks > header, .sr-reis .wp-site-blocks > footer, .sr-sitekop, .sr-sitevoet,
	.sr-logboek__beheer, .sr-kaartlinks, .sr-terugnaar, .sr-melding[role="note"], .sr-knop, .sr-tekstknop { display: none !important; }
	.sr-reis .sr-logboek { max-width: none; padding: 0; }
	.sr-logboek__etappe { break-inside: avoid; }
	.sr-logboek__etappe.is-voltooid .sr-logboek__nr { border: 1.5px solid #1d1915 !important; background: #fff !important; color: #1d1915 !important; }
	.sr-eigen { background: #fff !important; border: 1px solid #cfc4b0 !important; transform: none !important; color: #1d1915 !important; }
	.sr-opschrift::before, .sr-opschrift--midden::after { background: #8a6410 !important; }
	.sr-reis a { text-decoration: none !important; color: inherit; }
}

/* ---- Bricks: kop en voet als gewone Bricks-elementen ---- */
.sr-sitekop__merk::before { content: ""; flex: none; width: 18px; height: 18px; background: var(--sr-goud); clip-path: path("M9 0Q9 9 18 9Q9 9 9 18Q9 9 0 9Q9 9 9 0Z"); }
.sr-reis #brx-header, .sr-reis #brx-footer, .sr-reis #brx-content { background: transparent; position: relative; z-index: 1; }
.sr-reis #brx-content { display: block; }
.sr-wat__teken.brxe-shortcode { flex: none; }
/* Koppen zonder eigen klasse nemen de inkt van de tint over (de themastijl van Bricks zet anders een vaste donkere kleur). */
.sr-reis :is(h1, h2, h3, h4).brxe-heading:not([class*="sr-"]) { color: inherit; }
/* Bricks geeft elk SVG zonder breedte een minimummaat van 1em; kleine tekens van de reis (vinkje, ruitje) worden daar te groot van. */
.sr-reis svg { min-width: 0; min-height: 0; }
/* De regel voor wie ingelogd proefdraait (alleen beheerders en redacteuren zien hem). */
.sr-proefregel { position: relative; z-index: 2; margin: 0; padding: 12px 20px; text-align: center; font-family: var(--sr-label); font-size: 0.8125rem; line-height: 1.5; color: #2A1814; background: #F3D27A; }
@media print { .sr-proefregel { display: none; } }