:root {
  --tijdtot-bg: #F6F7FB;
  --tijdtot-surface: #FFFFFF;
  --tijdtot-ink: #1C1D2B;
  --tijdtot-accent: #6D28D9;
  --tijdtot-accent-fg: #FFFFFF;
  --tijdtot-accent-soft: #F1EAFE;
  --tijdtot-text-soft: #6B6D84;
  --tijdtot-border: #E7E8F2;

  --cat-feestdag-bg: #FEE2E2; --cat-feestdag-fg: #B91C1C;
  --cat-vakantie-bg: #DBEAFE; --cat-vakantie-fg: #1D4ED8;
  --cat-seizoen-bg:  #FEF3C7; --cat-seizoen-fg:  #B45309;
  --cat-ruimte-bg:   #CCFBF1; --cat-ruimte-fg:   #0F766E;
  --cat-film-bg:     #FCE7F3; --cat-film-fg:     #BE185D;
  --cat-sport-bg:    #DCFCE7; --cat-sport-fg:    #15803D;
  --cat-muziek-bg:   #FFE4E6; --cat-muziek-fg:   #E11D48;
  --cat-games-bg:    #E0E7FF; --cat-games-fg:    #4338CA;
  --cat-politiek-bg: #E2E8F0; --cat-politiek-fg: #334155;
  --cat-overig-bg:   #EDE9FE; --cat-overig-fg:   #6D28D9;
}

.tijdtot-badge--feestdag, .tijdtot-feed-badge.tijdtot-badge--feestdag { background: var(--cat-feestdag-bg); color: var(--cat-feestdag-fg); }
.tijdtot-badge--vakantie, .tijdtot-feed-badge.tijdtot-badge--vakantie { background: var(--cat-vakantie-bg); color: var(--cat-vakantie-fg); }
.tijdtot-badge--seizoen,  .tijdtot-feed-badge.tijdtot-badge--seizoen  { background: var(--cat-seizoen-bg);  color: var(--cat-seizoen-fg); }
.tijdtot-badge--ruimte,   .tijdtot-feed-badge.tijdtot-badge--ruimte   { background: var(--cat-ruimte-bg);   color: var(--cat-ruimte-fg); }
.tijdtot-badge--film,     .tijdtot-feed-badge.tijdtot-badge--film     { background: var(--cat-film-bg);     color: var(--cat-film-fg); }
.tijdtot-badge--sport,    .tijdtot-feed-badge.tijdtot-badge--sport    { background: var(--cat-sport-bg);    color: var(--cat-sport-fg); }
.tijdtot-badge--muziek,   .tijdtot-feed-badge.tijdtot-badge--muziek   { background: var(--cat-muziek-bg);   color: var(--cat-muziek-fg); }
.tijdtot-badge--games,    .tijdtot-feed-badge.tijdtot-badge--games    { background: var(--cat-games-bg);    color: var(--cat-games-fg); }
.tijdtot-badge--politiek, .tijdtot-feed-badge.tijdtot-badge--politiek { background: var(--cat-politiek-bg); color: var(--cat-politiek-fg); }
.tijdtot-badge--overig,   .tijdtot-feed-badge.tijdtot-badge--overig   { background: var(--cat-overig-bg);   color: var(--cat-overig-fg); }

.tijdtot-main, .tijdtot-main input, .tijdtot-main button {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.tijdtot-detail {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2.5rem 1rem;
  text-align: center;
}

.tijdtot-badge {
  display: inline-block;
  padding: .3rem .85rem;
  border-radius: 9999px;
  font-size: .75rem;
  font-weight: 600;
  text-decoration: none;
  background: var(--tijdtot-accent-soft);
  color: var(--tijdtot-accent);
}

.tijdtot-heading {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.2;
  margin: .85rem 0 .3rem;
  color: var(--tijdtot-ink);
}

.tijdtot-datum {
  color: var(--tijdtot-text-soft);
  margin: 0 0 1.75rem;
}

.tijdtot-countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  max-width: 28rem;
  margin: 0 auto 1.75rem;
}

.tijdtot-tegel {
  background: var(--tijdtot-surface);
  border: 1px solid var(--tijdtot-border);
  border-radius: 16px;
  padding: 1rem .5rem;
}

.tijdtot-cijfer {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--tijdtot-accent);
  font-variant-numeric: tabular-nums;
}

.tijdtot-label {
  display: block;
  font-size: .68rem;
  color: var(--tijdtot-text-soft);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: .15rem;
}

.tijdtot-vandaag-kaart {
  background: var(--tijdtot-accent-soft);
  color: var(--tijdtot-accent);
  border-radius: 16px;
  padding: 1.5rem;
  font-weight: 600;
  margin: 0 0 1.75rem;
}

.tijdtot-omschrijving {
  text-align: left;
  margin-top: 2rem;
}

.tijdtot-omschrijving h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--tijdtot-ink);
  margin: 0 0 .5rem;
}

.tijdtot-omschrijving p {
  color: var(--tijdtot-text-soft);
  line-height: 1.6;
  margin: 0;
}

.tijdtot-kaart, .tijdtot-sectie > .tijdtot-lijst {
  background: var(--tijdtot-surface);
  border: 1px solid var(--tijdtot-border);
  border-radius: 16px;
}

.tijdtot-acties {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-bottom: 1.75rem;
}

.tijdtot-knop {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 9999px;
  border: 1px solid var(--tijdtot-border);
  background: var(--tijdtot-surface);
  padding: .6rem 1.25rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--tijdtot-ink);
  text-decoration: none;
  cursor: pointer;
}
.tijdtot-knop:hover { background: var(--tijdtot-accent-soft); }

.tijdtot-wedstrijd-kaart { padding: 1.5rem; text-align: center; margin-bottom: 1.75rem; }
.tijdtot-wedstrijd-competitie { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--tijdtot-text-soft); margin: 0; }
.tijdtot-wedstrijd-tegenstelling { font-size: 1.25rem; font-weight: 600; margin: .25rem 0 0; }
.tijdtot-wedstrijd-details { font-size: .9rem; color: var(--tijdtot-text-soft); margin: .5rem 0 0; }

.tijdtot-trailer {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 1.75rem;
}
.tijdtot-trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.tijdtot-sectie { margin-top: 2.5rem; text-align: left; }
.tijdtot-sectie h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--tijdtot-ink);
  margin: 0 0 .75rem;
}

.tijdtot-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.tijdtot-chip {
  display: inline-block;
  border-radius: 9999px;
  border: 1px solid var(--tijdtot-border);
  background: var(--tijdtot-surface);
  padding: .5rem 1rem;
  font-size: .85rem;
  color: var(--tijdtot-ink);
  text-decoration: none;
}
.tijdtot-chip:hover { background: var(--tijdtot-accent-soft); }

.tijdtot-lijst { display: flex; flex-direction: column; }
.tijdtot-lijst-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--tijdtot-border);
}
.tijdtot-lijst-rij:last-child { border-bottom: none; }
.tijdtot-lijst-nadruk { font-weight: 600; }
.tijdtot-lijst-sub { font-size: .85rem; color: var(--tijdtot-text-soft); white-space: nowrap; }

.tijdtot-vorige-keer { font-size: .85rem; color: var(--tijdtot-text-soft); margin-top: .75rem; }

.tijdtot-faq { display: flex; flex-direction: column; }
.tijdtot-faq-item { padding: 1rem 0; border-bottom: 1px solid var(--tijdtot-border); }
.tijdtot-faq-item:last-child { border-bottom: none; }
.tijdtot-faq-vraag { font-weight: 500; color: var(--tijdtot-ink); margin: 0; }
.tijdtot-faq-antwoord { font-size: .9rem; color: var(--tijdtot-text-soft); margin: .35rem 0 0; }

/* Printbare aftelkalender-poster (poort van components/aftelkalender-poster.tsx) */
.kalender-poster {
  background: var(--tijdtot-surface);
  border: 1px solid var(--tijdtot-border);
  border-radius: 1rem;
  padding: 3rem 2rem;
  text-align: center;
}
.kalender-poster-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--tijdtot-text-soft); }
.kalender-poster-titel { margin-top: .5rem; font-size: 2.25rem; font-family: 'Outfit', sans-serif; font-weight: 600; }
.kalender-poster-datum { margin-top: .5rem; color: var(--tijdtot-text-soft); }
.kalender-poster-aantal { margin-top: 1.75rem; font-size: 1.5rem; font-weight: 600; color: var(--tijdtot-accent); }
.kalender-poster-grid-toelichting { margin-top: 2rem; font-size: .85rem; color: var(--tijdtot-text-soft); }
.kalender-poster-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: .4rem; margin-top: 1rem; }
.kalender-poster-vakje {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--tijdtot-border);
  border-radius: .35rem;
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
  color: var(--tijdtot-text-soft);
}
.kalender-poster-footer { margin-top: 2.5rem; font-size: .75rem; color: var(--tijdtot-text-soft); }

/* Aftellers-feed (homepage-widget) -- poort van categorie-tabs.tsx + afteller-kaart.tsx */
.tijdtot-feed {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  max-width: 64rem;
  margin: 0 auto;
}

.tijdtot-feed-zoek {
  width: 100%;
  border-radius: 9999px;
  border: 1px solid var(--tijdtot-border);
  background: var(--tijdtot-surface);
  padding: .85rem 1.25rem;
  font-size: .9rem;
  box-sizing: border-box;
}
.tijdtot-feed-zoek:focus { outline: none; border-color: var(--tijdtot-accent); }

.tijdtot-feed-zoek-form { position: relative; display: flex; }
.tijdtot-feed-zoek-form .tijdtot-feed-zoek { padding-right: 3rem; }
.tijdtot-feed-zoek-knop {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; font-size: 1.1rem; cursor: pointer; line-height: 1;
  width: 2.25rem; height: 2.25rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
}
.tijdtot-feed-zoek-knop:hover { background: var(--tijdtot-accent-soft); }
.tijdtot-feed-zoek-actief { font-size: .85rem; color: var(--tijdtot-text-soft); margin: .5rem 0 0; }
.tijdtot-feed-zoek-actief a { color: var(--tijdtot-accent); }

.tijdtot-feed-intro { color: var(--tijdtot-text-soft); font-size: .95rem; margin: 0 0 1rem; }

/* Uitleg-/toelichtingssectie onder de rekentools ("Hoe werkt deze ... calculator?"),
   voor SEO/UX-tekst naast de kale invulform. */
.tijdtot-rt-uitleg { max-width: 32rem; margin: 2.5rem auto 0; text-align: left; }
.tijdtot-rt-uitleg h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--tijdtot-ink);
  margin: 0 0 .75rem;
}
.tijdtot-rt-uitleg p { font-size: .9rem; color: var(--tijdtot-text-soft); line-height: 1.6; margin: 0 0 .75rem; }
.tijdtot-rt-uitleg a { color: var(--tijdtot-accent); }
.tijdtot-rt-uitleg table { width: 100%; border-collapse: collapse; font-size: .85rem; margin: 1rem 0; }
.tijdtot-rt-uitleg th, .tijdtot-rt-uitleg td { text-align: left; padding: .5rem .75rem .5rem 0; border-bottom: 1px solid var(--tijdtot-border); }
.tijdtot-rt-uitleg th { color: var(--tijdtot-text-soft); font-weight: 500; }
.tijdtot-rt-uitleg td:last-child, .tijdtot-rt-uitleg th:last-child { color: var(--tijdtot-text-soft); }

/* Overzichtsgrid op /rekentools/. */
.tijdtot-tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 56rem; margin: 2.5rem auto 0; text-align: left; }
@media (max-width: 780px) { .tijdtot-tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tijdtot-tools-grid { grid-template-columns: 1fr; } }
.tijdtot-tool-kaart {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--tijdtot-surface); border: 1px solid var(--tijdtot-border); border-radius: 16px;
  padding: 1.5rem; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease;
}
.tijdtot-tool-kaart:hover { box-shadow: 0 8px 24px rgba(28,29,43,.08); transform: translateY(-1px); }
.tijdtot-tool-kaart-icon { font-size: 1.75rem; }
.tijdtot-tool-kaart h3 { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--tijdtot-ink); margin: 0; }
.tijdtot-tool-kaart p { font-size: .85rem; color: var(--tijdtot-text-soft); margin: 0; line-height: 1.5; }

/* Categorie-overzichtspagina's (/feestdagen/, /vakanties/, ...): groter
   vierkanten-grid, 3 naast elkaar, getint in de kleur van de categorie. */
.tijdtot-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 56rem; margin: 2.5rem auto 0; }
@media (max-width: 780px) { .tijdtot-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tijdtot-cat-grid { grid-template-columns: 1fr; } }
.tijdtot-cat-kaart {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  border-radius: 20px; padding: 1rem; text-align: center; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tijdtot-cat-kaart:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(28,29,43,.14); }
.tijdtot-cat-kaart-emoji { font-size: 2.25rem; line-height: 1; }
.tijdtot-cat-kaart-titel { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1rem; line-height: 1.25; }
.tijdtot-cat-kaart-datum { font-size: .78rem; opacity: .85; }
.tijdtot-cat-kaart-dagen { font-size: .85rem; font-weight: 700; }

/* /zelf/-formulier (maak je eigen afteller). */
.tijdtot-zelf-form {
  max-width: 32rem; margin: 2rem auto 0; display: flex; flex-direction: column; gap: 1.25rem;
  background: var(--tijdtot-surface); border: 1px solid var(--tijdtot-border); border-radius: 16px; padding: 1.5rem;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-align: left;
}
.tijdtot-zelf-form label { display: block; font-size: .9rem; font-weight: 500; color: var(--tijdtot-ink); margin-bottom: .4rem; }
.tijdtot-zelf-form input[type=text], .tijdtot-zelf-form input[type=date] {
  width: 100%; box-sizing: border-box; padding: .65rem .85rem; border: 1px solid var(--tijdtot-border); border-radius: 10px; font-size: .95rem; font-family: inherit;
}
.tijdtot-zelf-emojis { display: flex; flex-wrap: wrap; gap: .5rem; }
.tijdtot-zelf-emoji {
  display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border-radius: 10px; border: 1px solid var(--tijdtot-border); background: var(--tijdtot-surface); font-size: 1.2rem; cursor: pointer;
}
.tijdtot-zelf-emoji.is-actief { border-color: var(--tijdtot-accent); background: var(--tijdtot-accent-soft); }
.tijdtot-zelf-submit {
  background: var(--tijdtot-accent) !important; color: var(--tijdtot-accent-fg) !important; border: none; border-radius: 9999px;
  padding: .75rem 1.5rem; font-weight: 600; font-size: .95rem; cursor: pointer;
}
.tijdtot-zelf-submit:hover { opacity: .9; }
.tijdtot-zelf-fout { color: #b91c1c; font-size: .9rem; margin: 0; }

.tijdtot-feed-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.tijdtot-feed-tab {
  border-radius: 9999px;
  padding: .5rem 1rem;
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  background: var(--tijdtot-surface);
  color: var(--tijdtot-text-soft);
  border: 1px solid var(--tijdtot-border);
}
.tijdtot-feed-tab.is-actief { background: var(--tijdtot-accent); color: var(--tijdtot-accent-fg); border-color: var(--tijdtot-accent); }

.tijdtot-feed-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin-top: 1.5rem;
}
@media (max-width: 640px) {
  .tijdtot-feed-grid { grid-template-columns: 1fr; }
}

.tijdtot-feed-kaart {
  display: block;
  background: var(--tijdtot-surface);
  border: 1px solid var(--tijdtot-border);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: var(--tijdtot-ink);
  transition: box-shadow .15s ease, transform .15s ease;
}
.tijdtot-feed-kaart:hover { box-shadow: 0 4px 14px rgba(28,29,43,.08); transform: translateY(-1px); }

.tijdtot-feed-badge {
  display: inline-block;
  border-radius: 9999px;
  padding: .2rem .65rem;
  font-size: .7rem;
  font-weight: 600;
}
.tijdtot-feed-titel { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1.05rem; margin: .5rem 0 0; }
.tijdtot-feed-datum { font-size: .85rem; color: var(--tijdtot-text-soft); margin: .25rem 0 0; }
.tijdtot-feed-dagen { font-size: .8rem; color: var(--tijdtot-accent); font-weight: 600; margin: .15rem 0 0; }
.tijdtot-feed-leeg { text-align: center; color: var(--tijdtot-text-soft); margin-top: 2rem; }

/* Rekentools */
.tijdtot-rekentool {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  max-width: 32rem;
  margin: 0 auto;
  background: var(--tijdtot-surface);
  border: 1px solid var(--tijdtot-border);
  border-radius: 16px;
  padding: 1.5rem;
}
.tijdtot-rekentool form { display: flex; flex-direction: column; gap: 1rem; }
.tijdtot-rekentool label { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; color: var(--tijdtot-ink); font-weight: 500; }
.tijdtot-rekentool label.rt-checkbox { flex-direction: row; align-items: center; gap: .5rem; }
.tijdtot-rekentool input, .tijdtot-rekentool select {
  padding: .65rem .85rem;
  border: 1px solid var(--tijdtot-border);
  border-radius: 10px;
  font-size: .95rem;
  font-family: inherit;
}
.tijdtot-rekentool button {
  background: var(--tijdtot-accent);
  color: var(--tijdtot-accent-fg);
  border: none;
  border-radius: 9999px;
  padding: .75rem 1.5rem;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
}
.tijdtot-rekentool button:hover { opacity: .9; }
.rt-uitkomst {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--tijdtot-border);
  font-size: 1.1rem;
  color: var(--tijdtot-ink);
  line-height: 1.6;
}
.rt-uitkomst:empty { display: none; }
.rt-uitkomst strong { color: var(--tijdtot-accent); }
.rt-wereldklok { display: flex; flex-direction: column; gap: .5rem; }
.rt-wereldklok-rij { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--tijdtot-border); font-size: .9rem; }
.rt-wereldklok-tijd { font-variant-numeric: tabular-nums; color: var(--tijdtot-accent); font-weight: 600; }

@media print {
  .no-print, header, footer, nav { display: none !important; }
  body { background: #fff !important; padding-bottom: 0 !important; }
  .kalender-poster { border: none; padding: 0; }
  @page { margin: 1.5cm; }
}