/* ==========================================================================
   Tavlen — app-look v2 "Den levende tavle" (lægges EFTER tavlen.css)
   Et dybt, levende farvesystem: tonet baggrund pr. fane, ægte glas-kort
   med blur, svævende dock-navigation, 3D-tilt, fjeder-overgange og
   press-states overalt. tavlen.js røres ikke.
   ========================================================================== */

:root{
  --let:cubic-bezier(.16,1,.3,1);
  --fjeder:cubic-bezier(.34,1.56,.64,1);
  --blid:cubic-bezier(.22,.61,.36,1);
}

/* ---------- farvesystemet: hver fane sit lys ----------
   --fanefarve styrer accenter, --fanetint piller og felter, --fanetil
   den sekundære farve i baggrunds-blobsne.
   body[data-fane] saettes af app-look.js (underskærme arver forældrens). */
body{--fanefarve:#17767E;--fanetint:#E1EFEF;--fanetil:#2FA39A}
body[data-appfane="idag"]{--fanefarve:#17767E;--fanetint:#E1EFEF;--fanetil:#2FA39A}
body[data-appfane="lektier"]{--fanefarve:#E2604F;--fanetint:#FBE7E2;--fanetil:#E8A34C}
body[data-appfane="beskeder"]{--fanefarve:#2F6BC6;--fanetint:#E4EBFA;--fanetil:#38B2CE}
body[data-appfane="fravaer"]{--fanefarve:#C07A12;--fanetint:#F9EFDC;--fanetil:#DB8A3A}
/* Kontaktbogen (fane-id "skriv"). Skal skille sig fra de andre i
   Skole-gruppen: lektier (#E2604F), fravaer (#C07A12), skema (#7A5CDB)
   og sfo (#B3542F). Petrol fra skrivegenvejens eget ikon. */
body[data-appfane="skriv"]{--fanefarve:#16565C;--fanetint:#DEEBEC;--fanetil:#2FA39A}
body[data-appfane="kalender"]{--fanefarve:#22834A;--fanetint:#E3F2E9;--fanetil:#4CB57B}
body[data-appfane="skema"]{--fanefarve:#7A5CDB;--fanetint:#ECE7FA;--fanetil:#4F8FE0}
body[data-appfane="sport"]{--fanefarve:#D6336C;--fanetint:#FAE4EC;--fanetil:#F06A9A}
/* Klubben. Skal skille sig fra de andre i Fritid-gruppen: sport
   (#D6336C), bibliotek (#8A5A24) og musik (#7A56C2). */
body[data-appfane="klub"]{--fanefarve:#0B7285;--fanetint:#DDEEF1;--fanetil:#3AA6B8}
body[data-appfane="mere"]{--fanefarve:#52686B;--fanetint:#E8EEEE;--fanetil:#7C9296}

/* ---------- den levende baggrund ----------
   Tre tonede blobs i fanens to farver over et roligt papir-gradient.
   Laget driver langsomt, og farven dipper blødt ved faneskift. */
body{position:relative;background:#F1F5F4}
body::before{content:"";position:fixed;inset:-5%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1000px 680px at 85% -8%, color-mix(in srgb, var(--fanefarve) 16%, transparent), transparent 60%),
    radial-gradient(880px 620px at -8% 106%, color-mix(in srgb, var(--fanetil) 13%, transparent), transparent 56%),
    radial-gradient(620px 520px at 55% 58%, color-mix(in srgb, var(--fanefarve) 5%, transparent), transparent 62%),
    linear-gradient(180deg,#F5F8F7,#EDF2F1);
  animation:baggrundDriv 26s ease-in-out infinite alternate;
  transition:opacity .22s ease}
body.skifter::before{opacity:.25}
@keyframes baggrundDriv{
  from{transform:translate3d(-1.2%,-1%,0) scale(1)}
  to{transform:translate3d(1.2%,1.2%,0) scale(1.045)}}

/* diskret korn */
body::after{content:"";position:fixed;inset:0;z-index:120;pointer-events:none;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23s)'/%3E%3C/svg%3E")}

/* pænere rullebjælke i indholdsområdet — i fanens farve */
#indhold::-webkit-scrollbar{width:9px}
#indhold::-webkit-scrollbar-track{background:transparent}
#indhold::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--fanefarve) 42%,rgba(20,72,77,.16));
  border-radius:99px;border:2px solid transparent;background-clip:content-box;
  transition:background .3s}
#indhold::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb,var(--fanefarve) 72%,rgba(20,72,77,.16));
  border:2px solid transparent;background-clip:content-box}

/* solen på I dag er gul — resten af fanens identitet bliver petrol */
body[data-appfane="idag"] nav.bund button.aktiv[data-fane="idag"] .pille svg{
  color:#E8A93D}

/* ---------- fokus (a11y): synlig, rolig, glødende ---------- */
button:focus-visible,a:focus-visible,[tabindex]:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2.5px solid color-mix(in srgb,var(--fanefarve) 80%,#17767E);
  outline-offset:2px;border-radius:8px;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--fanefarve) 16%,transparent)}

/* ---------- kortene: ægte glas ---------- */
.kort{
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.74));
  -webkit-backdrop-filter:blur(16px) saturate(1.35);
  backdrop-filter:blur(16px) saturate(1.35);
  border:1px solid rgba(255,255,255,.85);
  border-radius:22px;
  box-shadow:0 1px 2px rgba(23,42,45,.05),0 10px 26px -14px rgba(20,72,77,.22),
    0 28px 52px -30px rgba(20,72,77,.28);
  padding:18px;
  transform-style:preserve-3d;
  transition:transform .4s var(--let),box-shadow .4s var(--let),border-color .35s}
@media (hover:hover) and (pointer:fine){
  .kort:hover{
    transform:translateY(-3px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    border-color:color-mix(in srgb,var(--fanefarve) 26%,rgba(255,255,255,.85));
    box-shadow:0 2px 3px rgba(23,42,45,.05),0 18px 38px -16px rgba(20,72,77,.32),
      0 40px 72px -34px rgba(20,72,77,.32)}
}
.kort h2,h2.gruppe{color:var(--fanefarve);transition:color .3s}
.kort .fod.varsel{color:#B4690E;animation:fodPuls 3s ease-in-out infinite}
@keyframes fodPuls{0%,100%{opacity:1}50%{opacity:.55}}

/* header: uge og vejr i fanens farve, h1 med karakter */
header.top .uge{color:var(--fanefarve);transition:color .3s}
header.top h1{letter-spacing:-.02em}

/* rækker og linjer: luftigere og roligere */
.raekke{padding:12px 0;transition:background .2s}
.time .kl{color:color-mix(in srgb,var(--fanefarve) 70%,#6E8487)}
.besked .ulaest{background:var(--fanefarve)}
.mere{color:var(--fanefarve)}
.tilbage{color:var(--fanefarve)}
.tilnavn{background:var(--fanetint);color:var(--blaek)}

/* chips og valg: fjeder og farve */
.chip{transition:background .2s,color .2s,border-color .2s,transform .25s var(--fjeder)}
.chip:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--fanefarve) 45%,#D8E2E2)}
.chip:active{transform:scale(.94)}
.chip.valgt{background:var(--fanefarve);border-color:var(--fanefarve)}
.modtager,.typechip{transition:background .2s,color .2s,border-color .2s,transform .25s var(--fjeder)}
.modtager:hover,.typechip:hover{transform:translateY(-1px)}
.modtager:active,.typechip:active{transform:scale(.94)}
.modtager[aria-pressed="true"],.typechip[aria-pressed="true"]{
  background:var(--fanefarve);border-color:var(--fanefarve)}
.barnknap{transition:background .2s,border-color .2s,transform .25s var(--fjeder)}
.barnknap:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--fanefarve) 40%,#E2EAEA)}
.barnknap:active{transform:scale(.97)}

/* knapper: press-state og glød */
.knap{background:var(--fanefarve);border-radius:11px;
  transition:background .2s,transform .2s var(--fjeder),box-shadow .25s,filter .2s;
  box-shadow:0 6px 14px -8px color-mix(in srgb,var(--fanefarve) 65%,transparent)}
.knap:hover{filter:brightness(1.06);transform:translateY(-1px);
  box-shadow:0 12px 22px -8px color-mix(in srgb,var(--fanefarve) 65%,transparent)}
.knap:active{transform:scale(.95)}
.knap.blid{background:var(--fanetint);border-color:transparent;color:var(--blaek)}
.knap-send{background:var(--fanefarve);transition:filter .2s,transform .2s var(--fjeder)}
.knap-send:hover:not([disabled]){filter:brightness(1.06)}
.knap-send:active:not([disabled]){transform:scale(.96)}
.morgen .ja{transition:transform .2s var(--fjeder),border-color .2s}
.morgen .ja:hover{transform:translateY(-1px)}
.morgen .ja:active{transform:scale(.95)}

/* lektier: fluebenet popper, overstregningen tegner sig */
.lektie .boks{transition:background .2s,border-color .2s,transform .25s var(--fjeder)}
.lektie:active .boks{transform:scale(.9)}
.lektie.klaret .boks{background:var(--fanefarve);border-color:var(--fanefarve)}
.lektie .fag,.lektie .tekst{position:relative;transition:color .25s}
.lektie.klaret .fag::after,.lektie.klaret .tekst::after{
  content:"";position:absolute;left:-1px;right:-1px;top:55%;height:1.5px;
  background:currentColor;border-radius:2px;
  transform:scaleX(0);transform-origin:0 50%;animation:stregOp .35s var(--let) .08s forwards}
@keyframes stregOp{to{transform:scaleX(1)}}

/* datofliser og kalender */
.dato{transition:border-color .2s,transform .2s var(--fjeder)}
.begiv:hover .dato{border-color:color-mix(in srgb,var(--fanefarve) 45%,#E2EAEA);
  transform:translateY(-1px)}

/* statusbånd: farvet venstrekant */
.baand{border-left-width:3px}
.baand.info{border-left:3px solid var(--accent)}
.baand.god{border-left:3px solid #22834A}
.baand.advarsel{border-left:3px solid #C97F16}

/* ---------- bundmenuen: svævende glas-dock ---------- */
nav.bund{position:fixed;left:10px;right:10px;bottom:calc(10px + var(--safe-b));
  z-index:90;display:flex;border-top:0;border-radius:24px;padding:6px;
  background:rgba(255,255,255,.76);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 14px 36px -14px rgba(20,72,77,.4),0 2px 8px rgba(23,42,45,.06)}
.skaerm{padding-bottom:120px}
nav.bund button{transition:color .2s,transform .25s var(--fjeder)}
nav.bund button:active{transform:scale(.9)}
nav.bund button.aktiv{color:var(--fanefarve)}
nav.bund button.aktiv .pille{background:var(--fanetint)}
nav.bund button.aktiv span.mrk{font-weight:700}
nav.bund button .pille{transition:background .25s,transform .25s var(--fjeder)}
nav.bund button:not(.aktiv):hover{color:#3E5457}
nav.bund button:not(.aktiv):hover .pille{background:rgba(242,246,246,.9);
  transform:translateY(-1px)}
@keyframes fanepop{0%{transform:scale(.72)}55%{transform:scale(1.16)}100%{transform:scale(1)}}
.pille.fanepop svg{animation:fanepop .4s var(--fjeder)}
#faneglider{position:absolute;top:4px;height:3.5px;border-radius:99px;
  background:var(--fanefarve);transition:left .4s var(--let),width .4s var(--let),
  background .3s;pointer-events:none}
nav.bund .plet{animation:pletpuls 2.6s ease-in-out infinite;
  box-shadow:0 0 0 2.5px #fff,0 4px 8px -2px rgba(226,96,79,.5)}
@keyframes pletpuls{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}

/* store skærme: samme svævende dock som mobilen — centreret i bunden */
@media (min-width:820px){
  body{flex-direction:column}
  nav.bund{left:50%;right:auto;top:auto;bottom:calc(12px + var(--safe-b));
    width:auto;flex-direction:row;justify-content:center;gap:2px;
    transform:translateX(-50%);
    border-radius:26px;padding:7px 9px;border-right:0}
  nav.bund button{flex:none;min-width:76px;padding:7px 4px;border-radius:16px}
  nav.bund button.aktiv{background:transparent}
  nav.bund button.aktiv .pille{background:transparent}
  #faneglider{display:none}
  #indhold{flex:1;margin-left:0}
  .skaerm{padding-bottom:128px;max-width:1128px}
}

/* ---------- skærm-overgange: blød, retningsskabt, med fjeder ---------- */
@keyframes indH{from{opacity:0;transform:translateX(42px) scale(.985)}
                to{opacity:1;transform:none}}
@keyframes indV{from{opacity:0;transform:translateX(-42px) scale(.985)}
                to{opacity:1;transform:none}}
.skaerm.fanex-h{animation:indH .42s var(--let)}
.skaerm.fanex-v{animation:indV .42s var(--let)}
@keyframes kortInd{from{opacity:0;transform:translateY(14px) scale(.99)}
                   to{opacity:1;transform:none}}
.skaerm.fanex-h > *,.skaerm.fanex-v > *{animation:kortInd .55s var(--let) both}
.skaerm.fanex-h > *:nth-child(1),.skaerm.fanex-v > *:nth-child(1){animation-delay:.03s}
.skaerm.fanex-h > *:nth-child(2),.skaerm.fanex-v > *:nth-child(2){animation-delay:.07s}
.skaerm.fanex-h > *:nth-child(3),.skaerm.fanex-v > *:nth-child(3){animation-delay:.11s}
.skaerm.fanex-h > *:nth-child(4),.skaerm.fanex-v > *:nth-child(4){animation-delay:.15s}
.skaerm.fanex-h > *:nth-child(5),.skaerm.fanex-v > *:nth-child(5){animation-delay:.19s}
.skaerm.fanex-h > *:nth-child(6),.skaerm.fanex-v > *:nth-child(6){animation-delay:.23s}
.skaerm.fanex-h > *:nth-child(7),.skaerm.fanex-v > *:nth-child(7){animation-delay:.27s}
.skaerm.fanex-h > *:nth-child(n+8),.skaerm.fanex-v > *:nth-child(n+8){animation-delay:.31s}

/* ---------- modals: glas og fjeder ---------- */
.ark{border-radius:24px 24px 0 0;
  box-shadow:0 -24px 60px -24px rgba(15,63,68,.55)}
@media (min-width:560px){.ark{border-radius:24px}}
.gark{border-radius:24px 24px 0 0;
  box-shadow:0 -24px 64px -24px rgba(15,63,68,.6)}
@media (min-width:520px){.gark{border-radius:24px}}
.taeppe{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gaardslag{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* input: farvet fokusring */
.kort input[type=text]:focus,.kort input:not([type]):focus,.skrivfelt:focus{
  outline:none;border-color:var(--fanefarve);background:#fff;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--fanefarve) 14%,transparent)}

/* ==========================================================================
   v3 — hver fane sin personlighed
   Den aktive fane-ikon spiller sin egen animation ved skift, pillen får
   gradient-glød, titlen får en farvet streg, og skinnen får indikator.
   ========================================================================== */
nav.bund button .pille svg,nav.bund button .pille svg *{
  transform-box:fill-box;transform-origin:center}

/* den aktive pille: gradient-tint og blød glød i fanens farve */
nav.bund button.aktiv .pille{
  background:linear-gradient(135deg,var(--fanetint),
    color-mix(in srgb,var(--fanetint) 55%,#fff));
  box-shadow:0 4px 12px -4px color-mix(in srgb,var(--fanefarve) 38%,transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--fanefarve) 14%,transparent)}

/* I dag: solen drejer roligt, så længe fanen er aktiv */
body[data-appfane="idag"] nav.bund button.aktiv[data-fane="idag"] .pille svg{
  animation:solDrej 14s linear infinite}
@keyframes solDrej{to{transform:rotate(360deg)}}

/* Lektier: fluebenet tegner sig */
body[data-appfane="lektier"] nav.bund button.aktiv[data-fane="lektier"]
  .pille svg path:last-child{
  stroke-dasharray:14;stroke-dashoffset:14;
  animation:ikonTegn .6s var(--let) .08s forwards}
@keyframes ikonTegn{to{stroke-dashoffset:0}}

/* Beskeder: boblen popper op */
body[data-appfane="beskeder"] nav.bund button.aktiv[data-fane="beskeder"] .pille svg{
  animation:boblePop .5s var(--fjeder)}
@keyframes boblePop{0%{transform:scale(.68)}60%{transform:scale(1.12)}100%{transform:scale(1)}}

/* Fravær: krydset drejer ind */
body[data-appfane="fravaer"] nav.bund button.aktiv[data-fane="fravaer"] .pille svg{
  animation:krydsInd .55s var(--fjeder)}
@keyframes krydsInd{from{transform:rotate(-90deg) scale(.5)}to{transform:none}}

/* Kalender: bladet folder ned */
body[data-appfane="kalender"] nav.bund button.aktiv[data-fane="kalender"] .pille svg{
  animation:kalFold .55s var(--fjeder)}
@keyframes kalFold{0%{transform:translateY(-5px) scaleY(.35);opacity:.4}
  60%{transform:translateY(1px) scaleY(1.06)}100%{transform:none}}

/* Skema: cellerne popper i rækkefølge */
body[data-appfane="skema"] nav.bund button.aktiv[data-fane="skema"] .pille svg > *{
  animation:cellePop .45s var(--fjeder) both}
body[data-appfane="skema"] nav.bund button.aktiv[data-fane="skema"] .pille svg > *:nth-child(2){
  animation-delay:.1s}
body[data-appfane="skema"] nav.bund button.aktiv[data-fane="skema"] .pille svg > *:nth-child(3){
  animation-delay:.2s}
@keyframes cellePop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}

/* Sport: bolden bouncer */
body[data-appfane="sport"] nav.bund button.aktiv[data-fane="sport"] .pille svg{
  animation:boldHop .62s var(--fjeder)}
@keyframes boldHop{0%{transform:translateY(-7px) scale(.9)}
  55%{transform:translateY(1px) scale(1.06,.94)}
  78%{transform:translateY(-2.5px)}100%{transform:none}}

/* Mere: prikkerne hopper i rækkefølge */
body[data-appfane="mere"] nav.bund button.aktiv[data-fane="mere"] .pille svg circle{
  animation:prikHop .5s var(--fjeder) both}
body[data-appfane="mere"] nav.bund button.aktiv[data-fane="mere"] .pille svg circle:nth-child(2){
  animation-delay:.12s}
body[data-appfane="mere"] nav.bund button.aktiv[data-fane="mere"] .pille svg circle:nth-child(3){
  animation-delay:.24s}
@keyframes prikHop{0%{transform:translateY(4px);opacity:.3}
  60%{transform:translateY(-2px);opacity:1}100%{transform:none}}

/* titlen får en farvet streg, der tegner sig ved faneskift */
header.top h1{position:relative}
.skaerm.fanex-h header.top h1::after,.skaerm.fanex-v header.top h1::after{
  content:"";position:absolute;left:2px;bottom:-5px;height:3px;width:46px;
  border-radius:3px;
  background:linear-gradient(90deg,var(--fanefarve),
    color-mix(in srgb,var(--fanefarve) 30%,transparent));
  animation:titelStreg .55s var(--let) .12s both}
@keyframes titelStreg{from{transform:scaleX(0);transform-origin:0 50%}
  to{transform:scaleX(1)}}

/* store skærme: farvet indikator-streg ved aktiv fane i skinnen */
@media (min-width:820px){
  nav.bund button{position:relative}
  nav.bund button.aktiv::before{content:"";position:absolute;left:-5px;
    top:22%;bottom:22%;width:3.5px;border-radius:99px;background:var(--fanefarve);
    animation:railInd .4s var(--let)}
  @keyframes railInd{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}

/* ==========================================================================
   v4 — hver fane sit eget indholdssprog
   Temamønster i baggrunden, fane-specifik indholdsstil, række-stagger
   og ripple på alle tryk.
   ========================================================================== */

/* ---------- temamønstre i baggrunden (meget svage) ---------- */
body[data-appfane="idag"]::before{background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='60' cy='60' r='26' fill='none' stroke='%2317767E' stroke-opacity='.05' stroke-width='1.6'/%3E%3Ccircle cx='60' cy='60' r='44' fill='none' stroke='%2317767E' stroke-opacity='.035' stroke-width='1.4'/%3E%3C/svg%3E"),
  radial-gradient(1000px 680px at 85% -8%, color-mix(in srgb, var(--fanefarve) 16%, transparent), transparent 60%),
  radial-gradient(880px 620px at -8% 106%, color-mix(in srgb, var(--fanetil) 13%, transparent), transparent 56%),
  radial-gradient(620px 520px at 55% 58%, color-mix(in srgb, var(--fanefarve) 5%, transparent), transparent 62%),
  linear-gradient(180deg,#F5F8F7,#EDF2F1)}
body[data-appfane="lektier"]::before{background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cpath d='M14 24l6 6 12-13' fill='none' stroke='%23E2604F' stroke-opacity='.055' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
  radial-gradient(1000px 680px at 85% -8%, color-mix(in srgb, var(--fanefarve) 16%, transparent), transparent 60%),
  radial-gradient(880px 620px at -8% 106%, color-mix(in srgb, var(--fanetil) 13%, transparent), transparent 56%),
  radial-gradient(620px 520px at 55% 58%, color-mix(in srgb, var(--fanefarve) 5%, transparent), transparent 62%),
  linear-gradient(180deg,#F5F8F7,#EDF2F1)}
body[data-appfane="beskeder"]::before{background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Crect x='12' y='14' width='28' height='19' rx='7' fill='none' stroke='%232F6BC6' stroke-opacity='.05' stroke-width='2'/%3E%3Cpath d='M20 33l-4 6v-6' fill='none' stroke='%232F6BC6' stroke-opacity='.05' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"),
  radial-gradient(1000px 680px at 85% -8%, color-mix(in srgb, var(--fanefarve) 16%, transparent), transparent 60%),
  radial-gradient(880px 620px at -8% 106%, color-mix(in srgb, var(--fanetil) 13%, transparent), transparent 56%),
  radial-gradient(620px 520px at 55% 58%, color-mix(in srgb, var(--fanefarve) 5%, transparent), transparent 62%),
  linear-gradient(180deg,#F5F8F7,#EDF2F1)}
body[data-appfane="fravaer"]::before{background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38'%3E%3Cpath d='M19 13v12M13 19h12' fill='none' stroke='%23C07A12' stroke-opacity='.06' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"),
  radial-gradient(1000px 680px at 85% -8%, color-mix(in srgb, var(--fanefarve) 16%, transparent), transparent 60%),
  radial-gradient(880px 620px at -8% 106%, color-mix(in srgb, var(--fanetil) 13%, transparent), transparent 56%),
  radial-gradient(620px 520px at 55% 58%, color-mix(in srgb, var(--fanefarve) 5%, transparent), transparent 62%),
  linear-gradient(180deg,#F5F8F7,#EDF2F1)}
body[data-appfane="kalender"]::before{background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='10' y='12' width='24' height='22' rx='4' fill='none' stroke='%2322834A' stroke-opacity='.05' stroke-width='2'/%3E%3Cpath d='M10 19h24M17 8v6M27 8v6' fill='none' stroke='%2322834A' stroke-opacity='.05' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
  radial-gradient(1000px 680px at 85% -8%, color-mix(in srgb, var(--fanefarve) 16%, transparent), transparent 60%),
  radial-gradient(880px 620px at -8% 106%, color-mix(in srgb, var(--fanetil) 13%, transparent), transparent 56%),
  radial-gradient(620px 520px at 55% 58%, color-mix(in srgb, var(--fanefarve) 5%, transparent), transparent 62%),
  linear-gradient(180deg,#F5F8F7,#EDF2F1)}
body[data-appfane="skema"]::before{background-image:
  repeating-linear-gradient(180deg, transparent 0 46px, color-mix(in srgb, var(--fanefarve) 4.5%, transparent) 46px 47.5px),
  radial-gradient(1000px 680px at 85% -8%, color-mix(in srgb, var(--fanefarve) 16%, transparent), transparent 60%),
  radial-gradient(880px 620px at -8% 106%, color-mix(in srgb, var(--fanetil) 13%, transparent), transparent 56%),
  radial-gradient(620px 520px at 55% 58%, color-mix(in srgb, var(--fanefarve) 5%, transparent), transparent 62%),
  linear-gradient(180deg,#F5F8F7,#EDF2F1)}
body[data-appfane="sport"]::before{background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='9' fill='none' stroke='%23D6336C' stroke-opacity='.05' stroke-width='2'/%3E%3C/svg%3E"),
  radial-gradient(1000px 680px at 85% -8%, color-mix(in srgb, var(--fanefarve) 16%, transparent), transparent 60%),
  radial-gradient(880px 620px at -8% 106%, color-mix(in srgb, var(--fanetil) 13%, transparent), transparent 56%),
  radial-gradient(620px 520px at 55% 58%, color-mix(in srgb, var(--fanefarve) 5%, transparent), transparent 62%),
  linear-gradient(180deg,#F5F8F7,#EDF2F1)}
body[data-appfane="mere"]::before{background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Ccircle cx='32' cy='32' r='4' fill='%2352686B' fill-opacity='.045'/%3E%3C/svg%3E"),
  radial-gradient(1000px 680px at 85% -8%, color-mix(in srgb, var(--fanefarve) 16%, transparent), transparent 60%),
  radial-gradient(880px 620px at -8% 106%, color-mix(in srgb, var(--fanetil) 13%, transparent), transparent 56%),
  radial-gradient(620px 520px at 55% 58%, color-mix(in srgb, var(--fanefarve) 5%, transparent), transparent 62%),
  linear-gradient(180deg,#F5F8F7,#EDF2F1)}

/* ---------- fane-specifik indholdsstil ---------- */

/* Beskeder: ulæst får blå bar og tint, rækker glider ved hover */
body[data-appfane="beskeder"] .besked{border-radius:10px;padding-left:10px;margin-left:-10px;
  transition:background .25s,padding-left .25s var(--let)}
body[data-appfane="beskeder"] .besked:hover{background:rgba(47,107,198,.05);padding-left:15px}
body[data-appfane="beskeder"] .besked:has(.ulaest:not(.laest)){
  background:linear-gradient(90deg,rgba(47,107,198,.08),transparent 72%);
  box-shadow:inset 3px 0 0 var(--fanefarve);border-radius:12px}

/* Kalender: begivenheder glider ved hover */
body[data-appfane="kalender"] .begiv{border-radius:10px;padding-left:8px;margin-left:-8px;
  transition:transform .25s var(--let),background .25s}
body[data-appfane="kalender"] .begiv:hover{transform:translateX(4px);
  background:rgba(34,131,74,.05)}

/* Skema: timer glider, VIKAR-mærket kalder på opmærksomhed */
body[data-appfane="skema"] .time{border-radius:9px;padding-left:8px;margin-left:-8px;
  transition:background .25s,transform .25s var(--let)}
body[data-appfane="skema"] .time:hover{background:rgba(122,92,219,.06);transform:translateX(3px)}
body[data-appfane="skema"] .time .note{animation:strejfPuls 2.4s ease-in-out infinite}

/* Fravaer: dagprikkerne tænder én efter én */
body[data-appfane="fravaer"] .dagprik.fyldt{animation:prikFyld .4s var(--fjeder) both}
body[data-appfane="fravaer"] .dagprik:nth-child(2){animation-delay:.04s}
body[data-appfane="fravaer"] .dagprik:nth-child(3){animation-delay:.08s}
body[data-appfane="fravaer"] .dagprik:nth-child(4){animation-delay:.12s}
body[data-appfane="fravaer"] .dagprik:nth-child(5){animation-delay:.16s}
body[data-appfane="fravaer"] .dagprik:nth-child(6){animation-delay:.2s}
body[data-appfane="fravaer"] .dagprik:nth-child(7){animation-delay:.24s}
body[data-appfane="fravaer"] .dagprik:nth-child(8){animation-delay:.28s}
body[data-appfane="fravaer"] .dagprik:nth-child(9){animation-delay:.32s}
body[data-appfane="fravaer"] .dagprik:nth-child(10){animation-delay:.36s}
body[data-appfane="fravaer"] .dagprik:nth-child(11){animation-delay:.4s}
body[data-appfane="fravaer"] .dagprik:nth-child(12){animation-delay:.44s}
body[data-appfane="fravaer"] .dagprik:nth-child(13){animation-delay:.48s}
body[data-appfane="fravaer"] .dagprik:nth-child(14){animation-delay:.52s}
body[data-appfane="fravaer"] .dagprik:nth-child(15){animation-delay:.56s}
@keyframes prikFyld{from{transform:scale(.3);opacity:.2}to{transform:scale(1);opacity:1}}

/* Sport: "Ikke svaret" kalder på opmærksomhed, knapper trykker */
body[data-appfane="sport"] .kort .lille[style*="#B4690E"]{
  animation:strejfPuls 2.2s ease-in-out infinite}

/* I dag: HUSK-mærker holder sig blødt i live */
body[data-appfane="idag"] .merke{animation:strejfPuls 3s ease-in-out infinite}

/* Mere: rækker glider ved hover */
body[data-appfane="mere"] .raekke{border-radius:10px;padding-left:8px;margin-left:-8px;
  transition:transform .25s var(--let),background .25s}
body[data-appfane="mere"] .raekke:hover{transform:translateX(4px);background:rgba(82,104,107,.05)}

@keyframes strejfPuls{0%,100%{opacity:1}50%{opacity:.45}}

/* tryk-feedback på kort-knapper (Tilmeld, Afmeld, Se hvem m.fl.) */
.kort button{transition:transform .2s var(--fjeder)}
.kort button:active{transform:scale(.95)}

/* ---------- række-stagger ved faneskift ---------- */
.skaerm.fanex-h .besked,.skaerm.fanex-v .besked,
.skaerm.fanex-h .begiv,.skaerm.fanex-v .begiv,
.skaerm.fanex-h .time,.skaerm.fanex-v .time,
.skaerm.fanex-h .lektie,.skaerm.fanex-v .lektie,
.skaerm.fanex-h .raekke,.skaerm.fanex-v .raekke{animation:raekkeInd .45s var(--let) both}
.skaerm.fanex-h .besked:nth-of-type(2),.skaerm.fanex-v .besked:nth-of-type(2),
.skaerm.fanex-h .begiv:nth-of-type(2),.skaerm.fanex-v .begiv:nth-of-type(2),
.skaerm.fanex-h .time:nth-of-type(2),.skaerm.fanex-v .time:nth-of-type(2),
.skaerm.fanex-h .lektie:nth-of-type(2),.skaerm.fanex-v .lektie:nth-of-type(2),
.skaerm.fanex-h .raekke:nth-of-type(2),.skaerm.fanex-v .raekke:nth-of-type(2){animation-delay:.05s}
.skaerm.fanex-h .besked:nth-of-type(3),.skaerm.fanex-v .besked:nth-of-type(3),
.skaerm.fanex-h .begiv:nth-of-type(3),.skaerm.fanex-v .begiv:nth-of-type(3),
.skaerm.fanex-h .time:nth-of-type(3),.skaerm.fanex-v .time:nth-of-type(3),
.skaerm.fanex-h .lektie:nth-of-type(3),.skaerm.fanex-v .lektie:nth-of-type(3),
.skaerm.fanex-h .raekke:nth-of-type(3),.skaerm.fanex-v .raekke:nth-of-type(3){animation-delay:.1s}
.skaerm.fanex-h .besked:nth-of-type(n+4),.skaerm.fanex-v .besked:nth-of-type(n+4),
.skaerm.fanex-h .begiv:nth-of-type(n+4),.skaerm.fanex-v .begiv:nth-of-type(n+4),
.skaerm.fanex-h .time:nth-of-type(n+4),.skaerm.fanex-v .time:nth-of-type(n+4),
.skaerm.fanex-h .lektie:nth-of-type(n+4),.skaerm.fanex-v .lektie:nth-of-type(n+4),
.skaerm.fanex-h .raekke:nth-of-type(n+4),.skaerm.fanex-v .raekke:nth-of-type(n+4){animation-delay:.15s}
@keyframes raekkeInd{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ---------- ripple på tryk ---------- */
.knap,.chip,.modtager,.typechip,.barnknap{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;pointer-events:none;
  background:color-mix(in srgb,currentColor 20%,transparent);
  transform:scale(0);animation:rippleUd .55s ease-out forwards}
@keyframes rippleUd{to{transform:scale(1);opacity:0}}

/* ---------- lektie-fremdriftsring ---------- */
.fremdrift{display:inline-flex;align-items:center;gap:7px;margin-left:10px;
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:10px;
  font-weight:700;color:var(--fanefarve)}
.fremdrift svg{transform:rotate(-90deg)}
.fremdrift .ring-bag{stroke:rgba(20,72,77,.14)}
.fremdrift .ring-frem{stroke:var(--fanefarve);stroke-linecap:round;
  transition:stroke-dashoffset .7s var(--let)}

/* ==========================================================================
   v5 — glæde i det små
   Konfetti ved 100 % lektier, gnister ved afkrydsning, swipe mellem
   faner, levende ur, shimmer under hentning og kaskade ved start.
   ========================================================================== */

/* konfetti og gnister (partikler laves af app-look.js) */
.konfetti{position:fixed;z-index:300;pointer-events:none;width:8px;height:8px;
  border-radius:2px;animation:konfettiFlyv var(--varighed,1s) cubic-bezier(.16,.6,.4,1) forwards}
@keyframes konfettiFlyv{
  0%{transform:translate(0,0) rotate(0);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--spin));opacity:0}}
.gnist{position:fixed;z-index:300;pointer-events:none;width:5px;height:5px;
  border-radius:50%;animation:gnistFlyv .6s ease-out forwards}
@keyframes gnistFlyv{
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}

/* shimmer mens appen henter */
.skaerm > .tom:only-child{position:relative;overflow:hidden;border-radius:12px;
  padding:14px 16px}
.skaerm > .tom:only-child::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);
  background-size:220% 100%;animation:shimmer 1.3s linear infinite}
@keyframes shimmer{from{background-position:130% 0}to{background-position:-90% 0}}

/* levende ur i headeren på I dag */
.lev-ur{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:13px;
  font-weight:700;color:var(--fanefarve);text-align:right;
  font-variant-numeric:tabular-nums;margin-left:auto}

/* første indlæsning: kortene kommer i kaskade */
body.foerste .skaerm > *{animation:kortInd .55s var(--let) both}
body.foerste .skaerm > *:nth-child(1){animation-delay:.02s}
body.foerste .skaerm > *:nth-child(2){animation-delay:.06s}
body.foerste .skaerm > *:nth-child(3){animation-delay:.1s}
body.foerste .skaerm > *:nth-child(4){animation-delay:.14s}
body.foerste .skaerm > *:nth-child(5){animation-delay:.18s}
body.foerste .skaerm > *:nth-child(6){animation-delay:.22s}
body.foerste .skaerm > *:nth-child(7){animation-delay:.26s}
body.foerste .skaerm > *:nth-child(n+8){animation-delay:.3s}

/* ==========================================================================
   v6 — morf-pille og FLIP-overgange
   Én pille rejser mellem fanerne og omformer sig undervejs (Material/iOS).
   Kort flyver som spøgelser til deres plads på den nye skærm (FLIP), og
   sport-kortet vokser fysisk ved "Se hvem".
   ========================================================================== */

/* morf-pillen bag den aktive fane */
.morf-pille{position:absolute;z-index:0;opacity:0;pointer-events:none;
  background:linear-gradient(135deg,var(--fanetint),
    color-mix(in srgb,var(--fanetint) 55%,#fff));
  box-shadow:0 4px 12px -4px color-mix(in srgb,var(--fanefarve) 38%,transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--fanefarve) 14%,transparent);
  transition:left .46s var(--fjeder),width .46s var(--fjeder),
    top .46s var(--fjeder),height .46s var(--fjeder),
    border-radius .46s var(--fjeder),background .35s,box-shadow .35s,
    opacity .2s,transform .46s var(--fjeder)}
.morf-pille.rejser{transform:scaleX(1.09) scaleY(.93)}
nav.bund button{position:relative;z-index:1}
/* pillen bærer nu highlight'en — den gamle baggrund på knappens egen pille fjernes */
nav.bund button.aktiv .pille{background:transparent;box-shadow:none}

/* FLIP-spøgelset: kortet der flyver til sin nye plads */
.flip-spog{position:fixed;z-index:250;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.78));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 2px rgba(23,42,45,.05),0 10px 26px -14px rgba(20,72,77,.22),
    0 28px 52px -30px rgba(20,72,77,.28);
  transition:left .5s var(--let),top .5s var(--let),width .5s var(--let),
    height .5s var(--let),border-radius .5s var(--let),opacity .28s ease .34s}
/* morf-pillen bærer highlight'en — den ekstra streg i skinnen er overflød */
@media (min-width:820px){
  nav.bund button.aktiv::before{content:none}
}

/* kontaktbog-overgangen: spøgelseskortet starter som det hvide glas-kort
   fra forsiden og ender som kontaktbogens cremede pergament */
.flip-spog.til-bog{transition:left .55s var(--let),top .55s var(--let),
  width .55s var(--let),height .55s var(--let),border-radius .55s var(--let),
  background .45s ease .12s,border-color .45s ease .12s,opacity .3s ease}
.flip-spog.til-bog.til-papir{
  background:linear-gradient(180deg,#FCF7E9,#F6EDD8);border-color:#ECE2CF}
@media (prefers-reduced-motion:reduce){
  .morf-pille{transition:none!important}
  .flip-spog{display:none}
}
@media (max-width:520px){
  html,body{overflow-x:clip}
  header.top{flex-wrap:wrap;row-gap:4px}
  header.top .vejr{text-align:left}
  .raekke{flex-wrap:wrap;row-gap:5px}
  .raekke .merke,.raekke .frist{margin-left:0}
  .kort .fakta{grid-template-columns:1fr 1fr}
  .noegletal{grid-template-columns:1fr 1fr}
}

/* ==========================================================================
   v7 — I dag v2 direkte i appen
   Næste op-hero med levende nedtælling, sol-bue i vejret, tidslinje i
   børnekortene med NU-streg, og blinkende prik på det der haster.
   ========================================================================== */

/* Næste op-hero */
.naeste-v2{column-span:all;position:relative;overflow:hidden;display:flex;
  align-items:center;gap:22px;flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  -webkit-backdrop-filter:blur(16px) saturate(1.35);
  backdrop-filter:blur(16px) saturate(1.35);
  border:1px solid rgba(255,255,255,.85);border-radius:24px;padding:18px 22px;
  box-shadow:0 16px 36px -18px rgba(20,72,77,.3);margin-bottom:14px;
  animation:glødPuls 3.2s ease-in-out infinite}
@keyframes glødPuls{0%,100%{box-shadow:0 0 0 0 rgba(226,96,79,0),0 16px 36px -18px rgba(20,72,77,.3)}
  50%{box-shadow:0 0 0 6px rgba(226,96,79,.12),0 16px 36px -18px rgba(20,72,77,.3)}}
.naeste-v2 .n-ring{flex:none;position:relative;width:74px;height:74px}
.naeste-v2 .n-ring svg{transform:rotate(-90deg)}
.naeste-v2 .n-mid{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.naeste-v2 .n-min{font-size:19px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.naeste-v2 .n-efter{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:8px;letter-spacing:.12em;color:var(--svag);margin-top:2px}
.naeste-v2 .n-etiket{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.14em;color:var(--svag)}
.naeste-v2 h2{margin:4px 0 0;font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-.02em}
.naeste-v2 .n-linje2{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
.naeste-v2 .n-chip{display:inline-flex;align-items:center;gap:6px;
  background:color-mix(in srgb,var(--nFarve,#E2604F) 12%,#fff);
  border:1px solid color-mix(in srgb,var(--nFarve,#E2604F) 26%,#fff);
  color:color-mix(in srgb,var(--nFarve,#E2604F) 75%,#20282A);
  font-size:11.5px;font-weight:750;padding:4px 10px;border-radius:999px}
.naeste-v2 .n-chip i{width:7px;height:7px;border-radius:50%;background:var(--nFarve,#E2604F)}
.naeste-v2 .n-meta{font-size:12.5px;color:var(--tekst)}
.naeste-v2 .n-sek{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:10.5px;color:var(--svag);margin-top:7px;font-variant-numeric:tabular-nums;flex-basis:100%}
.naeste-v2 .n-prik{width:8px;height:8px;border-radius:50%;background:var(--nFarve,#E2604F);
  animation:blip 2s ease-in-out infinite}

/* sol-bue i vejret */
.vejr .solbue{margin-top:4px}

/* tidslinje i børne-skemakortene */
.spor-kort{position:relative}
.spor-kort .time{position:relative;padding-left:18px}
.spor-kort .time::before{content:"";position:absolute;left:6px;top:0;bottom:0;
  width:2px;background:var(--ui-kant,#E2EAEA)}
.spor-kort .time:first-of-type::before{top:12px}
.spor-kort .time:last-of-type::before{bottom:auto;height:12px}
.spor-kort .time::after{content:"";position:absolute;left:1.5px;top:8px;width:9px;height:9px;
  border-radius:50%;background:#fff;border:2.5px solid var(--sporFarve,#16565C)}
.spor-kort .time.forbi{opacity:.5}
.spor-kort .time.nueste .kl{color:var(--sporFarve);font-weight:700}
.spor-kort .time.nueste::after{background:var(--sporFarve);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--sporFarve) 18%,transparent)}
.spor-kort .nu-linje{display:flex;align-items:center;gap:5px;position:relative;z-index:2;
  border-top:2px dashed #B4690E;margin:3px 6px 3px 2px;padding-top:4px}
.spor-kort .nu-linje .dot{width:8px;height:8px;border-radius:50%;background:#B4690E;
  animation:blip 1.6s ease-in-out infinite;flex:none}
.spor-kort .nu-linje .tekst{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:8.5px;font-weight:700;letter-spacing:.08em;color:#B4690E;
  background:rgba(241,245,244,.92);padding:1px 5px;border-radius:6px}

/* husk-prik på det der haster i dag */
.kort .raekke{position:relative}
.husk-ring{position:absolute;left:-4px;top:-4px;width:10px;height:10px;border-radius:50%;
  background:#B4690E;animation:blip 1.8s ease-in-out infinite;z-index:2}

/* ==========================================================================
   I dag: børnenes skemakort side om side
   app-look.js samler de to kort i .skema-par — her står de lige højt
   ved siden af hinanden over hele bredden; på smalle skærme under
   hinanden som alt andet.
   ========================================================================== */
.skema-par{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.skema-par > section.kort{margin:0}
.skema-par > section.kort:only-child{grid-column:1/-1}
@media (max-width:760px){.skema-par{grid-template-columns:1fr}}

/* ==========================================================================
   v8 — kontaktbogen (Skriv til skolen)
   En aaben noteside: cremet pergament med roed dobbeltmargen, stansede
   huller, washi-tape i toppen og sider staklet under den oeverste.
   Skrivefeltet er linjeret, modtagerne er frimaerker, og send-knappen
   er et roet vokssegl. Blyanten (app-look.js) skriver med, mens man taster.
   ========================================================================== */

/* selve siden — pergament, huller og roed margen */
body[data-appfane="beskeder"] .skaerm.smal:has(.skrivfelt){
  position:relative;border-radius:14px;padding:30px 24px 42px 64px;
  margin-top:16px;
  background:
    radial-gradient(circle 7px at 27px 18%,#D8CEB4 0 4.5px,rgba(96,74,38,.3) 5.5px,transparent 7px),
    radial-gradient(circle 7px at 27px 50%,#D8CEB4 0 4.5px,rgba(96,74,38,.3) 5.5px,transparent 7px),
    radial-gradient(circle 7px at 27px 82%,#D8CEB4 0 4.5px,rgba(96,74,38,.3) 5.5px,transparent 7px),
    linear-gradient(90deg,transparent 41px,rgba(206,74,55,.52) 41px,rgba(206,74,55,.52) 42.5px,transparent 42.5px),
    linear-gradient(90deg,transparent 46.5px,rgba(206,74,55,.52) 46.5px,rgba(206,74,55,.52) 48px,transparent 48px),
    radial-gradient(120% 70% at 50% 0%,rgba(255,253,244,.7),transparent 55%),
    radial-gradient(90% 60% at 100% 100%,rgba(122,92,42,.12),transparent 60%),
    radial-gradient(70% 50% at 0% 100%,rgba(122,92,42,.08),transparent 55%),
    linear-gradient(180deg,#FCF7E9,#F6EDD8);
  /* siderne staklet under den oeverste */
  box-shadow:
    0 1px 1px rgba(96,74,38,.16),
    0 6px 0 -2px #F1E7CE,0 8px 2px -2px rgba(96,74,38,.1),
    0 12px 0 -4px #E9DDBE,0 14px 2px -4px rgba(96,74,38,.1),
    0 28px 46px -20px rgba(74,56,26,.45)}

/* washi-tapen der holder siden fast */
body[data-appfane="beskeder"] .skaerm.smal:has(.skrivfelt)::before{
  content:"";position:absolute;top:-11px;left:50%;width:112px;height:26px;z-index:2;
  transform:translateX(-50%) rotate(-2.4deg);
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.26) 0 5px,transparent 5px 10px),
    linear-gradient(180deg,rgba(232,196,110,.6),rgba(228,190,104,.48));
  border-left:1px dashed rgba(255,255,255,.55);border-right:1px dashed rgba(255,255,255,.55);
  box-shadow:0 2px 5px rgba(96,74,38,.18)}

/* alt indhold ligger direkte paa siden — ingen hvide kort */
body[data-appfane="beskeder"] .skaerm.smal:has(.skrivfelt) section.kort{
  position:relative;background:transparent;border:0;box-shadow:none;
  padding:0;margin-bottom:22px;border-radius:0}

/* overskrifterne som notater i blaek */
body[data-appfane="beskeder"] .skaerm.smal:has(.skrivfelt) .kort h2{
  display:inline-block;font-family:'Source Serif 4',Georgia,serif;font-style:italic;
  font-size:16.5px;font-weight:600;letter-spacing:0;text-transform:none;color:#7A6742;
  padding-bottom:2px;margin-bottom:10px;border-bottom:1.5px solid rgba(122,103,66,.32)}
body[data-appfane="beskeder"] .skaerm.smal:has(.skrivfelt) .kort .fod{color:#A08F6C}
body[data-appfane="beskeder"] .skaerm.smal:has(.skrivfelt) .kort .lille{color:#8A7B5E}
body[data-appfane="beskeder"] .skaerm.smal:has(.skrivfelt) .tom{color:#8A7B5E}
body[data-appfane="beskeder"] .skaerm.smal:has(.skrivfelt) .tom b{color:#6B5B3E}
body[data-appfane="beskeder"] .skaerm.smal:has(.skrivfelt) header.top .uge{color:#A08F6C}
body[data-appfane="beskeder"] .skaerm.smal:has(.skrivfelt) .tilbage{color:#A8392B}

/* selve skrivefeltet: linjeret som en noteside, teksten hviler paa linjerne */
body[data-appfane="beskeder"] .skrivfelt{
  background:repeating-linear-gradient(180deg,transparent 0 27px,rgba(122,146,170,.35) 27px 28px);
  background-position:0 14px;background-color:transparent;
  border:0;box-shadow:none;resize:vertical;min-height:196px;
  padding:5px 4px 4px;font-size:15.5px;line-height:28px;color:#2B3A4E;
  caret-color:#2B3A4E;max-width:100%}
body[data-appfane="beskeder"] .skrivfelt:focus{
  border-color:transparent;background-color:rgba(255,253,246,.45)}
body[data-appfane="beskeder"] .skrivfelt::placeholder{color:#A79B80;font-style:italic}
body[data-appfane="beskeder"] .skaerm.smal:has(.skrivfelt) .tael{color:#A08F6C;text-align:right}

/* blyanten der skriver med (lægges i af app-look.js) */
.kontakt-blyant{position:absolute;top:-16px;right:24px;width:66px;height:66px;z-index:3;
  pointer-events:none;filter:drop-shadow(0 7px 10px rgba(96,74,38,.4));
  transform:rotate(36deg);transition:transform .3s var(--let)}
.kontakt-blyant.skriver{animation:skrivMed .32s ease-in-out infinite}
@keyframes skrivMed{0%,100%{transform:rotate(36deg) translate(0,0)}
  50%{transform:rotate(36deg) translate(-5px,3px)}}

/* Hurtigt-chips som faneblade i papiret */
body[data-appfane="beskeder"] .skaerm.smal:has(.skrivfelt) [data-hurtig]{
  background:#FFFDF4;border:1px solid #E4DCC8;border-bottom:3px solid #C14B3C;
  border-radius:7px 7px 3px 3px;font-size:12px;font-weight:700;color:#5C5240;
  box-shadow:0 4px 10px -5px rgba(96,74,38,.4);transform:rotate(var(--tabv,0deg))}
body[data-appfane="beskeder"] .skaerm.smal:has(.skrivfelt) [data-hurtig]:nth-child(odd){--tabv:-1.2deg}
body[data-appfane="beskeder"] .skaerm.smal:has(.skrivfelt) [data-hurtig]:nth-child(even){--tabv:1.1deg}

/* modtagerne som frimaerker — valgt faar poststemplets roede */
body[data-appfane="beskeder"] .skaerm.smal:has(.skrivfelt) .modtager{
  background:#FFFDF4;border:1.5px dashed rgba(122,103,66,.55);border-radius:4px;
  color:#5C5240;font-weight:650;transform:rotate(-1.2deg);
  box-shadow:0 4px 10px -5px rgba(96,74,38,.45)}
body[data-appfane="beskeder"] .skaerm.smal:has(.skrivfelt) .modtager:nth-child(2n){transform:rotate(1.1deg)}
body[data-appfane="beskeder"] .skaerm.smal:has(.skrivfelt) .modtager[aria-pressed="true"]{
  background:#A8392B;border:1.5px solid #A8392B;color:#FDF6E3;transform:rotate(.6deg)}

/* boerne-chips som blaek paa papir */
body[data-appfane="beskeder"] .skaerm.smal:has(.skrivfelt) [data-skrivbarn].chip{
  background:#FFFDF4;border-color:#DED3B8;color:#5C5240}
body[data-appfane="beskeder"] .skaerm.smal:has(.skrivfelt) [data-skrivbarn].chip.valgt{
  background:#4A3F2A;border-color:#4A3F2A;color:#F7EFDB}

/* send-knappen som roet vokssegl */
body[data-appfane="beskeder"] .skaerm.smal:has(.skrivfelt) #gennemse{
  border-radius:999px!important;
  background:radial-gradient(circle at 34% 30%,#C45543,#8E2F1D 74%)!important;
  box-shadow:0 12px 24px -9px rgba(126,35,24,.55),
    inset 0 0 0 3px rgba(255,226,210,.2),inset 0 -7px 15px rgba(80,18,8,.35)!important;
  color:#FBEADB!important;font-weight:800;letter-spacing:.03em;padding:16px 14px}
body[data-appfane="beskeder"] .skaerm.smal:has(.skrivfelt) #gennemse:disabled{opacity:.68!important}

/* snaever skaerm: smallere margen og huller */
@media (max-width:560px){
  body[data-appfane="beskeder"] .skaerm.smal:has(.skrivfelt){
    padding:24px 14px 34px 52px;
    background:
      radial-gradient(circle 6px at 20px 18%,#D8CEB4 0 4px,rgba(96,74,38,.3) 5px,transparent 6.5px),
      radial-gradient(circle 6px at 20px 50%,#D8CEB4 0 4px,rgba(96,74,38,.3) 5px,transparent 6.5px),
      radial-gradient(circle 6px at 20px 82%,#D8CEB4 0 4px,rgba(96,74,38,.3) 5px,transparent 6.5px),
      linear-gradient(90deg,transparent 32px,rgba(206,74,55,.52) 32px,rgba(206,74,55,.52) 33.5px,transparent 33.5px),
      linear-gradient(90deg,transparent 37.5px,rgba(206,74,55,.52) 37.5px,rgba(206,74,55,.52) 39px,transparent 39px),
      radial-gradient(120% 70% at 50% 0%,rgba(255,253,244,.7),transparent 55%),
      radial-gradient(90% 60% at 100% 100%,rgba(122,92,42,.12),transparent 60%),
      radial-gradient(70% 50% at 0% 100%,rgba(122,92,42,.08),transparent 55%),
      linear-gradient(180deg,#FCF7E9,#F6EDD8)}
}

@media (prefers-reduced-motion:reduce){
  .kontakt-blyant.skriver,
  .naeste-v2,.naeste-v2 .n-prik,.husk-ring,.spor-kort .nu-linje .dot,
  .skaerm.fanex-h,.skaerm.fanex-v,
  .skaerm.fanex-h > *,.skaerm.fanex-v > *,
  .pille.fanepop svg,nav.bund .plet,.kort .fod.varsel,
  nav.bund button .pille svg,nav.bund button .pille svg *,
  nav.bund button.aktiv::before,header.top h1::after,body::before,
  body[data-fane] .dagprik.fyldt,body[data-fane] .merke,
  body[data-fane] .time .note,body[data-appfane="sport"] .kort .lille,
  .ripple,.skaerm.fanex-h .besked,.skaerm.fanex-v .besked,
  .skaerm.fanex-h .begiv,.skaerm.fanex-v .begiv,
  .skaerm.fanex-h .time,.skaerm.fanex-v .time,
  .skaerm.fanex-h .lektie,.skaerm.fanex-v .lektie,
  .skaerm.fanex-h .raekke,.skaerm.fanex-v .raekke,
  .konfetti,.gnist,body.foerste .skaerm > *,
  .skaerm > .tom:only-child::after{animation:none!important}
  #faneglider{transition:none!important}
  .kort{transition:none!important}
}

/* ==========================================================================
   v9 — kalenderen: PENSIONERET 07-08-2026
   Her laa stilen til kalenderPynt() (uge-strip, datofliser, initialer).
   Kalenderen tegnes nu helt af tavlen.js — uge-strip og tidslinje med
   symboler — og stilen bor i tavlen.css hos resten af skaermen.
   ========================================================================== */