/* ───────────────────────── Byens Musikskole — design system ───────────────────────── */
:root{
  /* Palette matcher kundens web-design (byensmusikskole-web): teal #1a5f6a · orange #e8602c */
  --teal:#1a5f6a; --teal-dark:#134852; --teal-soft:#e8f4f6;
  --cyan:#0891a0;
  --orange:#e8602c; --orange-dark:#cc4f1f; --orange-soft:#fff5eb; --orange-line:#f3cbb5;
  /* Brand-farver (præcise hex fra logoet) — bruges på forsidens nye elementer. */
  --brand-blue:#6bb4b8; --brand-blue-dark:#579a9e;
  --brand-orange:#ca5f49; --brand-orange-dark:#b14e3a;
  --brand-grey:#797e81;
  --cream:#faf5f0; --paper:#fffdfb; --white:#ffffff;           /* varm creme */
  --ink:#262626; --muted:#7a7470; --line:#e8dfd9;
  --green:#2f8f63; --green-soft:#e2f3ea;
  --red:#d2492f; --red-soft:#fce8e2;
  --amber:#c98a1e; --amber-soft:#fcf3e0;
  --blue:#0891a0; --blue-soft:#e8f4f6;
  --radius:12px; --radius-sm:9px; --shadow:0 1px 2px rgba(20,40,45,.06),0 1px 3px rgba(20,40,45,.05);
  /* Kundens design bruger Outfit (overskrifter) + Montserrat (brødtekst) */
  --serif:"Outfit","Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--cream)}
body{font-family:var(--sans);background:transparent;color:var(--ink);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
/* #72 fund 10 (Adem): den sandfarvede flade var lidt «død». Meget subtil, lavkontrast graduering —
   en anelse varmere i øverste venstre hjørne, køligere i nederste højre. Lagt i et FAST pseudo-lag
   bag indholdet (ingen repaint ved scroll, ingen background-attachment:fixed-fejl på iOS), så den
   ligger roligt under siden og aldrig forstyrrer læsbarheden. Sektioner med egen baggrund
   (--paper/--teal-soft) dækker den, præcis som før. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(78% 62% at 4% -4%, rgba(232,150,96,.13), rgba(232,150,96,0) 66%),
    radial-gradient(72% 66% at 100% 104%, rgba(26,95,106,.085), rgba(26,95,106,0) 68%);}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;color:var(--ink);margin:0 0 .4em}
h1{font-size:30px;letter-spacing:-.01em}
h2{font-size:22px}
h3{font-size:18px}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
small{color:var(--muted)}

/* ── Logo ── */
.logo-badge{display:inline-flex;align-items:center;background:#fff;border-radius:9px;padding:6px 12px;line-height:0}
.logo-badge img{height:34px;display:block}
.logo-img{display:block}
.logo-img.lg{height:74px}
.logo-img.md{height:54px}

/* ── Topbjælke ── */
.topbar{background:var(--teal);color:#fff;border-bottom:3px solid var(--orange)}
.topbar-inner{max-width:1180px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:20px}
.brand{font-family:var(--serif);font-weight:700;font-size:20px;color:#fff;display:flex;align-items:center;gap:10px}
.brand small{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);font-family:var(--sans);font-weight:600}
.topnav{display:flex;gap:4px;margin-left:8px;flex-wrap:wrap}
.topnav a{color:rgba(255,255,255,.82);padding:7px 13px;border-radius:8px;font-size:13.5px;font-weight:500}
.topnav a:hover{background:rgba(255,255,255,.1);text-decoration:none;color:#fff}
.topnav a.active{background:rgba(255,255,255,.16);color:#fff}
.nav-badge{display:inline-block;min-width:16px;height:16px;line-height:16px;padding:0 5px;margin-left:5px;border-radius:9px;background:var(--red,#d9534f);color:#fff;font-size:10.5px;font-weight:700;text-align:center;vertical-align:top}

/* ───── Custom dropdown (erstatter native <select> overalt) ───── */
/* #93 (Adem, 12-09): «hver gang jeg foretager noget i en felt, så scroller den helt op» i «Tilføj
   tilbud». Den skjulte select var pinnet left:0/top:0 (#45) — det er toppen af dens containing block,
   og på /admin/tilbud har formularen ingen positioneret forfader, så det var toppen af SIDEN. Fik den
   fokus, scrollede browseren derop. Og den FIK fokus ved hvert klik: .cs-btn ligger inde i <label>,
   og label-aktivering sender klikket videre til labelens kontrol = den skjulte select. Målt i Chrome
   på den renderede side: klik på «Lærer» → scrollY 4013 → 0.
   Nu står den på sin statiske plads (ingen left/top), dvs. lige ved siden af sin egen knap — fokus
   kan ikke længere kaste siden nogen steder hen. #45's fantom-overflow kom af at inline style
   (width:100%, min-width) og `.popfix select{width:100%}` slog width:1px; størrelsen er derfor
   låst med !important, så den usynlige select aldrig kan fylde mere end 1px, uanset hvor den står. */
select.cs-native{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;max-width:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden;clip:rect(0 0 0 0);border:0!important;opacity:0;pointer-events:none}
.cs-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;width:auto;max-width:100%;
  background:#fff;border:1px solid var(--line,#d9d2c7);border-radius:10px;padding:9px 12px;font:inherit;
  font-size:13.5px;color:var(--ink,#23201d);cursor:pointer;text-align:left;line-height:1.3;min-height:38px;vertical-align:middle}
.cs-btn.cs-full{width:100%;display:flex}
.cs-btn:hover{border-color:#bcae99}
.cs-btn.cs-open,.cs-btn:focus-visible{outline:none;border-color:var(--teal,#1f6f6b);box-shadow:0 0 0 3px rgba(31,111,107,.15)}
.cs-btn .cs-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-btn .cs-val.cs-ph{color:#9a9387}
.cs-btn .cs-arrow{flex:none;color:var(--muted,#8a8578);transition:transform .15s;font-size:11px}
.cs-btn.cs-open .cs-arrow{transform:rotate(180deg)}
.cs-panel{position:fixed;z-index:3000;background:#fff;border:1px solid var(--line,#d9d2c7);border-radius:10px;
  box-shadow:0 10px 32px rgba(0,0,0,.18);max-height:300px;overflow-y:auto;padding:5px;
  overscroll-behavior:contain;   /* rul i panelet må ikke kæde videre til siden (siden-scroll lukker panelet) */
  font-size:13.5px;color:var(--ink,#23201d)}
.cs-opt{padding:8px 11px;border-radius:7px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-opt:hover,.cs-opt.cs-active{background:var(--blue-soft,#eef4f3)}
.cs-opt.cs-sel{font-weight:700;color:var(--teal,#1f6f6b)}
.cs-opt.cs-disabled{color:#b8b2a6;cursor:not-allowed;background:none}
.cs-optgroup{padding:8px 11px 3px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted,#8a8578)}

/* ───── Indeholdt popover-panel (anker-positioneret, men altid inden for skærmen) ─────
   Brug: <details><summary>…</summary><div class="card card-pad popfix">…</div></details>
   Bredden er capped til viewporten; den lodrette plads/flip styres af JS (base.html). */
.popfix{position:absolute;right:0;top:100%;margin-top:6px;z-index:1200;
  width:min(440px,94vw);max-height:min(75vh,560px);overflow-y:auto;overflow-x:hidden;overflow-wrap:anywhere;
  box-sizing:border-box;text-align:left;box-shadow:0 10px 32px rgba(0,0,0,.18)}
.popfix-wide{width:min(640px,94vw)}
/* #45 (Adem, 3. runde): gult/rødt kort- + flyt-vinduerne klippede i højre side, fordi labels ARVEDE
   white-space:nowrap → label-teksten OG den fuldbredde-select stod på SAMME linje (målt 177px+594px=771
   > kortets 638px). Tving labels til at ombryde og form-kontrollerne (select/tekst/textarea) til at ligge
   på egen linje i fuld bredde, så intet skubbes ud til højre. Radio/checkbox/tid forbliver inline. */
.popfix,.popfix *,.flyt-ov>.card,.flyt-ov>.card *{white-space:normal}
.popfix select,.popfix textarea,.popfix input[type=text],.popfix input[type=search],
.popfix input[type=number],.popfix input[type=date],
.flyt-ov>.card select,.flyt-ov>.card textarea,.flyt-ov>.card input[type=text],
.flyt-ov>.card input[type=search]{display:block;width:100%;max-width:100%;box-sizing:border-box;margin-top:4px}
/* #45 (Adem): «Flyt» er en ægte centreret overlay-modal (samme mønster som app'ens øvrige overlays) —
   flex-centreret fuldskærms-lag med backdrop + rullbart hvidt kort, så tabellen ALDRIG kan beskære det
   og hele teksten kan ses. Klik uden for kortet lukker. Tid-feltet får fast bredde (flyder ikke ud). */
.flyt-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;
  align-items:center;justify-content:center;padding:20px;overflow:auto}
.flyt-ov>.card{width:min(640px,94vw);max-height:88vh;overflow-y:auto;overflow-x:hidden;text-align:left}
/* #162: vindueseditoren (bookbare tider) har dag/fra/til på én linje — ikke fuldbredde-felter som «Flyt». */
.tider-ov>.card select{display:inline-block;width:auto;margin-top:0}
.flyt-ov>.card,.flyt-ov>.card *{max-width:100%}
.flyt-ov>.card label,.flyt-ov>.card p,.flyt-ov>.card span{overflow-wrap:anywhere}
.flyt-ov input[type=time]{width:auto;max-width:180px}
.flyt-ov select{width:100%;max-width:100%;box-sizing:border-box}
.popfix input,.popfix select,.popfix textarea{max-width:100%;box-sizing:border-box}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13px;color:rgba(255,255,255,.85)}
.topbar-right a{color:rgba(255,255,255,.85)}
.role-chip{background:rgba(255,255,255,.14);padding:4px 11px;border-radius:20px;font-size:12px;font-weight:600;letter-spacing:.02em}

/* ── Layout ── */
.wrap{max-width:1180px;margin:0 auto;padding:28px 24px 60px}
.wrap-narrow{max-width:760px}
.page-head{margin-bottom:22px}
.page-head .eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:4px}
.muted{color:var(--muted)}
.row{display:flex;gap:18px;flex-wrap:wrap}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}.topnav{display:none}}
/* #132 (Adem 21/9): «lærerne … kan ikke se menuen, når de åbner siden på telefonen». Portal-menuen blev skjult under
   900 px uden en vej til den. Nu: en ☰-knap i topbjælken, som folder menuen ud som en lodret liste under bjælken.
   Topbjælken bryder samtidig om: logo og knap på første linje, navn/sæson/log ud på linjen under. */
.portal-burger{display:none;border:0;background:transparent;color:#fff;cursor:pointer;
  font-size:26px;line-height:1;padding:4px 10px;border-radius:8px}
.portal-burger:hover,.portal-burger:focus-visible{background:rgba(255,255,255,.16)}
/* #215: ulæste beskeder på selve ☰-knappen (telefonen), så de ses uden at åbne menuen. */
.portal-burger{position:relative}
.burger-badge{position:absolute;top:-2px;right:-4px;margin-left:0}
@media(max-width:900px){
  .topbar{position:relative}
  .topbar-inner{flex-wrap:wrap;gap:10px 14px;padding:10px 16px}
  .portal-burger{display:inline-flex;order:2;margin-left:auto}
  .topbar-right{order:3;width:100%;margin-left:0;flex-wrap:wrap;gap:8px 14px}
  .topnav.open{display:flex;flex-direction:column;gap:2px;position:absolute;top:100%;left:0;right:0;z-index:70;
    margin:0;padding:8px 12px 12px;background:var(--teal);border-bottom:3px solid var(--orange);
    box-shadow:0 14px 28px rgba(0,0,0,.2)}
  .topnav.open a{font-size:16px;padding:12px 10px}
}
@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ── Kort ── */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-pad{padding:20px 22px}
.card h2,.card h3{margin-top:0}
.card-head{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-head.teal{background:var(--teal);color:#fff;border:0;border-radius:var(--radius) var(--radius) 0 0}
.card-head.teal h3{color:#fff}

/* ── Stat-kort ── */
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.stat .label{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.stat .value{font-family:var(--serif);font-size:30px;font-weight:700;margin-top:6px;line-height:1}
.stat .sub{font-size:12.5px;color:var(--muted);margin-top:6px}
.stat.green .value{color:var(--green)} .stat.amber .value{color:var(--amber)}
.stat.red .value{color:var(--red)} .stat.teal .value{color:var(--teal)}

/* ── Knapper ── */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:9px;padding:11px 20px;font-family:var(--sans);font-size:14.5px;font-weight:600;cursor:pointer;text-decoration:none;transition:.12s}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-dark);text-decoration:none;color:#fff}
.btn-primary:disabled{background:var(--orange-line);cursor:not-allowed}
.btn-teal{background:var(--teal);color:#fff}.btn-teal:hover{background:var(--teal-dark);color:#fff;text-decoration:none}
.btn-ghost{background:var(--white);color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--muted);text-decoration:none}
.btn-green{background:var(--green);color:#fff}.btn-green:hover{color:#fff;text-decoration:none;filter:brightness(.95)}
.btn-sm{padding:7px 13px;font-size:13px}
.btn-block{width:100%;justify-content:center}

/* ── Badges / status-pills ── */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap}
.pill.dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill-pending{background:var(--amber-soft);color:var(--amber)}
.pill-paid{background:var(--green-soft);color:var(--green)}
.pill-failed{background:var(--red-soft);color:var(--red)}
.pill-teal{background:var(--teal-soft);color:var(--teal)}
.pill-orange{background:var(--orange-soft);color:var(--orange-dark)}
.pill-blue{background:var(--blue-soft);color:var(--blue)}
.tag{display:inline-block;padding:2px 9px;border-radius:6px;background:var(--teal-soft);color:var(--teal);font-size:11.5px;font-weight:600;margin:1px}

/* ── Tabeller ── */
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:10px 14px;border-bottom:1px solid var(--line)}
tbody td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover{background:var(--paper)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.amount{font-weight:700;font-variant-numeric:tabular-nums}

/* ── Forms ── */
label.fld{display:block;margin-bottom:14px}
label.fld .lbl{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=month],input[type=time],input[type=tel],input[type=search],input[type=number],input:not([type]),select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-family:var(--sans);font-size:14.5px;background:var(--white);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
/* #154 pkt. 2 (Adem 27/9): «check box er meget lille». Safari krymper et afkrydsningsfelt i en flex-række, når teksten ved
   siden af er lang (KKFO-samtykket blev en prik). Feltet må aldrig krympe, og i tilmeldingen er det stort nok til en finger. */
input[type=checkbox],input[type=radio]{flex:none}
.afkryds{display:flex;gap:10px;align-items:flex-start;cursor:pointer;line-height:1.45}
.afkryds input[type=checkbox]{width:22px;height:22px;margin:0}
/* #154 (Adems skærmbillede: alt ca. 10 % for stort og højre kant skåret af): iPhone zoomer ind, når man trykker i et felt
   med skrift under 16 px, og bliver stående zoomet. Felterne har 14,5 px → 16/14,5 ≈ 1,10. På touch-skærme får de 16 px. */
@media (hover:none) and (pointer:coarse){
  input[type=text],input[type=email],input[type=password],input[type=date],input[type=month],input[type=time],input[type=tel],input[type=search],input[type=number],input:not([type]),select,textarea{font-size:16px}
}
/* Fjern browserens autofyld-ikon (👤) i tekstfelter, så de matcher resten af designet */
input::-webkit-contacts-auto-fill-button,input::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important;pointer-events:none;height:0;width:0;margin:0}
.req{color:var(--orange)}

/* ── Flash ── */
.flash{padding:12px 16px;border-radius:9px;margin-bottom:16px;font-size:14px;font-weight:500}
.flash.error{background:var(--red-soft);color:var(--red)}
.flash.ok{background:var(--green-soft);color:var(--green)}
.notice{background:var(--amber-soft);border:1px solid #f0dcae;color:#8a6516;padding:12px 16px;border-radius:9px;font-size:13.5px;display:flex;gap:10px;align-items:flex-start}
.info-box{background:var(--blue-soft);border:1px solid #cfe0f0;color:#2c4a68;padding:12px 16px;border-radius:9px;font-size:13.5px}

/* ── Divider ── */
.hr{height:1px;background:var(--line);border:0;margin:18px 0}

/* ── Login ── */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
@media(max-width:820px){.login-wrap{grid-template-columns:1fr}.login-art{display:none}}
.login-art{background:var(--teal);color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:center}
.login-art h1{color:#fff;font-size:38px;line-height:1.15}
.login-art p{color:rgba(255,255,255,.8);font-size:16px;max-width:380px}
.login-form{display:flex;align-items:center;justify-content:center;padding:40px}
.login-card{width:100%;max-width:380px}
.demo-acct{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:8px;margin-bottom:8px;font-size:13px;cursor:pointer;background:var(--paper)}
.demo-acct:hover{border-color:var(--teal)}

/* ═══════════ Offentlig marketing-forside (matcher kundens web) ═══════════ */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,253,251,.92);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.site-header-inner{max-width:1180px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:18px}
.site-nav{display:flex;gap:3px;margin-left:auto;flex-wrap:wrap;align-items:center}
.site-nav a{color:var(--ink);padding:9px 14px;border-radius:8px;font-size:15.5px;font-weight:600}
.site-nav a:hover{background:var(--teal-soft);color:var(--teal);text-decoration:none}
.btn-cta{background:var(--orange);color:#fff;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.btn-cta:hover{background:var(--orange-dark);color:#fff;text-decoration:none}
#m-cta{display:none}
.nav-burger{display:none;border:0;background:transparent;cursor:pointer;color:var(--ink);
  font-size:26px;line-height:1;padding:4px 10px;border-radius:8px}
.nav-burger:hover{background:var(--teal-soft)}
/* Punkt 5: under 900px kollapser menuen til en burger der folder en lodret menu ud. */
@media(max-width:900px){
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(255,253,251,.98);backdrop-filter:saturate(1.2) blur(10px);
    border-bottom:1px solid var(--line);padding:8px 16px 12px;box-shadow:0 14px 28px rgba(0,0,0,.1)}
  .site-nav.open{display:flex}
  .site-nav a{width:100%;font-size:17px;padding:13px 10px}
  .site-nav .btn-cta{margin-top:6px;text-align:center}
  #m-cta{display:inline-flex;margin-left:auto}
  .nav-burger{display:inline-flex}
}

/* Admin "rediger her"-genvej (kun synlig for admin på forsiden → deep-link til admin) */
.admin-edit{display:inline-block;margin-left:10px;font-size:12px;font-weight:700;color:#fff;vertical-align:middle;
  background:var(--orange,#ca5f49);border-radius:999px;padding:3px 11px;text-decoration:none;box-shadow:var(--shadow)}
.admin-edit:hover{background:var(--orange-dark,#b04a36);color:#fff;text-decoration:none}
.hero-carousel > .admin-edit{position:absolute;top:90px;right:16px;z-index:5;margin:0}
/* Flydende "rediger siden"-knap på undersider (kun admin). */
.admin-edit-fab{position:fixed;right:18px;bottom:18px;z-index:60;margin:0;font-size:13px;font-weight:700;
  color:#fff;background:var(--orange,#ca5f49);border-radius:999px;padding:10px 16px;text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.22)}
.admin-edit-fab:hover{background:var(--orange-dark,#b04a36);color:#fff;text-decoration:none}
/* Deep-link mål i Indstillinger: scroll pænt forbi sticky-top + kort fremhævning. */
.set-anchor{scroll-margin-top:80px}
.set-anchor:target{background:var(--orange-soft,#fceae5);border-radius:8px;padding:6px 8px;
  box-shadow:0 0 0 3px var(--orange,#ca5f49);animation:setflash 2s ease 1}
@keyframes setflash{0%{box-shadow:0 0 0 4px var(--orange,#ca5f49)}100%{box-shadow:0 0 0 3px transparent}}

/* Hero-karrusel: høj (stor viewport-andel) så billederne beskæres pænere; statistik-båndet
   overlapper stadig via sit -46px margin. Fokuspunkt mod toppen (cover) → ansigter skæres ikke af. */
.hero-carousel{position:relative;height:clamp(480px,82vh,800px);overflow:hidden}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center 28%;opacity:0;transition:opacity 1s ease}
.hero-slide.on{opacity:1}
.hero-carousel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,72,82,.25),rgba(19,72,82,.62))}
.hero-content{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:24px}
.hero-content h1{color:#fff;font-size:clamp(34px,6vw,64px);text-shadow:0 2px 20px rgba(0,0,0,.3);margin:0 0 18px}
.hero-dots{position:absolute;bottom:18px;left:0;right:0;z-index:3;display:flex;gap:8px;justify-content:center}
.hero-dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer}
.hero-dots button.on{background:#fff}
/* Mobil: hold hero høj nok til pæn beskæring, men ikke uforholdsmæssigt høj. */
@media(max-width:600px){ .hero-carousel{height:clamp(420px,66vh,560px)} .hero-slide{background-position:center 22%} }

/* Statistik-banner */
/* Statistik-bånd: brand-blå, og overlapper snittet mellem to sektioner (rager op i
   hero og ned i den hvide sektion) via negativ margin + flydende kort-look. */
.stats-band{position:relative;z-index:6;margin:-46px auto 0;max-width:1120px;
  background:var(--brand-blue);color:#fff;border-radius:18px;
  box-shadow:0 16px 40px rgba(19,72,82,.22)}
.stats-band .row{margin:0 auto;padding:26px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:18px;text-align:center}
/* Tallet står midt over sin tekst. Båndet genbruger klassen .num, som i tabeller er højrestillet
   (talkolonner) — og en ARVET text-align fra .row taber til enhver regel, der rammer .num direkte.
   Derfor siger båndet det selv (Denis 20/9: «de her skal vel centreres over teksten»). */
.stats-band .num{font-family:var(--serif);font-size:clamp(28px,4vw,42px);font-weight:800;color:#fff;
  text-align:center}
.stats-band .lbl{font-size:13px;opacity:.9;margin-top:2px}
@media(max-width:780px){.stats-band{margin-left:16px;margin-right:16px}}
@media(max-width:600px){.stats-band .row{grid-template-columns:repeat(2,1fr);gap:22px}}

/* Tilmeld-modal: vælg et undervisningstilbud (åbnes af alle Tilmeld-knapper). */
.em-overlay{display:none;position:fixed;inset:0;background:rgba(19,72,82,.5);z-index:120;
  align-items:center;justify-content:center;padding:16px}
.em-overlay.on{display:flex}
.em-modal{background:#fff;border-radius:16px;width:100%;max-width:720px;max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.em-head{background:var(--brand-blue);color:#fff;padding:18px 22px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.em-head h3{color:#fff;margin:0;font-size:20px}
.em-head p{margin:4px 0 0;font-size:13.5px;opacity:.92}
.em-x{background:none;border:0;color:#fff;font-size:24px;cursor:pointer;line-height:1}
.em-body{padding:18px 22px;overflow-y:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:560px){.em-body{grid-template-columns:1fr}}
.em-card{display:flex;gap:12px;align-items:center;border:2px solid var(--line);border-radius:12px;
  padding:10px;cursor:pointer;transition:.15s;background:#fff}
.em-card:hover{border-color:var(--brand-blue)}
.em-card.sel{border-color:var(--brand-blue);background:var(--brand-blue);background:rgba(107,180,184,.12)}
.em-card input{accent-color:var(--brand-blue);flex:none}
.em-card .em-img{width:54px;height:54px;border-radius:9px;background-size:cover;background-position:center;flex:none;
  background-color:var(--brand-blue);display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px}
.em-card .em-nm{font-weight:700;font-size:14px;color:var(--ink)}
.em-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;align-items:center}
.em-sted{margin-right:auto;font-weight:600;color:var(--teal);text-decoration:underline;text-underline-offset:3px;padding:8px 2px}
.btn-brand{background:var(--brand-orange);color:#fff}
.btn-brand:hover{background:var(--brand-orange-dark);color:#fff;text-decoration:none}
.btn-brand:disabled{opacity:.5;cursor:not-allowed}

/* Om-os: to billeder der glider ind fra hver sin side når sektionen kommer i view. */
.about-imgs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.about-imgs img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);object-fit:cover;aspect-ratio:4/3}
.slide-in{opacity:0;transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity .8s ease}
.slide-in.from-left{transform:translateX(-60px)}
.slide-in.from-right{transform:translateX(60px)}
.slide-in.in{opacity:1;transform:none}
@media(max-width:760px){.about-imgs{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.slide-in{opacity:1!important;transform:none!important;transition:none}}

/* SoMe-kort: Facebook / Instagram / YouTube. */
.some-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}
@media(max-width:760px){.some-grid{grid-template-columns:1fr}}
.some-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column}
.some-card .some-top{padding:16px 18px;display:flex;align-items:center;gap:10px;color:#fff;font-weight:700}
.some-card .some-body{padding:16px 18px;font-size:14px;color:var(--muted);flex:1;display:flex;flex-direction:column;gap:12px}
.some-fb .some-top{background:#1877f2}.some-ig .some-top{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}.some-yt .some-top{background:#ff0000}

/* Sektioner */
.section{max-width:1180px;margin:0 auto;padding:64px 24px}
.section h2{font-size:clamp(26px,3.4vw,38px);text-align:center}
.section .lead{text-align:center;color:var(--muted);max-width:640px;margin:0 auto 36px;font-size:16px}
.eyebrow-c{text-align:center;color:var(--orange);font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:12px;margin-bottom:6px}

/* Kursus-kort med billede */
.course-card{overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);transition:.18s}
.course-card:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(20,40,45,.12);text-decoration:none}
.course-card .img{height:170px;background-size:cover;background-position:center}
.course-card .body{padding:18px 20px}
.course-card h3{margin:0 0 6px}
.course-card .body p{color:var(--muted);font-size:14px;margin:0 0 10px}

/* Lærer-kort */
.teacher-card{text-align:center}
.teacher-card .avatar{width:140px;height:140px;border-radius:50%;object-fit:cover;margin:0 auto 12px;border:4px solid var(--white);box-shadow:0 4px 16px rgba(20,40,45,.14)}
.teacher-card .tname{font-weight:700;color:var(--ink)}
.teacher-card .ttitle{font-size:13px;color:var(--orange);font-weight:600}

/* About split */
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about-split img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}
@media(max-width:760px){.about-split{grid-template-columns:1fr}}

/* YouTube */
.video-wrap{max-width:880px;margin:0 auto;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 30px rgba(20,40,45,.18)}
.video-wrap iframe{width:100%;height:100%;border:0}

/* Footer */
.site-footer{background:var(--teal-dark);color:rgba(255,255,255,.82);margin-top:0}
.site-footer .row{max-width:1180px;margin:0 auto;padding:48px 24px 28px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
.site-footer h4{color:#fff;font-size:15px;margin-bottom:12px}
.site-footer a{color:rgba(255,255,255,.82);display:block;padding:3px 0;font-size:14px}
.site-footer a:hover{color:#fff}
.site-footer .bottom{border-top:1px solid rgba(255,255,255,.12);text-align:center;padding:16px;font-size:12.5px;color:rgba(255,255,255,.6)}
@media(max-width:700px){.site-footer .row{grid-template-columns:1fr}}

/* ── Hero / forside (gammel, beholdt til evt. brug) ── */
.hero{background:var(--teal);color:#fff;padding:64px 24px;text-align:center}
.hero h1{color:#fff;font-size:42px}
.hero p{color:rgba(255,255,255,.82);font-size:17px;max-width:560px;margin:0 auto 22px}
.type-card{overflow:hidden}
.type-card .body{padding:18px 20px}
.type-card .hero-img{height:120px;background:linear-gradient(120deg,var(--teal),var(--cyan));display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);font-size:34px}

/* ── Step-indikator (tilmeldingsflow) ── */
.enroll-layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
@media(max-width:820px){.enroll-layout{grid-template-columns:1fr}}
.enroll-side{background:var(--teal);color:#fff;padding:0}
.enroll-side .side-head{padding:24px;background:var(--teal-dark)}
.enroll-side .side-head .eyebrow{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.65}
.enroll-side .side-head h2{color:#fff;margin:2px 0 0;font-size:24px}
.steps{padding:18px}
.step{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:8px;color:rgba(255,255,255,.7);font-size:14px}
.step .dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:rgba(255,255,255,.15);flex:0 0 auto}
.step.done{color:#fff}.step.done .dot{background:#fff;color:var(--teal)}
.step.active{background:rgba(255,255,255,.1);color:#fff}.step.active .dot{background:var(--orange);color:#fff}
.enroll-cart{margin:14px;padding:14px;background:rgba(255,255,255,.07);border-radius:10px;font-size:13px}
.enroll-main{padding:36px 40px;display:flex;flex-direction:column}
/* #119 (Adem 18/9): på en smal skærm stod hele den grønne trinliste + kurven øverst, og formularen lå under
   folden efter hvert «Fortsæt». Nu: ÉN trin-linje med en fremdriftsbjælke; resten bag en fold. */
.enroll-m{display:none}
.enroll-m>summary{list-style:none;cursor:pointer;padding:12px 16px 12px;display:block}
.enroll-m>summary::-webkit-details-marker{display:none}
.enroll-m-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.enroll-m-step{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;font-weight:700}
.enroll-m-label{font-size:16px;color:#fff}
.enroll-m-bar{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.18);margin:8px 0 6px;overflow:hidden}
.enroll-m-bar>i{display:block;height:100%;background:var(--orange);border-radius:2px}
.enroll-m-more{font-size:12.5px;opacity:.8;text-decoration:underline;text-underline-offset:3px}
.enroll-m-more::after{content:" ▾"}
.enroll-m[open] .enroll-m-more::after{content:" ▴"}
@media(max-width:820px){
  .enroll-m{display:block}
  .enroll-d{display:none}
  .enroll-side .side-head{padding:14px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .enroll-side .side-head .logo-badge{margin-bottom:0 !important}
  .enroll-side .side-head h2{font-size:18px;margin:0}
  .enroll-side .side-head>div{margin-top:0 !important;font-size:12px}
  .enroll-main{padding:20px 16px}
}
.enroll-main .inner{max-width:680px;width:100%;margin:0 auto;flex:1}
/* #70: trin 1 «Vælg undervisning» viser den fulde hold-visning (filtre + kort) → bredere spalte */
.enroll-main .inner.inner-wide{max-width:1100px}
.enroll-foot{max-width:680px;margin:24px auto 0;width:100%;display:flex;justify-content:space-between}
/* #72 fund 9 (forslag til Adem): «Fortsæt →» klæber til bunden af skærmen. Iben nåede aldrig ned til
   den, fordi valgkortene ovenfor lignede den primære handling. Kun på tilmeldingens SMALLE trin —
   trin 1 («Vælg undervisning») er en bred kort+liste-visning uden «Fortsæt», hvor en klæbende
   680px-stribe blot ville ligge oven på holdene. */
.enroll-main:not(:has(.inner-wide)) .enroll-foot{position:sticky;bottom:0;background:var(--cream);
  padding:12px 0;box-shadow:0 -10px 18px -14px rgba(20,40,45,.35)}

/* Kun for skærmlæsere (fx <legend> der ikke skal ses visuelt) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* selectable cards */
.choice{border:1.5px solid var(--line);border-radius:11px;padding:16px 18px;cursor:pointer;display:block;margin-bottom:10px;background:var(--white)}
.choice:hover{border-color:var(--orange-line)}
.choice.sel{border-color:var(--orange);background:var(--orange-soft)}
.choice .t{font-weight:700;display:block}
.choice .d{font-size:13px;color:var(--muted);display:block}
/* #70: valgkortene bærer nu en ægte radio (virker uden JS + med tastatur). Selve knappen
   skjules visuelt — kortets ramme er markeringen — men beholder fokus-ringen. */
.choice .who-radio{position:absolute;opacity:0;width:1px;height:1px}
.choice:has(.who-radio:focus-visible){outline:2px solid var(--orange);outline-offset:2px}
.choice:has(.who-radio:disabled){cursor:not-allowed}
/* #72 fund 9 (forslag til Adem): kortene bar ingen synlig markør, så et forvalgt kort med orange
   ramme lignede en KNAP («+ Tilmeld et nyt barn») — Iben klikkede, der skete intet synligt, og hun
   fandt aldrig «Fortsæt». En rigtig radio-prik gør det tydeligt at kortet er et VALG: den er fyldt
   når kortet er valgt, tom når det ikke er. */
.choice-pick{position:relative;padding-left:52px}
.choice-pick::before{content:"";position:absolute;left:19px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;border:2px solid var(--line);background:#fff;transition:.12s}
.choice-pick.sel::before{border-color:var(--orange);background:var(--orange);box-shadow:inset 0 0 0 4px #fff}
/* #136 (Adem 23/9): «Jeg trykker på "+ Tilmeld nyt barn" hver gang» — det forvalgte kort så ikke valgt nok ud. Mærkatet
   er nu et tydeligt «✓ VALGT» (hvid på #b8441a = 5,4:1; --orange-dark gav 4,46), og «Fortsæt» står lige under valgene. */
.choice-pick .pick-tag{float:right;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:#b8441a;border-radius:999px;padding:3px 10px;margin-left:8px;opacity:0}
.choice-pick .pick-tag::before{content:"✓ "}
.choice-pick.sel .pick-tag{opacity:1}
.hvem-videre{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}

.slot{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:10px;padding:13px 16px;margin-bottom:9px;cursor:pointer;background:var(--white)}
.slot:hover{border-color:var(--orange-line)}
.slot.sel{border-color:var(--green);background:var(--green-soft)}
.slot.booked{opacity:.45;cursor:not-allowed;background:var(--paper)}

/* pager */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-top:1px solid var(--line)}

/* calendar */
.cal{width:100%;border-collapse:collapse;table-layout:fixed}
.cal th{text-align:center;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px;border:0}
.cal td{border:1px solid var(--line);height:96px;vertical-align:top;padding:6px;width:14.28%}
.cal td.empty{background:var(--paper)}
/* #60 (task 2): overløbsceller (nabomånedens dage før den 1./efter månedens sidste dag) — nedtonet,
   så man ser de hører til nabomåneden, men events/ferier hen over månedsskiftet forbliver synlige. */
.cal td.cal-overflow{background:rgba(0,0,0,.022)}
.cal td.cal-overflow .daynum{opacity:.45}
.cal td.cal-overflow .cal-ev{opacity:.6}
.cal .daynum{font-size:12.5px;color:var(--muted);font-weight:600}
.cal .ev{display:block;font-size:11.5px;padding:2px 6px;border-radius:5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-orange{background:var(--orange-soft);color:var(--orange-dark)}
.ev-blue{background:var(--blue-soft);color:var(--blue)}
.ev-red{background:var(--red-soft);color:var(--red)}
.ev-muted{background:var(--teal-soft);color:var(--muted)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:12px}
.legend .dotc{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px;vertical-align:middle}

/* sidebar filters layout (smart lists) */
.split{display:grid;grid-template-columns:240px 1fr;gap:20px}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.filterbox .lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:14px 0 6px}
/* #97 (Adem, 13-09): «Filtrene er altid synlige, så jeg kan vælge næste filter og kombinere.»
   Kun på brede skærme, hvor filtrene har deres egen kolonne. Under 820px er .split én kolonne,
   og en fastlåst boks ville dække listen. max-height + scroll, så en lav skærm stadig kan nå
   bunden af boksen. Kræver at ingen forfader har overflow (det har .wrap/body ikke). */
@media(min-width:821px){.split>.filterbox-sticky{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto}}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg a{padding:6px 12px;font-size:13px;color:var(--muted)}
.seg a.on{background:var(--teal);color:#fff}
.seg a:hover{text-decoration:none}

/* Forløbs-karrusel (forsiden "Find det rette undervisningsforløb") */
.fc-wrap{position:relative;display:flex;align-items:stretch;gap:6px}
.fc-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;padding:6px 2px 10px;flex:1;scrollbar-width:none}
.fc-track::-webkit-scrollbar{display:none}
.fc-track>.course-card{flex:0 0 calc((100% - 36px)/3);scroll-snap-align:start}
.fc-arrow{flex:none;align-self:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-size:22px;line-height:1;cursor:pointer;box-shadow:var(--shadow);transition:.15s}
.fc-arrow:hover{background:var(--teal);color:#fff}
.fc-arrow:disabled{opacity:.35;cursor:default;background:#fff;color:var(--ink)}
.fc-dots{display:none;justify-content:center;gap:8px;margin-top:6px}
.fc-dots button{width:9px;height:9px;border-radius:50%;border:0;background:var(--line);cursor:pointer;padding:0}
.fc-dots button.on{background:var(--teal)}
@media(max-width:900px){ .fc-track>.course-card{flex:0 0 calc((100% - 18px)/2)} }
@media(max-width:600px){ .fc-track>.course-card{flex:0 0 88%} .fc-arrow{display:none} }
@media(prefers-reduced-motion:reduce){ .fc-track{scroll-behavior:auto} }

/* SoMe-kort: billedgalleri (FB/IG) */
.some-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}
.some-gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;display:block;transition:.15s}
.some-gallery a:hover img{transform:scale(1.04)}
.some-empty{margin:10px 0;padding:18px;border:1px dashed var(--line);border-radius:10px;text-align:center;color:var(--muted);font-size:13px}

/* "Musik for hele byen": overlappende billed-collage (4-5 billeder) */
/* Collage med 3 slots (stor til venstre + to stablede til højre); slots krydsfader ved rotation. */
.about-imgs.collage{position:relative;display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:148px 148px;gap:12px;aspect-ratio:auto}
.about-imgs.collage .col-slot{width:100%;height:100%;object-fit:cover;border-radius:14px;box-shadow:var(--shadow);transition:opacity .6s ease}
.about-imgs.collage .col-slot:nth-child(1){grid-row:1 / 3}
@media(max-width:760px){
  .about-imgs.collage{grid-template-columns:1fr 1fr;grid-template-rows:120px 120px}
  .about-imgs.collage .col-slot:nth-child(1){grid-row:1 / 3}
}
.about-imgs.collage img:nth-child(1){grid-row:span 2;height:100%}
.about-imgs.collage img:nth-child(4){margin-top:-26px}
.about-imgs.collage img:nth-child(5){grid-column:1 / -1;height:150px}
@media(max-width:600px){ .about-imgs.collage{grid-template-columns:1fr 1fr} .about-imgs.collage img:nth-child(4){margin-top:0} }

/* "Hvorfor musik?" — TRE videovinduer (9:16), klik-for-at-afspille (#15). Samme 3-kolonne-
   gitter som SoMe-kortene ovenfor, så de flugter lodret. Stables til 1 kolonne på mobil. */
.why3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
@media(max-width:760px){.why3-grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}}
.why3-card{margin:0;border-radius:18px;padding:6px;background:linear-gradient(135deg,#6bb4b8,#ca5f49)}
.why3-card.c1{background:linear-gradient(135deg,#ca5f49,#e8a04b)}
.why3-card.c2{background:linear-gradient(135deg,#6bb4b8,#8e7cc3)}
.why3-frame{position:relative;width:100%;aspect-ratio:9/16;border-radius:14px;overflow:hidden;cursor:pointer;
  background:#1c2b2e center/cover no-repeat;display:flex;align-items:center;justify-content:center}
.why3-frame:focus-visible{outline:3px solid #fff;outline-offset:2px}
.why3-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.why3-play{width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;font-size:26px;
  display:flex;align-items:center;justify-content:center;padding-left:4px;transition:background .15s,transform .15s}
.why3-frame:hover .why3-play{background:rgba(0,0,0,.6);transform:scale(1.08)}
.why3-frame.playing .why3-play{display:none}
.why3-card figcaption{color:#fff;font-size:13px;font-weight:600;text-align:center;padding:8px 6px 4px}

/* ── Forside-animationer (FC): kun under html.anim (sættes af JS, ej ved reduced-motion) ── */
.anim .hero-title .w{display:inline-block;opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--wd,0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--wd,0ms)}
.anim .hero-title.go .w{opacity:1;transform:none}
/* Punkt 1: blød koral→teal farve-sweep der rejser gennem ordene (~2,6 s, én gang).
   Værnet bag @supports → browsere uden background-clip:text beholder massiv hvid tekst. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .anim .hero-title{filter:drop-shadow(0 2px 16px rgba(0,0,0,.35))}
  .anim .hero-title .w{
    background:linear-gradient(100deg,#fff 0 42%,var(--brand-orange,#ca5f49) 50%,var(--brand-blue,#6bb4b8) 60%,#fff 68% 100%);
    background-size:260% 100%;background-position:160% 0;
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .anim .hero-title.go .w{animation:heroSweep 5s cubic-bezier(.4,0,.2,1) calc(var(--wd,0ms) + .25s) 1 both}
}
@keyframes heroSweep{from{background-position:160% 0}to{background-position:-60% 0}}
.anim .stats-band .row>div{opacity:0;transform:translateY(12px);transition:opacity .6s ease-out, transform .6s ease-out}
.stats-band .row>div.in{opacity:1;transform:none}
.anim .fade-up{opacity:0;transform:translateY(18px);transition:opacity .8s ease-out, transform .8s ease-out}
.fade-up.in{opacity:1;transform:none}

/* Hero equalizer: bjælker OVEN PÅ billederne, der pulserer som en lyd-måler. Løftet 54px op (bottom:54px)
   så bjælkerne IKKE forsvinder bag statistik-båndet, der rager 46px op over hero-bunden.
   #116 (Adem 17/9): «meget mere synlig, kraftigere i farver, ikke så gemt og større». Før: 42 % gennem-
   sigtig, 6 px brede og 46 px høje, og de fleste grå. Nu: fuldt dækkende logo-farver (koral/teal/lyseblå
   på skift med hvid), dobbelt så brede og op til 150 px høje, en mørk skygge så de står frem på lyse
   billeder, og større udsving. Titlen og knappen ligger stadig ovenpå (z-index 2).
   #116 runde 2 (Adem 19/9): «dæmpe farverne en lille anelse 15-20% så det ikke er så meget i fokus» →
   dækningen er sat fra .95 til .78 (18 % lavere).
   #116 runde 3 (Adem 19/9): «Equalizeren skal bevæge sig langsommere og dæmpes en femtedel igen. Den skal
   underbygge siden … ikke tager fokus, men skaber liv under det hele.» → dækningen .78 × 0,8 = .62, og en
   bølge tager 3,2 s i stedet for 2,1 s (forskydningen mellem bjælkerne følger med, så bølgen har samme form).
   #116 runde 4 (Adem 19/9): «Equalizeren skal vi dæmpe ned med bare 15% i farverne, så er vi der.» → .62 × 0,85 = .53. */
.hero-eq{position:absolute;left:0;right:0;bottom:54px;height:150px;display:flex;align-items:flex-end;
  justify-content:center;gap:7px;padding:0 14px;pointer-events:none;opacity:.53;z-index:1;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.hero-eq .eq-bar{width:11px;height:120px;border-radius:5px 5px 0 0;background:#fff;
  transform-origin:bottom;animation:eqpulse 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -0.2s)}
.hero-eq .eq-bar.c1{background:var(--brand-orange,#ca5f49)}
.hero-eq .eq-bar.c2{background:var(--brand-blue,#6bb4b8)}
.hero-eq .eq-bar.c3{background:#e8602c}
@keyframes eqpulse{0%,100%{transform:scaleY(.22)}50%{transform:scaleY(1)}}
.hero-carousel .hero-content{position:absolute;inset:0;z-index:2}  /* fyld hele hero'en → titel+knap forbliver centreret (ikke klemt op i toppen) */
@media(max-width:600px){ .hero-eq{height:96px;bottom:48px;gap:3px;overflow:hidden} .hero-eq .eq-bar{width:6px;height:80px;flex:0 0 auto} }
@media(prefers-reduced-motion:reduce){ .hero-eq .eq-bar{animation:none;transform:scaleY(.55)} }

/* #115: skolens egne instrument-ikoner (static/img/instrumenter.svg, via macros/ikon.html). Stregen følger
   tekstfarven (currentColor); på holdkortet er de teal ligesom resten af kortets accenter. */
.ik{display:inline-block;vertical-align:-.22em;flex:0 0 auto;color:inherit}
.hold-ikon{display:inline-flex;align-items:center;color:var(--teal)}

/* "Find et hold" — to-kolonne (venstre filter-sidebar + højre resultat), match admin Elever */
.browse-wrap{max-width:1180px;margin:0 auto;padding:20px}
.browse-head{margin-bottom:12px}
.browse-filter-toggle{display:none;margin-bottom:12px}
/* #119 (Adem 18/9): på en smal skærm er filterknappen en fuld bred, farvet knap med en forklarende linje. */
/* #119 runde 2 (Adem 19/9): «Lav den med den samme orange som nåle på kortet» (#e07a3f). Hvid tekst på den orange
   er for lys til læsbar kontrast (≈3:1), så knappen er en tand mørkere (#c4541f, ≈4,5:1) med samme farvetone —
   og kortets nåle står lige under i den lysere orange, så de hænger visuelt sammen. */
.browse-filter-toggle{width:100%;text-align:left;border:0;border-radius:12px;background:#c4541f;color:#fff;
  padding:13px 16px;font:inherit;cursor:pointer;box-shadow:0 6px 16px -8px rgba(196,84,31,.7)}
.browse-filter-toggle .bft-main{display:block;font-weight:700;font-size:16px}
.browse-filter-toggle .bft-sub{display:block;font-size:12.5px;opacity:.85;margin-top:2px;line-height:1.35}
.browse-filter-toggle .bft-count{font-weight:600;color:#fff;background:rgba(0,0,0,.18);border-radius:10px;padding:0 6px}
.browse-filter-toggle[aria-expanded="true"]{background:#a8461a}
.browse-filter-toggle:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.browse-layout{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start}
.browse-side{position:sticky;top:14px;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:8px}
.browse-side-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.browse-side input,.browse-side select{width:100%}
.browse-side-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;
  padding-top:10px;border-top:1px solid var(--line)}
/* #72 fund 7 (forslag): «Se undervisningsstederne i stedet» er et link, ikke en knap — så den
   ikke længere ligner sidens «næste skridt» og trækker folk væk fra holdene. */
.browse-alt{display:inline-block;margin-top:10px;font-size:13px;color:var(--teal);text-decoration:underline}
.browse-main{min-width:0}
@media(max-width:820px){
  .browse-layout{grid-template-columns:1fr}
  .browse-filter-toggle{display:block}
  .browse-side{display:none}
  .browse-side.open{display:flex}
  .browse-side{position:static}
}

/* Skolevisning — kalender (uge/måned/dag) + hold-popup + kontaktformular */
.sch-wrap{max-width:1100px;margin:0 auto;padding:20px}
.sch-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin:14px 0}
.sch-views.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sch-views a{padding:7px 16px;font-size:13px;color:var(--muted)}
.sch-views a.on{background:var(--teal);color:#fff}
.sch-views a:hover{text-decoration:none}
.sch-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.sch-legend .lg{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.lg-lesson{background:var(--teal)} .lg-event{background:#8e7cc3} .lg-holiday{background:#cbb89a} .lg-cancel{background:var(--red,#d9534f)}
.sch-week{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.sch-col{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;min-height:60px}
.sch-col h3{margin:0 0 8px;font-size:14px}
.sch-chip{display:block;width:100%;text-align:left;border:1px solid var(--line);border-left:3px solid var(--teal);
  background:var(--teal-soft);border-radius:8px;padding:7px 9px;margin-bottom:6px;cursor:pointer;font-size:12.5px}
.sch-chip:hover{filter:brightness(.97)}
.sch-chip.full{border-left-color:var(--orange,#e07a3f);background:#fff3ec}
.sch-chip .t{font-weight:700}
.sch-ev{font-size:11px;margin-top:2px;padding:2px 5px;border-radius:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sch-ev.is-event{background:#efe9f8} .sch-ev.is-holiday{background:#f3ede0}
.sch-pop-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90;align-items:center;justify-content:center;padding:16px}
.sch-pop-overlay.on{display:flex}
.sch-pop-inner{position:relative;background:#fff;border-radius:14px;max-width:460px;width:100%;max-height:88vh;overflow:auto;padding:18px;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.sch-pop-x{position:absolute;top:8px;right:10px;border:0;background:none;font-size:22px;cursor:pointer;color:var(--muted)}
.sch-contact{max-width:680px}
@media(max-width:600px){ .sch-toolbar{flex-direction:column;align-items:flex-start} }
/* #169: en slået-fra besked tones ned i overskriften — ikke i den åbne formular (så den ikke ser låst ud). */
.email-row.slaaet-fra>summary{opacity:.6}