/* Merkfonts volgens de Bloome-spec: Playfair Display voor koppen, Inter voor UI.
   'Fraunces' en 'Manrope' blijven als alias bestaan zodat oudere regels niet breken. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/playfair.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/playfair-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/playfair.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/playfair-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter.woff2') format('woff2');
}

:root {
  --paper: #FFFFFC;
  --paper-alt: #F7DCE6;
  --paper-yellow: #FBF0C6;
  --ink: #4A2F35;
  --ink-soft: #7A6A70; /* was #8C7B80: te licht voor kleine tekst (4.0:1), nu ~5.1:1 */
  --accent: #C15F82;
  --accent-soft: #E8A9BE;
  --on-accent: #4A2F35;
  --gold: #EFCB63;
  --line: #ECE0E4;
  --sage: #CFE0D3;
  --sky: #D3DFEC;
  --radius-s: 3px;
  --danger: #b3413f;
}
/* Bloome is bewust een lichte pastelwereld, zonder donkere modus.
   Er stond hier eerder een `prefers-color-scheme: dark`-blok dat alleen de
   variabelen in dit bestand omklapte. Landing, portaal, hartjes-tegels en het
   creed-blok hebben echter hardgecodeerde lichte kleuren, dus op een telefoon
   in donkere modus ontstond een mengsel: donkere tekst op donkere vlakken.
   De site staat daarom vast op licht (zie ook `color-scheme` hieronder).
   Wil je ooit echt een donkere modus, dan moet dat in alle stylesheets
   tegelijk gebeuren, niet alleen hier. */

* { box-sizing: border-box; }

/* Het hidden-attribuut moet ALTIJD winnen, ook van display-regels op klassen als .btn.
   Zonder deze regel verslaat author-CSS (bijv. display:flex) de browser-standaard
   en blijft een "verborgen" element gewoon zichtbaar (zo lekte de Admin-knop). */
[hidden] { display: none !important; }
/* Vertelt de browser dat deze pagina alleen licht is. Zonder dit maakt een
   telefoon in donkere modus zelf de invoervelden, dropdowns en scrollbalken
   donker, met lichte tekst op onze lichte achtergrond: vrijwel onleesbaar. */
html { color-scheme: light; }

/* Sommige mobiele browsers (met name Chrome op Android) passen daarnaast een
   eigen "auto dark theme" toe. Invoervelden klappen als eerste om, dus die
   krijgen hun kleuren expliciet. Knoppen bewust niet: die worden overal met
   eigen klassen gestyled en zouden hier hun achtergrond door verliezen. */
input, textarea, select {
  color-scheme: light;
  background-color: var(--paper);
  color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--ink-soft); opacity: 1; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

h1, h2, h3, .display {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 90;
  font-weight: 480;
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}
em { font-style: italic; color: var(--accent); font-weight: 500; }
a { color: inherit; }

.wordmark { font-family: 'Fraunces', Georgia, serif; font-style: normal; font-weight: 600; font-size: 1.5rem; text-decoration: none; }
.wordmark small {
  display: block; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 0.58rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); margin-top: 3px;
}
.eyebrow {
  font-family: 'Manrope', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 0.6em;
}
.eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--accent); display: inline-block; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  background: var(--accent-soft); color: var(--on-accent);
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em;
  padding: 0.85em 1.6em; border-radius: var(--radius-s); text-decoration: none;
  border: 1px solid var(--accent-soft); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 45%, transparent); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }

.auth-shell {
  min-height: 100dvh; display: flex; flex-direction: column;
}
.auth-header { padding: 1.6rem 6vw; border-bottom: 1px solid var(--line); }
.auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 3rem 6vw; }
.auth-card {
  width: 100%; max-width: 400px; background: var(--paper-alt); border: 1px solid var(--line);
  padding: 2.4rem 2rem; display: flex; flex-direction: column; gap: 1.3rem;
}
.auth-card h1 { font-size: 1.6rem; }
.auth-card h1 { margin-bottom: 0.5rem; }
.auth-card p.lede { color: var(--ink-soft); font-size: 0.88rem; margin: 0; }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select {
  font-family: 'Manrope', sans-serif; font-size: 0.95rem; padding: 0.7em 0.85em;
  border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--paper); color: var(--ink);
}
.field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.tier-choice { display: flex; flex-direction: column; gap: 0.6rem; }
.tier-option {
  border: 1px solid var(--line); border-radius: var(--radius-s); padding: 0.8rem 1rem;
  display: flex; align-items: center; gap: 0.7rem; cursor: pointer; background: var(--paper);
}
.tier-option input { accent-color: var(--accent); }
.tier-option .t-name { font-weight: 600; font-size: 0.9rem; }
.tier-option .t-price { margin-left: auto; font-family: 'Fraunces', serif; font-size: 0.95rem; color: var(--accent); }
.tier-option:has(input:checked) { border-color: var(--accent); background: var(--paper-yellow); }

.form-msg { font-size: 0.85rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-s); }
.form-msg.error { background: color-mix(in srgb, var(--danger) 14%, var(--paper)); color: var(--danger); }
.form-msg.hidden { display: none; }

.auth-switch { text-align: center; font-size: 0.85rem; color: var(--ink-soft); }
.auth-switch a { color: var(--accent); font-weight: 600; text-decoration: none; }

/* Portal */
.portal-header {
  display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 6vw;
  border-bottom: 1px solid var(--line);
}
.portal-wrap { max-width: 880px; margin: 0 auto; padding: 3rem 6vw 5rem; }
.tier-badge {
  display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; background: var(--paper-yellow); color: var(--ink); padding: 0.3em 0.8em; border-radius: var(--radius-s);
}
/* Tools (journal, agenda, tracker) */
.tools-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 2.2rem; }
.tool-card {
  display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.4rem; background: var(--paper-yellow);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.tool-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 12px 26px -18px rgba(74, 47, 53, 0.6); }
.tool-icon { font-size: 1.3rem; color: var(--accent); }
.tool-body { display: flex; flex-direction: column; gap: 0.2rem; }
.tool-body strong { font-size: 1rem; font-weight: 600; }
.tool-body span { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.45; }
.tool-go { margin-left: auto; color: var(--accent); font-size: 1.1rem; }

.section-sub { font-size: 1.15rem; font-weight: 500; margin: 2.8rem 0 0; }

.edition-list { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.2rem; }
.edition-card {
  border: 1px solid var(--line); background: var(--paper-alt); padding: 1.6rem 1.8rem;
  display: block; text-decoration: none; color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
a.edition-card:hover, a.edition-card:focus-visible {
  transform: translateY(-2px); border-color: var(--accent);
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--accent) 60%, transparent);
}
.edition-card .month { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.edition-card h3 { font-size: 1.2rem; margin: 0.4rem 0 0.6rem; }
.edition-card p { color: var(--ink-soft); font-size: 0.9rem; margin: 0; line-height: 1.55; }
.edition-open {
  display: inline-flex; align-items: center; gap: 0.4em; margin-top: 1rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; color: var(--accent);
}
.edition-open::after { content: '→'; }
.empty-state { color: var(--ink-soft); font-size: 0.9rem; margin-top: 2rem; }

/* Editie-detailpagina */
.edition-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: 0.6rem 0 0.8rem; }
.edition-intro { color: var(--ink-soft); font-size: 1rem; line-height: 1.6; margin: 0 0 2.5rem; max-width: 60ch; }
.edition-body { max-width: 68ch; }
.edition-body h2 {
  font-size: 1.45rem; margin: 3rem 0 0.5rem; padding-top: 1.6rem; border-top: 1px solid var(--line);
}
.edition-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.edition-body h3 { font-size: 1.1rem; margin: 1.8rem 0 0.5rem; font-weight: 550; }
.edition-body p { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.65; margin: 0 0 1rem; }
.edition-body ul, .edition-body ol { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6; padding-left: 1.3rem; margin: 0 0 1.2rem; }
.edition-body li { margin-bottom: 0.5rem; }
.edition-body li strong, .edition-body p strong { color: var(--ink); font-weight: 650; }
.edition-body blockquote {
  margin: 1.4rem 0; padding: 1.1rem 1.3rem; background: var(--paper-yellow);
  border: none; font-family: 'Fraunces', Georgia, serif; font-style: italic; color: var(--ink); font-size: 1rem;
}
.callout {
  background: var(--paper-alt); border: 1px solid var(--line); padding: 1.3rem 1.5rem; margin: 1.6rem 0;
}
.callout h3 { margin-top: 0; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout.callout-warm {
  background: linear-gradient(120deg, var(--paper-yellow) 0%, var(--paper-alt) 100%);
  border: none; border-radius: 14px; box-shadow: 0 16px 30px -26px rgba(74, 47, 53, 0.4);
}

.day-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; margin: 1.2rem 0 1.6rem; }
.day-cell {
  border: 1px solid rgba(74, 47, 53, 0.1); border-radius: 10px; padding: 0.7rem 0.85rem;
  background: rgba(255, 255, 252, 0.55); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.day-cell:hover { transform: translateY(-3px); box-shadow: 0 12px 20px -14px rgba(74, 47, 53, 0.4); }
.day-cell .d-num { font-family: 'Fraunces', serif; font-style: italic; color: var(--accent); font-size: 0.85rem; }
.day-cell .d-task { display: block; font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.25rem; line-height: 1.4; }

/* Elke week krijgt zijn eigen pastelkleur, zelfde palet als het maandjournal. */
.week-blok { border-radius: 18px; padding: 1.6rem 1.7rem 1.8rem; margin: 2.5rem 0; box-shadow: 0 18px 36px -30px rgba(74, 47, 53, 0.35); }
.edition-body .week-blok h2 { margin-top: 0; padding-top: 0; border-top: none; }
.week-blok.week-1 { background: linear-gradient(155deg, #FCF3F7 0%, #F7DCE6 100%); }
.week-blok.week-2 { background: linear-gradient(155deg, #FDFAF0 0%, #FBF0C6 100%); }
.week-blok.week-3 { background: linear-gradient(155deg, #F3FAF5 0%, #CFE0D3 100%); }
.week-blok.week-4 { background: linear-gradient(155deg, #F3F7FC 0%, #D3DFEC 100%); }

/* Los hartje boven een pagina met maar één tool (Starter). */
.heart-grid.heart-grid-los { max-width: 260px; margin: 1.8rem 0 2.2rem; }

.tracker-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0 1.6rem; }
.tracker-chip {
  display: inline-block; background: var(--paper-alt); border-radius: 999px; padding: 0.5em 1.1em;
  font-size: 0.82rem; color: var(--ink); border: 1px solid rgba(74, 47, 53, 0.08);
}

.recipe { border: 1px solid var(--line); padding: 1.3rem 1.5rem; margin: 1.2rem 0; background: var(--paper); }
.recipe h3 { margin-top: 0; }
.recipe .meta { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 0.5rem; }

@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .portal-wrap { padding: 0; max-width: none; }
  .edition-body { max-width: none; }
  .edition-body h2 { break-after: avoid; }
  .day-cell, .recipe, .callout { break-inside: avoid; }
}

/* ---------------------------------------------------------------
   Webapp-laag (PWA): meldingen en veilige zones.
   --------------------------------------------------------------- */

/* Als Bloome vanaf het beginscherm opent, is er geen browserbalk. Dan moet de
   inhoud onder de notch en boven de home-indicator vandaan blijven. */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .portal-header, .auth-header { padding-top: calc(1.4rem + env(safe-area-inset-top)); }
}

.app-melding, .app-install {
  position: fixed; z-index: 999;
  left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom));
  transform: translate(-50%, 140%);
  width: min(30rem, calc(100vw - 1.6rem));
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 2.4rem 0.85rem 1rem;
  border-radius: 16px; border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 24px 50px -22px rgba(74, 47, 53, 0.55);
  font-size: 0.85rem; color: var(--ink);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.app-melding.zichtbaar, .app-install.zichtbaar { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .app-melding, .app-install { transition: none; }
}

.app-melding-knop {
  margin-left: auto; flex-shrink: 0;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: 999px; padding: 0.45rem 0.95rem;
  font-family: 'Manrope', sans-serif; font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.app-melding-knop:hover { filter: brightness(1.05); }

.app-melding-sluit {
  position: absolute; top: 0.35rem; right: 0.5rem;
  background: none; border: 0; cursor: pointer;
  font-size: 1.2rem; line-height: 1; color: var(--ink-soft); padding: 0.2rem 0.35rem;
}
.app-melding-sluit:hover { color: var(--ink); }

.app-install { align-items: flex-start; }
.app-install .ai-bloem {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 11px; overflow: hidden;
  border: 1px solid var(--line);
}
.app-install .ai-bloem img { display: block; width: 100%; height: 100%; }
.app-install .ai-tekst { display: flex; flex-direction: column; gap: 0.15rem; }
.app-install .ai-tekst strong { font-size: 0.88rem; }
.app-install .ai-tekst span { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.45; }
.app-install .ai-knoppen { margin-left: auto; align-self: center; }
@media (max-width: 480px) {
  .app-install { flex-wrap: wrap; }
  .app-install .ai-knoppen { margin-left: 0; width: 100%; }
  .app-install .app-melding-knop { width: 100%; margin-left: 0; }
}

/* ---------- Uitleg: Bloome op je beginscherm zetten ---------- */
.app-venster {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
  background: color-mix(in srgb, var(--ink) 42%, transparent);
  opacity: 0; transition: opacity 0.25s ease;
}
.app-venster.zichtbaar { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .app-venster { transition: none; } }

.app-venster .av-kaart {
  position: relative; width: min(26rem, 100%);
  max-height: 86dvh; overflow-y: auto;
  background: var(--paper); border-radius: 22px;
  padding: 1.9rem 1.6rem 1.6rem;
  box-shadow: 0 40px 70px -30px rgba(74, 47, 53, 0.7);
  text-align: center;
}
.app-venster .av-icoon {
  width: 56px; height: 56px; margin: 0 auto 0.9rem;
  border-radius: 15px; overflow: hidden; border: 1px solid var(--line);
}
.app-venster .av-icoon img { display: block; width: 100%; height: 100%; }
.app-venster h2 { font-size: 1.25rem; margin: 0 0 0.55rem; }
.app-venster .av-voor { font-size: 0.86rem; color: var(--ink-soft); margin: 0 0 1.2rem; line-height: 1.55; }
.app-venster .av-stappen {
  margin: 0; padding: 0; list-style: none; counter-reset: stap;
  display: grid; gap: 0.65rem; text-align: left;
}
.app-venster .av-stappen li {
  counter-increment: stap;
  display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.7rem; align-items: start;
  font-size: 0.88rem; line-height: 1.5; color: var(--ink);
}
.app-venster .av-stappen li::before {
  content: counter(stap);
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.74rem; font-weight: 700;
}
.app-venster .av-na {
  margin: 1.2rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--line);
  font-size: 0.78rem; color: var(--ink-soft); line-height: 1.5;
}
.app-venster .av-sluit {
  position: absolute; top: 0.5rem; right: 0.7rem;
  background: none; border: 0; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--ink-soft); padding: 0.2rem 0.4rem;
}
.app-venster .av-sluit:hover { color: var(--ink); }

/* ---------------------------------------------------------------
   Agenda-knoppen (.ics). Alleen op plekken met een echt tijdstip:
   weekagenda, workout en de dagelijkse journal-herinnering.
   --------------------------------------------------------------- */

.ics-balk {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  margin: 0 0 1.1rem;
}
.ics-uitleg { font-size: 0.76rem; color: var(--ink-soft); }

.ics-knop {
  display: inline-flex; align-items: center; gap: 0.5rem; width: auto;
  padding: 0.55em 1.1em; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background: var(--paper); color: var(--ink);
  font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 700;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.ics-knop svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }
.ics-knop:hover {
  border-color: var(--accent); transform: translateY(-1px);
  background: color-mix(in srgb, var(--paper-alt) 45%, var(--paper));
}

/* Keuzevenster voor dag en tijd */
.ics-venster {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
  background: color-mix(in srgb, var(--ink) 42%, transparent);
  opacity: 0; transition: opacity 0.25s ease;
}
.ics-venster.zichtbaar { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ics-venster { transition: none; } }

.ics-venster .iv-kaart {
  position: relative; width: min(23rem, 100%);
  background: var(--paper); border-radius: 20px; padding: 1.8rem 1.5rem 1.4rem;
  box-shadow: 0 40px 70px -30px rgba(74, 47, 53, 0.7);
}
.ics-venster h3 { font-size: 1.2rem; margin: 0 0 0.4rem; }
.ics-venster .iv-sub { margin: 0 0 1.2rem; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5; }
.ics-venster .iv-velden { display: grid; gap: 0.7rem; margin-bottom: 1.2rem; }
.ics-venster .iv-veld { display: flex; flex-direction: column; gap: 0.3rem; }
.ics-venster .iv-veld span {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.ics-venster .iv-veld select,
.ics-venster .iv-veld input {
  font-family: 'Manrope', sans-serif; font-size: 0.95rem; padding: 0.6em 0.75em;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink);
}
.ics-venster .iv-ok {
  width: 100%; border-radius: 999px; padding: 0.8em 1.4em;
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.ics-venster .iv-hint {
  margin: 0.8rem 0 0; font-size: 0.73rem; color: var(--ink-soft);
  line-height: 1.45; text-align: center;
}
.ics-venster .iv-sluit {
  position: absolute; top: 0.4rem; right: 0.6rem;
  background: none; border: 0; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--ink-soft); padding: 0.2rem 0.4rem;
}
.ics-venster .iv-sluit:hover { color: var(--ink); }

/* Workout: afvinken en plannen naast elkaar. De afvinkknop staat standaard op
   volle breedte, dus die zetten we hier terug naar meegroeien. */
.fx-acties { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.fx-acties { margin-top: 1.3rem; }
/* De afvinkknop heeft zelf een bovenmarge; binnen de rij zet die de twee
   knoppen scheef, dus die verhuist naar de rij als geheel. */
.fx-acties .fx-done { width: auto; flex: 1 1 14rem; margin-top: 0; }
@media (max-width: 520px) {
  .fx-acties { flex-direction: column; align-items: stretch; }
  .fx-acties .ics-knop { justify-content: center; }
}

/* Taalkeuze: klein pil-vormig menuutje, hergebruikt op elke pagina met i18n.js. */
.taal-kiezer select {
  border: 1px solid var(--ink-soft);
  border-radius: 999px;
  padding: 0.5em 1.1em;
  font-size: 0.8rem;
  cursor: pointer;
  background-color: var(--paper);
  color: var(--ink);
}