/* Richting Mekka. Kleuren van Iznik-tegels: kobalt, turquoise, koraalrood op koel tegelwit.
   Eén opvallend element: de wijzer in een spitsboog (mihrab, de nis die in een moskee de qibla aangeeft). */
@font-face { font-family: "Reem Kufi"; src: url("/fonts/ReemKufi-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Reem Kufi"; src: url("/fonts/ReemKufi-arabic.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Plex"; src: url("/fonts/IBMPlexSans-var.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --kobalt: #1f3a8a;
  --kobalt-diep: #162a66;
  --turkoois: #1f9e98;
  --koraal: #c8442f;
  --tegel: #f6f7f4;
  --inkt: #161a2b;
  --zacht: #545a70;
  --lijn: #d9ddd6;
  --wit: #ffffff;
  --saffraan: #e9a23b;
  --saffraan-licht: #fdf1dc;
  --nacht: #1b1f4b;
  --paneel-breed: 25rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tegel); color: var(--inkt); font: 400 1rem/1.55 "Plex", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--kobalt); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--turkoois); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 2000; background: var(--kobalt); color: var(--wit); padding: .5rem .9rem; border-radius: 6px; }
.skip:focus { left: 12px; }

/* Indeling: paneel links, kaart rechts over de volle hoogte. Op smalle schermen kaart boven het paneel. */
.indeling { display: grid; grid-template-columns: var(--paneel-breed) 1fr; height: 100vh; height: 100dvh; }
.paneel { overflow-y: auto; padding: 1.75rem 1.75rem 1.25rem; background: var(--tegel); border-right: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 1.4rem; }
.kaartvak { position: relative; min-height: 0; }
.kaart { position: absolute; inset: 0; background: #dfe5df; }

/* Kop */
.kop { display: grid; gap: .35rem; }
.arabisch { margin: 0; font: 500 1.7rem/1 "Reem Kufi", serif; color: var(--turkoois); }
h1 { margin: 0; font: 700 1.95rem/1.12 "Reem Kufi", "Plex", sans-serif; letter-spacing: -.01em; color: var(--kobalt-diep); text-wrap: balance; }
.inleiding { margin: 0; color: var(--zacht); max-width: 34ch; }
h2 { margin: 0 0 .5rem; font: 600 1.15rem/1.3 "Reem Kufi", "Plex", sans-serif; color: var(--kobalt-diep); }

/* Zoeken */
.zoek { position: relative; display: grid; gap: .5rem; }
.zoekveld { display: flex; border: 2px solid var(--kobalt); border-radius: 10px; background: var(--wit); overflow: hidden; }
.zoekveld:focus-within { box-shadow: 0 0 0 3px rgba(31, 158, 152, .35); }
.zoekveld input { flex: 1; min-width: 0; border: 0; padding: .75rem .85rem; font: inherit; color: var(--inkt); background: transparent; }
.zoekveld input:focus { outline: none; }
.knop { font: 600 .95rem/1 "Plex", sans-serif; border: 0; border-radius: 8px; padding: .75rem 1rem; background: var(--kobalt); color: var(--wit); cursor: pointer; }
.knop:hover { background: var(--kobalt-diep); }
.knop-zoek { border-radius: 0; }
.knop-tekst { font: 600 .95rem "Plex", sans-serif; background: none; border: 0; padding: .25rem 0; color: var(--kobalt); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.zoekregel { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.hint { color: var(--zacht); font-size: .9rem; }
.melding { margin: 0; min-height: 1.2em; font-size: .9rem; color: var(--koraal); }
.melding:empty { display: none; }
.suggesties { position: absolute; z-index: 1200; top: 3.3rem; left: 0; right: 0; margin: 0; padding: .25rem 0; list-style: none; background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px; box-shadow: 0 10px 30px rgba(22, 26, 43, .14); max-height: 18rem; overflow-y: auto; }
.suggesties li { padding: .55rem .85rem; cursor: pointer; }
.suggesties li[aria-selected="true"], .suggesties li:hover { background: #e8eefb; }

/* Wijzer in de spitsboog */
.wijzer { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1.1rem; align-items: end; }
.mihrab { width: 100%; height: auto; display: block; }
.boog-buiten { fill: var(--kobalt); }
.boog-binnen { fill: var(--wit); stroke: var(--turkoois); stroke-width: 3; }
.schijf { fill: none; stroke: var(--lijn); stroke-width: 1.5; }
.streep { stroke: var(--zacht); stroke-width: 1; }
.streep-groot { stroke: var(--inkt); stroke-width: 2; }
.roos-n, .roos-letter { font: 700 15px "Reem Kufi", sans-serif; text-anchor: middle; dominant-baseline: middle; fill: var(--zacht); }
.roos-n { fill: var(--kobalt); font-size: 17px; }
.roos, .naald { transform-origin: 120px 178px; transition: transform .6s cubic-bezier(.3, .7, .2, 1); }
.naald { opacity: .18; }
.naald.actief { opacity: 1; }
.naald-punt { fill: var(--koraal); }
.naald-staart { fill: var(--zacht); }
.kaaba-icoon { fill: var(--inkt); }
.kaaba-band { fill: #c9a548; }
.as { fill: var(--inkt); }
.koers { padding-bottom: .4rem; }
.graden { margin: 0; font: 700 3.4rem/1 "Reem Kufi", sans-serif; color: var(--kobalt-diep); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.streek { margin: .35rem 0 0; font-size: 1.05rem; color: var(--zacht); }
.streek strong { color: var(--inkt); font-weight: 600; }

/* Feiten */
.feiten { margin: 0; display: grid; gap: .55rem; border-top: 1px solid var(--lijn); padding-top: 1rem; }
.feiten div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1.1rem; }
.feiten dt { color: var(--zacht); }
.feiten dd { margin: 0; font-weight: 600; }

/* Hulp buiten */
.hulp { border-top: 1px solid var(--lijn); padding-top: 1rem; display: grid; gap: .8rem; }
.hulp p { margin: 0; }
.kompas { display: grid; gap: .4rem; justify-items: start; }
.klein { font-size: .88rem; color: var(--zacht); }
.schakel { display: flex; gap: .5rem; align-items: center; font-size: .95rem; cursor: pointer; }
.schakel input { width: 1.1rem; height: 1.1rem; accent-color: var(--kobalt); }

/* Vragen */
.uitleg { border-top: 1px solid var(--lijn); padding-top: 1rem; }
details { border-bottom: 1px solid var(--lijn); }
summary { cursor: pointer; padding: .6rem 0; font-weight: 600; list-style-position: inside; }
details p { margin: 0 0 .8rem; color: var(--zacht); max-width: 60ch; }

.voet { margin-top: auto; font-size: .85rem; color: var(--zacht); }
.voet p { margin: .25rem 0; }

/* Kaart: eigen markers (geen inline stijl in HTML-strings, CSP style-src 'self') */
.knop-kaart { position: absolute; z-index: 1000; right: 12px; bottom: 28px; box-shadow: 0 4px 14px rgba(22, 26, 43, .25); }
.marker-huis { width: 22px; height: 22px; border-radius: 50%; background: var(--kobalt); border: 3px solid var(--wit); box-shadow: 0 0 0 2px var(--kobalt), 0 2px 8px rgba(0, 0, 0, .35); }
.marker-kaaba { width: 20px; height: 22px; background: var(--inkt); border-top: 6px solid var(--inkt); box-shadow: inset 0 3px 0 #c9a548, 0 2px 6px rgba(0, 0, 0, .4); }
.label-kaaba { font: 700 .9rem "Reem Kufi", sans-serif; color: var(--inkt); background: var(--wit); border: 0; border-radius: 6px; padding: .15rem .45rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.label-kaaba::before { display: none; }
.leaflet-container { font: inherit; }

@media (max-width: 52rem) {
  .indeling { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
  .paneel { overflow: visible; border-right: 0; padding: 1.25rem 1rem; display: contents; }
  .kop, .zoek, .wijzer, .feiten, .hulp, .uitleg, .voet { padding-left: 1rem; padding-right: 1rem; }
  .kop { padding-top: 1.25rem; order: 1; }
  .zoek { order: 2; margin-top: 1rem; }
  .kaartvak { order: 3; height: 58vh; height: 58dvh; margin-top: 1rem; }
  .wijzer { order: 4; margin-top: 1.25rem; grid-template-columns: 8rem 1fr; }
  .feiten { order: 5; margin: 1.25rem 1rem 0; padding-left: 0; padding-right: 0; }
  .feiten div { grid-template-columns: 8rem 1fr; }
  .hulp { order: 6; margin: 1.25rem 1rem 0; padding-left: 0; padding-right: 0; }
  .delen { order: 7; margin: 1.25rem 1rem 0; padding-left: 0; padding-right: 0; }
  .uitleg { order: 8; margin: 1.25rem 1rem 0; padding-left: 0; padding-right: 0; }
  .voet { order: 9; padding-top: 1.5rem; padding-bottom: 1.5rem; }
  h1 { font-size: 1.7rem; }
  .graden { font-size: 2.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .roos, .naald { transition: none; }
}

/* Losse pagina's (404, meten-uit) */
.los { max-width: 40rem; margin: 0 auto; padding: 3rem 1rem; display: grid; gap: .5rem; }

/* Delen */
.delen { border-top: 1px solid var(--lijn); padding-top: 1rem; display: grid; gap: .7rem; }
.deeltekst { margin: 0; padding: .7rem .85rem; background: var(--wit); border-left: 4px solid var(--turkoois); border-radius: 0 8px 8px 0; }
.deelknoppen { display: flex; flex-wrap: wrap; gap: .45rem; }
.deel { font: 600 .9rem/1 "Plex", sans-serif; padding: .6rem .8rem; border: 1.5px solid var(--kobalt); border-radius: 999px; background: var(--wit); color: var(--kobalt); text-decoration: none; cursor: pointer; }
.deel:hover { background: #e8eefb; }
.deel-whatsapp { background: #1f7a4d; border-color: #1f7a4d; color: var(--wit); }
.deel-whatsapp:hover { background: #17603c; }
.delen .knop { border-radius: 999px; padding: .6rem .9rem; font-size: .9rem; }

/* ---------- Inhoudspagina's (kalender, feesten, weetjes, vragen) ---------- */
/* Rand met achtpuntige sterren (khatam), als SVG-tegel: img-src data: staat in de CSP. */
.band {
  color: var(--wit);
  background-color: var(--kobalt);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.13' stroke-width='1.5'%3E%3Crect x='16' y='16' width='24' height='24'/%3E%3Crect x='16' y='16' width='24' height='24' transform='rotate(45 28 28)'/%3E%3Ccircle cx='28' cy='28' r='4'/%3E%3C/g%3E%3C/svg%3E");
  padding: 0 1rem 2.4rem;
  border-bottom: 6px solid var(--saffraan);
}
.hoofdnav { max-width: 60rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; flex-wrap: wrap; }
.hoofdnav ul { display: flex; gap: .2rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.hoofdnav a { color: inherit; text-decoration: none; font-weight: 600; padding: .4rem .7rem; border-radius: 999px; }
.hoofdnav ul a:hover { background: rgba(255, 255, 255, .14); }
.hoofdnav a[aria-current="page"] { background: var(--saffraan); color: var(--nacht); }
.merk { display: inline-flex; align-items: center; gap: .5rem; font: 700 1.25rem/1 "Reem Kufi", sans-serif; padding-left: 0 !important; }
.merk-boog { width: 1.6rem; height: 1.6rem; color: var(--wit); }
.band-kop { max-width: 60rem; margin: 1.4rem auto 0; }
.band h1 { color: var(--wit); font-size: clamp(2.1rem, 5vw, 3.2rem); }
.band .inleiding { color: #dfe6fb; max-width: 46ch; margin-top: .6rem; font-size: 1.1rem; }

.tekst { max-width: 46rem; margin: 0 auto; padding: 2rem 1rem 1rem; display: grid; gap: 1.6rem; }
.tekst h2 { font-size: 1.5rem; margin-bottom: .4rem; }
.tekst p { margin: 0 0 .7rem; }

/* Aftellen met lantaarn: het ene vrolijke moment op de pagina */
.aftellen { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.2rem; align-items: center; margin-top: -3.4rem; padding: 1.3rem 1.5rem; border-radius: 18px; background: var(--nacht); color: var(--wit); box-shadow: 0 14px 34px rgba(27, 31, 75, .3); }
.aftellen .vandaag { margin: 0; color: #c9cff5; }
.aftellen .vandaag strong { display: block; font: 700 1.6rem/1.15 "Reem Kufi", sans-serif; color: var(--wit); }
.aftellen .volgende { margin: .45rem 0 0; font: 600 1.15rem/1.3 "Reem Kufi", sans-serif; color: var(--saffraan); }
.lantaarn { width: 100%; height: auto; transform-origin: 60px 0; animation: zwaai 4.5s ease-in-out infinite; }
.l-touw { stroke: #c9cff5; stroke-width: 2; }
.l-dop { fill: var(--saffraan); }
.l-glas { fill: #f7c86b; }
.l-binnen { fill: #ffe9b8; }
.l-ster { fill: var(--koraal); }
@keyframes zwaai { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

.melding-datum { background: var(--saffraan-licht); border-left: 4px solid var(--saffraan); border-radius: 0 10px 10px 0; padding: .8rem 1rem; }
.melding-datum p { margin: 0; }

/* Lijst per jaar */
.jaar h2 { font-size: 1.3rem; border-bottom: 2px solid var(--lijn); padding-bottom: .3rem; }
.lijst { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.regel { display: grid; grid-template-columns: 9.5rem 1fr auto; gap: .8rem; align-items: baseline; padding: .55rem .6rem; border-radius: 8px; }
.regel a { font-weight: 600; color: var(--inkt); text-decoration: none; }
.regel a:hover { text-decoration: underline; }
.regel a::before { content: ""; display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; margin-right: .5rem; background: var(--turkoois); }
.regel-feest a::before { background: var(--saffraan); }
.regel-maand a::before { background: var(--koraal); }
.regel-nacht a::before { background: var(--nacht); }
.regel time { color: var(--zacht); font-variant-numeric: tabular-nums; }
.regel-hijri { color: var(--zacht); font-size: .88rem; }
.voorbij { opacity: .45; }
.eerstvolgende, .nu { background: var(--saffraan-licht); }

/* Uitleg per dag */
.dagen { display: grid; gap: 1.2rem; }
.dag { background: var(--wit); border-radius: 14px; padding: 1.2rem 1.3rem .6rem; border-top: 6px solid var(--turkoois); box-shadow: 0 1px 0 var(--lijn); scroll-margin-top: 1rem; }
.dag-feest { border-top-color: var(--saffraan); }
.dag-maand { border-top-color: var(--koraal); }
.dag-nacht { border-top-color: var(--nacht); }
.dag h2 { margin: .1rem 0 .2rem; }
.dag-soort { margin: 0 !important; font-size: .9rem; font-weight: 600; color: var(--zacht); }
.dag-wie { display: inline-block; margin-left: .4rem; padding: .05rem .5rem; border-radius: 999px; background: #e7f4f3; color: #12645f; font-weight: 600; }
.dag-ook { color: var(--zacht); font-size: .95rem; }
.groet { background: var(--tegel); border-radius: 10px; padding: .6rem .8rem; font-weight: 600; }
.groet span { display: inline-block; margin-right: .5rem; color: var(--turkoois); }
.verschil { border-left: 4px solid var(--turkoois); padding: .2rem 0 .1rem .9rem; margin: .4rem 0 .8rem; }
.verschil h3 { margin: 0 0 .3rem; font: 600 1rem "Plex", sans-serif; color: #12645f; }
.data { margin: 0 0 .8rem; padding-left: 1.1rem; }
.uitleg-blok { background: var(--wit); border-radius: 14px; padding: 1.2rem 1.3rem .5rem; }

.tabel { width: 100%; border-collapse: collapse; background: var(--wit); border-radius: 12px; overflow: hidden; }
.tabel caption { text-align: left; font-weight: 600; padding: 0 0 .5rem; color: var(--zacht); }
.tabel th, .tabel td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--lijn); }
.tabel th { background: var(--tegel); font-size: .9rem; }

/* Weetjes */
.weetjes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.weetje { background: var(--wit); border-radius: 16px; padding: 1.1rem 1.2rem .5rem; border-left: 6px solid var(--turkoois); }
.weetje-1 { border-left-color: var(--saffraan); }
.weetje-2 { border-left-color: var(--koraal); }
.weetje-3 { border-left-color: var(--kobalt); }
.weetje h2 { font-size: 1.15rem; }
.bron { font-size: .82rem; color: var(--zacht); }
.tekst:has(.weetjes) { max-width: 64rem; }

.vragen-blok details { background: var(--wit); border: 0; border-radius: 10px; padding: 0 1rem; margin-bottom: .5rem; }
.vragen-blok details p { color: var(--inkt); }
.verder { text-align: center; }

.voet-breed { max-width: 46rem; margin: 2rem auto 0; padding: 1.5rem 1rem 2rem; border-top: 1px solid var(--lijn); }
.voet-breed nav { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: .6rem; }

/* Startpagina: menu bovenin het paneel en het "binnenkort"-blok */
.paneel .hoofdnav { padding: 0; margin: -.6rem 0 0; color: var(--kobalt); }
.paneel .hoofdnav .merk { display: none; }
.paneel .hoofdnav ul a:hover { background: #e8eefb; }
.binnenkort { display: grid; grid-template-columns: 3.2rem 1fr; gap: .9rem; align-items: center; background: var(--nacht); color: var(--wit); border-radius: 14px; padding: .9rem 1rem; text-decoration: none; }
.binnenkort .lantaarn { animation: none; }
.binnenkort p { margin: 0; }
.binnenkort .binnenkort-naam { font: 700 1.15rem/1.2 "Reem Kufi", sans-serif; color: var(--saffraan); }
.binnenkort:hover { background: #262b63; }

@media (max-width: 40rem) {
  .regel { grid-template-columns: 1fr; gap: .1rem; }
  .aftellen { grid-template-columns: 4rem 1fr; padding: 1rem; }
  .aftellen .vandaag strong { font-size: 1.3rem; }
}
@media (max-width: 52rem) {
  .paneel .hoofdnav { order: 0; padding: .8rem 1rem 0; margin: 0; }
  .binnenkort { order: 4; margin: 1.25rem 1rem 0; }
}
@media (prefers-reduced-motion: reduce) { .lantaarn { animation: none; } }

/* Vastentijden */
.vasten-keuze { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; }
.vasten-keuze label { display: grid; gap: .25rem; font-weight: 600; font-size: .92rem; }
.vasten-keuze select { font: inherit; padding: .5rem .6rem; border: 2px solid var(--kobalt); border-radius: 8px; background: var(--wit); }
.tabel.vasten th[scope="row"] { font-weight: 600; background: none; font-size: 1rem; }
.tabel.vasten .land { display: block; font-weight: 400; font-size: .82rem; color: var(--zacht); }
.tabel.vasten td:last-child { min-width: 9rem; }
.balk { display: block; height: 6px; border-radius: 3px; margin-bottom: .3rem; background: linear-gradient(90deg, var(--turkoois), var(--saffraan)); width: 0; }
.jouw-plek { background: var(--saffraan-licht); }
@media (max-width: 40rem) { .tabel.vasten th, .tabel.vasten td { padding: .5rem .4rem; font-size: .9rem; } }

/* Uitleg bij de islamitische datum en de maandentabel */
.datum-uitleg { margin: -.4rem 0 0; color: var(--zacht); font-size: .95rem; }
.arabisch-klein { font-family: "Reem Kufi", serif; font-size: 1.15rem; }
.aftellen .arabisch-klein { color: var(--saffraan); margin-left: .4rem; font-size: 1.2rem; }
.tabel-scroll { overflow-x: auto; }
.tabel.maanden td { vertical-align: top; font-size: .93rem; }
.tabel.maanden tr.nu { background: var(--saffraan-licht); }
/* Grid-kinderen mogen smaller worden dan hun inhoud, anders rekt een brede tabel de pagina op (mobiel, 3 nov). */
.tekst > * { min-width: 0; }
.tabel-scroll { max-width: 100%; }
.vasten-keuze label, .vasten-keuze select { max-width: 100%; min-width: 0; }
.uitleg-blok, .dag { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 40rem) {
  /* Maandentabel op mobiel: betekenis onder de naam laten vallen in plaats van een eigen kolom */
  .tabel.maanden th:nth-child(5), .tabel.maanden td:nth-child(5) { display: none; }
  .tabel.maanden th, .tabel.maanden td { padding: .45rem .35rem; }
}
@media (max-width: 40rem) { .tabel.vasten .balk { display: none; } .tabel.vasten td:last-child { min-width: 0; } }

/* Maan */
.maan-kaart { grid-template-columns: 7rem 1fr; }
.maan-groot { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 18px rgba(255, 236, 190, .35)); }
.maan-donker { fill: #2b3166; }
.maan-licht { fill: #f6efd9; }
.maan-zuid { color: #c9cff5; font-size: .9rem; margin-top: .6rem; }
.maand-kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.maand-kop h3 { margin: 0; font: 700 1.2rem "Reem Kufi", sans-serif; color: var(--kobalt-diep); text-transform: capitalize; }
.maand-kop .knop { padding: .45rem .8rem; font-size: 1.1rem; }
.maandraster { overflow-x: auto; }
table.maand { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
table.maand th { font-size: .8rem; color: var(--zacht); font-weight: 600; padding: .2rem 0; }
table.maand td { vertical-align: top; background: var(--tegel); border-radius: 8px; padding: .3rem .25rem .35rem; height: 5.2rem; text-align: center; }
table.maand td:empty { background: none; }
.dagnr { display: block; font-weight: 600; font-size: .9rem; text-align: left; }
.dagmaan { display: block; margin: .15rem auto; width: 1.7rem; }
.maan-klein { width: 1.7rem; height: 1.7rem; display: block; }
.daghijri { display: block; font-size: .72rem; color: var(--zacht); line-height: 1.2; }
.nieuwe-maand .daghijri { color: var(--koraal); font-weight: 600; }
.dagstand { display: block; font-size: .66rem; line-height: 1.15; margin-top: .15rem; color: var(--kobalt); font-weight: 600; }
.vandaag-cel { outline: 2px solid var(--saffraan); }
@media (max-width: 40rem) {
  table.maand td { height: 4.4rem; padding: .2rem .1rem; }
  .dagstand { font-size: .58rem; }
  .maan-kaart { grid-template-columns: 5rem 1fr; }
}

/* Omrekenen */
.omreken { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; margin-bottom: 1rem; }
.omreken label { display: grid; gap: .25rem; font-weight: 600; font-size: .92rem; }
.omreken input, .omreken select { font: inherit; padding: .45rem .55rem; border: 2px solid var(--kobalt); border-radius: 8px; background: var(--wit); max-width: 100%; }
.omreken input[type="number"] { width: 6rem; }
.omreken output { flex-basis: 100%; font-weight: 600; color: var(--kobalt-diep); }
.tijden-plek { display: inline-grid; gap: .25rem; font-weight: 600; margin-bottom: .6rem; }
.tijden-plek select { font: inherit; padding: .45rem .55rem; border: 2px solid var(--kobalt); border-radius: 8px; background: var(--wit); }