/* === Webfonts (zelf gehost — bewust niet via Google, i.v.m. AVG) === */

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

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

/* === Reset & Custom Properties === */

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

:root {
  --color-primary: #0B5FD0;
  --color-secondary: #1A6FC4;
  --color-accent: #1A6FC4;
  --color-background: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F2F7FD;
  --color-text: #3A4453;
  --color-muted: #6B7787;

  --color-primary-light: #1F78D1;
  --color-secondary-light: #3C9BED;
  --color-accent-light: #3C9BED;
  --color-accent-dark: #0A4FA8;
  --color-hero-overlay: rgba(20, 90, 175, 0.62);
  --color-border: #D7E3F2;
  --color-footer-bg: #0B4FA8;
  --color-footer-text: #D6E6FA;

  --font-heading: 'Outfit', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.14);

  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
}

/* === Base Typography === */

html {
  font-size: 18px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-background);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  line-height: 1.25;
  font-weight: 700;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; margin-bottom: var(--space-md); }
h3 { font-size: 1.35rem; margin-bottom: var(--space-sm); }
h4 { font-size: 1.1rem; }

p {
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

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

ul, ol {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
}

li {
  margin-bottom: var(--space-xs);
}

/* === Utility === */

.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.section {
  padding: var(--space-xl) 0;
}

.section-alt {
  background-color: var(--color-surface-alt);
  padding: var(--space-xl) 0;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-xl);
  padding-top: var(--space-lg);
}

.section-header h2 {
  position: relative;
  display: inline-block;
  padding-bottom: var(--space-sm);
}

.section-header h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: var(--color-accent);
  border-radius: var(--radius-sm);
}

.section-header p {
  color: var(--color-muted);
  max-width: 600px;
  margin: var(--space-md) auto 0;
  font-size: 1.05rem;
}

.text-accent {
  color: var(--color-accent);
}

.text-muted {
  color: var(--color-muted);
}

/* === Navigation === */

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(26, 111, 196, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0;
  padding-bottom: 0;
  min-height: 64px;
}

.navbar-brand {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-surface);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.navbar-brand:hover {
  color: #FFFFFF;
}

.navbar-brand span {
  color: #FFFFFF;
  font-weight: 400;
  opacity: 0.92;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
  transition: transform var(--transition-base), opacity var(--transition-fast);
}

.nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-primary);
  flex-direction: column;
  list-style: none;
  padding: var(--space-sm) 0;
  box-shadow: var(--shadow-lg);
}

.nav-menu.active {
  display: flex;
}

.nav-menu li a {
  display: block;
  padding: var(--space-sm) var(--space-lg);
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color var(--transition-fast), background-color var(--transition-fast);
  text-decoration: none;
}

.nav-menu li a:hover {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.14);
}

/* Het actieve item stond op --color-accent. Sinds het lichtere palet is dat
   dezelfde kleur als de balk zelf (1,00:1) en dus onzichtbaar. Nu wit met een
   duidelijker vlak en een streep eronder. */
.nav-menu li a.active {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.18);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.9);
}

/* === Hero Section === */

.hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--color-primary);
  background-image: url('/static/images/vlissingen-skyline.jpg');
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-hero-overlay);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: var(--space-xl) var(--space-md);
}

.hero h1 {
  font-size: 2.25rem;
  color: var(--color-surface);
  margin-bottom: var(--space-md);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.hero p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

.hero-divider {
  width: 50px;
  height: 3px;
  background-color: var(--color-accent);
  margin: 0 auto var(--space-lg);
  border-radius: var(--radius-sm);
}

/* === Buttons === */

.btn {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transition-base),
              color var(--transition-base),
              transform var(--transition-fast),
              box-shadow var(--transition-base);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-surface);
  border-color: var(--color-accent);
}

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

.btn-outline {
  background-color: transparent;
  color: var(--color-surface);
  border-color: var(--color-surface);
}

.btn-outline:hover {
  background-color: var(--color-surface);
  color: var(--color-primary);
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-surface);
  border-color: var(--color-secondary);
}

.btn-secondary:hover {
  background-color: var(--color-secondary-light);
  border-color: var(--color-secondary-light);
  color: var(--color-surface);
}

/* === Cards === */

.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base),
              box-shadow var(--transition-base);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background-color: var(--color-primary);
  /* Was --color-accent; sinds het lichtere palet is dat blauw op blauw (1,16:1). */
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
}

.card h3 {
  color: var(--color-primary);
}

.card p {
  color: var(--color-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.card-image {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-md);
}

.card-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.card:hover .card-image img {
  transform: scale(1.03);
}

/* === Features / Highlights === */

.features-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.feature-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.feature-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-primary);
  /* Was --color-accent; sinds het lichtere palet is dat blauw op blauw (1,16:1). */
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.feature-text h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-xs);
}

.feature-text p {
  color: var(--color-muted);
  font-size: 0.93rem;
  margin-bottom: 0;
}

/* === About / Content Blocks === */

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.about-image img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  width: 100%;
}

.about-text h2 {
  margin-bottom: var(--space-md);
}

.about-text p {
  color: var(--color-muted);
  line-height: 1.8;
}

/* === Statistics / Numbers === */

.stats-bar {
  background-color: var(--color-primary);
  padding: var(--space-xl) 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  text-align: center;
}

.stat-item h3 {
  font-size: 2rem;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.stat-item p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0;
}

/* === Contact Section === */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.contact-info-block {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  margin-bottom: var(--space-lg);
}

.contact-info-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-primary);
  /* Was --color-accent; sinds het lichtere palet is dat blauw op blauw (1,16:1). */
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.contact-info-text h4 {
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.contact-info-text p {
  color: var(--color-muted);
  margin-bottom: 0;
}

.contact-info-text a {
  color: var(--color-secondary);
  font-weight: 500;
}

.contact-info-text a:hover {
  color: var(--color-accent);
}

/* === Form === */

.form-group {
  margin-bottom: var(--space-md);
}

.form-group label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-primary);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.7rem var(--space-md);
  font-family: var(--font-body);
  font-size: 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(42, 107, 124, 0.15);
}

.form-group textarea {
  min-height: 140px;
  resize: vertical;
}

/* === Banner / CTA === */

.cta-banner {
  background-color: var(--color-secondary);
  padding: var(--space-xl) 0;
  text-align: center;
}

.cta-banner h2 {
  color: var(--color-surface);
  margin-bottom: var(--space-sm);
}

.cta-banner p {
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: var(--space-lg);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* === Footer === */

.footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: var(--space-xl) 0 var(--space-lg);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.footer h4 {
  font-family: var(--font-heading);
  color: var(--color-surface);
  font-size: 1.05rem;
  margin-bottom: var(--space-md);
  position: relative;
  padding-bottom: var(--space-sm);
}

.footer h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 36px;
  height: 2px;
  background-color: var(--color-accent);
  border-radius: var(--radius-sm);
}

.footer p {
  color: var(--color-footer-text);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

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

.footer ul li {
  margin-bottom: var(--space-sm);
}

.footer ul li a {
  color: var(--color-footer-text);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.footer ul li a:hover {
  color: var(--color-accent);
  padding-left: var(--space-xs);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

.footer-bottom p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0;
}

.privacy-content {
  max-width: 800px;
  line-height: 1.8;
}

.privacy-content h2 {
  margin-top: var(--space-xl);
}

.privacy-content ul {
  margin-bottom: var(--space-lg);
}

.footer-privacy {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-privacy:hover {
  color: var(--color-accent);
}

/* === Page Header (inner pages) === */

.page-header {
  position: relative;
  background-color: var(--color-primary);
  background-image: url('/static/images/sky-band.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--space-xl) 0 var(--space-lg);
  text-align: center;
  overflow: hidden;
}

/* Zelfde kleurmenging als de hero op de homepage, zodat de koppen overal
   op dezelfde manier over de foto liggen. */
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  /* De zonneweerspiegeling valt precies achter de koptekst. De ovaal verdicht
     de menging daar, zodat de tekst leesbaar blijft terwijl de randen van de
     foto licht blijven. */
  background:
    radial-gradient(ellipse 68% 128% at 50% 56%,
                    rgba(6, 46, 110, 0.56) 0%,
                    rgba(6, 46, 110, 0.34) 58%,
                    rgba(6, 46, 110, 0) 88%),
    var(--color-hero-overlay);
  z-index: 1;
}

.page-header > .container {
  position: relative;
  z-index: 2;
}

.page-header h1 {
  color: var(--color-surface);
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}

.page-header p {
  /* 0.75 haalde over de foto maar 3,91:1; 0.92 geeft 4,98:1 en houdt de
     ondertitel toch zachter dan de kop. */
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  max-width: 520px;
  margin: 0 auto;
}

.breadcrumb {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin-top: var(--space-md);
  font-size: 0.85rem;
}

.breadcrumb li {
  margin-bottom: 0;
}

.breadcrumb li a {
  color: rgba(255, 255, 255, 0.85);
}

.breadcrumb li a:hover {
  color: var(--color-accent);
}

.breadcrumb li.active {
  /* Stond op de accentkleur; die is sinds het lichtere palet blauw en haalde
     over de kopfoto 1,09:1. Wit met wat meer gewicht onderscheidt zonder kleur. */
  color: #FFFFFF;
  font-weight: 600;
}

.breadcrumb li + li::before {
  content: '/';
  margin-right: var(--space-sm);
  color: rgba(255, 255, 255, 0.55);
}

/* === Dutch file input === */

.file-input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.file-input-wrap input[type="file"] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
}

.file-input-wrap .file-btn {
  display: inline-block;
  padding: 0.45rem 1rem;
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background var(--transition-fast);
}

.file-input-wrap .file-btn:hover {
  background: var(--color-primary-light);
}

.file-input-wrap .file-name {
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* === Tabs (beheer) === */

.tabs {
  display: flex;
  gap: 0;
  position: relative;
  bottom: -1px;
  z-index: 2;
}

.tab {
  position: relative;
  padding: 0.75rem 1.75rem;
  border: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  margin-right: 3px;
}

.tab:hover:not(.active) {
  background: var(--color-surface);
  color: var(--color-text);
}

.tab.active {
  background: var(--color-surface);
  color: var(--color-primary);
  border-bottom-color: var(--color-surface);
  box-shadow: 0 -2px 0 var(--color-accent);
}

.tab-panel {
  display: none;
  border: 1px solid var(--color-border);
  border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.tab-panel.active {
  display: block;
}

.tab-panel .profile-card {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
}

/* === Timeline === */

.timeline {
  position: relative;
  padding-left: var(--space-lg);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-border);
}

.timeline-item {
  position: relative;
  margin-bottom: var(--space-xl);
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-lg) - 5px);
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-accent);
  border: 2px solid var(--color-surface);
}

.timeline-item h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-xs);
}

.timeline-date {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: var(--space-xs);
}

.timeline-item p {
  color: var(--color-muted);
  font-size: 0.93rem;
}

/* === Tabs & Beheer mobile fixes === */

@media (max-width: 767px) {
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tab {
    padding: 0.6rem 1rem;
    font-size: 0.82rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .tab-panel {
    padding: var(--space-md) var(--space-sm);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }

  .beheer-album-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .beheer-album-actions {
    width: 100%;
  }

  .form-row-3,
  .form-row-4 {
    grid-template-columns: 1fr;
  }
}

/* === Responsive: 480px === */

@media (min-width: 480px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.9rem; }

  .hero {
    min-height: 460px;
  }

  .hero h1 {
    font-size: 2.5rem;
  }

  .container {
    padding: 0 var(--space-lg);
  }
}

/* === Responsive: 768px === */

@media (min-width: 768px) {
  h1 { font-size: 2.75rem; }

  .hero {
    min-height: 520px;
  }

  .hero h1 {
    font-size: 2.75rem;
  }

  .hero p {
    font-size: 1.15rem;
  }

  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .features-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-grid {
    grid-template-columns: 1fr 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nav-toggle {
    display: none;
  }

  .nav-menu {
    display: flex;
    position: static;
    flex-direction: row;
    background-color: transparent;
    padding: 0;
    box-shadow: none;
    gap: 2px;
  }

  .nav-menu li a {
    padding: var(--space-sm) 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
  }

  .nav-menu li a:hover,
  .nav-menu li a.active {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* === Responsive: 1024px === */

@media (min-width: 1024px) {
  h1 { font-size: 3rem; }

  .hero {
    min-height: 580px;
  }

  .hero h1 {
    font-size: 3rem;
  }

  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .section {
    padding: var(--space-2xl) 0;
  }
}

/* === Print === */

@media print {
  .navbar,
  .nav-toggle,
  .btn {
    display: none;
  }

  body {
    background: white;
    color: black;
    font-size: 12pt;
  }

  .hero {
    min-height: auto;
    padding: var(--space-lg) 0;
    background: none;
  }

  .hero::before {
    display: none;
  }

  .hero h1 {
    color: var(--color-primary);
    text-shadow: none;
  }
}

/* === Auth Pages === */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
}

.login-container {
  width: 100%;
  max-width: 420px;
  padding: var(--space-md);
}

.login-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
}

.login-title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: var(--space-xs);
}

.login-title span {
  color: var(--color-accent);
}

.login-subtitle {
  text-align: center;
  color: var(--color-muted);
  margin-bottom: var(--space-lg);
}

.login-error {
  background-color: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  font-size: 0.9rem;
}

.login-back {
  text-align: center;
  margin-top: var(--space-md);
  margin-bottom: 0;
  font-size: 0.9rem;
}

/* === Profile === */

.profile-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  max-width: 600px;
}

.profile-card.profile-wide {
  max-width: 800px;
}

.profile-success {
  background-color: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  font-size: 0.9rem;
}

/* === Profile Tabs === */

.profile-tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-border);
  max-width: 800px;
  flex-wrap: wrap;
}

.profile-tab {
  padding: var(--space-sm) var(--space-md);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.profile-tab:hover {
  color: var(--color-primary);
}

.profile-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}

/* === Form Rows (multi-column) === */

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-md);
}

.form-row-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.form-row-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

@media (max-width: 600px) {
  .form-row,
  .form-row-3,
  .form-row-4 {
    grid-template-columns: 1fr;
  }
}

/* === Radio Groups === */

.radio-group {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 400;
  font-size: 0.9rem;
  cursor: pointer;
}

/* === Required field indicator === */

.required {
  color: #dc2626;
}

/* === Album Grid === */

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.album-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.album-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.album-cover {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-background);
}

.album-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.album-card:hover .album-cover img {
  transform: scale(1.05);
}

.album-no-cover {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.album-info {
  padding: var(--space-md);
}

.album-info h3 {
  font-size: 1.05rem;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.album-info p {
  font-size: 0.85rem;
  margin-bottom: 0;
}

/* === Gallery Grid === */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}

.gallery-item {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.gallery-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

/* === Gallery Lightbox === */

.gallery-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

.gallery-lightbox.active {
  display: flex;
}

.lb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  cursor: pointer;
}

.gallery-lightbox img {
  position: relative;
  z-index: 1;
  max-width: 85vw;
  max-height: 80vh;
  border-radius: var(--radius-md);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  user-select: none;
}

.lb-close,
.lb-prev,
.lb-next {
  position: absolute;
  z-index: 2;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: color var(--transition-fast), transform var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
  color: white;
  transform: scale(1.15);
}

.lb-close {
  top: 16px;
  right: 20px;
  font-size: 2.5rem;
  line-height: 1;
  padding: 4px 12px;
}

.lb-prev {
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  padding: 12px 16px;
}

.lb-prev:hover {
  transform: translateY(-50%) scale(1.15);
}

.lb-next {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  padding: 12px 16px;
}

.lb-next:hover {
  transform: translateY(-50%) scale(1.15);
}

.lb-bottom {
  position: absolute;
  z-index: 2;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.lb-download-btn {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.lb-download-btn:hover {
  color: white;
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
}

/* === Beheer Album List === */

.beheer-album-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.beheer-album-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-background);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}

.beheer-album-info {
  display: flex;
  gap: var(--space-sm);
  align-items: baseline;
  flex-wrap: wrap;
}

.beheer-album-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
}

.upload-form {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.file-input {
  display: none;
}

.btn-sm {
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
}

.btn-danger {
  background-color: #dc2626;
  color: white;
  border-color: #dc2626;
}

.btn-danger:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
  color: white;
}

/* === Poseidon Archive === */

.decade-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.decade-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 6px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.decade-pill:hover {
  background: var(--color-primary);
  color: var(--color-surface);
  border-color: var(--color-primary);
}

.decade-count {
  background: var(--color-accent);
  color: white;
  font-size: 0.75rem;
  padding: 1px 7px;
  border-radius: 10px;
}

.decade-section {
  margin-bottom: var(--space-xl);
}

.decade-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.decade-header h2 {
  margin-bottom: 0;
  white-space: nowrap;
  color: var(--color-accent);
}

.decade-line {
  flex-grow: 1;
  height: 2px;
  background: linear-gradient(to right, var(--color-accent), transparent);
  border-radius: 1px;
}

.magazine-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-lg);
}

.magazine-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.magazine-cover {
  position: relative;
  width: 150px;
  height: 200px;
  perspective: 400px;
}

.magazine-spine {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 100%;
  background: linear-gradient(to right, var(--color-accent-dark), var(--color-accent));
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  transform: rotateY(-10deg);
  transform-origin: left center;
  z-index: 1;
}

.magazine-front {
  position: absolute;
  inset: 0;
  left: 4px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  cursor: default;
}

.magazine-card:hover .magazine-front {
  transform: rotateY(-3deg) translateX(2px);
  box-shadow: var(--shadow-lg);
}

.magazine-front-thumb {
  padding: 0;
  overflow: hidden;
  background: var(--color-surface);
}

.magazine-front-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.magazine-year {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.magazine-title {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.magazine-nr {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

.magazine-subtitle {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: var(--space-xs);
  line-height: 1.3;
}

.magazine-logo {
  font-size: 1.3rem;
  color: var(--color-accent);
  opacity: 0.4;
  margin-top: auto;
  padding-top: var(--space-sm);
}

.magazine-actions {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}

.magazine-lock {
  font-size: 0.75rem;
  color: var(--color-muted);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.magazine-lock:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn-outline-dark {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-border);
}

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

/* === PDF Viewer === */

.pdf-toolbar {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.pdf-viewer {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}

.pdf-viewer iframe {
  width: 100%;
  height: 85vh;
  border: none;
  display: block;
}

/* === Evenementen === */

.events-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 800px;
}

.event-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.event-image {
  max-height: 250px;
  overflow: hidden;
}

.event-image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.event-body {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
}

.event-date-badge {
  flex-shrink: 0;
  width: 60px;
  text-align: center;
  background: var(--color-primary);
  color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: fit-content;
}

.event-day {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.event-month {
  font-size: 0.7rem;
  opacity: 0.8;
  margin-top: 2px;
}

.event-info h2 {
  font-size: 1.2rem;
  margin-bottom: var(--space-xs);
}

.event-info h2 a {
  color: var(--color-primary);
  text-decoration: none;
}

.event-info h2 a:hover {
  color: var(--color-accent);
}

.event-location {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin-bottom: var(--space-sm);
}

.event-desc {
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.6;
}

.event-footer {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  flex-wrap: wrap;
}

.event-interesse-count {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.inline-form {
  display: inline;
}

.btn-interested {
  background-color: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
}

.btn-interested:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: white;
}

/* Event detail */

.event-detail {
  max-width: 800px;
}

.event-detail-image {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

.event-detail-image img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
}

.event-detail-meta {
  display: flex;
  gap: var(--space-xl);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.event-meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.event-meta-item strong {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

.event-detail-desc {
  line-height: 1.8;
  margin-bottom: var(--space-lg);
  white-space: pre-line;
}

/* Event cards on homepage */

.event-home-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  display: block;
  width: 360px;
  max-width: 100%;
}

.event-home-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.event-home-img {
  height: 160px;
  overflow: hidden;
}

.event-home-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-home-body {
  padding: var(--space-md);
}

.event-home-date {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.event-home-body h3 {
  font-size: 1.05rem;
  margin-bottom: var(--space-xs);
}

.event-home-body p {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .event-body {
    flex-direction: column;
  }
}

/* === Historie === */

.historie-content {
  max-width: 900px;
}

.historie-block {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-lg);
  align-items: start;
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

.historie-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.historie-block-reverse {
  grid-template-columns: 2fr 1fr;
}

.historie-block-reverse .historie-image {
  order: 2;
}

.historie-block-reverse .historie-text {
  order: 1;
}

.historie-image img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.historie-text p {
  color: var(--color-muted);
  line-height: 1.8;
}

@media (max-width: 600px) {
  .historie-block,
  .historie-block-reverse {
    grid-template-columns: 1fr;
  }

  .historie-block-reverse .historie-image,
  .historie-block-reverse .historie-text {
    order: unset;
  }
}

/* === Ticket Form === */

.ticket-price-box {
  background: var(--color-background);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.ticket-price-free {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: 0;
}

.ticket-prices {
  display: flex;
  gap: var(--space-xl);
}

.ticket-price-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.ticket-price-item span {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* === Ticket View === */

.ticket-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  max-width: 420px;
  width: 100%;
  overflow: hidden;
}

.ticket-header {
  background: var(--color-primary);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ticket-brand {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--color-surface);
}

.ticket-brand span {
  color: var(--color-accent);
}

.ticket-type {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  background: rgba(255,255,255,0.1);
  padding: 4px 10px;
  border-radius: 12px;
}

.ticket-body {
  padding: var(--space-lg);
}

.ticket-body h2 {
  font-size: 1.2rem;
  margin-bottom: var(--space-md);
}

.ticket-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ticket-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border);
}

.ticket-detail-row:last-child {
  border-bottom: none;
}

.ticket-qr {
  text-align: center;
  padding: var(--space-md) var(--space-lg);
  border-top: 2px dashed var(--color-border);
}

.ticket-qr img {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.ticket-qr-hint {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: var(--space-sm);
  margin-bottom: 0;
}

.ticket-footer {
  background: var(--color-background);
  padding: var(--space-sm) var(--space-lg);
  text-align: center;
}

.ticket-footer p {
  font-size: 0.75rem;
  color: var(--color-muted);
  margin-bottom: 0;
}

/* === Scanner === */

.scan-stats {
  display: flex;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.scan-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  text-align: center;
}

.scan-stat strong {
  display: block;
  font-size: 2rem;
  color: var(--color-primary);
  line-height: 1;
}

.scan-stat span {
  font-size: 0.8rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.scan-stat-warn strong {
  color: #dc2626;
}

.scan-layout {
  max-width: 500px;
}

.scan-camera-wrap {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  margin-bottom: var(--space-lg);
}

.scan-camera-wrap video {
  width: 100%;
  display: block;
}

.scan-manual {
  margin-bottom: var(--space-lg);
}

.scan-result {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  font-size: 1.1rem;
  text-align: center;
}

.scan-result-success {
  background: #f0fdf4;
  color: #166534;
  border: 2px solid #22c55e;
}

.scan-result-warn {
  background: #fffbeb;
  color: #92400e;
  border: 2px solid #f59e0b;
}

.scan-result-error {
  background: #fef2f2;
  color: #991b1b;
  border: 2px solid #ef4444;
}

/* === Deelnemers Table === */

.table-responsive {
  overflow-x: auto;
}

.deelnemers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.deelnemers-table th,
.deelnemers-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.deelnemers-table th {
  background: var(--color-primary);
  color: var(--color-surface);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.row-checked {
  background: #f0fdf4;
}

.row-noshow {
  background: #fef2f2;
}

.badge-checked {
  background: #22c55e;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-noshow {
  background: #ef4444;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* === Nav Spacer (push auth links right) === */

.nav-spacer {
  flex-grow: 1;
  list-style: none;
  min-width: 0.5rem;
}

.nav-spacer + li a {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  padding-left: 0.8rem !important;
}

@media (max-width: 767px) {
  .nav-spacer {
    display: none;
  }
}

/* === Links page === */

.links-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  max-width: 800px;
  margin: 0 auto;
}

.links-category {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.links-category h2 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-accent);
}

.links-category ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.links-category a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.links-category a:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

@media (min-width: 768px) {
  .links-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
  }
}

/* === Lid worden (pricing) === */

.lid-keuze {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  max-width: 700px;
  margin: 0 auto;
}

.lid-optie {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.lid-optie-header {
  padding: var(--space-lg);
  text-align: center;
  color: white;
}

.lid-optie-student {
  background: var(--color-secondary);
}

.lid-optie-oud {
  background: var(--color-primary);
}

.lid-optie-header h2 {
  color: white;
  font-size: 1.3rem;
  margin-bottom: var(--space-xs);
}

.lid-prijs {
  font-size: 2.5rem;
  font-weight: 700;
  font-family: var(--font-heading);
}

.lid-prijs span {
  font-size: 1rem;
  font-weight: 400;
  opacity: 0.8;
}

.lid-optie-body {
  padding: var(--space-lg);
}

.lid-optie-body ul {
  list-style: none;
  margin: var(--space-md) 0;
}

.lid-optie-body li {
  padding: var(--space-xs) 0;
  color: var(--color-text);
}

.lid-optie-body li::before {
  content: '\2713 ';
  color: var(--color-secondary);
  font-weight: 700;
  margin-right: var(--space-sm);
}

.lid-optie-body .btn {
  width: 100%;
  margin-top: var(--space-md);
}

@media (min-width: 768px) {
  .lid-keuze {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* === Leden admin === */

.leden-filters {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-lg);
}

.leden-filter-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.leden-filter-buttons {
  display: flex;
  gap: var(--space-sm);
  align-items: end;
  flex-wrap: wrap;
}

.leden-table {
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .leden-filter-form {
    grid-template-columns: repeat(2, 1fr);
  }

  .leden-filter-buttons {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .leden-filter-form {
    grid-template-columns: repeat(4, 1fr);
  }

  .leden-filter-buttons {
    grid-column: span 4;
  }
}

/* === Bestuur page === */

.bestuur-intro {
  text-align: center;
  color: var(--color-muted);
  font-size: 1.05rem;
  margin-bottom: var(--space-xl);
}

.bestuur-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.bestuur-member {
  display: flex;
  gap: var(--space-xl);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.bestuur-photo {
  flex-shrink: 0;
  width: 180px;
}

.bestuur-photo img {
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
  aspect-ratio: 3 / 4;
}

.bestuur-bio h2 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.bestuur-role {
  color: var(--color-accent-dark);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: var(--space-md);
}

.bestuur-role a {
  color: var(--color-secondary);
  text-decoration: none;
}

.bestuur-role a:hover {
  text-decoration: underline;
}

.bestuur-bio p + p {
  margin-top: var(--space-sm);
}

@media (max-width: 767px) {
  .bestuur-member {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .bestuur-photo {
    width: 140px;
  }

  .bestuur-role {
    text-align: center;
  }
}
/* === Bestuurskaarten op Over ons === */

.bestuur-kaarten {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

@media (max-width: 1000px) {
  .bestuur-kaarten { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 520px) {
  .bestuur-kaarten { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
}

.bestuur-kaart {
  text-align: center;
}

.bestuur-kaart img {
  width: 100%;
  max-width: 160px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto var(--space-md);
  display: block;
  /* Portretten met een lichte achtergrond vallen weg tegen de witte pagina en
     lijken daardoor kleiner dan portretten met een donkere achtergrond. De rand
     en de lichte ondergrond laten elk rondje als dezelfde schijf lezen. */
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.bestuur-kaart h3 {
  font-size: 1rem;
  margin-bottom: var(--space-xs);
}

.bestuur-kaart p {
  font-size: 0.85rem;
  color: var(--color-muted);
  line-height: 1.4;
}

.bestuur-kaarten-link {
  text-align: center;
}

/* === Social media in de voettekst === */

.footer-social {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--color-footer-text);
  background-color: rgba(255, 255, 255, 0.08);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.footer-social a:hover {
  background-color: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}

/* === Inlog-modal === */

.login-modal[hidden] { display: none; }

.login-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.login-modal-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(11, 79, 168, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.login-modal-card {
  position: relative;
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  width: 100%;
  max-width: 380px;
}

.login-modal-card .login-logo {
  width: 110px;
  margin-bottom: var(--space-md);
}

.login-modal-card h2 {
  margin-bottom: var(--space-lg);
  text-align: center;
}

.login-modal-sluit {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-md);
  background: none;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-muted);
  padding: var(--space-xs);
}

.login-modal-sluit:hover { color: var(--color-primary); }

.login-modal-hulp {
  margin-top: var(--space-md);
  text-align: center;
  font-size: 0.85rem;
}

/* === Jaarplanning === */

.jaarplanning { margin-bottom: var(--space-xl); }

.jaarplanning h2 { margin-bottom: var(--space-md); }

.jaarplanning-tabel {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.jaarplanning-tabel th,
.jaarplanning-tabel td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.jaarplanning-tabel th {
  background-color: var(--color-primary);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
}

.jaarplanning-tabel tr:last-child td { border-bottom: none; }

.jp-datum { white-space: nowrap; font-variant-numeric: tabular-nums; }

.jp-geen { color: var(--color-muted); font-size: 0.85rem; }

@media (max-width: 640px) {
  .jaarplanning-tabel,
  .jaarplanning-tabel tbody,
  .jaarplanning-tabel tr,
  .jaarplanning-tabel td { display: block; width: 100%; }

  .jaarplanning-tabel thead { display: none; }

  .jaarplanning-tabel tr {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
  }

  .jaarplanning-tabel td {
    border-bottom: none;
    padding: var(--space-xs) 0;
  }

  .jaarplanning-tabel td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
  }

  .jaarplanning-tabel td[data-label="Activiteit"] { font-size: 1.1rem; font-weight: 600; }
  .jaarplanning-tabel td[data-label="Inschrijven"] { margin-top: var(--space-sm); }
}

/* === Poseidon bladerlezer === */

.lezer { max-width: 900px; margin: 0 auto; }

.lezer-blad {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.lezer-pagina {
  max-width: 100%;
  height: auto;
  box-shadow: var(--shadow-lg);
  border-radius: 2px;
  background-color: #FFFFFF;
}

.lezer-knop {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background-color: rgba(11, 95, 208, 0.85);
  color: #FFFFFF;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast), opacity var(--transition-fast);
}

.lezer-knop:hover:not(:disabled) { background-color: var(--color-primary); }
.lezer-knop:disabled { opacity: 0.25; cursor: default; }

.lezer-vorige.lezer-knop   { left: var(--space-md); }
.lezer-volgende.lezer-knop { right: var(--space-md); }

.lezer-balk {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.lezer-teller { font-variant-numeric: tabular-nums; color: var(--color-muted); }
.lezer-teller strong { color: var(--color-text); }

.lezer-tip {
  text-align: center;
  margin-top: var(--space-sm);
  font-size: 0.85rem;
  color: var(--color-muted);
}

@media (max-width: 640px) {
  .lezer-knop { display: none; }
}

/* === Hero-knoppen onder elkaar op smalle schermen === */

@media (max-width: 520px) {
  .hero-content .btn {
    display: block;
    width: 100%;
    margin: 0 0 var(--space-sm);
  }
}


/* Fotogrootte op smalle schermen — staat achteraan zodat hij de basisregel
   hierboven overschrijft (gelijke specificiteit, dus volgorde beslist). */

@media (max-width: 520px) {
  .bestuur-kaart img { max-width: 130px; }
}

/* Datumbadge: maandnaam is langer dan het oude "07-2026", dus iets ruimer gezet */

.event-month {
  font-size: 0.8rem;
  white-space: nowrap;
}

/* === Lange e-mailadressen en links op smalle schermen ===
   Flex- en grid-items krimpen standaard niet onder hun inhoudsbreedte
   (min-width: auto). Bij adressen als penningmeester@volderuyter.nl duwde
   dat de pagina breder dan een 320px-scherm. */

.contact-info-block { flex-wrap: wrap; }

.contact-info-text {
  min-width: 0;
  flex: 1 1 200px;
}

.contact-info-text a,
.contact-info-text p {
  overflow-wrap: anywhere;
}

.links-category { min-width: 0; }

.links-category a {
  overflow-wrap: anywhere;
}

@media (max-width: 380px) {
  .links-category { padding: var(--space-md); }
}

/* === Navigatie: uitklapmenu tot 1100px ===
   De horizontale balk staat aan vanaf 768px, maar een ingelogd lid heeft elf
   menu-items en die passen pas vanaf ongeveer 1100px. Tussen 768 en 1099px
   liep de balk daardoor buiten het scherm. Hier zetten we in dat bereik het
   uitklapmenu terug — de overige layoutregels uit het 768px-blok blijven staan. */

@media (min-width: 768px) and (max-width: 1099px) {
  .nav-toggle { display: flex; }

  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-primary);
    flex-direction: column;
    padding: var(--space-sm) 0;
    box-shadow: var(--shadow-lg);
    gap: 0;
  }

  .nav-menu.active { display: flex; }

  .nav-menu li a {
    display: block;
    padding: var(--space-sm) var(--space-lg);
    border-radius: 0;
  }

  .nav-spacer { display: none; }
}

/* Bladerbalk: de ruime tussenruimte paste niet op een 320px-scherm */

@media (max-width: 400px) {
  .lezer-balk {
    gap: var(--space-sm);
    flex-wrap: wrap;
  }

  .lezer-balk .btn { flex: 1 1 auto; }
  .lezer-teller { flex: 1 0 100%; text-align: center; order: -1; }
}

/* === Inlogscherm "Havenlicht": beeld links, formulier rechts === */

.inlog-split {
  display: grid;
  grid-template-columns: 54fr 46fr;
  min-height: 620px;
}

.inlog-beeld {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-xl) 3rem;
  background: var(--color-footer-bg) url('/static/images/vlissingen-pier.jpg') center/cover no-repeat;
}

/* De waas maakt het beeld donker genoeg voor witte tekst erop. */
.inlog-beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(9, 32, 62, 0.62) 0%, rgba(7, 20, 38, 0.90) 100%);
}

.inlog-beeld > * { position: relative; z-index: 1; }

.inlog-beeld-logo { width: 108px; height: auto; display: block; }

.inlog-claim {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 1.85rem;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  max-width: 15ch;
  margin: 0 0 var(--space-sm);
}

.inlog-claim strong { font-weight: 600; }

.inlog-herkomst {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(214, 230, 250, 0.72);
}

.inlog-paneel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-xl) 3.5rem;
  background-color: var(--color-surface);
}

.inlog-paneel-binnen { width: 100%; max-width: 380px; margin: 0 auto; }

.inlog-paneel h1 {
  font-size: 1.7rem;
  margin-bottom: var(--space-xs);
}

.inlog-paneel .inlog-intro {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin-bottom: var(--space-lg);
}

/* Op een telefoon wordt de fotokolom een band boven het formulier. */
@media (max-width: 860px) {
  .inlog-split { grid-template-columns: 1fr; min-height: 0; }

  .inlog-beeld {
    padding: var(--space-lg);
    gap: var(--space-lg);
    min-height: 260px;
  }

  .inlog-beeld-logo { width: 84px; }
  .inlog-claim { font-size: 1.45rem; }
  .inlog-paneel { padding: var(--space-lg) var(--space-md) var(--space-xl); }
}

/* === Inlogpagina === */

.login-logo {
    display: block;
    width: 160px;
    height: auto;
    margin: 0 auto var(--space-lg);
}

.login-kaart {
  max-width: 420px;
  margin: 0 auto;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-xl) var(--space-lg);
}

/* === Beeldmerk in de navigatiebalk ===
   Het embleem staat op een witte schijf, zoals op de oude site. De cirkeltekst
   is op dit formaat onleesbaar — daarom staat de naam ernaast in gewone letters. */

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.navbar-embleem {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background-color: #FFFFFF;
  border-radius: 50%;
  padding: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.navbar-naam { white-space: nowrap; }

@media (max-width: 400px) {
  .navbar-embleem { width: 36px; height: 36px; }
  .navbar-brand { font-size: 1.15rem; }
}

/* === Poseidon: omslaganimatie ===
   De nieuwe pagina ligt eronder; de huidige klapt eroverheen weg om de scharnier
   aan de rugzijde. Zuiver CSS, geen bibliotheek. */

.lezer-vlak {
  position: relative;
  perspective: 1800px;
  display: inline-block;
  max-width: 100%;
}

.lezer-vlak .lezer-pagina {
  display: block;
  max-width: 100%;
  height: auto;
}

.lezer-vlak .lezer-onder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lezer-vlak .lezer-boven {
  position: relative;
  backface-visibility: hidden;
  transform-origin: left center;
  will-change: transform;
}

.lezer-vlak.slaat-vooruit .lezer-boven {
  animation: blad-vooruit 520ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.lezer-vlak.slaat-terug .lezer-onder { z-index: 2; }

.lezer-vlak.slaat-terug .lezer-boven {
  animation: blad-terug 520ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

@keyframes blad-vooruit {
  from { transform: rotateY(0deg);   box-shadow: none; }
  to   { transform: rotateY(-118deg); box-shadow: -18px 0 32px rgba(0, 0, 0, 0.28); }
}

@keyframes blad-terug {
  from { transform: rotateY(-118deg); box-shadow: -18px 0 32px rgba(0, 0, 0, 0.28); }
  to   { transform: rotateY(0deg);   box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lezer-vlak.slaat-vooruit .lezer-boven,
  .lezer-vlak.slaat-terug .lezer-boven { animation: none; }
}

/* === Jaarplanning op de homepage === */

.jaarplan {
  list-style: none;
  max-width: 760px;
  margin: 0 auto;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.jaarplan-regel {
  display: grid;
  grid-template-columns: 12rem 1fr auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.jaarplan-regel:last-child { border-bottom: none; }

.jaarplan-inschrijven { background-color: var(--color-surface-alt); }

.jaarplan-datum {
  color: var(--color-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.jaarplan-titel { font-weight: 500; }

.jaarplan-vrij {
  color: var(--color-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.jaarplan-actie { text-align: right; }

@media (max-width: 640px) {
  .jaarplan-regel {
    /* minmax(0, 1fr) in plaats van 1fr: een gridkolom weigert anders te
       krimpen onder zijn inhoud, en een lange titel zonder spaties
       ("ZeelandMaritiem.NET") duwde de knop Aanmelden buiten het scherm. */
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-xs) var(--space-md);
    padding: var(--space-md) var(--space-md);
  }

  .jaarplan-datum { grid-column: 1 / -1; font-size: 0.9rem; }
  .jaarplan-titel { font-size: 1.05rem; min-width: 0; overflow-wrap: anywhere; }
  .jaarplan-actie { text-align: right; min-width: 0; }
}

/* Op een smalle telefoon passen titel en knop niet meer naast elkaar; dan
   krijgt de knop een eigen regel en meteen een fatsoenlijk raakvlak. */
@media (max-width: 430px) {
  .jaarplan-regel { grid-template-columns: 1fr; }

  .jaarplan-actie { text-align: left; margin-top: var(--space-xs); }
  .jaarplan-actie .btn { display: inline-block; }
}

/* Lokvinkje tegen bots — voor bezoekers volledig onzichtbaar en niet bereikbaar
   met de tab-toets, maar wel aanwezig in de HTML zodat invulrobots erin trappen. */

.vangnet {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Bestuurslid zonder biografie: alleen verticaal gecentreerd, zodat het blok
   niet als een half ingevuld kaartje oogt. De foto houdt hetzelfde formaat en
   dezelfde portretverhouding als de rest; een kleiner rond portret viel te
   veel uit de toon. Zodra de tekst er is kan de klasse 'bestuur-member-kort'
   uit het sjabloon. */

.bestuur-member-kort { align-items: center; }

/* === Volle menubalk (ingelogd) ===
   Elf items in plaats van zes. Compacter gezet zodat alles past. */

/* Alleen op de brede balk. In het uitklapmenu is ruimte zat en zou een kleinere
   letter alleen maar slechter lezen. */
@media (min-width: 1100px) {
  .nav-menu-vol li a {
    font-size: 0.8rem;
    padding-left: 0.42rem;
    padding-right: 0.42rem;
    letter-spacing: 0;
  }

  .nav-menu-vol { gap: 1px; }
}

.nav-uitloggen {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Op de brede balk volstaat het pictogram; in het uitklapmenu blijft het woord
   staan, want daar is ruimte en is een los pictogram onduidelijk. */
@media (min-width: 1100px) {
  .nav-menu-vol .nav-uitloggen-tekst {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* === Datumbadge: maand van drie letters, jaartal eronder === */

.event-date-badge { width: 66px; }

.event-month {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.95;
  margin-top: 2px;
  white-space: nowrap;
}

.event-year {
  font-size: 0.66rem;
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* === Kaarten onder "Speciaal voor onze leden" ===
   Ze komen rustig in beeld zodra je erlangs scrolt, kort na elkaar. */

.kaart-verschijnt {
  opacity: 0;
  transform: translateY(14px);
}

.kaart-verschijnt.is-zichtbaar {
  opacity: 1;
  transform: none;
  transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.kaart-verschijnt:nth-child(2).is-zichtbaar { transition-delay: 110ms; }
.kaart-verschijnt:nth-child(3).is-zichtbaar { transition-delay: 220ms; }

.cards-grid .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
  .kaart-verschijnt { opacity: 1; transform: none; }
  .kaart-verschijnt.is-zichtbaar { transition: none; }
  .cards-grid .card:hover { transform: none; }
}


/* ==========================================================================
   Navigatie in twee lagen
   Een smalle donkere strip met contact en het account, en daaronder een
   ruimere witte balk met het embleem en de hoofdnavigatie. Het menu begint
   daardoor lager en staat niet meer tegen de bovenrand.

   Dit blok staat achteraan omdat het de kleuren van .navbar en .nav-menu
   moet overschrijven, en die hebben dezelfde specificiteit.
   ========================================================================== */

:root { --strip-hoogte: 34px; }

.topbalk {
  position: sticky;
  top: 0;
  z-index: 1001;
  background-color: #08376F;
}

.topbalk .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.4rem;
  min-height: var(--strip-hoogte);
  padding-top: 0;
  padding-bottom: 0;
}

.topbalk a {
  color: rgba(196, 218, 245, 0.92);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.topbalk a:hover { color: #FFFFFF; }
.topbalk a.nadruk { color: #FFFFFF; font-weight: 600; }

/* De hoofdbalk schuift onder de strip en wordt wit. */
.navbar {
  top: var(--strip-hoogte);
  background-color: #FFFFFF;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 rgba(11, 79, 168, 0.12), 0 6px 18px -12px rgba(10, 26, 46, 0.35);
}

.navbar .container { min-height: 74px; }

.navbar-brand,
.navbar-brand:hover { color: var(--color-footer-bg); }
.navbar-brand span { color: var(--color-primary); opacity: 1; }

/* Op wit heeft het embleem geen witte schijf meer nodig. */
.navbar-embleem {
  background-color: transparent;
  box-shadow: none;
  padding: 0;
}

.nav-toggle span { background-color: var(--color-footer-bg); }

/* Alleen de horizontale balk wordt donker op wit. Het uitklapmenu daaronder
   blijft blauw met witte letters: dat is een apart paneel. */
@media (min-width: 1100px) {
  .nav-menu li a {
    color: var(--color-text);
    border-radius: 0;
    border-bottom: 3px solid transparent;
    padding: 0.85rem 0.7rem 0.65rem;
  }

  .nav-menu li a:hover {
    background-color: transparent;
    color: var(--color-primary);
  }

  .nav-menu li a.active {
    background-color: transparent;
    color: var(--color-footer-bg);
    font-weight: 600;
    border-bottom-color: var(--color-primary);
  }
}

@media (max-width: 600px) {
  .topbalk .container { gap: 1rem; }
  .topbalk a { font-size: 0.72rem; }
  .navbar .container { min-height: 62px; }
}

/* ==========================================================================
   Ledenbeheer
   ========================================================================== */

.ledenbeheer-hint { margin-bottom: var(--space-md); font-size: 0.88rem; }

.filter-scheiding { flex: 1 1 auto; }

.ledenbeheer-table { font-size: 0.83rem; }

.ledenbeheer-table th a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}






.sorteer-pijl { font-size: 0.62em; line-height: 1; }

/* Cijfers naast elkaar laten uitlijnen scheelt bij het scannen van een kolom. */
.ledenbeheer-table .cijfers { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* De interne notitie mag ruimte innemen, maar niet de tabel uit elkaar duwen. */
.ledenbeheer-table .notitie {
  max-width: 22ch;
  color: var(--color-muted);
  font-size: 0.78rem;
}

.soort-merk {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  background-color: var(--color-surface-alt);
  color: var(--color-accent-dark);
}

.soort-uitgeschreven { background-color: #FCE8E8; color: #9B2C2C; }
.soort-student { background-color: #E8F6EC; color: #216B39; }

.betaald-bulk {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
}

/* Tarieven boven het aanmeldformulier: informatie, nog geen keuzeknoppen. */
/* Op de aanmeldpagina is alles gecentreerd (tarieven, lidmaatschapskeuze);
   de formulierkaart stond als enige links omdat .profile-card elders bewust
   niet centreert (naast tabbladen op /profiel en /beheer). */
.lid-signup .profile-card { margin: 0 auto; }

.lid-tarieven {
  max-width: 800px;
  margin: 0 auto var(--space-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.lid-tarief {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.lid-tarief span { display: block; font-size: 0.85rem; margin-top: 2px; }

.lid-tarieven-uitleg {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.9rem;
}

@media (max-width: 600px) {
  .lid-tarieven { grid-template-columns: 1fr; }
}

/* Alleen-lezen Mollie-gegevens op de lid-detailpagina. */
.mollie-info { font-size: 0.9rem; border-collapse: collapse; }
.mollie-info td { padding: 3px 0; }
.mollie-info td:first-child { color: var(--color-muted); padding-right: var(--space-lg); }

/* Wachtindicator bij de Mollie-verversing. */
.spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spinner-draai 0.8s linear infinite;
  vertical-align: -0.15em;
}

.spinner-in-knop { border-top-color: #FFFFFF; margin-right: 0.5em; }

@keyframes spinner-draai { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
}

/* Betaalstatus uit Mollie als merkje, leesbaar bij het scannen van de kolom. */
.mollie-merk {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}
.mollie-goed   { background: #E8F6EC; color: #216B39; }
.mollie-slecht { background: #FCE8E8; color: #9B2C2C; }
.mollie-open   { background: var(--color-surface-alt); color: var(--color-accent-dark); }

/* ==========================================================================
   Ledenbeheer-grid, tweede opzet
   Geen horizontale scrollbalk: een bredere container, verwante gegevens
   samen in een kolom met een gedempte tweede regel, en lange waarden
   afgekapt met de volledige tekst als title-tooltip.
   ========================================================================== */

.container-breed { max-width: 1560px; }

.ledenbeheer-vlak {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ledenbeheer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  table-layout: fixed;
}

.ledenbeheer-table th {
  background: var(--color-surface-alt);
  color: var(--color-text);
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 8px 10px;
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}

.ledenbeheer-table th a { color: var(--color-accent-dark); text-decoration: none; }
.ledenbeheer-table th a:hover { text-decoration: underline; }
.ledenbeheer-table th a.actief {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kop-scheiding { color: var(--color-muted); font-weight: 400; }
.sorteer-pijl { font-size: 0.6em; margin-left: 2px; }

.ledenbeheer-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  overflow: hidden;
}

.ledenbeheer-table tbody tr:hover td { background: var(--color-surface-alt); }
.ledenbeheer-table tbody tr:last-child td { border-bottom: 0; }

.ledenbeheer-table .sub {
  color: var(--color-muted);
  font-size: 0.76rem;
  margin-top: 1px;
}

/* Afkappen in plaats van afbreken; de title toont de volledige waarde. */
.ledenbeheer-table .knip {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Kolombreedtes: samen 100%, de rest verdeelt zich vanzelf. */
.ledenbeheer-table .k-nr      { width: 4%; }
.ledenbeheer-table .k-naam    { width: 15%; }
.ledenbeheer-table .k-adres   { width: 13%; }
.ledenbeheer-table .k-contact { width: 16%; }
.ledenbeheer-table .k-opl     { width: 8%; }
.ledenbeheer-table .k-werk    { width: 10%; }
.ledenbeheer-table .k-lid     { width: 12%; }
.ledenbeheer-table .k-mollie  { width: 13%; }
.ledenbeheer-table .k-notitie { width: 9%; }

/* Wordt het scherm smaller, dan wijken de minst dringende kolommen —
   alles blijft bereikbaar via de detailpagina van het lid. */
@media (max-width: 1360px) {
  .ledenbeheer-table .k-werk { display: none; }
  .ledenbeheer-table .k-contact { width: 20%; }
}

@media (max-width: 1130px) {
  .ledenbeheer-table .k-notitie { display: none; }
  .ledenbeheer-table .k-adres { width: 16%; }
}

@media (max-width: 950px) {
  .ledenbeheer-table .k-contact { display: none; }
  .ledenbeheer-table .k-naam { width: 22%; }
}

@media (max-width: 760px) {
  .ledenbeheer-table .k-opl, .ledenbeheer-table .k-adres { display: none; }
  .ledenbeheer-table .k-naam { width: 34%; }
}

/* Alleen-lezen veld: wel zichtbaar, duidelijk niet bewerkbaar. */
.veld-alleen-lezen {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-muted);
  cursor: default;
}

/* ==========================================================================
   Mobiele weergave: koppen die niet passen, en een knop die zweeft
   ========================================================================== */

/* De koppen stonden op een vaste maat. "Welkom bij VOL De Ruyter" is 24 tekens
   en liep daarmee op een smalle telefoon net buiten beeld. Met clamp() schalen
   ze mee met de schermbreedte en houden ze op grote schermen hun oude formaat. */
h1 { font-size: clamp(1.75rem, 7.5vw, 2.5rem); }
h2 { font-size: clamp(1.35rem, 5.6vw, 1.75rem); }
h3 { font-size: clamp(1.15rem, 4.4vw, 1.35rem); }

/* Lange eigennamen mogen desnoods afbreken in plaats van uitsteken. */
h1, h2, h3 { overflow-wrap: break-word; text-wrap: balance; }

@media (max-width: 767px) {
  /* Op de telefoon staat het welkomblok gestapeld; de knop hoort dan
     gecentreerd onder de tekst in plaats van links tegen de rand. */
  .about-text .btn {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Footer op de telefoon: de introductie blijft over de volle breedte, maar
   Navigatie en Contact staan daaronder naast elkaar. Twee korte lijstjes
   onder elkaar maakten de voet onnodig lang. */
@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg) var(--space-md);
  }

  .footer-grid > :first-child { grid-column: 1 / -1; }
}

/* Lidmaatschapskeuze: incasso als voorkeursknop, eenmalig eronder. */
.lid-betaalkeuze .btn { width: 100%; }
.lid-voordeel {
  margin: var(--space-xs) 0 var(--space-md);
  font-size: 0.85rem;
  color: var(--color-accent-dark);
  font-weight: 600;
  text-align: center;
}
.lid-klein { margin: var(--space-xs) 0 0; font-size: 0.8rem; text-align: center; }
.lid-niet { color: var(--color-muted); }
.lid-niet::marker { content: "– "; }

/* Welkomstblok voor wie via de flyer-QR binnenkomt (scholen). */
.lid-welkom-student {
  max-width: 800px;
  margin: 0 auto var(--space-lg);
  padding: var(--space-lg);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
}
.lid-welkom-student h2 { margin-top: 0; }
.lid-welkom-student p { margin-bottom: 0; }

/* Scanscherm: keuze tussen tickets scannen en naambordjes scannen. */
.scan-modus {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  text-align: left;
}
.scan-modus-vraag { margin: 0 0 var(--space-sm); font-weight: 600; }
.scan-modus label { display: block; margin-bottom: var(--space-xs); font-size: 0.92rem; }
.scan-afronden { margin-top: var(--space-md); padding-top: var(--space-md);
                 border-top: 1px solid var(--color-border); }
.scan-afronden p { margin: var(--space-xs) 0 0; font-size: 0.85rem; }