/* kalender.css: kun /indkoebskalender/. Bruger tokens fra style.css og komponenterne fra ds/ds.css (ds-bane, ds-kort, ds-chip, ds-ikon).
   Markeringerne fra kalender.js ændrer kun farve, kant og synlighed, aldrig størrelser, så siden ikke skifter layout (CLS). */
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.b1 .wrap{max-width:1040px}
.b1 .wrap > p, .b1 .wrap > h2{max-width:76ch}

.kal-kort-svar{background:var(--accent-soft); border-radius:var(--r-lg); padding:clamp(16px,3vw,24px); margin:0 0 16px}
.kal-kort-svar b{display:block; font-family:var(--font-head); font-size:1.15rem; margin-bottom:6px}
.kal-kort-svar p{margin:0; max-width:76ch; font-size:1.05rem}
.kal-roed{display:flex; gap:12px; align-items:flex-start; background:var(--warn-soft); color:var(--warn-ink); border-radius:var(--r-md); padding:14px 16px; margin:0 0 8px; max-width:none}
.kal-roed .ds-ikon{--s:34px; --ic:var(--warn-ink); --tint:#fff; margin-top:2px}
.kal-roed a{color:var(--warn-ink)}

/* Formularen: genbruger .tf, .valg-r og .tf-felt fra boelge1.css */
.kal-form{max-width:640px}
.kal-form .btn{margin-top:4px}
.kal-svar{margin:14px 0 0; padding:14px 16px; background:var(--surface); border:2px solid var(--line); border-radius:var(--r-md); max-width:76ch}
.kal-svar p{margin:0; font-weight:600}
/* Plads til den længste besked, så siden ikke skifter layout, når en dato skrives */
#kal-linje{min-height:8.7em}
.kal-pejling{margin-top:8px !important; font-weight:400 !important; color:var(--ink-3); font-size:.92rem}
/* Helt smalle skærme (320 px): beskeden ombryder til flere linjer, så der reserveres lidt mere */
@media(max-width:359px){#kal-linje{min-height:9.8em}}
@media(min-width:700px){#kal-linje{min-height:3.3em}}

/* Tidslinjen */
.kal-bane{margin:22px 0 8px; max-width:900px; padding-top:78px}
.kal-bane .ds-bane-nu{top:-70px; z-index:2; visibility:hidden}
.kal-bane .ds-bane-prik{--farve:var(--accent)}
.kal-bane .ds-bane-prik.ds-himmel{--farve:var(--himmel)}
.kal-bane .ds-bane-prik.ds-sol{--farve:var(--sol)}
.kal-bane .ds-bane-prik.ds-klar{--farve:var(--klar); color:var(--ink)}
.kal-bane .ds-bane-prik.ds-lav{--farve:var(--lav-2, #9b86e0)}
.kal-bane .ds-bane-prik.klar{color:#fff}
.kal-bane .ds-bane-fyld, .kal-bane .ds-bane-spor > i{transition:width .5s var(--ds-blid)}
.kal-bane .ds-bane-nu{transition:left .5s var(--ds-blid)}
.kal-bane .ds-bane-nu[data-kant=venstre]{transform:translateX(-22%)}
.kal-bane .ds-bane-nu[data-kant=hoejre]{transform:translateX(-78%)}
@media(prefers-reduced-motion:reduce){.kal-bane .ds-bane-spor > i,.kal-bane .ds-bane-nu{transition:none}}

/* Trinene */
.kal-trin-liste{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:22px}
.b1 .kal-trin, .b1 .kal-post, .b1 .kal-trin-liste li{max-width:none}
.kal-trin{min-width:0}
.kal-trin > .ds-kort{position:relative; padding:clamp(14px,2.4vw,24px); border:2px solid transparent}
.kal-trin[data-status="nu"] > .ds-kort{border-color:var(--ink); background:var(--bund)}
.kal-trin[data-status="naeste"] > .ds-kort{border-color:var(--farve); border-style:dashed}
.kal-mark{position:absolute; top:-14px; right:16px; visibility:hidden; display:inline-flex; align-items:center; min-height:28px; padding:0 12px; border-radius:99px; background:var(--ink); color:#fff; font-weight:800; font-size:13px; white-space:nowrap}
.kal-trin[data-status] .kal-mark{visibility:visible}
.kal-trin[data-status="naeste"] .kal-mark{background:var(--surface); color:var(--farve-ink); box-shadow:inset 0 0 0 2px var(--farve)}
.kal-trin-top{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.kal-trin-top h3{margin:0; font-size:clamp(1.25rem,3vw,1.6rem)}
.kal-trin-top .ds-note{margin:2px 0 0}
.kal-nr{flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--farve); color:#fff; font-family:var(--font-head); font-weight:800; font-size:1.2rem}
.ds-sol .kal-nr{color:var(--ink)}
.kal-poster{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:14px}
.kal-post{display:flex; flex-direction:column; gap:8px; background:var(--surface-2); border-radius:var(--r-md); padding:14px; min-width:0}
.kal-post-h{display:flex; align-items:center; gap:10px}
.kal-post-h > .ds-ikon{--s:44px}
.kal-post-t{min-width:0}
.kal-post h4{margin:0; font-family:var(--font-head); font-size:1.2rem; line-height:1.2}
.kal-post p{margin:0 0 8px; max-width:none; overflow-wrap:anywhere}
.kal-naar{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px}
.kal-naar .ds-chip{min-height:30px; font-size:13px; padding:0 10px}
.kal-kilde{font-size:.88rem; color:var(--ink-3)}
.kal-kilde a{color:var(--accent-ink)}
.kal-links{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 0}
.kal-links .ds-chip{text-decoration:none; white-space:normal; text-align:left; background:var(--surface); box-shadow:inset 0 0 0 2px var(--line-2)}
.kal-links .ds-chip:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.b1 .wrap > p.kal-kilde{margin-top:-4px}

/* Tabellen (statisk): kort pr. alderstrin på mobil */
.kal-tabelvaerge{overflow:hidden; border-radius:var(--r-md); background:var(--surface); border:2px solid var(--line)}
.kal-tabel{border-collapse:collapse; width:100%}
.kal-tabel th, .kal-tabel td{padding:12px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
.kal-tabel thead th{font-size:.85rem; color:var(--ink-3); background:var(--surface-2)}
.kal-tabel tbody th{font-family:var(--font-head); white-space:nowrap}
.kal-tabel tbody tr:last-child th, .kal-tabel tbody tr:last-child td{border-bottom:0}
.kal-tabel tr[data-status="nu"]{background:var(--accent-soft)}
.kal-tabel-liste{display:flex; flex-wrap:wrap; gap:0 16px}
.kal-tabel-liste a, .kal-tabel-liste span{display:inline-flex; align-items:center; min-height:44px}
@media(max-width:700px){
  .kal-tabelvaerge{overflow:visible; background:transparent; border:0}
  .kal-tabel, .kal-tabel tbody{display:block}
  .kal-tabel thead{display:none}
  .kal-tabel tbody{display:flex; flex-direction:column; gap:12px}
  .kal-tabel tr{display:block; background:var(--surface); border:2px solid var(--line); border-radius:var(--r-md); padding:12px 14px}
  .kal-tabel th, .kal-tabel td{display:block; padding:0; border:0}
  .kal-tabel tbody th{padding-bottom:6px; font-size:1.1rem; white-space:normal}
  .kal-tabel td{padding:6px 0; border-top:1px solid var(--line); overflow-wrap:anywhere}
  .kal-tabel td::before{content:attr(data-l); display:block; color:var(--ink-3); font-weight:700; font-size:.82rem}
}
@media(max-width:520px){.kal-post-h > .ds-ikon{--s:40px}}
.kal-links .ds-chip:focus-visible, .kal-tabel-liste a:focus-visible{outline:3px solid var(--accent-ink); outline-offset:2px}