/* Tavlen — familiens app. Lyst tema efter designet, version 2.

   Alle klassenavne fra version 1 er bevaret, saa markup'en ikke skal skrives
   om for at faa det nye udseende. Det nye er: kort med skygge og stoerre
   radius, versaloverskrifter, monospace-fodnoter under kortene, tilstande i
   groen og gul, og en bundmenu med pille bag det aktive ikon. */

:root{
  --bg:#F2F6F6;
  --kort:#FFFFFF;
  --blaek:#172A2D;
  --daemp:#52686B;
  --svag:#5C6E70;
  --svagest:#8CA0A3;
  --linje:#E2EAEA;
  --linje-let:#EEF3F3;
  --dyb:#16565C;
  --dybere:#14484D;
  --accent:#17767E;
  --advarsel-bg:#FCF3E1;
  --advarsel-kant:#EFDDB6;
  --advarsel-blaek:#7A4E0B;
  --advarsel-staerk:#B4690E;
  --advarsel-prik:#C97F16;
  --info-bg:#E4EFEF;
  --info-kant:#CBDFDF;
  --info-blaek:#3E6266;
  --god-bg:#E6F4EB;
  --god-kant:#CBE7D4;
  --god-blaek:#1B6B3D;
  --god-staerk:#22834A;
  --plet:#E2604F;
  --barn-1:#E2604F;
  --barn-2:#2F6BC6;
  /* Skyggen er lav og bred. Et kort skal loefte sig fra baggrunden uden at
     se ud som om det svaever. */
  --skygge:0 1px 2px rgba(23,42,45,.05),0 4px 10px -6px rgba(20,72,77,.16),
           0 14px 30px -20px rgba(20,72,77,.5);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg);color:var(--blaek);
  font-family:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
  display:flex;flex-direction:column;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;
  cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
a{color:var(--accent);text-decoration:none}
a:hover{color:#0F5A61;text-decoration:underline}
.mono{font-family:'Spline Sans Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes checkPop{0%{transform:scale(.85)}55%{transform:scale(1.12)}100%{transform:scale(1)}}

/* ---------- tastaturfokus ---------- */
/* Skal aldrig erstattes af outline:none. Den, der navigerer med tab, skal
   kunne se, hvor hun er — ellers er siden ubrugelig uden mus. */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2.5px solid #17767E;outline-offset:2px;border-radius:6px}

/* ---------- skelet ---------- */
#indhold{flex:1 1 0;overflow-y:auto;overscroll-behavior:contain}
/* Spalter frem for grid. Med grid begynder naeste raekke foerst under det
   hoejeste kort i den forrige, saa et lavt kort efterlader et tomt felt under
   sig. Spalter flyder, og kortene lukker hullerne selv. */
.skaerm{max-width:1128px;margin:0 auto;padding:22px 16px 30px;
  columns:340px;column-gap:14px}
/* Kun ved faneskift. Foer laa animationen paa .skaerm selv, og da tegn()
   bygger hele skaermen om ved HVER dataopdatering, tonede siden ind forfra,
   hver gang en kilde landede. Det saa ud, som om den blinkede. */
.skaerm.toner{animation:fadeUp .3s cubic-bezier(.16,1,.3,1)}
.skaerm > *{break-inside:avoid;-webkit-column-break-inside:avoid;
  margin:0 0 14px}
/* Lister laeses bedst i én smal spalte — ikke spredt over hele bredden. */
.skaerm.smal{max-width:720px;columns:1}
.fuld{column-span:all}
/* INGEN SPALTE-SPAENDERE, HVOR DER KUN ER ÉN SPALTE.
   06-08-2026, femte gang: kontaktbogen stod ØVERST paa Beskeder-fanen og
   beskederne langt nede — kun paa telefon. Kortet var ikke flyttet i
   koden; det har staaet sidst siden 3. august.

   .fuld saetter column-span:all, og Beskeder er en .smal skaerm med
   columns:1. En spaender over én spalte kan ikke spaende over mere, end
   der er — men browseren skal stadig dele indholdet op i stykker omkring
   den, og dér er motorerne uenige. Paa desktop ses det ikke.

   Reglen rammer ALLE boern, ikke kun .fuld: header.top spaender ogsaa,
   og den naeste, der skriver en spaender, skal ikke skulle huske det. */
.skaerm.smal > *{column-span:none}

header.top{column-span:all;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:0 2px}
header.top .uge{font-size:12.5px;font-weight:600;color:var(--daemp);letter-spacing:.02em}
header.top h1{margin:2px 0 0;font-size:27px;line-height:1.1;font-weight:700;letter-spacing:-.015em}
header.top .vejr{text-align:right;padding-bottom:2px}
header.top .vejr b{font-size:19px;font-weight:600;line-height:1.2}
header.top .vejr span{color:var(--svag);font-weight:500;font-size:13px}
header.top .vejr div:last-child{font-size:12px;color:var(--daemp)}

/* Sidetitel paa undersider. */
h1.side{margin:0;font-size:23px;font-weight:700;letter-spacing:-.01em}
.sidehoved{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tilbage{display:inline-flex;align-items:center;gap:5px;font-size:13px;
  font-weight:600;color:var(--accent);margin-bottom:6px}

/* Gruppeoverskrift over et kort — versaler, saa den ikke konkurrerer. */
h2.gruppe{margin:0 0 8px;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--svag)}

/* ---------- kort ---------- */
.kort{background:var(--kort);border:1px solid #E8EFEF;border-radius:18px;
  box-shadow:var(--skygge);padding:16px}
.kort h2{margin:0 0 8px;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--svag)}
.kort .lille{font-size:12.5px;color:var(--daemp)}
.kort.tael{padding:4px 16px}
.raekke{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--linje-let)}
.raekke:first-of-type{border-top:0}

/* Fodnoten under et kort: hvornaar blev det hentet, hvad kan systemet ikke.
   Monospace, fordi den hoerer til maskinen og ikke til familien. */
.fod{margin-top:10px;font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:10.5px;line-height:1.6;color:var(--svag)}
.fod.varsel{color:var(--advarsel-staerk)}

/* Lille handling oppe i hoejre hjoerne af et kort ("Alle ›"). */
.korthoved{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.korthoved h2{margin:0}
.mere{font-size:12.5px;font-weight:600;color:var(--accent)}

/* ---------- baand og tilstande ---------- */
.baand{display:flex;align-items:center;gap:12px;border-radius:14px;padding:12px 14px}
.baand.advarsel{background:var(--advarsel-bg);border:1px solid var(--advarsel-kant)}
.baand.info{background:var(--info-bg);border:1px solid var(--info-kant)}
.baand.god{background:var(--god-bg);border:1px solid var(--god-kant)}
.baand .prik{width:8px;height:8px;border-radius:50%;flex:none}
.baand.advarsel .prik{background:var(--advarsel-prik)}
.baand.info .prik{background:var(--accent)}
.baand.god .prik{background:var(--god-staerk)}
.baand b{font-size:14px;font-weight:700;display:block}
.baand.advarsel b{color:var(--advarsel-blaek)}
.baand.info b{color:var(--dybere)}
.baand.god b{color:var(--god-blaek)}
.baand .lille{font-size:12.5px;margin-top:1px}
.baand.advarsel .lille{color:#8A5A10}
.baand.info .lille{color:var(--info-blaek)}

/* Et helt kort i rolig blaagroen — bruges naar der ikke er noget, og det er
   meningen. Ferie er ikke en fejl. */
.kort.rolig{background:var(--info-bg);border-color:var(--info-kant);box-shadow:none}
.kort.rolig h2{color:var(--info-blaek)}
.kort.rolig .stor{font-size:15px;font-weight:600;color:var(--dybere)}
.kort.rolig .lille{color:var(--info-blaek);margin-top:3px}
.kort.rolig .fod{color:#4E6A6D}

.knap{flex:none;background:var(--dyb);color:#fff;font-size:13px;font-weight:600;
  padding:9px 14px;border-radius:10px}
.knap.let{background:#fff;color:var(--dyb);border:1px solid var(--linje)}
.knap.blid{background:var(--info-bg);border:1px solid var(--info-kant);
  color:var(--dybere);font-size:12.5px;font-weight:700;padding:8px 14px}

/* ---------- barn ---------- */
.maerke{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  padding:3px 8px;border-radius:999px;white-space:nowrap}
.initial{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:11.5px;font-weight:700;color:#fff;flex:none}
.initial.mini{width:18px;height:18px;font-size:10px}

/* Kilde- og tilstandsmaerkat: SKOLE, KLUB, NY. */
.stempel{font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:3px 8px;
  border-radius:999px;flex:none;white-space:nowrap}
.stempel.skole{background:var(--info-bg);color:var(--dybere)}
.stempel.klub{background:#EFE7F6;color:#5B3E7A}
.stempel.ny{background:var(--advarsel-bg);color:var(--advarsel-staerk)}

/* Barnets navn og klasse oeverst paa et skemakort. */
.barnhoved{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.barnhoved .navn{font-size:13.5px;font-weight:700}
.barnhoved .slut{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--svag)}

/* En skemalinje: klokkeslet i monospace, saa tallene staar under hinanden. */
.time{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--linje-let);align-items:baseline}
.time:first-of-type{border-top:0}
.time .kl{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:12px;
  color:var(--svag);width:44px;flex:none}
.time .navn{font-size:14px;font-weight:600}
.time .note{margin-left:auto;font-size:11px;font-weight:700;color:#8A5A10;
  background:var(--advarsel-bg);border:1px solid var(--advarsel-kant);
  padding:2px 8px;border-radius:999px}

/* ---------- lektier ---------- */
.lektie{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--linje-let)}
.lektie:first-child{border-top:0}
.boks{width:24px;height:24px;border-radius:8px;border:1.5px solid #C4D2D3;background:#fff;
  flex:none;display:grid;place-items:center;margin-top:1px;
  transition:background .18s,border-color .18s}
.boks svg{opacity:0;transition:opacity .15s}
.lektie.klaret .boks{background:var(--dyb);border-color:var(--dyb);animation:checkPop .22s ease}
.lektie.klaret .boks svg{opacity:1}
.lektie.klaret .fag{color:#7C8F92;text-decoration:line-through}
.lektie.klaret .tekst{color:#94A5A8;text-decoration:line-through}
.lektie-skel{margin:14px 4px 4px;font-size:11.5px;letter-spacing:.8px;text-transform:uppercase;color:#7C8F92;font-weight:600}
.fag{font-size:14.5px;font-weight:600}
.frist{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--svag)}
.tekst{font-size:13.5px;color:var(--daemp);margin-top:3px;line-height:1.45}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;
  background:#fff;border:1px solid #D8E2E2;color:#3E5457}
.chip.valgt{color:#fff;background:var(--dyb);border-color:var(--dyb)}

/* ---------- besked-filteret ----------
   Sticky bjaelke med kilde- og barn-chips. Hver kilde har sin egen rolige
   farve, og taelleren staar som en lille boble i chippen. */
.bf-bar{position:sticky;top:8px;z-index:6;display:flex;flex-direction:column;gap:8px;
  background:rgba(246,244,239,.92);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid #E7E2D7;border-radius:16px;
  padding:10px 12px;margin-bottom:12px;
  box-shadow:0 10px 26px -18px rgba(15,63,68,.3)}
.bf-raekke{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.bf-label{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:9px;
  letter-spacing:.14em;color:#8A857A;width:42px;flex:none}
.bf-chip{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:inherit;transition:transform .2s cubic-bezier(.34,1.56,.64,1),
    background .2s,border-color .2s,color .2s}
.bf-chip:hover{transform:translateY(-1.5px)}
.bf-chip i{font-style:normal;font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9.5px;background:rgba(22,86,92,.09);border-radius:999px;
  padding:1.5px 7px;color:#3E5457}
.bf-chip.valgt i{background:rgba(255,255,255,.25);color:#fff}
.bf-chip.bf-skolen.valgt,.bf-chip.bf-skole.valgt{background:#16565C;border-color:#16565C}
.bf-chip.bf-klub.valgt{background:#B44A3A;border-color:#B44A3A}
.bf-chip.bf-viggo.valgt{background:#2F6BC6;border-color:#2F6BC6}
.bf-chip.bf-sfo.valgt{background:#8A6E14;border-color:#8A6E14}
.bf-chip.bf-musikskolen.valgt{background:#6D4A7E;border-color:#6D4A7E}
.bf-chip.bf-biblioteket.valgt{background:#3F7D5D;border-color:#3F7D5D}
/* Listen glider paa plads NAAR FILTERET SKIFTER — og kun da.
   Her stod reglen paa .besked alene. Den klasse laves i beskederKort(),
   som ogsaa forsiden kalder, og tegn() bygger skaermen om hver gang en
   kilde lander: listen animerede altsaa fire-fem gange efter et login,
   paa begge skaerme. tegn()s egen kommentar advarer mod netop det.
   .bf-skift saettes kun, naar familien har trykket paa en chip. */
.skaerm.bf-skift .besked{animation:bfInd .35s cubic-bezier(.22,1,.36,1) both}
.skaerm.bf-skift .besked:nth-child(2){animation-delay:.04s}
.skaerm.bf-skift .besked:nth-child(3){animation-delay:.08s}
.skaerm.bf-skift .besked:nth-child(4){animation-delay:.12s}
.besked:nth-child(5){animation-delay:.16s}
.besked:nth-child(n+6){animation-delay:.2s}
@keyframes bfInd{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .skaerm.bf-skift .besked{animation:none}
  .bf-chip{transition-duration:.01s}
}

/* ---------- kalender ---------- */
/* Datoflise: dagen stor, maaneden lille. Nemmere at skimme end "25/08". */
.dato{width:44px;flex:none;text-align:center;border:1px solid var(--linje);
  border-radius:10px;padding:5px 0;background:#FAFCFC}
.dato .d{font-size:15px;font-weight:700;line-height:1}
.dato .m{font-size:9.5px;font-weight:700;color:var(--svag);text-transform:uppercase;
  letter-spacing:.06em;margin-top:2px}
.begiv{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--linje-let);align-items:center}
.begiv:first-of-type{border-top:0}
.begiv .hvad{font-size:14.5px;font-weight:600;line-height:1.3}
.begiv .hvor{font-size:12px;color:var(--daemp);margin-top:1px}

/* ---------- beskeder ---------- */
.besked{display:flex;gap:10px;padding:13px 0;border-top:1px solid var(--linje-let);align-items:flex-start}
.besked:first-of-type{border-top:0}
.besked .ulaest{width:8px;height:8px;border-radius:50%;background:var(--accent);
  flex:none;margin-top:6px}
.besked .ulaest.laest{opacity:.16}
/* En NY besked skal kunne ses paa to meters afstand: den er et lille
   haeftet KORT — varm bund, tyk roed venstrekant, roed skygge og et
   roedt NY-segl. Læste raekker ligger fladt og graa bagved, saa
   kontrasten baerer hele overskuet: rød = skal ses, grå = set. */
.besked.ny{background:var(--advarsel-bg);border-top-color:transparent;
  margin:6px -10px 0;padding:15px 12px 15px 13px;border-radius:14px;
  border:1px solid rgba(226,96,79,.4);border-left:5px solid var(--plet);
  box-shadow:0 3px 16px rgba(226,96,79,.22);
  background-image:linear-gradient(120deg,rgba(226,96,79,.09),rgba(226,96,79,0) 55%)}
.besked.ny + .besked{border-top-color:transparent}
.besked.ny .emne{font-size:15.5px}
.besked.ny .tid{color:var(--plet);font-weight:800}
.besked.ny .ulaest{width:12px;height:12px;background:var(--plet);margin-top:4px}
/* NY-stemplet som et roedt segl — ikke en etiket, man kan overse. */
.stempel.ny{background:var(--plet);color:#fff;font-size:10.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;padding:3px 10px;
  border-radius:999px;box-shadow:0 1px 5px rgba(226,96,79,.45)}
/* Det rolige modstykke: har vi læst den, staar det groent og klart. */
.besked .laest-maerke{font-size:10.5px;font-weight:700;color:#3F7D5D;
  background:#E6F4EB;border:1px solid #CBE7D4;padding:2px 8px;border-radius:999px}
/* Talbåndet under overskriften: en roed stribe der siger hvad der venter,
   i samme røde som taelleren nede i menuen. */
.nyebaand{display:flex;align-items:center;gap:9px;font-size:13px;
  font-weight:750;color:#B8402C;background:#FCEDED;
  border:1px solid rgba(226,96,79,.35);border-radius:12px;
  padding:8px 13px;margin:4px 0 12px}
.nyebaand-tal{min-width:24px;height:24px;padding:0 8px;border-radius:999px;
  background:var(--plet);color:#fff;display:inline-grid;place-items:center;
  font-size:13px;font-weight:800;box-shadow:0 1px 4px rgba(226,96,79,.4)}
/* Skilleren mellem de nye (oeverst) og det, man allerede har set. */
.nye-skiller{display:flex;align-items:center;gap:10px;margin:18px 0 4px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--svagest)}
.nye-skiller::after{content:'';flex:1;border-top:1px solid var(--linje)}
/* Prikken pulserer stille, saa blikket finder den uden at lede. */
@keyframes prikPuls{0%,100%{box-shadow:0 0 0 0 rgba(226,96,79,.45)}
  55%{box-shadow:0 0 0 7px rgba(226,96,79,0)}}
.besked.ny .ulaest{animation:prikPuls 2.4s ease-out infinite}
@media (prefers-reduced-motion:reduce){.besked.ny .ulaest{animation:none}}
/* Det vi HAR laest, daempes kraftigt — set er set, og det nye staar frem. */
.besked.harlaest{opacity:.48;transition:opacity .18s ease}
.besked.harlaest:hover{opacity:1}
.besked .emne{font-size:14.5px;font-weight:600;line-height:1.35}
.besked .emne.ny{font-weight:700}
.besked .fra{font-size:12.5px;color:var(--daemp);margin-top:2px}
.besked .smag{font-size:13px;color:var(--daemp);line-height:1.45;margin-top:3px}
/* Datoen maa skrumpe, og aldrig tage mere end 40 %. Her stod flex:none,
   og et opslag med en 44 tegn lang dato klemte derfor titlen ud i ét ord
   pr. linje i forsidens smalle spalte. Teksten er kort nu (visDato), men
   loftet staar som vaern: kommer der en dag en kilde med en endnu
   laengere dato, skal DEN bryde sig selv — ikke overskriften. */
.besked .tid{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:10.5px;
  color:var(--svag);flex:0 1 auto;max-width:40%;text-align:right;
  overflow-wrap:anywhere;margin-top:2px}

/* ---------- felter ---------- */
.kort input[type=text],.kort input:not([type]){display:block;width:100%;margin-bottom:9px;
  font:inherit;font-size:15px;padding:11px 13px;border-radius:11px;
  background:#F7FAFA;border:1px solid #D8E2E2;color:var(--blaek)}
.kort input::placeholder{color:#9FB0B2}
.kort input:focus:not(:focus-visible){outline:none;border-color:var(--dyb);background:#fff}
.kort input{max-width:520px}
.felt-navn{display:block;font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--svag);margin:14px 0 6px}

/* ---------- tal ---------- */
.tal{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums}
.tal .enhed{font-size:13px;font-weight:500;color:var(--daemp);margin-left:3px}
.noegletal{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.noegletal .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.noegletal .n{font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--svag);margin-top:2px}

/* ---------- tomme tilstande ---------- */
.tom{padding:14px 2px;color:var(--daemp);font-size:13px;line-height:1.5}
.tom b{display:block;color:var(--blaek);font-size:14px;margin-bottom:3px}

/* Broedtekst maa ikke blive en meterlang linje, fordi kortet er bredt.
   Omkring 70 tegn er graensen for, hvor oejet kan finde naeste linje. */
.fuld .tekst,.fuld .tom,.fuld p{max-width:64ch}

/* ---------- skriv til skolen ---------- */
.skrivfelt{display:block;width:100%;min-height:130px;resize:vertical;font:inherit;
  font-size:15px;line-height:1.55;padding:13px 14px;border-radius:12px;
  background:#F7FAFA;border:1px solid #D8E2E2;color:var(--blaek)}
.skrivfelt:focus:not(:focus-visible){outline:none;border-color:var(--dyb);background:#fff}
.skrivfelt::placeholder{color:#9FB0B2}
.tael{margin-top:6px;font-variant-numeric:tabular-nums;font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:10.5px;color:var(--svag);text-align:right}
.tael.naer{color:var(--advarsel-staerk)}
.modtager{font-size:13px;font-weight:600;padding:7px 13px;border-radius:999px;
  background:#fff;border:1px solid #D8E2E2;color:#3E5457;
  transition:background .15s,color .15s,border-color .15s}
.modtager[aria-pressed="true"]{background:var(--dyb);color:#fff;border-color:var(--dyb)}

/* Bekraeftelsen er den vigtigste skaerm i appen: sidste sted man kan fortryde,
   foer noget forlader huset i ens eget navn. */
/* z-index 100, ikke 80: underbjaelken (nav.bund i app-look.css) ligger
   paa 90 og laa derfor OVEN PAA arket. Paa telefonen er arket klistret
   til bunden, saa knapraekken sad praecis under bjaelken og kunne ikke
   trykkes (fundet 04-08-2026 paa legeaftalen — men det ramte hvert
   eneste ark, ogsaa bekraeftelsen foer en besked sendes).
   Under body::after (120), over bjaelken (90). */
.taeppe{position:fixed;inset:0;z-index:100;background:rgba(11,32,34,.55);
  display:flex;align-items:flex-end;justify-content:center;animation:tonind .2s ease both}
@keyframes tonind{from{opacity:0}to{opacity:1}}
@keyframes opind{from{transform:translateY(26px);opacity:0}to{transform:translateY(0);opacity:1}}
.ark{background:#fff;width:100%;max-width:540px;border-radius:20px 20px 0 0;
  padding:22px 20px calc(20px + var(--safe-b));max-height:88vh;overflow-y:auto;
  animation:opind .28s cubic-bezier(.16,1,.3,1) both}
@media (min-width:560px){.taeppe{align-items:center}.ark{border-radius:20px;margin:20px}}

/* ---------- arket paa telefonen ----------
   KUN her. Paa en computer ruller der intet tastatur op over siden, og
   arket staar midt paa skaermen — der er intet at loese, og saa skal der
   ikke roeres. Graensen er den samme, som arket i forvejen bruger.

   1. Taeppet foelger det faktisk synlige omraade (--synligt, maalt af
      foelgTastatur() i tavlen.js). Uden javascript sker der ingenting.
   2. Arket bliver dermed LAVERE end sit indhold — og foerst dér
      begynder overflow-y:auto at virke. Foer var arket kortere end sine
      88vh, saa der var intet at rulle i, og knappen kunne ikke naas.
   3. Knapraekken klaeber i bunden, saa "Videre" ikke skal rulles frem.
      Den negative bund og margen ophaever arkets egen bundpolstring. */
@media (max-width:559px){
  .taeppe{top:var(--synligt-top,0px);height:var(--synligt,auto)}
  .ark{max-height:calc(var(--synligt,88vh) - 12px)}
  .arkknapper{position:sticky;bottom:calc(-1 * (20px + var(--safe-b)));
    background:#fff;padding:12px 0 calc(20px + var(--safe-b));
    margin-bottom:calc(-1 * (20px + var(--safe-b)));
    box-shadow:0 -10px 12px -12px rgba(15,63,68,.35)}
}
.ark h2{margin:0 0 4px;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--svag)}
.ark h3{margin:0 0 14px;font-size:19px;font-weight:700;letter-spacing:-.01em}
.forhaand{background:#F7FAFA;border:1px solid var(--linje);border-radius:14px;
  padding:14px 15px;font-size:14.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.tilraekke{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.tilnavn{font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px;
  background:var(--info-bg);color:var(--dybere)}
.advarselslinje{margin-top:14px;display:flex;gap:10px;align-items:flex-start;
  background:var(--advarsel-bg);border:1px solid var(--advarsel-kant);border-radius:12px;
  padding:11px 13px;font-size:13px;line-height:1.5;color:var(--advarsel-blaek)}
/* Klaebrig i bunden af arket. Saa staar "Videre" der, ogsaa naar
   indholdet rulles — og ogsaa hvis maalingen af tastaturet skulle
   svigte paa en telefon, vi ikke har set. Den negative bund og margen
   ophaever arkets egen bundpolstring, saa raekken sidder helt nede. */
.arkknapper{display:flex;gap:10px;margin-top:18px}
.arkknapper button{flex:1;justify-content:center;display:flex;align-items:center;
  padding:14px;border-radius:12px;font-size:15px;font-weight:600}
/* Den lille skrift inde i et ark. `.lille` var kun sat i .kort og .baand,
   saa en note i et ark stod i fuld broedtekst. Kun .ark — intet andet
   layout aendrer sig af den her linje. */
.ark .lille{font-size:12.5px;line-height:1.5;color:var(--daemp)}
.knap-fortryd{background:#fff;border:1px solid var(--linje);color:var(--daemp)}
.knap-send{background:var(--dyb);color:#fff}
.knap-send[disabled]{opacity:.55}
.kvittering{display:flex;gap:11px;align-items:flex-start;background:var(--god-bg);
  border:1px solid var(--god-kant);border-radius:12px;padding:12px 14px;
  font-size:13.5px;line-height:1.5;color:var(--god-blaek)}
.sendt{display:flex;gap:11px;padding:12px 0;border-top:1px solid var(--linje-let);
  align-items:flex-start}
.sendt:first-of-type{border-top:0}
.sendt .naar{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:10.5px;
  color:var(--svag);flex:none;margin-top:2px}

/* ---------- fravaer ---------- */
.barnvalg{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.barnknap{display:flex;align-items:center;gap:10px;padding:14px 15px;border-radius:14px;
  background:#fff;border:1.5px solid var(--linje);transition:background .15s,border-color .15s}
.barnknap .prik{width:14px;height:14px;border-radius:50%;flex:none}
.barnknap .navn{font-size:15px;font-weight:700}
.barnknap .klasse{font-size:12px;color:var(--daemp);margin-top:1px}

.typechip{font-size:13.5px;font-weight:600;padding:9px 15px;border-radius:999px;
  background:#fff;border:1px solid #D8E2E2;color:#3E5457;
  transition:background .15s,color .15s,border-color .15s}
.typechip[aria-pressed="true"]{background:var(--dyb);color:#fff;border-color:var(--dyb)}

/* Forklaringen til den valgte type. Den staar altid — man skal ikke gaette
   sig til, hvad loven siger om det, man er ved at melde. */
.lovnote{margin-top:12px;background:#F5F8F8;border:1px solid var(--linje);
  border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.6;color:var(--daemp)}
.lovnote b{color:var(--blaek)}

/* Kvitteringen erstatter hele flowet — man skal ikke kunne komme til at
   sende to gange, fordi skaermen ser uaendret ud. */
.kvit{text-align:center;padding:8px 0 4px}
.kvit .ring{width:52px;height:52px;border-radius:50%;background:var(--god-bg);
  border:1.5px solid var(--god-kant);display:inline-flex;align-items:center;
  justify-content:center;margin-bottom:12px}
.kvit h3{margin:0 0 6px;font-size:19px;font-weight:700;letter-spacing:-.01em}
.kvit .naeste{font-size:13.5px;line-height:1.6;color:var(--daemp);margin-top:10px;
  max-width:42ch;margin-left:auto;margin-right:auto}
.kvit .fortryd{margin-top:14px;font-size:13px;font-weight:600;color:var(--accent)}

/* Sygeundervisning: femten prikker. Dag 10 er der, hvor tavlen siger til;
   dag 15 er skolelederens frist. */
.prikker{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.dagprik{width:15px;height:15px;border-radius:50%;background:#E8EEEE;flex:none}
.dagprik.fyldt{background:var(--dyb)}
.dagprik.varsel{box-shadow:0 0 0 2px var(--advarsel-kant)}
.dagprik.frist{box-shadow:0 0 0 2px var(--dyb)}

.klarpunkt{display:flex;gap:11px;align-items:flex-start;padding:9px 0;
  border-top:1px solid var(--linje-let)}
.klarpunkt:first-of-type{border-top:0}
.klarpunkt .txt{font-size:13.5px;line-height:1.55}

.histrk{display:flex;gap:11px;align-items:center;padding:11px 0;
  border-top:1px solid var(--linje-let)}
.histrk:first-of-type{border-top:0}
.mrk-lovlig{font-size:10px;font-weight:700;letter-spacing:.04em;padding:3px 8px;
  border-radius:999px;background:#DFF0E5;color:#1B6B3D;flex:none;white-space:nowrap}
.mrk-ulovlig{font-size:10px;font-weight:700;letter-spacing:.04em;padding:3px 8px;
  border-radius:999px;background:#F9E3DC;color:#9E3A28;flex:none;white-space:nowrap}
.mrk-afventer{font-size:10px;font-weight:700;letter-spacing:.04em;padding:3px 8px;
  border-radius:999px;background:var(--advarsel-bg);color:var(--advarsel-staerk);
  flex:none;white-space:nowrap}

/* Lovkortet — bredt og toned, saa det laeses som opslag og ikke som en besked */
.lovkort{background:#F7FAFA;border:1px solid var(--linje)}
.lovgitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px;margin-top:12px}
.lovgitter .par{font-size:13px;line-height:1.6;color:var(--daemp)}
.lovgitter .par .par-lov{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.06em;color:var(--dyb);font-weight:500;
  display:block;margin-bottom:4px}

/* Morgen-strippen paa forsiden */
.morgen{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.morgen .txt{flex:1;min-width:180px}
.morgen b{font-size:14px;font-weight:700;display:block}
.morgen .knapper{display:flex;gap:8px}
.morgen .ja{background:#fff;border:1px solid var(--linje);color:var(--dyb);
  font-size:13px;font-weight:600;padding:9px 14px;border-radius:10px}

/* ---------- fravaersreglerne: strimmel + bundark ---------- */
.strimmel{display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  background:#F7FAFA;border:1px solid var(--ui-kant,#E2EAEA);border-radius:18px;
  padding:13px 16px}
.strimmel .paragraf{width:34px;height:34px;border-radius:11px;background:var(--info-bg);
  color:var(--dybere);font-size:16px;font-weight:700;display:inline-flex;
  align-items:center;justify-content:center;flex:none}
.strimmel .txt{flex:1;min-width:170px}
.strimmel .titel{font-size:14px;font-weight:700}
.strimmel .under{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:10.5px;color:var(--svag);margin-top:2px}
.strimmel .aabn{background:var(--dyb);color:#fff;font-size:13px;font-weight:600;
  padding:9px 15px;border-radius:10px;flex:none;transition:background .2s}
.strimmel .aabn:hover{background:var(--dybere)}

/* z-index 100 som .taeppe (se kommentaren dér, 04-08-2026). Guiden
   blev glemt den dag: bundmenuens undermenu ligger i 79/81 og laa
   derfor OVEN PAA guidens eget slør — to graa lag oven paa hinanden
   — og bundbjaelken (90) daekkede guidens nederste kant. */
.gaardslag{position:fixed;inset:0;z-index:100;background:rgba(15,63,68,.52);
  display:flex;align-items:flex-end;justify-content:center;
  animation:tonind .2s ease both}
.gark{background:#fff;width:100%;max-width:480px;max-height:88vh;overflow-y:auto;
  border-radius:22px 22px 0 0;box-shadow:0 -18px 50px -20px rgba(15,63,68,.5);
  animation:opind .28s cubic-bezier(.16,1,.3,1) both}
@media (min-width:520px){.gaardslag{align-items:center}
  .gark{border-radius:22px;margin:20px}}
.gark .hoved{position:sticky;top:0;background:var(--dybere);padding:16px 18px;
  display:flex;align-items:flex-start;gap:12px;z-index:1}
.gark .hoved h3{margin:0;font-size:18px;font-weight:700;color:#fff}
.gark .hoved .u{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:10.5px;
  color:#9CC5C8;margin-top:3px}
.gark .luk{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.14);
  color:#fff;flex:none;display:inline-flex;align-items:center;justify-content:center;
  font-size:17px;line-height:1}
.gark .krop{padding:18px;display:flex;flex-direction:column;gap:14px}
.gkort{background:#fff;border:1px solid var(--linje);border-radius:14px;padding:15px}
.gkort.tonet{background:var(--ui-bg,#F2F6F6);border-color:var(--ui-kant,#E2EAEA)}
.gkort.blaa{background:var(--info-bg);border-color:var(--info-kant)}
.gkort h4{margin:0 0 7px;font-size:14.5px;font-weight:700}
.gkort p{margin:0;font-size:13.5px;line-height:1.6;color:var(--daemp)}
.gkort p + p{margin-top:8px}
.fristbrik{width:62px;flex:none;text-align:center;background:var(--dyb);color:#fff;
  border-radius:12px;padding:9px 0}
.fristbrik .kl{font-size:21px;font-weight:700;line-height:1}
.fristbrik .m{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:9px;
  letter-spacing:.1em;margin-top:3px;opacity:.85}
.lyslinje{display:flex;gap:10px;align-items:flex-start;padding:7px 0}
.lyslinje .kugle{width:11px;height:11px;border-radius:50%;flex:none;margin-top:4px}
.lyslinje span{font-size:13px;line-height:1.55;color:var(--daemp)}
.gfod{background:var(--ui-bg,#F2F6F6);border-radius:10px;padding:10px 12px;
  font-size:12.5px;line-height:1.5;color:var(--daemp);margin-top:10px}
.gbar{display:flex;gap:3px;margin:10px 0 6px}
.gbar span{height:8px;flex:1;border-radius:3px;background:#D5E0E1}
.gbar span.varsel{background:#D8B96A}
.gbar span.frist{background:var(--dyb)}
.gakse{display:flex;justify-content:space-between;
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:9.5px;color:var(--svag)}
.gkilde{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:10px;
  line-height:1.7;color:var(--svag);text-align:center;padding:0 4px 4px}

/* ---------- akut spaerring ---------- */
.spaerret{background:#FCF1EE;border-color:#F0C4BC}
.spaerret .navn{color:#9E3A28}
.spaermrk{font-size:10px;font-weight:700;letter-spacing:.05em;padding:3px 8px;
  border-radius:999px;background:#F9E3DC;color:#9E3A28;flex:none;white-space:nowrap}
.spaerknap{flex:none;font-size:12.5px;font-weight:600;color:#A8341F}
.spaerknap.aabn{color:var(--accent)}
.spaerboks{margin-top:12px;background:var(--advarsel-bg);border:1px solid var(--advarsel-kant);
  border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.55;
  color:var(--advarsel-blaek)}
.spaerboks b{display:block;margin-bottom:4px}

/* ---------- bundmenu ---------- */
nav.bund{flex:none;display:flex;background:#fff;border-top:1px solid var(--linje);
  padding:7px 6px calc(7px + var(--safe-b))}
nav.bund button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:2px 0;color:var(--svag);transition:color .15s;min-height:46px}
nav.bund button.aktiv{color:var(--dyb)}
/* Pillen bag ikonet — det er den, der viser hvor man er, ikke kun farven. */
nav.bund .pille{display:inline-flex;padding:4px 15px;border-radius:999px;
  background:transparent;transition:background .2s;position:relative}
nav.bund button.aktiv .pille{background:#E4EFEF}
nav.bund span.mrk{font-size:10.5px;font-weight:600}
@media (max-width:400px){nav.bund span.mrk{font-size:9.5px}
  nav.bund .pille{padding:4px 11px}}
/* Tael, ikke bare en prik: tre ulaeste og én er ikke det samme. */
/* Uden den her linje er prikken synlig ALTID. Browserens [hidden]{display:none}
   har specificitet (0,1,0); reglen nedenfor har (0,2,1) og vinder, saa
   p.hidden = true i opdaterPlet() blev overskrevet af stilarket. Med tom tekst
   blev resultatet en bar roed prik paa 16px, der lignede et ulaest-maerke og
   ikke havde noget at gøre med beskeder. Maalt 30-07 med nul ulaeste. */
nav.bund .plet[hidden]{display:none}
nav.bund .plet{position:absolute;top:-2px;right:6px;min-width:16px;height:16px;
  border-radius:999px;background:var(--plet);color:#fff;font-size:9.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;padding:0 4px;
  border:2px solid #fff}

/* ---------- bibliotekskortet paa forsiden ----------
   Der er ingen regel for reduceret bevaegelse hernede: den globale regel
   nederst i filen slaar alle animationer fra med !important. */
.bibk-ind{animation:bibkInd .55s cubic-bezier(.22,1,.36,1) both}
@keyframes bibkInd{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Klar til afhentning. Det eneste med en frist, man ikke kan forlaenge —
   derfor er det ogsaa det eneste, der har lov at bevaege sig. */
.bibk-klar{position:relative;display:flex;align-items:center;gap:12px;
  margin:8px 0 2px;padding:12px 14px;border-radius:15px;overflow:hidden;
  background:linear-gradient(120deg,var(--advarsel-bg),#FDF9EF 70%);
  border:1px solid var(--advarsel-kant)}
.bibk-klar::after{content:"";position:absolute;top:0;bottom:0;left:0;width:36%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.65),transparent);
  transform:translateX(-140%);
  animation:bibkGenskin 4.6s ease-in-out infinite;pointer-events:none}
@keyframes bibkGenskin{0%,52%{transform:translateX(-140%)}82%,100%{transform:translateX(420%)}}
.bibk-klar-l{flex:1;min-width:0;display:flex;flex-direction:column;
  align-items:flex-start;gap:2px}
.bibk-klar-et{display:flex;align-items:center;gap:6px;
  font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--advarsel-blaek)}
.bibk-klar-prik{width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--advarsel-staerk);animation:bibkDotG 1.9s ease-in-out infinite}
.bibk-klar-titel{max-width:100%;font-size:14.5px;font-weight:700;color:var(--blaek);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bibk-klar-frist{font-size:12.5px;color:var(--advarsel-blaek)}
.bibk-nr{position:relative;flex:none;text-align:center;padding:2px 4px}
.bibk-nr span{display:block;font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--advarsel-blaek)}
.bibk-nr b{display:block;font-size:23px;font-weight:800;letter-spacing:-.01em;
  color:var(--advarsel-blaek);font-variant-numeric:tabular-nums}
.bibk-nr::before{content:"";position:absolute;inset:-8px -12px;border-radius:14px;
  border:2px solid var(--advarsel-staerk);opacity:0;pointer-events:none;
  animation:bibkRing 2.6s ease-out infinite}
@keyframes bibkRing{0%{opacity:.55;transform:scale(.9)}100%{opacity:0}}

/* Lån hjemme. Prikken har tre tilstande, og de er de samme tre, som teksten
   til hoejre siger — farven er ikke den eneste baerer af betydningen. */
.bibk-r{display:flex;align-items:flex-start;gap:10px;padding:10px 0;
  border-top:1px solid var(--linje-let)}
.bibk-dot{width:8px;height:8px;border-radius:50%;flex:none;margin-top:6px;
  background:#C4D3D3}
.bibk-dot.snart{background:var(--advarsel-staerk);animation:bibkDotG 1.9s ease-in-out infinite}
.bibk-dot.roed{background:#C0402F;animation:bibkDotR 1.6s ease-in-out infinite}
@keyframes bibkDotG{0%,100%{box-shadow:0 0 0 0 rgba(180,105,14,.4)}
  55%{box-shadow:0 0 0 5px rgba(180,105,14,0)}}
@keyframes bibkDotR{0%,100%{box-shadow:0 0 0 0 rgba(192,64,47,.42)}
  55%{box-shadow:0 0 0 6px rgba(192,64,47,0)}}
.bibk-rm{flex:1;min-width:0}
.bibk-t{font-size:13.5px;font-weight:600;color:var(--blaek)}
/* "Materiale 22629344" er ikke en titel — det er en titel, der ikke kunne
   hentes. Den skal ikke se ud som en bog. */
.bibk-t.materiale{color:var(--daemp);font-weight:500}
.bibk-d{font-size:12px;color:var(--daemp);margin-top:1px}
.bibk-dage{flex:none;font-size:12.5px;font-weight:700;margin-top:3px;
  white-space:nowrap;color:var(--svag)}
.bibk-dage.snart{color:var(--advarsel-staerk)}
.bibk-dage.roed{color:#B23A2B}
.bibk-flere{display:block;margin:6px 0 0;font-size:12.5px;font-weight:600;
  color:var(--accent);cursor:pointer}
.bibk-vej{margin-top:8px;padding-top:9px;border-top:1px dashed var(--linje);
  font-size:12.5px;color:var(--daemp)}
.bibk .bib-ejer{margin:1px 0 3px}

/* Invitationen, naar der endnu ikke er tilsluttet et bibliotek. */
.kort.bibk-invite{background:linear-gradient(160deg,#EAF2F2,#F4F9F9);
  border-color:#CBDFDF}
.bibk-invite h2{color:#14484D}
.bibk-invite .tekst{color:#2C4A4D}
.bibk-invite .bibk-invite-knap{margin-top:12px;background:#16565C;
  border-color:#16565C;color:#fff}
.bibk-invite .lille{color:#3E5457}

/* ---------- stoerre skaerme ---------- */
/* HER LAA EN LODRET SIDEBJAELKE til brede skaerme (92 px stolpe).
   Den har aldrig haft virkning: app-look.css overskriver hver eneste
   linje i den og goer bjaelken til en centreret vandret dok — og
   app-look.css indlaeses sidst. Fjernet, fordi den sendte en
   gennemgang paa vildspor 06-08-2026 og kunne goere det igen. */


@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* --- samtykkefelterne ved kilder, der kan baere foelsomt ------------- */
.samtykke-felt {
  margin: 14px 0 4px; padding: 12px 13px;
  border: 1.5px solid var(--kant, #E7E2D7); border-radius: 12px;
  background: rgba(0, 0, 0, .02);
}
.samtykke-felt label {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
}
.samtykke-felt input[type="checkbox"] {
  margin-top: 3px; width: 18px; height: 18px; flex: none;
}
.samtykke-felt b { font-size: 13.5px; }
.samtykke-tekst {
  display: block; margin-top: 5px;
  font-size: 12.5px; opacity: .72; line-height: 1.5;
}

/* ==========================================================================
   Besked-visningen — beskeden traeder isoleret frem (kortet i ro)
   --------------------------------------------------------------------------
   z 95: OVER bundbjaelken (90) og hub-menuen (79/80), men UNDER .taeppe
   (100) — bekræft-arket "Sådan bliver det sendt" skal altid dække, naar
   et svar fra visningen skal bekraeftes. Samme gennemgang som lagene i
   test_hubfaner, uden at roere dem.
   ========================================================================== */
.bv-taeppe{position:fixed;inset:0;z-index:95;background:rgba(11,32,34,.58);
  backdrop-filter:blur(9px) saturate(.92);-webkit-backdrop-filter:blur(9px) saturate(.92);
  display:grid;place-items:end center;opacity:0;transition:opacity .28s}
.bv-taeppe.vis{opacity:1}
.bv-kort{position:relative;width:100%;max-width:600px;max-height:88vh;
  background:#FFFEFA;border-radius:28px 28px 0 0;
  padding:10px 22px calc(18px + var(--safe-b));
  overflow-y:auto;overscroll-behavior:contain;
  box-shadow:0 -30px 60px -30px rgba(6,30,34,.5);
  transform:translateY(60px);
  transition:transform .5s cubic-bezier(.32,.72,.24,1)}
.bv-taeppe.vis .bv-kort{transform:none}
@media (min-width:700px){
  .bv-taeppe{place-items:center}
  .bv-kort{border-radius:28px;max-height:86vh;
    transform:translateY(24px) scale(.97)}
}
/* gribehåndtaget: siger "træk mig ned" uden et ord */
.bv-greb{width:38px;height:5px;border-radius:99px;margin:2px auto 10px;
  background:rgba(22,42,45,.16)}
.bv-luk{position:sticky;top:0;float:right;width:36px;height:36px;border:none;
  border-radius:50%;background:rgba(22,86,92,.07);color:var(--daemp);
  font-size:19px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background .2s;margin-top:-8px}
.bv-luk:hover{background:rgba(22,86,92,.15)}
.bv-hoved{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bv-hoved .tid{margin-left:auto;font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:10.5px;color:var(--svag)}
.bv-titel{margin:12px 0 2px;font-size:21px;font-weight:800;letter-spacing:-.02em;
  line-height:1.25}
.bv-fra{font-size:13px;color:var(--daemp);margin-bottom:12px}
.bv-tekst{font-size:15px;line-height:1.65;white-space:pre-wrap;color:var(--blaek)}
.bv-henter{color:var(--svag);font-style:italic}
.bv-fod{margin-top:16px;border-top:1px dashed var(--linje);padding-top:10px;
  font-size:11.5px;color:var(--svag);line-height:1.55}
@media (prefers-reduced-motion:reduce){
  .bv-taeppe,.bv-kort{transition-duration:.01s!important}
}

/* Indtoetningen: naar kortet er landet, traeder indholdet frem i etapper —
   overskrift, tekst, traad, svar — som et brev der foldes ud. Kun ved
   selve aabningen (.foerste): stille opdateringer spiller den ikke igen. */
.bv-taeppe.vis .bv-indhold.foerste>*{animation:bvInd .6s cubic-bezier(.22,1,.36,1) both}
.bv-taeppe.vis .bv-indhold.foerste>*:nth-child(1){animation-delay:.30s}
.bv-taeppe.vis .bv-indhold.foerste>*:nth-child(2){animation-delay:.37s}
.bv-taeppe.vis .bv-indhold.foerste>*:nth-child(3){animation-delay:.43s}
.bv-taeppe.vis .bv-indhold.foerste>*:nth-child(4){animation-delay:.50s}
.bv-taeppe.vis .bv-indhold.foerste>*:nth-child(5){animation-delay:.56s}
.bv-taeppe.vis .bv-indhold.foerste>*:nth-child(6){animation-delay:.62s}
.bv-taeppe.vis .bv-indhold.foerste>*:nth-child(7){animation-delay:.68s}
.bv-taeppe.vis .bv-indhold.foerste>*:nth-child(8){animation-delay:.73s}
.bv-taeppe.vis .bv-indhold.foerste>*:nth-child(n+9){animation-delay:.77s}
@keyframes bvInd{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Stemplerne saettes PAA: et lille pres med drej, som et rigtigt stempel */
.bv-taeppe.vis .bv-indhold.foerste .bv-hoved .stempel,
.bv-taeppe.vis .bv-indhold.foerste .bv-hoved .maerke{display:inline-block;
  animation:bvStempel .45s cubic-bezier(.34,1.56,.64,1) .18s both}
.bv-taeppe.vis .bv-indhold.foerste .bv-hoved .maerke{animation-delay:.26s}
@keyframes bvStempel{from{opacity:0;transform:scale(1.35) rotate(-5deg)}
  60%{opacity:1;transform:scale(.96) rotate(1deg)}to{transform:none}}

/* Luk-knappen dukker op til sidst */
.bv-taeppe.vis .bv-luk{animation:bvInd .4s cubic-bezier(.22,1,.36,1) .3s both}

@media (prefers-reduced-motion:reduce){
  .bv-taeppe.vis .bv-indhold.foerste>*,
  .bv-taeppe.vis .bv-hoved .stempel,.bv-taeppe.vis .bv-hoved .maerke,
  .bv-taeppe.vis .bv-luk{animation:none!important}
}

/* Traaden som samtale: deres svar til venstre pa papir, vores til hoejre
   i petrol — som besked-apps ser ud, saa oejnet foelger samtalen selv. */
.bv-traad{margin-top:16px;border-top:1px dashed var(--linje);padding-top:14px;
  display:flex;flex-direction:column;gap:10px}
.boble{align-self:flex-start;max-width:86%;background:#F2F6F6;
  border:1px solid var(--linje);border-radius:18px 18px 18px 6px;
  padding:10px 13px;box-shadow:0 4px 12px -8px rgba(23,42,45,.18)}
.boble.vor{align-self:flex-end;border:none;color:#F3EFE6;
  border-radius:18px 18px 6px 18px;
  background:linear-gradient(150deg,#17545A,#17767E);
  box-shadow:0 8px 18px -10px rgba(15,63,68,.45)}
.boble-hoved{display:flex;gap:10px;align-items:baseline;font-size:11px}
.boble-hoved .hvem{font-weight:700;flex:1;min-width:0}
.boble.vor .boble-hoved{color:rgba(243,239,230,.75)}
.boble-hoved .tid{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9.5px;color:var(--svagest);flex:none}
.boble.vor .boble-hoved .tid{color:rgba(243,239,230,.55)}
.boble-tekst{font-size:14px;line-height:1.6;white-space:pre-wrap;margin-top:3px}
/* boblerne rejser sig fra deres egen side, naar brevet foldes ud */
.bv-taeppe.vis .bv-indhold.foerste .boble{animation:bvBob .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--d,.34s)}
@keyframes bvBob{from{opacity:0;transform:translateY(12px) scale(.96)}
  to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .bv-taeppe.vis .bv-indhold.foerste .boble{animation:none!important}
}

/* Adresser i skolens breve. Se medLinks() i tavlen.js — teksten er
   undveget FOER adressen findes, saa der aldrig gaar opmaerkning fra
   skolen ind i vores egen side. */
.bv-link{color:#16565C;text-decoration:underline;text-underline-offset:2px;
  overflow-wrap:anywhere}
.bv-link:hover{color:#0E3539}

/* Brevet med skolens egen opdeling. Se brevHtml() i tavlen.js — maerkerne
   er VORES, kun teksten er skolens, og den er undveget. */
.bv-rig{white-space:normal}
.bv-rig p{margin:0 0 12px}
.bv-rig p:last-child{margin-bottom:0}
.bv-h{font-size:15.5px;font-weight:700;line-height:1.4;
  margin:20px 0 8px;color:var(--blaek)}
.bv-rig > .bv-h:first-child{margin-top:0}
.bv-rig b{font-weight:700}
.bv-liste{margin:0 0 12px;padding-left:22px}
.bv-liste li{margin:0 0 4px}
.boble-tekst.bv-rig p{margin:0 0 8px}
.boble-tekst.bv-rig p:last-child{margin-bottom:0}
.boble-tekst.bv-rig .bv-h{font-size:14.5px;margin:12px 0 6px}

/* --------------------------------------------------------------------------
   Besked-visningen, anden omgang: appen bagved skalerer ned som i iOS,
   og brevet baerer et fint baand i kildens farve.
   -------------------------------------------------------------------------- */
body.bv-aaben #indhold, body.bv-aaben nav.bund{
  transition:transform .5s cubic-bezier(.32,.72,.24,1),filter .45s ease}
body.bv-aaben #indhold{transform:scale(.945);transform-origin:center 10%;
  filter:brightness(.94) saturate(.92)}
body.bv-aaben nav.bund{transform:scale(.96) translateY(6px);
  filter:brightness(.94) saturate(.92)}
#indhold, nav.bund{transition:transform .5s cubic-bezier(.32,.72,.24,1),filter .45s ease}

/* kilde-baandet i brevhovedet */
.bv-stribe{height:4px;margin:-10px -22px 10px;border-radius:28px 28px 0 0;
  opacity:.9}

/* komponisten: blodt felt, der loefter ved fokus, og en afsend-pille */
.bv-indhold textarea{border-radius:14px!important;border:1.5px solid var(--linje)!important;
  background:#F4F8F8;padding:12px 14px!important;font-size:14.5px;line-height:1.55;
  transition:box-shadow .25s,background .25s,border-color .25s}
.bv-indhold textarea:focus{outline:none;background:#fff;border-color:var(--accent)!important;
  box-shadow:0 0 0 4px rgba(23,118,126,.13)}
.bv-indhold .knap-send{border:none;border-radius:999px;padding:11px 22px;
  background:linear-gradient(150deg,#17545A,#0F3F44);color:#F3EFE6;
  font-size:13.5px;font-weight:750;letter-spacing:.01em;cursor:pointer;
  box-shadow:0 10px 22px -10px rgba(15,63,68,.5);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),filter .2s}
.bv-indhold .knap-send:hover{transform:translateY(-2px);filter:brightness(1.07)}
.bv-indhold .knap-send:active{transform:scale(.95)}

@media (prefers-reduced-motion:reduce){
  body.bv-aaben #indhold, body.bv-aaben nav.bund,
  #indhold, nav.bund{transition:none!important}
}

/* ==========================================================================
   Kalenderen: uge-strippen og tidslinjen med symboler
   --------------------------------------------------------------------------
   Farvekortet er det faste (kalFarve i tavlen.js); ikonet er formen,
   farven er sproget. Indtoetningen ligger under .toner, saa den kun
   spiller ved faneskift — ikke ved hver dataopdatering.
   ========================================================================== */

/* hele-ugen-linjen (ferie m.m.) */
.kal-heleugen{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:13px;margin-bottom:6px;color:var(--kf,#5E7C8B)}
.kal-heleugen b{color:var(--blaek);font-weight:650}
.kal-heleugen .lille{color:var(--svag)}

/* uge-strippen: syv kort, man ruller i dem med snap */
.kal-strip{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 2px 8px;scrollbar-width:none;margin-top:8px}
.kal-strip::-webkit-scrollbar{display:none}
.kal-dag{flex:none;width:86px;scroll-snap-align:start;border-radius:16px;
  border:1px solid var(--linje);background:#fff;padding:10px 0 8px;
  text-align:center;position:relative;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .25s}
.kal-dag:hover{transform:translateY(-2px);
  box-shadow:0 10px 22px -14px rgba(20,72,77,.35)}
.kal-dag-navn{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:8.5px;letter-spacing:.14em;color:var(--svag);text-transform:uppercase}
.kal-dag-nr{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1.15;
  color:var(--blaek)}
.kal-dag-ikoner{display:flex;justify-content:center;gap:4px;min-height:18px;
  align-items:center;margin-top:3px}
.kal-mini{display:inline-flex;width:16px;height:16px}
.kal-mini svg{width:15px;height:15px}
.kal-mere{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:8.5px;
  color:var(--svag);align-self:center}
.kal-dag-tal{margin-top:3px;font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9px;color:var(--daemp)}
.kal-dag-tal.ro{color:var(--svagest)}
.kal-dag.ro{opacity:.55}
.kal-dag.ro .kal-dag-ikoner{min-height:18px}
.kal-dag.idag{background:linear-gradient(160deg,#17545A,#0F3F44);
  border-color:transparent;box-shadow:0 14px 28px -14px rgba(15,63,68,.55)}
.kal-dag.idag .kal-dag-navn,.kal-dag.idag .kal-dag-tal{color:#8FC1C5}
.kal-dag.idag .kal-dag-nr{color:#F3EFE6}
.kal-dag.idag .kal-mini{color:#F9EC9B!important}
.kal-dag.idag .kal-mere{color:#8FC1C5}

/* tidslinjen: dato til venstre, begivenheder som rækker med ikon-flise */
.kal-tl-dag{display:flex;gap:12px;padding:12px 0;border-top:1px dashed var(--linje)}
.kal-tl-dag:first-of-type{border-top:none;padding-top:8px}
.kal-tl-dato{flex:none;width:44px;text-align:center;padding-top:2px}
.kal-tl-dato b{display:block;font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.1;
  color:var(--blaek)}
.kal-tl-dato span{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9px;letter-spacing:.1em;color:var(--svag);white-space:nowrap}
.kal-tl-dag.idag .kal-tl-dato b{color:var(--accent)}
.kal-tl-dag.idag .kal-tl-dato span{color:var(--accent);font-weight:700}
.kal-tl-events{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.kal-ev{display:flex;gap:11px;align-items:flex-start}
.kal-ev-ikon{flex:none;width:32px;height:32px;border-radius:10px;
  display:grid;place-items:center;color:var(--kf);
  background:color-mix(in srgb,var(--kf) 10%,#fff);
  border:1px solid color-mix(in srgb,var(--kf) 22%,#fff);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.kal-ev:hover .kal-ev-ikon{transform:scale(1.08) rotate(-4deg)}
.kal-ev-krop{flex:1;min-width:0;padding-top:1px}
.kal-ev-titel{font-size:13.5px;font-weight:600;line-height:1.35;
  overflow-wrap:anywhere}
.kal-ev.frist .kal-ev-titel{font-weight:750;color:#8C2A1B}
.kal-ev.frist .kal-ev-ikon{background:#FBECE9;border-color:#EFC5BC;color:#A8341F}
.kal-ev.ferie .kal-ev-ikon{background:#EDF3F5;border-color:#D7E3E7}
.kal-ev-tid{margin-left:8px;font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:10.5px;font-weight:600;color:var(--daemp);white-space:nowrap}
.kal-ev-titel .lille{font-weight:400;color:var(--svag)}
.kal-ev-note{font-size:12.5px;color:var(--tekst,#4A5457);margin-top:2px;
  line-height:1.5}
.kal-ev-meta{display:flex;gap:7px;align-items:center;margin-top:4px;
  font-size:11px;color:var(--svag);flex-wrap:wrap}
.kal-ev-barn{border-radius:999px;padding:1px 9px;font-size:10px;font-weight:700}

/* indtoetningen: kun naar man skifter HEN til fanen (.toner) */
.toner .kal-dag{animation:kalOp .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--d,0ms)}
.toner .kal-tl-dag{animation:kalOp .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--d,0ms)}
@keyframes kalOp{from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .toner .kal-dag,.toner .kal-tl-dag{animation:none!important}
  .kal-ev:hover .kal-ev-ikon{transform:none}
}

/* kalender-hoppet: klikbare poster og blitzet paa maalkortet */
.kal-ev.hopbar{cursor:pointer;border-radius:12px;padding:5px 6px;margin:0 -6px;
  transition:background .2s}
.kal-ev.hopbar:hover{background:color-mix(in srgb,var(--kf) 7%,transparent)}
.kal-ev.hopbar:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
.hop-flash{animation:hopFlash 1.6s cubic-bezier(.22,1,.36,1)}
@keyframes hopFlash{0%{box-shadow:0 0 0 0 rgba(23,118,126,.55)}
  35%{box-shadow:0 0 0 7px rgba(23,118,126,.22)}
  100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.hop-flash{animation:none}}

/* ==========================================================================
   Aftenkortet — kl. 18+ paa forsiden. Skumringsblaat, guld-maane, rolige
   raekker med de samme ikon-fliser som kalenderen. Indtoetning kun ved
   faneskift (.toner), saa dataopdateringer ikke spiller den igen.
   ========================================================================== */
.kort.aftenkort{position:relative;overflow:hidden;border:none;color:#F3EFE6;
  background:linear-gradient(155deg,#22345A 0%,#16304A 45%,#0F3F44 100%);
  box-shadow:0 24px 46px -22px rgba(9,23,40,.65)}
.aftenkort::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(143,193,197,.14) 1px,transparent 1.2px);
  background-size:26px 26px}
.ak-top{position:relative;display:flex;gap:13px;align-items:flex-start}
.ak-maane{flex:none;width:42px;height:42px;border-radius:13px;display:grid;
  place-items:center;background:rgba(232,197,106,.12);
  border:1px solid rgba(232,197,106,.3)}
.ak-etik{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:9px;
  letter-spacing:.15em;color:#8FC1C5;margin-bottom:3px}
.ak-titel{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.ak-dato{font-size:12px;color:rgba(243,239,230,.65);margin-top:1px}
.ak-raekke{position:relative;display:flex;align-items:center;gap:11px;
  margin-top:10px;background:rgba(243,239,230,.07);
  border:1px solid rgba(143,193,197,.16);border-radius:13px;padding:10px 12px}
.ak-ikon{flex:none;width:30px;height:30px;border-radius:9px;display:grid;
  place-items:center;color:var(--kf,#8FC1C5);
  background:color-mix(in srgb,var(--kf,#8FC1C5) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--kf,#8FC1C5) 30%,transparent)}
.ak-mid{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.35;
  overflow-wrap:anywhere}
.ak-tid{flex:none;font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:11px;font-weight:600;color:#E8C56A}
.ak-barn{flex:none;border-radius:999px;padding:2px 10px;font-size:10px;
  font-weight:700}
.ak-tom{position:relative;margin-top:10px;font-size:13.5px;
  color:rgba(243,239,230,.75)}
.ak-mere{position:relative;margin-top:12px;border:1.5px solid rgba(143,193,197,.35);
  background:none;color:#8FC1C5;border-radius:999px;padding:7px 15px;
  font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;
  transition:background .2s,transform .2s}
.ak-mere:hover{background:rgba(143,193,197,.12);transform:translateY(-1px)}
.toner .aftenkort{animation:kalOp .5s cubic-bezier(.22,1,.36,1) both}
.toner .ak-raekke{animation:kalOp .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--d,.2s)}
@media (prefers-reduced-motion:reduce){
  .toner .aftenkort,.toner .ak-raekke{animation:none!important}
}

/* Hjemmet bag appen: i mørke faser (aften/nat) skal toppen kunne læses
   på den mørke himmel — lysestrøg på header-teksten, kort er urørte. */
body[data-bg-fase="aften"] header.top,
body[data-bg-fase="nat"] header.top{color:#F3EFE6}
body[data-bg-fase="aften"] header.top .vejr,
body[data-bg-fase="nat"] header.top .vejr{color:rgba(243,239,230,.78)}
body[data-bg-fase="aften"] header.top .vejr span,
body[data-bg-fase="nat"] header.top .vejr span{color:rgba(243,239,230,.55)}
body[data-bg-fase="aften"] header.top .uge,
body[data-bg-fase="nat"] header.top .uge{color:#8FC1C5}

/* og en blød skygge bag header-teksten i de mørke faser, så den også
   kan læses hen over solnedgangens lyse rand */
body[data-bg-fase="aften"] header.top,
body[data-bg-fase="nat"] header.top{text-shadow:0 1px 14px rgba(8,18,24,.6)}

/* ==========================================================================
   Mere-skærmen: hero-status, ikon-linjer og etapperet indtoetning
   Bygget af appens egne elementer (kalenderens ikon-flise laanes).
   ========================================================================== */
.mere-hero{display:flex;align-items:center;gap:12px;
  border-left:4px solid #3F7D5D}
.mere-hero.venter{border-left-color:#C97F16}
.mere-hero b{font-size:14.5px;font-weight:750;letter-spacing:-.01em}
.mere-hero-ikon{flex:none;width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;background:var(--god-bg,#E6F4EB);
  border:1px solid var(--god-kant,#CBE7D4)}
.mere-hero.venter .mere-hero-ikon{background:var(--advarsel-bg,#FCF3E1);
  border-color:var(--advarsel-kant,#EFDDB6)}

/* ikon-linjen: et tryk = en funktion. Kalenderens flise som maerkat. */
.mere-linje{display:flex;align-items:center;gap:12px;width:100%;
  border:none;background:none;padding:11px 2px;font:inherit;cursor:pointer;
  text-align:left;text-decoration:none;color:inherit;
  border-top:1px solid var(--linje-let,#EEF3F3);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.mere-linje:first-of-type{border-top:0}
.mere-linje:hover{transform:translateX(2px)}
.mere-linje:hover b{color:var(--accent,#17767E)}
.mere-linje:active{transform:scale(.985)}
.mere-likon{flex:none;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;color:var(--kf);
  background:color-mix(in srgb,var(--kf) 10%,#fff);
  border:1px solid color-mix(in srgb,var(--kf) 22%,#fff)}
.mere-likon svg{width:17px;height:17px}
.mere-ltxt{flex:1;min-width:0}
.mere-ltxt b{display:block;font-size:13.5px;font-weight:650;letter-spacing:-.01em}
.mere-ltxt span{display:block;font-size:11.5px;color:var(--daemp);margin-top:1px}

/* etapperet indtoetning — kun ved faneskift (.toner) */
.toner .mere-sektion{animation:kalOp .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--d,0ms)}
@media (prefers-reduced-motion:reduce){
  .toner .mere-sektion{animation:none!important}
  .mere-linje:hover{transform:none}
}