/* maralm.nl — De Mare kleurenprofiel (UTF-8) */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Montserrat:wght@500;600;700&display=swap");

:root {
	color-scheme: light;
	/* Coolors mare: #2A2D34 #009DDC #F26430 #6761A8 #009B72 — hoofdkleur: #009DDC */
	--bg: #ffffff;
	--fg: #2A2D34;
	--primary: #009DDC;
	--primary-dark: #2A2D34;
	--primary-light: #33B1E3;
	--primary-fg: #ffffff;
	/* Tekstkleur voor primary op pagina-achtergrond (in dark mode lichter) */
	--primary-ink: var(--primary);
	/* Oranje CTA: op donker als vlak, op licht met --secondary-fg / --secondary-ink */
	--secondary: #F26430;
	--secondary-fg: #2A2D34;
	--secondary-ink: #C44E24;
	--secondary-line: #E05528;
	--link-hover: var(--secondary-ink);
	--focus-ring: var(--primary);
	--accent: #EAF6FB;
	--accent-fg: #2A2D34;
	--card-bg: #ffffff;
	--card-fg: #2A2D34;
	--border: #BFDDEA;
	--input-bg: #E5F4FA;
	--muted: #EAF6FB;
	--muted-fg: #5C6068;
	--radius: 1.25rem;
	--shadow-soft: 0 2px 4px rgba(0, 0, 0, 0.1);
	--shadow-strong: 0 2px 8px rgba(255, 255, 255, 0.2);
	--font-sans: "Inter", system-ui, sans-serif;
	--font-heading: "Montserrat", sans-serif;
	--font-mono: Monaco, monospace;
	/* Palette-accenten; witte tekst erop moet ≥ 4.5:1 blijven */
	--mare-blue: #009DDC;
	--mare-blue-dark: #0077A8;
	--mare-blue-ink: var(--mare-blue);
	--mare-orange: #F26430;
	--mare-purple: #6761A8;
	--mare-amber: #009B72;
	--mare-amber-dark: #007A5A;
	--footer-legal: #9AD4EE;

	/* Impact-template (main.css) */
	--default-font: var(--font-sans);
	--heading-font: var(--font-heading);
	--nav-font: var(--font-sans);
	--background-color: var(--bg);
	--default-color: var(--fg);
	--heading-color: var(--fg);
	--accent-color: var(--primary);
	--surface-color: var(--card-bg);
	--contrast-color: var(--primary-fg);
	--nav-color: var(--fg);
	--nav-hover-color: var(--primary-ink);
	--nav-mobile-background-color: var(--primary-dark);
	--nav-dropdown-background-color: var(--primary-dark);
	--nav-dropdown-color: #ffffff;
	--nav-dropdown-hover-color: var(--secondary);

	/* Bootstrap-knoppen */
	--bs-primary: #009DDC;
	--bs-primary-rgb: 0, 157, 220;
	--bs-secondary: #F26430;
	--bs-secondary-rgb: 242, 100, 48;
	--bs-link-color: var(--primary-ink);
	--bs-link-hover-color: var(--link-hover);
	--bs-border-radius: 0.8rem;
	--bs-border-radius-lg: var(--radius);
}

.light-background {
	--background-color: var(--muted);
	--surface-color: var(--card-bg);
}

.dark-background {
	--background-color: #1a1c20;
	--default-color: #f4f4f4;
	--heading-color: #f4f4f4;
	--surface-color: #2A2D34;
	--contrast-color: #ffffff;
	--link-hover: var(--secondary);
	--focus-ring: var(--secondary);
}

.accent-background {
	--background-color: var(--primary-dark);
	--default-color: #ffffff;
	--heading-color: #ffffff;
	--accent-color: var(--secondary);
	--surface-color: var(--primary-light);
	--contrast-color: #ffffff;
	--link-hover: var(--secondary);
	--focus-ring: var(--secondary);
}

a:hover {
	color: var(--link-hover);
}

/* Header: lichte balk + donkere topbar */
.header {
	--background-color: var(--card-bg);
	--heading-color: var(--fg);
	--default-color: var(--fg);
	background-color: var(--card-bg);
	border-bottom: 1px solid var(--border);
	box-shadow: var(--shadow-soft);
}

.header .topbar {
	background-color: var(--primary-dark);
	font-size: 15px;
}

.header .topbar .contact-info i,
.header .topbar .contact-info i a,
.header .topbar .contact-info i span {
	color: #ffffff;
	font-weight: 600;
}

.header .topbar .contact-info i::before {
	font-size: 1.05em;
}

.header .topbar .social-links a {
	color: #ffffff;
	font-size: 1.05rem;
}

.header .topbar .social-links a:hover,
.header .topbar .social-links a:focus-visible {
	color: var(--secondary);
}

.header .logo h1,
.header .logo .sitename {
	font-family: var(--font-heading);
	color: var(--fg);
}

.header .logo span:not(.sitename) {
	color: var(--secondary-ink);
}

/* Menu in Telgenborch-stijl: grote hoofdlinks, donker afgerond uitklappaneel */
@media (min-width: 1200px) {
	.navmenu > ul > li {
		padding: 15px 12px;
	}

	.navmenu > ul > li > a,
	.navmenu > ul > li > a:focus {
		font-family: var(--font-heading);
		font-size: 1.05rem;
		font-weight: 600;
		color: var(--fg);
	}

	.navmenu > ul > li > a::before {
		height: 3px;
		bottom: -7px;
		border-radius: 3px;
		background-color: var(--secondary-line);
	}

	.navmenu > ul > li:hover > a,
	.navmenu > ul > li:focus-within > a,
	.navmenu > ul > li > a.active,
	.navmenu > ul > li.active > a {
		color: var(--primary-ink);
	}

	.navmenu > ul > li.active > a::before,
	.navmenu > ul > li:focus-within > a::before {
		visibility: visible;
		width: 100%;
	}

	.navmenu .dropdown > a .toggle-dropdown {
		transition: transform 0.25s ease;
	}

	.navmenu .dropdown:hover > a .toggle-dropdown,
	.navmenu .dropdown:focus-within > a .toggle-dropdown {
		transform: rotate(180deg);
	}

	.navmenu .dropdown ul {
		left: -0.5rem;
		min-width: 15rem;
		padding: 0.85rem 0.6rem;
		border-radius: 1rem;
		border-top: 3px solid var(--secondary);
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 40px rgba(0, 20, 18, 0.45);
		transform: translateY(6px);
		transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
	}

	.navmenu .dropdown:hover > ul,
	.navmenu .dropdown:focus-within > ul {
		opacity: 1;
		top: 100%;
		visibility: visible;
		transform: translateY(0);
	}

	.navmenu .dropdown > ul::before {
		content: "";
		position: absolute;
		top: -15px;
		left: 1.6rem;
		border: 6px solid transparent;
		border-bottom-color: var(--secondary);
	}

	.navmenu .dropdown ul li {
		min-width: 0;
	}

	.navmenu .dropdown ul a,
	.navmenu .dropdown ul a:focus {
		padding: 0.42rem 0.9rem;
		border-radius: 0.6rem;
		font-family: var(--font-heading);
		font-size: 1.02rem;
		font-weight: 600;
		letter-spacing: 0.01em;
		color: var(--nav-dropdown-color);
		transition: color 0.18s ease, background-color 0.18s ease, padding-left 0.18s ease;
	}

	.navmenu .dropdown ul a:hover,
	.navmenu .dropdown ul a:focus-visible,
	.navmenu .dropdown ul li:hover > a {
		color: var(--nav-dropdown-hover-color);
		background-color: rgba(255, 255, 255, 0.07);
		padding-left: 1.15rem;
		outline: none;
	}

	.navmenu .dropdown ul a.active {
		color: var(--nav-dropdown-hover-color);
	}
}

/* Mobiel: zelfde donkere panelen */
@media (max-width: 1199px) {
	.navmenu ul {
		border: 0;
		border-radius: 1rem;
		box-shadow: 0 18px 40px rgba(0, 32, 28, 0.35);
	}

	.navmenu a,
	.navmenu a:focus {
		font-family: var(--font-heading);
		font-weight: 600;
	}

	.navmenu a i,
	.navmenu a:focus i {
		background-color: rgba(255, 255, 255, 0.12);
		color: #ffffff;
	}

	.navmenu a i:hover,
	.navmenu a:focus i:hover,
	.navmenu .active i,
	.navmenu .active:focus i {
		background-color: var(--secondary);
		color: var(--secondary-fg);
	}

	.navmenu .dropdown ul,
	.navmenu .dropdown > .dropdown-active {
		border-radius: 0.75rem;
		background-color: rgba(255, 255, 255, 0.07);
		box-shadow: none;
	}
}

/* Hero & paginatitel */
.hero.accent-background {
	background: var(--primary-dark);
}

.hero .btn-get-started {
	background-color: var(--secondary);
	color: var(--secondary-fg);
	border-color: var(--secondary);
	font-family: var(--font-sans);
	font-weight: 700;
	border-radius: 0.8rem;
}

.hero .btn-get-started:hover {
	background-color: #ffffff;
	color: var(--primary-dark);
	border-color: #ffffff;
}

.hero .btn-get-started.maralm-btn-outline,
.hero .btn-get-started[style*="transparent"] {
	background: rgba(255, 255, 255, 0.1) !important;
	color: #ffffff !important;
	border: 2px solid var(--secondary) !important;
}

.hero .btn-get-started.maralm-btn-outline:hover,
.hero .btn-get-started[style*="transparent"]:hover {
	background: var(--secondary) !important;
	color: var(--secondary-fg) !important;
	border-color: var(--secondary) !important;
}

.page-title.accent-background {
	background: var(--primary-dark);
}

.page-title h1 {
	color: #fff;
}

.btn-primary {
	--bs-btn-bg: var(--primary-dark);
	--bs-btn-border-color: var(--primary-dark);
	--bs-btn-hover-bg: var(--primary);
	--bs-btn-hover-border-color: var(--primary);
	--bs-btn-active-bg: color-mix(in srgb, var(--primary-dark), #000 10%);
	--bs-btn-active-border-color: color-mix(in srgb, var(--primary-dark), #000 10%);
	font-weight: 600;
}

.btn-outline-primary {
	--bs-btn-color: var(--primary-ink);
	--bs-btn-border-color: var(--primary-ink);
	--bs-btn-hover-bg: var(--primary);
	--bs-btn-hover-border-color: var(--primary);
	--bs-btn-hover-color: var(--primary-fg);
}

.btn-outline-secondary {
	--bs-btn-color: var(--fg);
	--bs-btn-border-color: var(--border);
	--bs-btn-hover-bg: var(--muted);
	--bs-btn-hover-border-color: var(--border);
	--bs-btn-hover-color: var(--fg);
}

.section-title h2,
h1,
h2,
h3,
h4 {
	font-family: var(--font-heading);
}

/* Gekleurde koppen (portal-stijl, De Mare-palet) */
.hero.accent-background h2 > span:first-child {
	color: var(--secondary);
}

.hero.accent-background h2 .accent {
	color: var(--primary-fg);
}

/* Template main.css: .hero p met 40% transparantie — op iPad te licht */
.hero.accent-background p {
	color: var(--primary-fg);
	opacity: 1;
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1.65;
	max-width: 36em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.hero:not(.accent-background) p {
	color: var(--fg);
	opacity: 1;
}

body,
.section p,
.maralm-home-about p {
	color: var(--fg);
}

#about .section-title h2 {
	color: var(--primary-ink);
}

#about .section-title h2::after {
	background: var(--secondary-line);
}

.maralm-card-grid .section-title h2 {
	color: var(--mare-blue-ink);
}

.maralm-card-grid .section-title h2::after {
	background: var(--mare-blue);
}

#school-gallery .section-title h2 {
	color: var(--fg);
}

#school-gallery .section-title h2::after {
	background: var(--primary);
}

.maralm-startstrip-title {
	color: var(--primary-ink);
}

.maralm-card-grid .card-title a {
	color: var(--primary-ink);
}

.maralm-card-grid .col-md-6:nth-child(3n + 1) .card-title a {
	color: var(--primary-ink);
}

.maralm-card-grid .col-md-6:nth-child(3n + 2) .card-title a {
	color: var(--mare-blue-ink);
}

.maralm-card-grid .col-md-6:nth-child(3n) .card-title a {
	color: var(--fg);
}

/* Snelkoppeling-tegels onder hero */
.hero .row.gy-4 > .col-xl-3:nth-child(1) .icon-box {
	background: var(--mare-amber);
}

.hero .row.gy-4 > .col-xl-3:nth-child(1) .icon-box .icon,
.hero .row.gy-4 > .col-xl-3:nth-child(1) .icon-box .title a {
	color: #fff;
}

.hero .row.gy-4 > .col-xl-3:nth-child(2) .icon-box {
	background: var(--mare-blue);
}

.hero .row.gy-4 > .col-xl-3:nth-child(2) .icon-box .icon,
.hero .row.gy-4 > .col-xl-3:nth-child(2) .icon-box .title a {
	color: #fff;
}

.hero .row.gy-4 > .col-xl-3:nth-child(3) .icon-box {
	background: var(--mare-orange);
}

.hero .row.gy-4 > .col-xl-3:nth-child(3) .icon-box .icon,
.hero .row.gy-4 > .col-xl-3:nth-child(3) .icon-box .title a {
	color: var(--primary-fg);
}

.hero .row.gy-4 > .col-xl-3:nth-child(4) .icon-box {
	background: var(--mare-purple);
}

.hero .row.gy-4 > .col-xl-3:nth-child(4) .icon-box .icon,
.hero .row.gy-4 > .col-xl-3:nth-child(4) .icon-box .title a {
	color: #fff;
}

.hero .row.gy-4 > .col-xl-3 .icon-box:hover {
	filter: brightness(1.06);
}

.hero .row.gy-4 > .col-xl-3 .icon-box:hover .icon,
.hero .row.gy-4 > .col-xl-3 .icon-box:hover .title a {
	color: #fff;
}

.hero .row.gy-4 > .col-xl-3:nth-child(1) .icon-box:hover .icon,
.hero .row.gy-4 > .col-xl-3:nth-child(1) .icon-box:hover .title a {
	color: #fff;
}

/* Sectiekoppen op binnenpagina's */
.maralm-heading-primary h2,
h2.maralm-heading-primary,
.maralm-heading-primary {
	color: var(--primary-ink);
	border-bottom-color: var(--primary);
}

.maralm-heading-secondary h2,
.maralm-heading-secondary {
	color: color-mix(in srgb, var(--primary-ink), #000 8%);
	border-bottom-color: var(--secondary-line);
}

.maralm-heading-blue h2,
h2.maralm-heading-blue,
.maralm-heading-blue {
	color: var(--mare-blue-ink);
	border-bottom-color: var(--mare-blue);
}

.maralm-heading-fg h2,
.maralm-heading-fg {
	color: var(--fg);
	border-bottom-color: var(--fg);
}

.maralm-heading-fg h2::after,
.maralm-heading-primary h2::after,
.maralm-heading-secondary h2::after,
.maralm-heading-blue h2::after {
	display: none;
}

.maralm-subheading-accent {
	color: var(--mare-blue-ink);
}

.maralm-card-grid .card,
.maralm-search-bar,
.maralm-alert {
	border-radius: var(--radius);
}

.maralm-card-grid .card {
	border: 1px solid var(--border);
	box-shadow: var(--shadow-soft);
}

/* maralm.nl — componenten */

.skip-link {
	position: absolute;
	left: 1rem;
	top: -3rem;
	z-index: 1000;
	background: var(--primary);
	color: var(--primary-fg);
	padding: 0.55rem 0.8rem;
	border-radius: 0.6rem;
	text-decoration: none;
}

.skip-link:focus {
	top: 1rem;
	outline: 3px solid var(--focus-ring);
	outline-offset: 3px;
}

.maralm-logo {
	height: 2.25rem;
	width: auto;
}

.inner-page main {
	padding-top: 6rem;
}

.maralm-startstrip {
	padding: 2rem 0 1rem;
}

.maralm-startstrip-title {
	font-size: 1.35rem;
	margin-bottom: 0.35rem;
	font-family: var(--font-heading);
}

.maralm-startstrip-lead {
	color: var(--muted-fg);
	margin-bottom: 1rem;
}

.maralm-startstrip-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.maralm-pill {
	display: inline-block;
	padding: 0.45rem 1rem;
	border-radius: 2rem;
	background: var(--primary);
	color: var(--primary-fg) !important;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.maralm-pill:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-soft);
	background: var(--secondary);
	color: var(--secondary-fg) !important;
}

.maralm-card-grid .card-img-top {
	height: 200px;
	object-fit: cover;
}

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

.maralm-link-list li {
	margin-bottom: 0.5rem;
	padding-left: 1.25rem;
	position: relative;
}

.maralm-link-list li::before {
	content: "\F285";
	font-family: bootstrap-icons !important;
	position: absolute;
	left: 0;
	color: var(--primary-ink);
	font-size: 0.85rem;
	top: 0.15rem;
}

.maralm-link-list a {
	text-decoration: none;
	color: var(--primary-ink);
}

.maralm-link-list a:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

.maralm-search-bar {
	background: color-mix(in srgb, var(--primary), transparent 92%);
	border: 1px solid var(--border);
	padding: 1.25rem;
	margin-bottom: 2rem;
}

.maralm-search-bar input {
	width: 100%;
	max-width: 28rem;
	background: var(--input-bg);
	border-color: var(--border);
}

.maralm-section-block {
	margin-bottom: 2.5rem;
}

.maralm-section-block h2 {
	font-size: 1.25rem;
	border-bottom: 2px solid var(--secondary-line);
	padding-bottom: 0.35rem;
	margin-bottom: 1rem;
	color: var(--primary-ink);
}

.maralm-section-block.maralm-heading-primary h2 {
	color: var(--primary-ink);
	border-bottom-color: var(--primary);
}

.maralm-section-block.maralm-heading-secondary h2 {
	color: color-mix(in srgb, var(--primary-ink), #000 8%);
	border-bottom-color: var(--secondary-line);
}

.maralm-section-block.maralm-heading-blue h2 {
	color: var(--mare-blue-ink);
	border-bottom-color: var(--mare-blue);
}

.maralm-section-block.maralm-heading-fg h2 {
	color: var(--fg);
	border-bottom-color: var(--fg);
}

.maralm-contact-form .form-field {
	margin-bottom: 1rem;
}

/* Contact — info-vlakken (kleuren zoals hero-tegels op index) */
.contact .info-container {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	height: auto;
	padding: 1rem;
	background: var(--muted);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
}

.contact .info-item {
	display: flex;
	align-items: flex-start;
	width: 100%;
	margin-bottom: 0;
	padding: 1.15rem 1.25rem;
	border-radius: calc(var(--radius) - 0.2rem);
	box-shadow: var(--shadow-soft);
	transition: filter 0.2s ease, transform 0.2s ease;
}

.contact .info-item:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.contact .info-item > div {
	flex: 1;
	min-width: 0;
}

.contact .info-item i {
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: 1rem;
	font-size: 1.2rem;
	border-radius: 50%;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.contact .info-item h2,
.contact .info-item h3 {
	margin-bottom: 0.35rem;
	font-size: 1.05rem;
	font-weight: 700;
}

.contact .info-item p {
	font-size: 0.95rem;
	line-height: 1.45;
	color: inherit;
}

/* .section p zet anders overal --fg (donker), ook op gekleurde vlakken */
.contact .info-container .info-item:nth-child(2) p,
.contact .info-container .info-item:nth-child(4) p {
	color: #fff;
}

.contact .info-container .info-item:nth-child(3) p {
	color: var(--primary-fg);
}

.contact .info-item a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	font-weight: 600;
}

.contact .info-item a:hover {
	opacity: 0.92;
}

/* 1 — limoen, 2 — blauw, 3 — oranje, 4 — paars */
.contact .info-container .info-item:nth-child(1) {
	background: var(--secondary);
	color: var(--secondary-fg);
}

.contact .info-container .info-item:nth-child(1) i {
	background: color-mix(in srgb, var(--secondary-fg), transparent 82%);
	color: var(--secondary-fg);
}

.contact .info-container .info-item:nth-child(1) h2,
.contact .info-container .info-item:nth-child(1) h3 {
	color: var(--secondary-fg);
}

.contact .info-container .info-item:nth-child(2) {
	background: var(--mare-blue);
	color: #fff;
}

.contact .info-container .info-item:nth-child(2) i {
	background: color-mix(in srgb, #fff, transparent 78%);
	color: #fff;
}

.contact .info-container .info-item:nth-child(2) h2,
.contact .info-container .info-item:nth-child(2) h3 {
	color: #fff;
}

.contact .info-container .info-item:nth-child(3) {
	background: var(--mare-orange);
	color: var(--primary-fg);
}

.contact .info-container .info-item:nth-child(3) i {
	background: color-mix(in srgb, var(--primary-fg), transparent 82%);
	color: var(--primary-fg);
}

.contact .info-container .info-item:nth-child(3) h2,
.contact .info-container .info-item:nth-child(3) h3 {
	color: var(--primary-fg);
}

.contact .info-container .info-item:nth-child(4) {
	background: var(--mare-purple);
	color: #fff;
}

.contact .info-container .info-item:nth-child(4) i {
	background: color-mix(in srgb, #fff, transparent 78%);
	color: #fff;
}

.contact .info-container .info-item:nth-child(4) h2,
.contact .info-container .info-item:nth-child(4) h3 {
	color: #fff;
}

.contact .info-container .info-item:hover i {
	background: color-mix(in srgb, #fff, transparent 65%);
	color: inherit;
}

.contact .php-email-form {
	border-radius: var(--radius);
}

.maralm-contact-map {
	margin-top: 1rem;
	padding: 1rem;
	background: var(--muted);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
}

.maralm-contact-map iframe {
	display: block;
	width: 100%;
	height: 300px;
	border: 0;
	border-radius: calc(var(--radius) - 0.2rem);
}

.maralm-contact-map__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.75rem;
	font-weight: 600;
	color: var(--primary-ink);
}

.contact .php-email-form .form-label {
	color: var(--default-color);
	font-weight: 600;
}

.contact .php-email-form .form-control,
.contact .php-email-form .form-select {
	border-radius: calc(var(--bs-border-radius) * 0.75);
}

.contact .php-email-form fieldset {
	margin-bottom: 0;
}

.maralm-alert {
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.maralm-alert-success {
	background: color-mix(in srgb, var(--secondary), #fff 75%);
	border: 1px solid var(--secondary-line);
	color: var(--primary-dark);
}

.maralm-alert-error {
	background: #f8d7da;
	border: 1px solid #f5c2c7;
	color: #842029;
}

#school-gallery .portfolio-content img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	border-radius: calc(var(--radius) - 0.35rem);
}

.maralm-gallery-intro {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem 2.5rem;
	width: 100%;
	max-width: none;
	margin-bottom: 1.75rem;
	line-height: 1.65;
}

@media (min-width: 768px) {
	.maralm-gallery-intro {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.maralm-gallery-intro p {
	margin-bottom: 0;
	max-width: none;
}

.maralm-gallery-intro p:last-child {
	margin-bottom: 0;
}

.maralm-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: 1.35rem 1.15rem;
	margin-bottom: 0.5rem;
}

.maralm-gallery__item {
	margin: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.maralm-gallery__link {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: calc(var(--radius) - 0.35rem);
	box-shadow: var(--shadow-soft);
	border: 1px solid var(--border);
	background: var(--muted);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.maralm-gallery__link:hover,
.maralm-gallery__link:focus-visible {
	box-shadow: var(--shadow-strong);
	transform: translateY(-2px);
	outline: none;
}

.maralm-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.maralm-gallery__caption {
	margin-top: 0.65rem;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--fg);
}

.maralm-gallery__title {
	display: block;
	color: var(--primary-ink);
	font-family: var(--font-heading);
	font-size: 1.05rem;
	margin-bottom: 0.2rem;
}

.maralm-gallery-empty {
	color: var(--muted-fg);
	font-style: italic;
}

.maralm-gallery-heading {
	margin: 2.5rem 0 1.25rem;
	font-family: var(--font-heading);
	font-size: 1.55rem;
	color: var(--primary-ink);
	border-bottom: 3px solid var(--secondary-line);
	padding-bottom: 0.45rem;
}

.maralm-kamp-section {
	margin: 2rem 0 2.5rem;
	padding: 1.35rem 1.25rem 1.5rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: linear-gradient(135deg, color-mix(in srgb, var(--primary), transparent 94%), color-mix(in srgb, var(--secondary), transparent 88%));
	box-shadow: var(--shadow-soft);
}

.maralm-kamp-section__title {
	margin: 0 0 0.5rem;
	font-family: var(--font-heading);
	font-size: 1.45rem;
	color: var(--primary-ink);
}

.maralm-kamp-section__lead {
	margin: 0;
	color: var(--fg);
	line-height: 1.6;
	max-width: none;
	width: 100%;
}

.maralm-kamp-grid {
	margin-top: 1.25rem;
}

.maralm-kamp-card {
	height: 100%;
	border: none;
	box-shadow: none;
	background: transparent;
	border-radius: 0;
	overflow: visible;
	transition: none;
}

.maralm-kamp-card:hover {
	transform: none;
	box-shadow: none;
}

.maralm-kamp-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: calc(var(--radius) - 0.35rem);
	box-shadow: var(--shadow-soft);
	border: 1px solid var(--border);
	background: var(--muted);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.maralm-kamp-card:hover .maralm-kamp-card__media {
	box-shadow: var(--shadow-strong);
	transform: translateY(-2px);
}

.maralm-kamp-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.maralm-kamp-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 2.5rem;
	color: var(--primary-ink);
	background: color-mix(in srgb, var(--secondary), transparent 75%);
}

.maralm-kamp-card__year {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--primary-fg);
	background: var(--primary);
	box-shadow: var(--shadow-soft);
}

.maralm-kamp-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0;
	margin-top: 0.65rem;
}

.maralm-kamp-card__title {
	display: block;
	margin-bottom: 0.2rem;
	font-family: var(--font-heading);
	font-size: 1.05rem;
	color: var(--primary-ink);
}

.maralm-kamp-card__place {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--mare-blue-ink);
}

.maralm-kamp-card__text {
	display: block;
	margin-bottom: 0.75rem;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--fg);
}

.maralm-kamp-card__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	align-self: flex-start;
	padding: 0.5rem 0.9rem;
	border-radius: 0.65rem;
	font-weight: 700;
	font-size: 0.92rem;
	text-decoration: none;
	color: var(--primary-fg);
	background: var(--primary);
	transition: background 0.2s ease, color 0.2s ease;
}

.maralm-kamp-card__btn:hover {
	background: var(--secondary);
	color: var(--secondary-fg);
	text-decoration: none;
}

.maralm-kamp-grid .maralm-kamp-card:nth-child(1) .maralm-kamp-card__year {
	background: var(--primary);
}

.maralm-kamp-grid .maralm-kamp-card:nth-child(2) .maralm-kamp-card__year {
	background: var(--mare-blue);
}

.maralm-kamp-grid .maralm-kamp-card:nth-child(3) .maralm-kamp-card__year {
	background: var(--mare-purple);
}

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

/* Portal-tegels (gekleurde blokken i.p.v. saaie lijsten) */
.maralm-portal-section {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	padding: 1rem 1.15rem;
	margin-bottom: 1.25rem;
}

.maralm-portal-section-title {
	margin: 0 0 0.85rem;
	font-size: 1.3rem;
	line-height: 1.2;
	padding-bottom: 0.4rem;
	border-bottom: 3px solid var(--secondary-line);
}

.maralm-portal-section.maralm-heading-primary .maralm-portal-section-title {
	color: var(--primary-ink);
	border-bottom-color: var(--primary);
}

.maralm-portal-section.maralm-heading-blue .maralm-portal-section-title {
	color: var(--mare-blue-ink);
	border-bottom-color: var(--mare-blue);
}

.maralm-portal-section.maralm-heading-fg .maralm-portal-section-title {
	color: var(--fg);
	border-bottom-color: var(--fg);
}

.maralm-portal-section.maralm-heading-secondary .maralm-portal-section-title {
	color: color-mix(in srgb, var(--primary-ink), #000 10%);
	border-bottom-color: var(--secondary-line);
}

.maralm-bento-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 0.75rem;
}

.maralm-tile {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.35rem;
	min-height: 96px;
	padding: 0.9rem 1rem;
	border-radius: calc(var(--radius) - 0.25rem);
	text-decoration: none;
	font-weight: 700;
	line-height: 1.25;
	box-shadow: var(--shadow-soft);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.maralm-tile:hover,
.maralm-tile:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
	text-decoration: none;
}

.maralm-tile:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 3px;
}

.maralm-tile-label {
	font-size: 1rem;
}

.maralm-tile-hint {
	font-size: 0.82rem;
	font-weight: 600;
	opacity: 0.88;
}

.maralm-tile-green {
	background: var(--mare-amber);
	color: #fff;
}

.maralm-tile-blue {
	background: var(--mare-blue);
	color: #fff;
}

.maralm-tile-primary {
	background: var(--primary);
	color: var(--primary-fg);
}

.maralm-tile-purple {
	background: var(--mare-purple);
	color: #fff;
}

.maralm-tile-orange {
	background: var(--mare-orange);
	color: #fff;
}

.maralm-tile-yellow {
	background: var(--muted);
	color: var(--fg);
	border: 1px solid var(--border);
}

.maralm-nieuwsbrief-card {
	border: none;
	box-shadow: var(--shadow-soft);
}

.maralm-nieuwsbrief-card .card-body,
.maralm-nieuwsbrief-card .card-title,
.maralm-nieuwsbrief-card .card-text {
	color: inherit;
}

.maralm-nieuwsbrief-card .card-text {
	opacity: 0.95;
}

.maralm-nieuwsbrief-card .btn-light {
	--bs-btn-bg: #fff;
	--bs-btn-border-color: rgba(255, 255, 255, 0.9);
	--bs-btn-color: var(--fg);
	--bs-btn-hover-bg: var(--muted);
	--bs-btn-hover-border-color: #fff;
	--bs-btn-hover-color: var(--fg);
	font-weight: 600;
}

.maralm-nieuwsbrief-card.maralm-tile-green .btn-light {
	--bs-btn-color: var(--primary);
	--bs-btn-hover-color: var(--primary);
}

.maralm-home-about {
	background: linear-gradient(120deg, color-mix(in srgb, var(--primary), transparent 94%), color-mix(in srgb, var(--secondary), transparent 82%));
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.5rem;
	box-shadow: var(--shadow-soft);
}

.maralm-home-about .maralm-bento-grid {
	margin-top: 1rem;
}

.maralm-callout {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-left: 5px solid var(--secondary-line);
	border-radius: var(--radius);
	padding: 1rem 1.15rem;
	margin-bottom: 1.25rem;
	box-shadow: var(--shadow-soft);
}

.maralm-callout h2 {
	margin-top: 0;
}

.maralm-callout--compact {
	padding: 0.65rem 0.85rem;
	margin-bottom: 0.75rem;
}

.maralm-callout--compact h2 {
	font-size: 1.05rem;
	margin-bottom: 0.35rem;
}

.maralm-callout--compact p:last-of-type {
	margin-bottom: 0.5rem;
}

.maralm-callout--lock {
	border-left-color: var(--mare-blue);
	border-color: color-mix(in srgb, var(--mare-blue), var(--border) 55%);
	background: color-mix(in srgb, var(--mare-blue), #ffffff 93%);
}

.maralm-callout--lock h2 {
	color: var(--mare-blue-dark);
}

.maralm-hubster-lock-btn {
	font-weight: 700;
	color: #ffffff;
	background: linear-gradient(135deg, var(--mare-blue-dark), var(--mare-blue));
	border: 2px solid color-mix(in srgb, var(--mare-blue-dark), #000 10%);
	box-shadow: 0 3px 12px color-mix(in srgb, var(--mare-blue), transparent 55%);
}

.maralm-hubster-lock-btn:hover,
.maralm-hubster-lock-btn:focus-visible {
	color: #ffffff;
	background: linear-gradient(135deg, var(--mare-blue), color-mix(in srgb, var(--mare-blue), #ffffff 18%));
	border-color: var(--mare-blue-dark);
	box-shadow: 0 5px 16px color-mix(in srgb, var(--mare-blue), transparent 45%);
}

/* Mini-missie: vergrendel je PC (amber/oranje uit De Mare-palet) */
.maralm-lock,
.maralm-lock-plan {
	--lock-deep: color-mix(in srgb, var(--mare-amber-dark), #000 32%);
	--lock-mid: var(--mare-amber-dark);
	--lock-bright: var(--mare-amber);
	--lock-stamp: #c1121f;
	--lock-gold: #f4c430;
	--lock-ink: #fff7ed;
}

.maralm-lock-keys {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	vertical-align: middle;
}

.maralm-lock-keys kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.55rem;
	padding: 0.12rem 0.45rem;
	border: 1px solid #d8d0c4;
	border-radius: 0.35rem;
	background: linear-gradient(#fffdf8, #efe8dc);
	box-shadow: 0 2px 0 #cfc6b8;
	color: #1a1228;
	font-family: var(--font-sans);
	font-size: 0.82em;
	font-weight: 700;
	line-height: 1.2;
}

.maralm-lock--banner,
.maralm-lock--panel,
.maralm-lock--hero {
	--fg: #ffffff;
	--default-color: #ffffff;
	--muted-fg: #fff4e5;
	display: grid;
	gap: 1rem 1.25rem;
	align-items: center;
	margin-bottom: 1.25rem;
	border-radius: 1.25rem;
	color: #ffffff;
	background:
		radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--lock-gold), transparent 72%) 0 18%, transparent 42%),
		linear-gradient(145deg, var(--lock-deep) 0%, var(--lock-mid) 52%, var(--lock-bright) 100%);
	box-shadow: 0 10px 28px color-mix(in srgb, var(--lock-deep), transparent 50%);
}

.maralm-lock--banner,
.maralm-lock--panel {
	grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr);
	padding: 1.05rem 1.25rem 1.1rem 1.3rem;
}

.maralm-lock--banner:has(.maralm-lock__thumbs--duo),
.maralm-lock--panel:has(.maralm-lock__thumbs--duo),
.maralm-lock--banner:has(.maralm-lock__crew),
.maralm-lock--panel:has(.maralm-lock__crew) {
	grid-template-columns: minmax(10.5rem, 15.5rem) minmax(0, 1fr);
}

.maralm-lock--hero {
	padding: 1.7rem 2rem 1.8rem;
}

.maralm-lock--hero:has(.maralm-lock-picker) {
	grid-template-columns: 1fr;
}

.maralm-lock-picker {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.maralm-lock-picker__legend {
	float: none;
	width: 100%;
	margin: 0 0 0.5rem;
	padding: 0;
	color: #fff;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.maralm-lock-picker__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.45rem 0.75rem;
	margin: 0 0 0.7rem;
}

.maralm-lock-picker__count {
	margin: 0;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.35;
}

.maralm-lock-picker__surprise {
	--bs-btn-bg: color-mix(in srgb, #000, transparent 42%);
	--bs-btn-border-color: color-mix(in srgb, var(--lock-gold), transparent 20%);
	--bs-btn-hover-bg: color-mix(in srgb, var(--lock-gold), transparent 72%);
	--bs-btn-hover-border-color: var(--lock-gold);
	--bs-btn-color: #fff;
	--bs-btn-hover-color: #fff;
	font-weight: 700;
}

.maralm-lock-picker__switch {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(6.4rem, 1fr));
	gap: 0.45rem;
	margin-bottom: 0.75rem;
}

.maralm-lock-picker__choice {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.35rem;
	margin: 0;
	padding: 0.4rem 0.4rem 0.5rem;
	border: 2px solid color-mix(in srgb, #fff, transparent 72%);
	border-radius: 0.85rem;
	background: color-mix(in srgb, #000, transparent 48%);
	color: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.maralm-lock-picker__choice input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.maralm-lock-picker__choice-frame {
	flex: 0 0 auto;
	width: 100%;
	overflow: hidden;
	border-radius: 0.45rem;
	background: #1a1228;
}

.maralm-lock-picker__choice-frame img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.maralm-lock-picker__choice-meta {
	display: flex;
	flex-direction: column;
	gap: 0.08rem;
	min-width: 0;
	text-align: center;
}

.maralm-lock-picker__choice-title {
	font-size: 0.78rem;
	font-weight: 800;
	line-height: 1.2;
	color: #fff;
}

.maralm-lock-picker__choice-note {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.25;
	color: color-mix(in srgb, #fff, transparent 18%);
}

.maralm-lock-picker__choice.is-downloadable .maralm-lock-picker__choice-note {
	color: var(--lock-tint, var(--lock-gold));
}

.maralm-lock-picker__choice:hover,
.maralm-lock-picker__choice:focus-within {
	border-color: color-mix(in srgb, var(--lock-tint, #fff), transparent 20%);
	background: color-mix(in srgb, #000, transparent 32%);
	transform: translateY(-2px);
}

.maralm-lock-picker__choice:has(input:checked) {
	border-color: var(--lock-tint, var(--lock-gold));
	background: color-mix(in srgb, var(--lock-tint, var(--lock-gold)), transparent 78%);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--lock-tint, var(--lock-gold)), transparent 35%);
}

.maralm-lock-picker__stage {
	position: relative;
}

.maralm-lock-picker .maralm-lock-picker__screen.maralm-lock__screen {
	display: none;
}

.maralm-lock-picker .maralm-lock-picker__screen.is-active,
.maralm-lock-picker .maralm-lock-picker__screen:not([hidden]) {
	display: block;
}

.maralm-lock-picker .maralm-lock-picker__screen[hidden] {
	display: none !important;
}

.maralm-lock-picker__hint {
	margin: 0.55rem 0 0;
	color: #fff;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.4;
}

.maralm-lock__crew {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0;
	padding: 0.55rem 0.35rem 0.35rem;
}

.maralm-lock__crew-item {
	position: relative;
	display: block;
	width: 2.55rem;
	height: 2.55rem;
	margin-left: -0.55rem;
	overflow: hidden;
	border: 2px solid color-mix(in srgb, #fff, transparent 18%);
	border-radius: 999px;
	background: #1a1228;
	box-shadow: 0 6px 14px rgba(16, 8, 32, 0.35);
	transition: transform 0.15s ease, z-index 0s, border-color 0.15s ease;
	z-index: 1;
}

.maralm-lock__crew-item:first-child {
	margin-left: 0;
}

.maralm-lock__crew-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
}

.maralm-lock__crew-item:hover,
.maralm-lock__crew-item:focus-visible {
	z-index: 8;
	transform: translateY(-5px) scale(1.12);
	border-color: var(--lock-tint, var(--lock-gold));
	outline: 0;
}

.maralm-lock__crew-item.is-daily {
	z-index: 4;
	border-color: var(--lock-gold);
	box-shadow:
		0 0 0 2px color-mix(in srgb, var(--lock-gold), transparent 35%),
		0 8px 16px rgba(16, 8, 32, 0.4);
}

.maralm-lock__crew-star {
	position: absolute;
	right: -0.05rem;
	bottom: -0.05rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 0.95rem;
	height: 0.95rem;
	border-radius: 999px;
	background: var(--lock-gold);
	color: #3b2208;
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1;
}

.maralm-lock__thumbs,
.maralm-lock__screens {
	display: grid;
	gap: 0.55rem;
}

.maralm-lock__screens--duo {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
}

.maralm-lock__thumbs--duo {
	grid-template-columns: 1fr 1fr;
	gap: 0.4rem;
	align-items: end;
	padding: 0.45rem 0.1rem 0.55rem;
}

.maralm-lock__thumbs--crew,
.maralm-lock__screens--crew {
	grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
}

.maralm-lock__thumb,
.maralm-lock__screen {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 0.85rem;
	background: #1a1228;
	box-shadow: 0 12px 24px rgba(16, 8, 32, 0.35);
	text-decoration: none;
	color: inherit;
}

.maralm-lock__thumbs--duo .maralm-lock__thumb {
	width: 100%;
	background: #fff8ef;
	padding: 0.28rem 0.28rem 0;
	border-radius: 0.45rem 0.45rem 0.55rem 0.55rem;
	box-shadow: 0 10px 18px rgba(16, 8, 32, 0.32);
}

.maralm-lock__thumb:focus-visible,
.maralm-lock__screen:focus-visible {
	outline: 3px solid var(--lock-gold);
	outline-offset: 3px;
}

.maralm-lock__thumb img,
.maralm-lock__screen img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.maralm-lock__screen {
	padding: 0.45rem 0.45rem 0.85rem;
	border-radius: 0.95rem 0.95rem 0.65rem 0.65rem;
}

.maralm-lock__screen.is-downloadable {
	box-shadow:
		0 0 0 2px color-mix(in srgb, var(--lock-gold), transparent 35%),
		0 12px 24px rgba(16, 8, 32, 0.35);
}

.maralm-lock__screen img {
	border-radius: 0.45rem;
	image-rendering: auto;
}

.maralm-lock__pick {
	display: flex;
	flex-direction: column;
	gap: 0.08rem;
	padding: 0.32rem 0.2rem 0.42rem;
	text-align: center;
}

.maralm-lock__thumbs .maralm-lock__pick {
	color: var(--lock-deep);
}

.maralm-lock__screens .maralm-lock__pick {
	padding: 0.45rem 0.2rem 0.15rem;
	color: #fff;
}

.maralm-lock__pick-kicker {
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.maralm-lock__screen.is-downloadable .maralm-lock__pick-kicker,
.maralm-lock__thumb.is-downloadable .maralm-lock__pick-kicker {
	color: #9a0e18;
}

.maralm-lock__screens .maralm-lock__screen.is-downloadable .maralm-lock__pick-kicker {
	color: var(--lock-gold);
}

.maralm-lock__pick-title {
	font-size: 0.78rem;
	font-weight: 800;
	line-height: 1.2;
}

.maralm-lock__screens .maralm-lock__pick-title {
	font-size: 0.95rem;
}

.maralm-lock__screen-hint {
	display: block;
	margin-top: 0.25rem;
	text-align: center;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: color-mix(in srgb, var(--lock-ink), transparent 22%);
}

.maralm-lock__badge {
	display: inline-flex;
	align-items: center;
	margin: 0 0 0.4rem;
	padding: 0.18rem 0.55rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--lock-stamp), #fff 8%);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.maralm-lock__copy h2 {
	margin: 0 0 0.45rem;
	color: #fff;
	font-size: 1.15rem;
	line-height: 1.25;
}

.maralm-lock--hero .maralm-lock__copy h2 {
	font-size: 1.55rem;
}

/* .section p / body gebruiken --fg; op paars moet dat wit zijn */
.maralm-lock--banner p,
.maralm-lock--panel p,
.maralm-lock--hero p,
.maralm-lock--banner .maralm-lock__lead,
.maralm-lock--panel .maralm-lock__lead,
.maralm-lock--hero .maralm-lock__lead,
.maralm-lock--banner .maralm-lock-winl,
.maralm-lock--panel .maralm-lock-winl,
.maralm-lock--hero .maralm-lock-winl,
.maralm-lock--banner .maralm-lock-winl__label,
.maralm-lock--panel .maralm-lock-winl__label,
.maralm-lock--hero .maralm-lock-winl__label,
.maralm-lock--banner .maralm-lock-keys__plus,
.maralm-lock--panel .maralm-lock-keys__plus,
.maralm-lock--hero .maralm-lock-keys__plus,
.maralm-lock--hero .maralm-lock__screen-hint,
.maralm-lock--hero .maralm-lock-picker__legend,
.maralm-lock--hero .maralm-lock-picker__hint,
.maralm-lock--hero .maralm-lock-picker__count,
.maralm-lock--hero .maralm-lock-picker__choice-title {
	color: #ffffff !important;
}

.maralm-lock--banner .maralm-lock-keys kbd,
.maralm-lock--panel .maralm-lock-keys kbd,
.maralm-lock--hero .maralm-lock-keys kbd {
	color: #1a1228 !important;
}

.maralm-lock--banner .maralm-lock__lead strong,
.maralm-lock--panel .maralm-lock__lead strong,
.maralm-lock--hero .maralm-lock__lead strong {
	color: var(--lock-gold);
	font-weight: 800;
}

.maralm-lock__hint {
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.45;
}

.maralm-lock--hero .maralm-lock__hint {
	margin: 0.7rem 0 0;
}

.maralm-lock__hint a {
	color: #ffffff !important;
	text-decoration: underline;
	text-underline-offset: 0.18em;
	font-weight: 700;
}

.maralm-lock__hint a:hover,
.maralm-lock__hint a:focus-visible {
	color: var(--lock-gold, #f4c430) !important;
}

.maralm-lock-keys__plus {
	font-weight: 700;
	opacity: 1;
}

.maralm-lock-plan .maralm-lock-keys__plus {
	color: var(--fg);
}

.maralm-lock__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.maralm-lock__btn {
	--bs-btn-bg: var(--lock-stamp);
	--bs-btn-border-color: color-mix(in srgb, var(--lock-stamp), #000 12%);
	--bs-btn-hover-bg: color-mix(in srgb, var(--lock-stamp), #fff 12%);
	--bs-btn-hover-border-color: color-mix(in srgb, var(--lock-stamp), #fff 8%);
	--bs-btn-color: #fff;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: color-mix(in srgb, var(--lock-stamp), #000 10%);
	--bs-btn-active-color: #fff;
	font-weight: 700;
}

.maralm-lock__btn--ghost {
	--bs-btn-bg: transparent;
	--bs-btn-border-color: color-mix(in srgb, #fff, transparent 35%);
	--bs-btn-hover-bg: color-mix(in srgb, #fff, transparent 86%);
	--bs-btn-hover-border-color: #fff;
	--bs-btn-color: #fff;
	--bs-btn-hover-color: #fff;
}

.maralm-lock-winl {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 0.85rem;
	margin: 0 0 1rem;
	padding: 0.55rem 0.7rem;
	border-radius: 0.75rem;
	background: color-mix(in srgb, #000, transparent 62%);
}

.maralm-lock-winl__label {
	font-weight: 700;
	font-size: 0.92rem;
}

.maralm-lock-plan {
	scroll-margin-top: 7rem;
	padding: 1.4rem 1.55rem 1.5rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--lock-mid), #fff 94%) 0 4.5rem, var(--card-bg) 4.5rem);
	box-shadow: var(--shadow-soft);
}

.section .maralm-lock-plan p {
	color: var(--fg);
}

.section .maralm-lock-plan .maralm-lock-plan__kicker {
	color: var(--lock-mid);
}

.section .maralm-lock-plan .maralm-lock-plan__file {
	color: var(--lock-deep);
}

.maralm-lock-plan__head {
	margin-bottom: 1.15rem;
}

.maralm-lock-plan__kicker {
	margin: 0 0 0.25rem;
	color: var(--lock-mid);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.maralm-lock-plan__head h2 {
	margin: 0 0 0.45rem;
	color: var(--lock-mid);
	font-size: 1.28rem;
}

.maralm-lock-plan__lead {
	margin: 0 0 0.85rem;
	max-width: 40rem;
	color: var(--fg);
	line-height: 1.55;
}

.maralm-lock-plan__path {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	font-size: 0.86rem;
	font-weight: 600;
}

.maralm-lock-plan__path span {
	display: inline-flex;
	align-items: center;
	padding: 0.28rem 0.65rem;
	border-radius: 999px;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--lock-mid), #fff 70%);
	color: var(--lock-mid);
}

.maralm-lock-plan__path span:not(:first-child)::before {
	content: "›";
	margin-right: 0.45rem;
	color: var(--lock-mid);
	font-weight: 700;
}

.maralm-lock-plan__steps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.85rem;
	margin: 0 0 1.1rem;
	padding: 0;
	list-style: none;
}

.maralm-lock-plan__step {
	position: relative;
	padding: 1rem 1rem 1.05rem 1rem;
	border: 1px solid var(--border);
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 1px 0 color-mix(in srgb, var(--lock-mid), transparent 92%);
}

.maralm-lock-plan__num {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.85rem;
	height: 1.85rem;
	border-radius: 999px;
	background: var(--lock-mid);
	color: #fff;
	font-weight: 700;
	font-size: 0.88rem;
}

.maralm-lock-plan__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.35rem;
	height: 2.35rem;
	margin-bottom: 0.55rem;
	border-radius: 0.7rem;
	background: color-mix(in srgb, var(--lock-mid), #fff 88%);
	color: var(--lock-mid);
	font-size: 1.2rem;
}

.maralm-lock-plan__step h3 {
	margin: 0 0 0.4rem;
	padding-right: 2rem;
	color: var(--lock-deep);
	font-size: 1.02rem;
}

.maralm-lock-plan__step p {
	margin: 0 0 0.7rem;
	color: var(--fg);
	line-height: 1.5;
}

.maralm-lock-plan__step p:last-child {
	margin-bottom: 0;
}

.maralm-lock-plan__file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	padding: 0.45rem 0.65rem;
	border-radius: 0.65rem;
	background: color-mix(in srgb, var(--mare-amber), #fff 90%);
	color: var(--lock-deep);
	font-size: 0.88rem;
}

.maralm-lock-plan__file code {
	padding: 0.1rem 0.35rem;
	border-radius: 0.3rem;
	background: #fff;
	color: var(--lock-mid);
	font-size: 0.84em;
}

.maralm-lock-plan__dl {
	font-weight: 700;
	color: #fff;
	background: #c1121f;
	border-color: #c1121f;
}

.maralm-lock-plan__dl:hover,
.maralm-lock-plan__dl:focus-visible {
	color: #fff;
	background: color-mix(in srgb, #c1121f, #fff 12%);
	border-color: color-mix(in srgb, #c1121f, #000 8%);
}

.maralm-lock-plan__done {
	margin: 0 0 0.75rem;
	padding: 0.75rem 0.9rem;
	border-left: 4px solid #c1121f;
	border-radius: 0 0.75rem 0.75rem 0;
	background: color-mix(in srgb, #c1121f, #fff 92%);
	color: var(--fg);
	line-height: 1.55;
}

.maralm-lock-meta {
	margin: 0 0 0.65rem;
	font-size: 0.85rem;
	color: var(--muted-fg);
}

@media (max-width: 767px) {
	.maralm-lock-plan__steps {
		grid-template-columns: 1fr;
	}
}

.maralm-hubster-compact .maralm-lock--banner {
	margin-bottom: 0.75rem;
	padding: 0.8rem 1rem;
}

.maralm-hubster-compact .maralm-lock--banner:has(.maralm-lock__thumbs--duo),
.maralm-hubster-compact .maralm-lock--banner:has(.maralm-lock__crew) {
	grid-template-columns: minmax(9.5rem, 14rem) minmax(0, 1fr);
}

.maralm-hubster-compact .maralm-lock__thumbs--duo {
	padding: 0.3rem 0.05rem 0.4rem;
}

.maralm-hubster-compact .maralm-lock__crew {
	padding: 0.35rem 0.15rem 0.2rem;
}

.maralm-hubster-compact .maralm-lock__crew-item {
	width: 2.2rem;
	height: 2.2rem;
	margin-left: -0.48rem;
}

.maralm-hubster-compact .maralm-lock--banner .maralm-lock__copy h2 {
	font-size: 1.02rem;
}

.maralm-hubster-compact .maralm-lock--banner .maralm-lock__lead {
	margin-bottom: 0.45rem;
	font-size: 0.9rem;
}

.maralm-hubster-compact .maralm-lock--banner .maralm-lock__hint {
	margin-bottom: 0.55rem;
	font-size: 0.84rem;
}

@media (max-width: 767px) {
	.maralm-lock--banner,
	.maralm-lock--panel,
	.maralm-lock--hero {
		grid-template-columns: 1fr;
	}

	.maralm-lock--hero {
		padding: 1.35rem 1.3rem 1.45rem;
	}

	.maralm-lock__thumbs {
		max-width: 18rem;
		margin-inline: auto;
	}

	.maralm-lock__screens--duo,
	.maralm-lock--hero:has(.maralm-lock-picker) {
		grid-template-columns: 1fr;
	}

	.maralm-lock-picker__switch {
		grid-template-columns: repeat(auto-fit, minmax(5.6rem, 1fr));
	}

	.maralm-lock__crew {
		padding-top: 0.2rem;
	}

	.maralm-lock__crew-item {
		width: 2.35rem;
		height: 2.35rem;
	}
}

.maralm-portal-section--collapsible .maralm-portal-section-title {
	margin-bottom: 0;
}

.maralm-portal-section--collapsible:not(.is-collapsed) .maralm-portal-section-title {
	margin-bottom: 0.55rem;
}

.maralm-portal-section--collapsible.is-collapsed .maralm-portal-section-title {
	border-bottom: 0;
	padding-bottom: 0;
}

.maralm-portal-section-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
}

.maralm-portal-section-toggle:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 3px;
	border-radius: 0.2rem;
}

.maralm-portal-section-meta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	flex-shrink: 0;
}

.maralm-portal-section-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.maralm-portal-section-chevron {
	font-size: 0.95rem;
	transition: transform 0.18s ease;
}

.maralm-portal-section--collapsible:not(.is-collapsed) .maralm-portal-section-chevron {
	transform: rotate(180deg);
}

.maralm-hubster-compact .page-title .container {
	padding-top: 1.35rem;
	padding-bottom: 0.85rem;
}

.maralm-hubster-compact .page-title h1 {
	font-size: 1.65rem;
	margin-bottom: 0.15rem;
}

.maralm-hubster-compact .page-title p {
	margin-bottom: 0.35rem;
	font-size: 0.95rem;
}

.maralm-hubster-compact .page-title .breadcrumbs {
	font-size: 0.85rem;
}

.maralm-hubster-compact .maralm-page-content {
	padding-top: 0.75rem;
}

.maralm-hubster-compact .maralm-portal-section {
	padding: 0.55rem 0.75rem;
	margin-bottom: 0.5rem;
}

.maralm-hubster-compact .maralm-portal-section-title {
	font-size: 1.05rem;
	padding-bottom: 0.25rem;
}

.maralm-hubster-compact .maralm-bento-grid {
	grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
	gap: 0.45rem;
}

.maralm-hubster-compact .maralm-tile {
	min-height: 72px;
	padding: 0.55rem 0.65rem;
	gap: 0.2rem;
}

.maralm-hubster-compact .maralm-tile-label {
	font-size: 0.9rem;
}

.maralm-hubster-compact .maralm-tile-hint {
	font-size: 0.75rem;
}

.maralm-hubster-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 0.85rem;
}

.maralm-hubster-logout {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 1rem;
	border-radius: 0.7rem;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	color: #ffffff;
	background: linear-gradient(135deg, var(--mare-amber-dark), var(--mare-amber));
	border: 2px solid color-mix(in srgb, var(--mare-amber-dark), #000 12%);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--mare-amber), transparent 50%);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.maralm-hubster-logout:hover,
.maralm-hubster-logout:focus-visible {
	color: #ffffff;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--mare-amber), transparent 40%);
	background: linear-gradient(135deg, var(--mare-amber), color-mix(in srgb, var(--mare-amber), #ffffff 16%));
}

.maralm-hubster-kamp {
	margin-bottom: 1rem;
	padding: 1rem 1.1rem 1.1rem;
	border: 1px solid var(--border);
	border-left: 5px solid var(--mare-blue);
	border-radius: var(--radius);
	background: var(--card-bg);
	box-shadow: var(--shadow-soft);
}

.maralm-hubster-kamp__title {
	margin: 0 0 0.35rem;
	font-family: var(--font-heading);
	font-size: 1.15rem;
	color: var(--primary-ink);
}

.maralm-hubster-kamp__lead {
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--muted-fg);
	max-width: none;
	width: 100%;
}

.maralm-hubster-kamp__lead a {
	font-weight: 600;
}

.maralm-hubster-kamp__list {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin-top: 0.85rem;
}

.maralm-hubster-kamp__row {
	display: grid;
	grid-template-columns: minmax(240px, 1.4fr) minmax(150px, 0.7fr) minmax(280px, 1fr);
	gap: 1rem 1.25rem;
	align-items: center;
}

.maralm-hubster-kamp__row--head {
	padding: 0 0.75rem 0.35rem;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted-fg);
	border-bottom: 1px solid var(--border);
}

.maralm-hubster-kamp__row--head span:nth-child(2) {
	text-align: center;
}

.maralm-hubster-kamp__item {
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) - 0.25rem);
	background: color-mix(in srgb, var(--muted), transparent 35%);
}

.maralm-hubster-kamp__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.maralm-hubster-kamp__year {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	padding: 0.25rem 0.5rem;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--primary-fg);
	background: var(--primary);
}

.maralm-hubster-kamp__name {
	margin: 0 0 0.15rem;
	font-size: 0.98rem;
	color: var(--fg);
}

.maralm-hubster-kamp__place {
	font-size: 0.84rem;
	color: var(--mare-blue-ink);
	font-weight: 600;
}

.maralm-hubster-kamp__album {
	display: flex;
	justify-content: center;
}

.maralm-hubster-kamp__open {
	min-width: 9.5rem;
	font-weight: 700;
}

.maralm-hubster-kamp__secret {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.25rem;
	min-width: 0;
}

.maralm-hubster-kamp__secret-label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted-fg);
}

.maralm-hubster-kamp__copy-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.45rem;
}

.maralm-hubster-kamp__secret-value {
	flex: 1 1 10rem;
	padding: 0.45rem 0.55rem;
	border-radius: 0.45rem;
	font-size: 0.86rem;
	font-family: var(--font-mono);
	color: var(--fg);
	background: var(--card-bg);
	border: 1px dashed color-mix(in srgb, var(--primary), transparent 55%);
	word-break: break-all;
	user-select: all;
}

.maralm-hubster-kamp__copy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 0.45rem 0.75rem;
	border: 1px solid color-mix(in srgb, var(--mare-blue), transparent 35%);
	border-radius: 0.45rem;
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--primary-fg);
	background: var(--mare-blue);
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease;
}

.maralm-hubster-kamp__copy-btn:hover,
.maralm-hubster-kamp__copy-btn:focus-visible {
	background: color-mix(in srgb, var(--mare-blue), #000 10%);
	transform: translateY(-1px);
}

.maralm-hubster-kamp__copy-btn.is-copied {
	background: var(--secondary);
	color: var(--secondary-fg);
	border-color: var(--secondary);
}

.maralm-hubster-kamp__copy-hint {
	font-size: 0.78rem;
	color: var(--muted-fg);
	line-height: 1.35;
}

.maralm-hubster-kamp__list .maralm-hubster-kamp__item:nth-child(2) .maralm-hubster-kamp__year {
	background: var(--primary);
}

.maralm-hubster-kamp__list .maralm-hubster-kamp__item:nth-child(3) .maralm-hubster-kamp__year {
	background: var(--mare-blue);
}

.maralm-hubster-kamp__list .maralm-hubster-kamp__item:nth-child(4) .maralm-hubster-kamp__year {
	background: var(--mare-purple);
}

@media (max-width: 991px) {
	.maralm-hubster-kamp__row--head {
		display: none;
	}

	.maralm-hubster-kamp__row {
		grid-template-columns: 1fr;
		gap: 0.65rem;
	}

	.maralm-hubster-kamp__album {
		justify-content: flex-start;
	}
}

@media (max-width: 575px) {
	.maralm-hubster-toolbar {
		justify-content: stretch;
	}

	.maralm-hubster-logout {
		width: 100%;
		justify-content: center;
	}
}

/* Lunch prijscheck-stijlen: zie assets/css/vrijdaglunch.css */

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #1a1c20;
		--fg: #e8eef2;
		--primary: #009DDC;
		--primary-dark: #121417;
		--primary-light: #33B1E3;
		--primary-fg: #ffffff;
		--primary-ink: #5BC4EB;
		--mare-blue-ink: #5BC4EB;
		--secondary: #F26430;
		--secondary-fg: #2A2D34;
		--secondary-ink: #F26430;
		--secondary-line: #F26430;
		--link-hover: var(--secondary);
		--focus-ring: var(--secondary);
		--accent: #2A2D34;
		--accent-fg: #e8eef2;
		--card-bg: #2A2D34;
		--card-fg: #ffffff;
		--border: #3d424a;
		--input-bg: #2A2D34;
		--muted: #22252b;
		--muted-fg: #a8b0b8;
		--mare-blue: #009DDC;
		--mare-blue-dark: #0077A8;
		--mare-orange: #F26430;
		--mare-purple: #6761A8;
		--mare-amber: #009B72;
		--mare-amber-dark: #007A5A;
		--footer-legal: #9AD4EE;
		--bs-primary: #009DDC;
		--bs-primary-rgb: 0, 157, 220;
		--bs-secondary: #F26430;
		--bs-secondary-rgb: 242, 100, 48;
	}

	a {
		color: var(--primary-ink);
	}

	.accent-background a {
		color: var(--secondary);
	}

	.maralm-nieuwsbrief-card .btn-light,
	.maralm-nieuwsbrief-card.maralm-tile-green .btn-light {
		--bs-btn-color: var(--primary-dark);
		--bs-btn-hover-color: var(--fg);
	}

	.header,
	.maralm-card-grid .card {
		box-shadow: var(--shadow-strong);
	}

	.maralm-search-bar {
		background: color-mix(in srgb, var(--card-bg), #fff 8%);
	}

	.hero.accent-background p {
		color: #ffffff;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	}

	.maralm-callout--lock {
		background: color-mix(in srgb, var(--mare-blue), var(--card-bg) 82%);
		border-color: color-mix(in srgb, var(--mare-blue), var(--border) 45%);
	}

	.maralm-callout--lock h2 {
		color: color-mix(in srgb, var(--mare-blue), #ffffff 35%);
	}

	.maralm-lock-plan {
		background: linear-gradient(180deg, color-mix(in srgb, var(--lock-mid), var(--card-bg) 70%) 0 4.5rem, var(--card-bg) 4.5rem);
	}

	.maralm-lock-plan__step {
		background: color-mix(in srgb, var(--card-bg), #fff 6%);
	}

	.maralm-lock-plan__head h2,
	.maralm-lock-plan__kicker {
		color: color-mix(in srgb, var(--mare-amber), #fff 28%);
	}

	.maralm-http401__body a {
		color: color-mix(in srgb, var(--mare-blue), #fff 35%);
	}

	.navmenu .dropdown ul {
		box-shadow: 0 0 0 1px var(--border), 0 18px 40px rgba(0, 0, 0, 0.5);
	}
}

/* Copyright onder de streep: lichte blauwtoning, niet wit */
.footer.accent-background .copyright {
	border-top-color: color-mix(in srgb, var(--footer-legal), transparent 50%);
}

.footer.accent-background .copyright p {
	color: var(--footer-legal);
	font-size: 0.92rem;
	letter-spacing: 0.01em;
}

/* Contact — beveiligingszegel (captcha) */
.maralm-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.maralm-zegel {
	display: flex;
	align-items: center;
	gap: 1.35rem;
	flex-wrap: wrap;
	padding: 1rem 1.15rem;
	background: var(--muted);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.maralm-zegel__stamp {
	flex: 0 0 11.5rem;
	width: 11.5rem;
	height: 11.5rem;
}

.maralm-zegel__stamp img {
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 6px 12px rgba(0, 63, 56, 0.28));
}

.maralm-zegel__fields {
	flex: 1 1 12rem;
	min-width: 12rem;
}

.maralm-zegel__hint {
	margin: 0 0 0.65rem;
	font-size: 0.92rem;
	color: var(--muted-fg);
}

.maralm-zegel__input {
	max-width: 14rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	font-weight: 700;
	font-family: var(--font-mono);
}

.maralm-zegel__refresh {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.7rem;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--card-bg);
	color: var(--primary-ink);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.maralm-zegel__refresh:hover,
.maralm-zegel__refresh:focus-visible {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--primary-fg);
}

/* Intranet: knop + 401-kader naast elkaar */
.maralm-intranet-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.85rem;
	margin: 1.25rem 0 1.5rem;
}

.maralm-intranet-actions__btn {
	flex: 0 0 auto;
	align-self: center;
	white-space: nowrap;
}

.maralm-intranet-actions .maralm-http401 {
	flex: 1 1 16rem;
	min-width: min(100%, 14rem);
	margin: 0;
}

.maralm-intranet-actions .maralm-http401[open] {
	flex: 1 1 100%;
}

/* Intranet: klikbare HTTP 401-uitleg */
.maralm-http401 {
	margin: 0 0 1.5rem;
	border: 1px solid #f5c2c7;
	border-radius: var(--radius);
	background: linear-gradient(135deg, color-mix(in srgb, #dc3545, var(--card-bg) 94%) 0%, var(--card-bg) 55%, var(--muted) 100%);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
}

.maralm-http401__summary {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.9rem 1.1rem;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.maralm-http401__summary::-webkit-details-marker {
	display: none;
}

.maralm-http401__summary:focus-visible {
	outline: 2px solid var(--mare-blue);
	outline-offset: 2px;
}

.maralm-http401__badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3.1rem;
	height: 2.4rem;
	padding: 0 0.55rem;
	border-radius: 0.65rem;
	background: #dc3545;
	color: #fff;
	font-family: var(--font-mono);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	box-shadow: 0 2px 0 #b02a37;
}

.maralm-http401__summary-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
	flex: 1 1 auto;
	color: var(--fg);
	font-family: var(--font-heading);
}

.maralm-http401__summary-text strong {
	font-size: 1rem;
	font-weight: 700;
}

.maralm-http401__hint {
	font-family: var(--font-sans);
	font-size: 0.88rem;
	color: var(--muted-fg);
}

.maralm-http401__chevron {
	flex: 0 0 auto;
	font-size: 1.1rem;
	color: var(--muted-fg);
	transition: transform 0.2s ease;
}

.maralm-http401[open] .maralm-http401__chevron {
	transform: rotate(180deg);
}

.maralm-http401__body {
	padding: 0 1.15rem 1.2rem 1.15rem;
	border-top: 1px dashed #f5c2c7;
	color: var(--fg);
	font-size: 0.95rem;
	line-height: 1.55;
}

.maralm-http401__lead {
	margin: 1rem 0 0.85rem;
}

.maralm-http401__h {
	margin: 1.1rem 0 0.4rem;
	font-family: var(--font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--primary-ink);
}

.maralm-http401__body ul {
	margin: 0 0 0.35rem;
	padding-left: 1.2rem;
}

.maralm-http401__body li {
	margin-bottom: 0.35rem;
}

.maralm-http401__body a {
	color: var(--mare-blue-dark);
	font-weight: 600;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.maralm-http401__body code {
	font-size: 0.88em;
	padding: 0.1em 0.35em;
	border-radius: 0.35rem;
	background: var(--input-bg);
	color: var(--fg);
}

.maralm-http401__aside {
	margin: 1rem 0 0;
	padding: 0.75rem 0.9rem;
	border-radius: 0.85rem;
	background: var(--accent);
	border-left: 4px solid var(--secondary-line);
}

@media (max-width: 575.98px) {
	.maralm-intranet-actions__btn {
		width: 100%;
		text-align: center;
		white-space: normal;
	}

	.maralm-intranet-actions .maralm-http401 {
		flex-basis: 100%;
	}

	.maralm-http401__summary {
		align-items: flex-start;
	}

	.maralm-http401__badge {
		margin-top: 0.1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition: none !important;
		animation: none !important;
	}
}