/* ===== Tokens — City-K/M-E-K rød & blå ===== */ :root{ --grund:#F8F9FB; /* kølig hvid */ --flade:#FFFFFF; --flade-2:#EDF0F5; --blaek:#151A22; /* asfalt m. blåt stik */ --blaek-2:#59657A; --skilt:#0D4EA3; /* City-K blå (vejskilte-blå) */ --skilt-hover:#0A3E82; --skilt-kontrast:#FFFFFF; --roed:#D2232A; /* M-E-K signalrød */ --roed-hover:#B01B21; --roed-lys:#D2232A; --linje:#D9DEE7; --ok:#1E7F4F; --moerk-flade:#151A22; /* forbliver mørk i begge temaer */ --moerk-tekst:#F8F9FB; --skygge:0 10px 30px rgba(21,26,34,.09); } @media (prefers-color-scheme: dark){ :root{ --grund:#14181F; --flade:#1C222C; --flade-2:#232B37; --blaek:#E8ECF2; --blaek-2:#9AA5B4; --skilt:#4A8FE0; --skilt-hover:#6BA5EA; --skilt-kontrast:#0E1521; --roed:#D2232A; --roed-hover:#E5424A; --roed-lys:#FF7A82; --linje:#303945; --ok:#4CC38A; --moerk-flade:#0B0E13; --moerk-tekst:#E8ECF2; --skygge:0 10px 30px rgba(0,0,0,.35); } } :root[data-theme="dark"]{ --grund:#14181F; --flade:#1C222C; --flade-2:#232B37; --blaek:#E8ECF2; --blaek-2:#9AA5B4; --skilt:#4A8FE0; --skilt-hover:#6BA5EA; --skilt-kontrast:#0E1521; --roed:#D2232A; --roed-hover:#E5424A; --roed-lys:#FF7A82; --linje:#303945; --ok:#4CC38A; --moerk-flade:#0B0E13; --moerk-tekst:#E8ECF2; --skygge:0 10px 30px rgba(0,0,0,.35); } :root[data-theme="light"]{ --grund:#F8F9FB; --flade:#FFFFFF; --flade-2:#EDF0F5; --blaek:#151A22; --blaek-2:#59657A; --skilt:#0D4EA3; --skilt-hover:#0A3E82; --skilt-kontrast:#FFFFFF; --roed:#D2232A; --roed-hover:#B01B21; --roed-lys:#D2232A; --linje:#D9DEE7; --ok:#1E7F4F; --moerk-flade:#151A22; --moerk-tekst:#F8F9FB; --skygge:0 10px 30px rgba(21,26,34,.09); } /* ===== Grundstil ===== */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} } body{ margin:0; background:var(--grund); color:var(--blaek); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:1.0625rem; line-height:1.65; -webkit-font-smoothing:antialiased; } .display{ font-family:"Bahnschrift","Avenir Next Condensed","Futura","Arial Narrow",Arial,sans-serif; font-weight:700; letter-spacing:.01em; line-height:1.08; text-wrap:balance; } h1,h2,h3{margin:0} /* Dansk er fuld af lange sammensatte ord. "Undervisningsplanerne" kunne ikke være i en 375px-skærm og skubbede hele siden 7px ud til højre, så forsiden kunne rulles sidelæns på en telefon (målt 4/8). break-word ændrer INTET, når ordet kan være der — den træder først til, når der ellers ville løbe tekst ud over kanten. Orddelingen (hyphens) er kun på små skærme, hvor der er brug for den; den virker, fordi er sat, så browseren deler efter danske regler. */ h1,h2,h3,.display{overflow-wrap:break-word} @media (max-width:700px){ h1,h2,h3,.display{hyphens:auto} } p{margin:0} a{color:var(--skilt)} img,svg{max-width:100%} :focus-visible{outline:3px solid var(--roed); outline-offset:2px; border-radius:4px} /* Luften i siderne står som en variabel, så vandrette scrollere kan trække sig UD til skærmkanten igen med samme mål (se .tilbud-grid.tre). Ellers klippes nabokortenes flige af, og så ser det ud som om der ikke er mere at scrolle til. */ :root{--wrap-luft:clamp(16px,4vw,32px)} .wrap{max-width:1120px; margin-inline:auto; padding-inline:var(--wrap-luft)} /* ===================================================================== ⚠️ [hidden] SKAL VINDE — ALTID `hidden` er kun en svag standardregel (display:block), så ENHVER display: i vores egen CSS overtrumfer den. Så bliver et element liggende synligt, selv om JavaScript har skjult det — uden fejl, uden advarsel. Det har ramt os TRE gange: admin-login 17/7, fanebladene senere, og 6/8 lærer-vælgeren i Min kalender, som blev stående for almindelige lærere, fordi .a-filter har display:flex. Denne ene linje lukker hele kategorien. De ældre [hidden]-værn længere nede i filen er nu overflødige, men får lov at blive — de gør ingen skade og fortæller historien. ===================================================================== */ [hidden]{display:none !important} section{padding-block:clamp(56px,9vw,96px)} .eyebrow{ display:flex; align-items:center; gap:10px; font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--skilt); margin-bottom:14px; } .eyebrow::before{content:""; width:26px; height:4px; border-radius:2px; background:var(--roed)} .sektion-titel{font-size:clamp(1.7rem,3.6vw,2.5rem)} .sektion-intro{max-width:62ch; color:var(--blaek-2); margin-top:12px} /* ===== Skip-link ===== */ .skip{position:absolute; left:-999px; top:8px; background:var(--skilt); color:#fff; padding:10px 16px; border-radius:8px; z-index:100} .skip:focus{left:8px} /* ===== Topbar + nav ===== */ header.site{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--grund) 88%, transparent); backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--linje); } .navrow{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px} .logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--blaek)} .logo-skilt{ background:var(--skilt); color:#fff; font-family:"Bahnschrift","Avenir Next Condensed","Futura",Arial,sans-serif; font-weight:700; letter-spacing:.03em; padding:5px 10px; border-radius:8px; border:2px solid #fff; box-shadow:0 0 0 2px var(--skilt); } .logo small{display:block; font-size:.72rem; color:var(--roed-lys); font-weight:700; letter-spacing:.08em; text-transform:uppercase} nav.hoved ul{display:flex; gap:4px; list-style:none; margin:0; padding:0} nav.hoved a{ display:block; padding:8px 14px; border-radius:999px; text-decoration:none; color:var(--blaek); font-weight:600; font-size:.95rem; } nav.hoved a:hover{background:var(--flade-2)} .nav-cta{background:var(--roed); color:#fff !important} .nav-cta:hover{background:var(--roed-hover) !important} .burger{ display:none; background:none; border:1px solid var(--linje); border-radius:10px; padding:9px 11px; cursor:pointer; color:var(--blaek); } .burger svg{display:block} @media (max-width:820px){ /* Menuknappen er hele indgangen til navigationen på telefon og tablet. Den var 46×36px — under de 44px, en tommelfinger har brug for. */ .burger{display:grid; place-items:center; min-width:46px; min-height:44px} nav.hoved{position:absolute; left:0; right:0; top:100%; background:var(--grund); border-bottom:1px solid var(--linje); display:none; box-shadow:var(--skygge)} nav.hoved.aaben{display:block} nav.hoved ul{flex-direction:column; padding:12px clamp(16px,4vw,32px) 18px} nav.hoved a{padding:12px 14px; border-radius:10px; min-height:44px; display:flex; align-items:center} } /* ===== Hero (foto) ===== */ .hero{ position:relative; color:#fff; background: linear-gradient(100deg, rgba(9,17,33,.93) 0%, rgba(10,32,74,.72) 48%, rgba(10,32,74,.28) 100%), url("../billeder/hero.jpg") center 58% / cover no-repeat, #0A204A; padding-block:clamp(72px,11vw,150px); } .hero .wrap{max-width:1120px} .hero-indhold{max-width:640px} .hero .eyebrow{color:#BFD4F5} .hero h1{font-size:clamp(2.5rem,6.2vw,4.4rem); text-transform:uppercase; text-shadow:0 2px 18px rgba(5,10,25,.45)} .hero h1 em{font-style:normal; color:#FF8A91} .hero .lede{margin-top:18px; max-width:52ch; color:#DCE5F4; font-size:1.12rem; text-shadow:0 1px 10px rgba(5,10,25,.5)} .cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px} .btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 24px; border-radius:12px; font-weight:700; text-decoration:none; font-size:1.02rem; border:2px solid transparent; cursor:pointer; transition:transform .15s ease, background .15s ease, box-shadow .15s ease; } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn-roed{background:var(--roed); color:#fff; box-shadow:0 6px 20px rgba(210,35,42,.35)} .btn-roed:hover{background:var(--roed-hover)} .btn-hvid{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.55); backdrop-filter:blur(4px)} .btn-hvid:hover{background:rgba(255,255,255,.22)} .btn-blaa{background:var(--skilt); color:var(--skilt-kontrast)} .btn-blaa:hover{background:var(--skilt-hover)} .btn-lys{border-color:var(--linje); color:var(--blaek); background:var(--flade)} .btn-lys:hover{border-color:var(--skilt); color:var(--skilt)} .trust-row{display:flex; flex-wrap:wrap; gap:16px 22px; margin-top:32px; font-size:.92rem; color:#C9D6EC} .trust-row span{display:inline-flex; align-items:center; gap:7px} .trust-row .ok{color:#5CE0A1; font-weight:700} .kat-raekke{display:flex; gap:10px; flex-wrap:wrap; margin-top:30px} .kat{ background:#fff; border:2px solid var(--skilt); color:#0D4EA3; border-radius:10px; padding:6px 13px; font-weight:800; font-size:1.05rem; font-family:"Bahnschrift","Avenir Next Condensed","Futura",Arial,sans-serif; letter-spacing:.04em; } .hero .kat{box-shadow:0 4px 14px rgba(5,10,25,.4)} /* Hero indflyvning */ @keyframes fadeUp{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}} .anim{animation:fadeUp .7s cubic-bezier(.2,.7,.3,1) both} .anim.d1{animation-delay:.08s} .anim.d2{animation-delay:.22s} .anim.d3{animation-delay:.38s} .anim.d4{animation-delay:.54s} .anim.d5{animation-delay:.7s} @media (prefers-reduced-motion: reduce){ .anim{animation:none} } /* ===== Vej med kørende bil ===== */ .vej{position:relative; height:76px; background:#171B22; overflow:hidden; border-block:3px solid #262C38} .vej::before{ content:""; position:absolute; left:0; right:0; top:50%; height:4px; margin-top:-2px; background:repeating-linear-gradient(90deg, #E9EDF4 0 42px, transparent 42px 92px); opacity:.85; } .vej .bil{ position:absolute; bottom:50%; left:0; width:92px; height:auto; margin-bottom:-5px; transform:translateX(-110px); animation:koer 15s linear infinite; } @keyframes koer{ from{transform:translateX(-110px)} to{transform:translateX(calc(100vw + 110px))} } @media (prefers-reduced-motion: reduce){ .vej .bil{animation:none; left:12%; transform:none} } /* ===== Info-banner ===== */ .banner{background:var(--flade); border-bottom:1px solid var(--linje); padding-block:18px} .banner .wrap{display:flex; gap:14px; align-items:flex-start} .banner .ikon{ flex:none; width:38px; height:38px; border-radius:50%; background:var(--roed); color:#fff; display:grid; place-items:center; font-weight:900; font-size:1.2rem; } .banner strong{display:block} .banner p{color:var(--blaek-2); font-size:.95rem} /* ===== Kort-karrusel (uddannelser) ===== */ .karrusel{ margin-top:36px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-block:6px; } .karrusel::-webkit-scrollbar{display:none} .karrusel:focus-visible{outline:3px solid var(--roed); outline-offset:4px; border-radius:12px} .karrusel-spor{display:flex; gap:18px; width:max-content} .karrusel .kort{flex:0 0 280px} /* Kørende tilstand: lukket løkke — manuel scroll slås fra, så der aldrig opstår tom plads. 5 kort à 280px + 5 mellemrum à 18px = 1490px pr. omgang. Ret tallet, hvis der kommer flere kort. */ .karrusel.koer{overflow-x:hidden} .karrusel.koer .karrusel-spor{animation:karrusel-rul 50s linear infinite} .karrusel.koer:hover .karrusel-spor, .karrusel.koer:focus-within .karrusel-spor{animation-play-state:paused} /* ⚠️ LOOP-LÆNGDEN ER HÅRDKODET: −1490px = 5 kort à 280px + 5 mellemrum à 18px. BEGGE karruseller (forsiden + tilbudssiden) har præcis 5 kort. Tilføjer eller fjerner du et kort, SKAL tallet herunder rettes, ellers hopper animationen. Rulningen må ikke laves om til JavaScript — rAF/scrollLeft fejlede på Olivers Mac (se handoff.md). */ @keyframes karrusel-rul{ from{transform:translateX(0)} to{transform:translateX(-1490px)} } /* --- Karrusellen på telefon: man SKAL kunne se, at der er mere --- Kortene var 78vw og snappede til MIDTEN. Resultatet var, at man kun så ét kort ad gangen, og intet røbede at der lå fire mere til højre — så de blev aldrig set. (Olivers fund 5/8, målt på hans egen telefon.) Nu snapper de til VENSTRE kant og fylder 66vw, så næste kort altid stikker tydeligt frem i højre side. Den flig ER hele signalet. Betingelsen dækker både rigtige telefoner (hover: none) OG et smalt vindue på en computer, så det kan efterprøves uden en telefon. */ @media (hover: none), (max-width: 760px){ .karrusel{scroll-snap-type:x mandatory; scroll-padding-inline-start:0} .karrusel .kort{scroll-snap-align:start; flex-basis:min(66vw,280px)} } .kort{ background:var(--flade); border:1px solid var(--linje); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .kort:hover{transform:translateY(-4px); box-shadow:var(--skygge); border-color:var(--skilt)} .kort-foto{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--flade-2)} .kort-foto img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease} .kort:hover .kort-foto img{transform:scale(1.05)} .kort-foto .kat{position:absolute; left:14px; bottom:12px; box-shadow:0 3px 10px rgba(5,10,25,.35)} .kort-krop{padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex:1} .kort-krop h3{font-size:1.15rem} .kort-krop p{color:var(--blaek-2); font-size:.95rem; flex:1} .kort-krop a{font-weight:700; text-decoration:none; color:var(--roed-lys)} .kort-krop a:hover{text-decoration:underline} .kort-krop .kat{align-self:flex-start} @media (prefers-reduced-motion: reduce){ .kort, .kort-foto img{transition:none} } /* ===== Formular-byggeklodser ===== ⚠️ Disse blev bygget til prisberegneren, men de bruges STADIG af tilmeld.html (holdvalg og pakkevalg — se `.valg.pakkevalg` længere nede). De må derfor IKKE fjernes, selv om beregneren er væk. Fanget ved oprydningen 5/8, hvor de først røg med. */ fieldset{border:0; margin:0; padding:0} legend{font-weight:800; padding:0; margin-bottom:12px; font-size:1.02rem} .valg-gruppe{display:grid; gap:10px; margin-bottom:26px} .valg{ display:flex; align-items:center; gap:12px; border:2px solid var(--linje); border-radius:12px; padding:12px 14px; cursor:pointer; background:var(--grund); } .valg:hover{border-color:var(--skilt)} .valg input{accent-color:var(--roed); width:18px; height:18px; flex:none} .valg .vn{font-weight:700} .valg .vp{margin-left:auto; font-weight:700; color:var(--skilt); font-variant-numeric:tabular-nums; white-space:nowrap} .valg small{display:block; color:var(--blaek-2); font-weight:400} .valg:has(input:checked){border-color:var(--roed); background:var(--flade)} /* ===== Vejviser: "Hvilken pakke passer til dig?" (5/8) ===== Afløser prisberegneren. Ét spørgsmål ad gangen, store trykflader, og til sidst ÉN anbefaling — i stedet for en kolonne med afkrydsning. Bygget mobil-først: knapperne er fuld bredde og mindst 44px høje, fordi de fleste besøgende sidder med telefonen. */ .vejviser{ background:var(--flade); border:1px solid var(--linje); border-radius:20px; box-shadow:var(--skygge); margin-top:28px; padding:clamp(20px,4vw,34px); } /* --- Selve spørgsmålstrinnet --- */ .vej-top{display:flex; align-items:center; justify-content:space-between; gap:12px} .vej-taeller{font-size:.74rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--blaek-2)} .vej-tilbage{ background:none; border:0; cursor:pointer; padding:6px 2px; font:inherit; font-size:.88rem; font-weight:700; color:var(--skilt); } .vej-tilbage:hover{text-decoration:underline} .vej-bar{height:5px; border-radius:999px; background:var(--flade-2); margin:12px 0 20px; overflow:hidden} .vej-bar-fyld{display:block; height:100%; background:var(--roed); border-radius:999px; transition:width .25s ease} @media (prefers-reduced-motion: reduce){ .vej-bar-fyld{transition:none} } .vej-spm{font-size:clamp(1.25rem,2.6vw,1.6rem); margin-bottom:16px} .vej-spm:focus-visible{outline:3px solid var(--roed); outline-offset:5px; border-radius:8px} .vej-svar{display:grid; gap:10px} .vej-valg{ display:block; width:100%; text-align:left; cursor:pointer; font:inherit; color:inherit; background:var(--grund); border:2px solid var(--linje); border-radius:14px; padding:15px 17px; min-height:56px; transition:border-color .15s ease, transform .12s ease, box-shadow .15s ease; } .vej-valg:hover{border-color:var(--skilt); transform:translateY(-1px); box-shadow:var(--skygge-blod)} .vej-valg:focus-visible{outline:3px solid var(--roed); outline-offset:3px} .vej-valg b{display:block; font-size:1.04rem} .vej-valg small{display:block; margin-top:3px; color:var(--blaek-2); font-size:.9rem; line-height:1.45} @media (prefers-reduced-motion: reduce){ .vej-valg{transition:none} .vej-valg:hover{transform:none} } /* --- Resultatet --- */ .vej-res-maerke{ display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:5px 12px; border-radius:999px; background:color-mix(in srgb, var(--skilt) 13%, transparent); color:var(--skilt); } .vej-res.bedste .vej-res-maerke{background:color-mix(in srgb, var(--roed) 13%, transparent); color:var(--roed)} .vej-res-titel{font-size:clamp(1.5rem,3.2vw,2rem); margin-top:12px} .vej-res-titel:focus-visible{outline:3px solid var(--roed); outline-offset:5px; border-radius:8px} .vej-res-pris{ display:block; margin-top:4px; color:var(--skilt); font-size:clamp(2rem,5vw,2.8rem); line-height:1.1; font-family:"Bahnschrift","Avenir Next Condensed","Futura",Arial,sans-serif; font-variant-numeric:tabular-nums; } .vej-res-hvorfor{margin-top:12px; color:var(--blaek-2); max-width:60ch} .vej-res-liste{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:8px; font-size:.96rem} .vej-res-liste li{display:flex; gap:10px; align-items:baseline} .vej-res-liste li::before{content:"✓"; color:var(--ok); font-weight:900; flex:none} .vej-res-liste.gratis li::before{content:"★"; color:var(--roed)} .vej-res-liste.gratis li{font-weight:600} .vej-res-rabat{ margin-top:16px; padding:14px 16px; border-radius:12px; background:color-mix(in srgb, var(--ok) 10%, transparent); border-left:4px solid var(--ok); font-size:.94rem; } .vej-res-ovenpaa{ margin-top:18px; padding-top:16px; border-top:1px solid var(--linje); } .vej-res-ovenpaa h5{font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--blaek-2); margin:0 0 9px} .vej-res-ovenpaa ul{list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:.9rem; color:var(--blaek-2)} .vej-res-ovenpaa li{display:flex; gap:10px; align-items:baseline} .vej-res-ovenpaa li::before{content:"·"; font-weight:900; flex:none; color:var(--blaek-2)} /* Ekstra bemærkninger ud fra svarene (erhvervsaftale, "du kigger bare"…) */ .vej-res-note{ margin-top:14px; padding:12px 15px; border-radius:12px; background:var(--flade-2); font-size:.93rem; color:var(--blaek-2); } /* Linjen om næste hold — eller om at der ikke er et */ .vej-res-hold{margin-top:16px; font-weight:700; font-size:.96rem} .vej-res-knapper{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px} .vej-res-knapper .btn{flex:1 1 200px; justify-content:center} .vej-igen{ margin-top:14px; background:none; border:0; cursor:pointer; padding:8px 2px; font:inherit; font-size:.92rem; font-weight:700; color:var(--skilt); } .vej-igen:hover{text-decoration:underline} .vej-res-finprint{margin-top:14px; font-size:.8rem; color:var(--blaek-2); opacity:.85} @media (max-width:560px){ .vej-res-knapper .btn{flex:1 1 100%} } /* ===== Holdstart ===== */ .hold-sektion{background:var(--flade-2)} /* Nedtællingen var en flex-række, der brød om: tre kasser på første linje og "SEK." alene på anden — og fordi hver kasse havde flex:1, blev den sidste bredere end de tre andre. Det så ud som en fejl. Et gitter med lige kolonner kan ikke komme i den situation: alle fire kasser er ens, uanset hvordan de fordeler sig. */ .nedtaelling{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(10px,2vw,18px); margin-top:30px; max-width:620px; } .tid-boks{ background:#0D4EA3; color:#fff; border:2px solid #fff; box-shadow:0 0 0 2px #0D4EA3, var(--skygge); border-radius:14px; padding:14px 10px; text-align:center; min-width:0; } /* På en telefon bliver fire kolonner for smalle til ordet "TIMER" — to rækker à to giver plads og holder kasserne præcis lige store. */ @media (max-width:560px){ .nedtaelling{grid-template-columns:repeat(2, minmax(0,1fr)); max-width:420px} } .tid-boks b{ display:block; font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.1; font-variant-numeric:tabular-nums; font-family:"Bahnschrift","Avenir Next Condensed","Futura",Arial,sans-serif; color:#fff; } .tid-boks span{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:#BFD4F5} .naeste-hold-label{margin-top:26px; font-weight:700} .hold-liste{margin-top:14px; display:grid; gap:10px} .hold-punkt{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; background:var(--flade); border:1px solid var(--linje); border-radius:12px; padding:14px 18px; } .hold-punkt .kat{padding:4px 10px; font-size:.95rem} .hold-punkt .dato{font-weight:700} .hold-punkt .info{color:var(--blaek-2); font-size:.92rem} .hold-punkt .pladser{margin-left:auto; font-size:.85rem; font-weight:700; color:var(--ok)} .hold-punkt .pladser.faa{color:var(--roed-lys)} .hold-punkt .tilmeld-link{ font-size:.85rem; font-weight:700; text-decoration:none; background:var(--roed); color:#fff; padding:6px 13px; border-radius:8px; white-space:nowrap; } .hold-punkt .tilmeld-link:hover{background:var(--roed-hover)} /* Det er knappen, der starter en tilmelding — den skal kunne rammes med en tommelfinger, ikke kun med en musemarkør. 34px → 44px på telefon. */ @media (max-width:820px){ .hold-punkt .tilmeld-link{padding:12px 16px; font-size:.92rem; min-height:44px; display:inline-flex; align-items:center} } .hold-note{margin-top:14px; font-size:.85rem; color:var(--blaek-2)} /* ===== Biler (foto-galleri) ===== */ .bil-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin-top:36px} .bil-kort{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--linje); background:var(--flade); display:flex; flex-direction:column; } .bil-kort img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .35s ease} .bil-kort:hover img{transform:scale(1.04)} .bil-tekst{padding:16px 18px 18px} .bil-tekst h3{font-size:1.05rem; margin-bottom:4px} .bil-tekst p{color:var(--blaek-2); font-size:.92rem} .chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px} .chip{font-size:.78rem; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--flade-2); color:var(--blaek-2)} .chip.el{background:var(--ok); color:#fff} .chip.roed{background:var(--roed); color:#fff} @media (prefers-reduced-motion: reduce){ .bil-kort img{transition:none} } /* ===== Om skolen ===== */ .om-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,60px); align-items:center; margin-top:10px} @media (max-width:760px){ .om-grid{grid-template-columns:1fr} } .om-tekst p{color:var(--blaek-2); margin-top:14px; max-width:58ch} .om-tekst p strong{color:var(--blaek)} .generation{display:flex; gap:0; margin-top:28px; align-items:center} .gen-punkt{text-align:center; flex:1} .gen-punkt .prik{width:14px; height:14px; border-radius:50%; background:var(--roed); margin:0 auto 8px} .gen-punkt b{display:block; font-size:1rem} .gen-punkt span{font-size:.82rem; color:var(--blaek-2)} .gen-linje{flex:1.2; height:0; border-top:3px dashed var(--skilt); margin-bottom:34px} .dkl-kort{ background:var(--flade); border:1px solid var(--linje); border-radius:16px; padding:26px; box-shadow:var(--skygge); border-top:4px solid var(--roed); } .dkl-kort h3{font-size:1.1rem; margin-bottom:8px} .dkl-kort p{color:var(--blaek-2); font-size:.95rem} .dkl-kort ul{margin:14px 0 0; padding:0; list-style:none; display:grid; gap:9px; font-size:.95rem} .dkl-kort li{display:flex; gap:9px; align-items:baseline} .dkl-kort li::before{content:"✓"; color:var(--ok); font-weight:900} /* ===== FAQ ===== */ .faq-liste{margin-top:32px; display:grid; gap:12px; max-width:820px} details.faq{background:var(--flade); border:1px solid var(--linje); border-radius:14px; overflow:hidden} details.faq[open]{border-color:var(--roed)} details.faq summary{ cursor:pointer; padding:18px 20px; font-weight:700; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px; } details.faq summary::-webkit-details-marker{display:none} details.faq summary::after{ content:"+"; font-size:1.5rem; font-weight:400; color:var(--roed-lys); transition:transform .18s ease; line-height:1; } details.faq[open] summary::after{transform:rotate(45deg)} details.faq .svar{padding:0 20px 20px; color:var(--blaek-2); max-width:65ch} @media (prefers-reduced-motion: reduce){ details.faq summary::after{transition:none} } /* ===== Kontakt ===== */ .kontakt-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,60px); margin-top:36px} @media (max-width:760px){ .kontakt-grid{grid-template-columns:1fr} } .kontakt-info{display:grid; gap:18px; align-content:start} .k-punkt{display:flex; gap:14px; align-items:flex-start} /* Ikonerne var typografiske tegn (☎ ✉ ⌖). På iPhone tegner systemet dem som farvede emoji — det så uprofessionelt ud, og det var ikke til at styre med CSS. Nu er de SVG-streger, der arver farven fra kassen. */ .k-punkt .ki{ flex:none; width:42px; height:42px; border-radius:12px; background:var(--flade-2); display:grid; place-items:center; color:var(--roed-lys); } .k-punkt .ki svg{display:block} .k-punkt b{display:block} .k-punkt a{text-decoration:none; font-weight:600} .k-punkt a:hover{text-decoration:underline} .k-punkt span{color:var(--blaek-2); font-size:.92rem} form.kontakt{background:var(--flade); border:1px solid var(--linje); border-radius:16px; padding:26px; display:grid; gap:14px; border-top:4px solid var(--skilt)} form.kontakt label{font-weight:700; font-size:.92rem; display:grid; gap:6px} form.kontakt input, form.kontakt textarea{ font:inherit; padding:11px 13px; border-radius:10px; border:1.5px solid var(--linje); background:var(--grund); color:var(--blaek); width:100%; } form.kontakt input:focus, form.kontakt textarea:focus{border-color:var(--skilt); outline:none} form.kontakt textarea{resize:vertical; min-height:110px} .form-note{font-size:.8rem; color:var(--blaek-2)} /* ===== Footer ===== */ footer.site{background:var(--moerk-flade); color:var(--moerk-tekst); padding-block:44px 28px; border-top:3px solid var(--roed)} footer.site .wrap{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:32px} @media (max-width:760px){ footer.site .wrap{grid-template-columns:1fr} } footer.site h4{margin:0 0 10px; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; opacity:.65} footer.site ul{list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:.95rem} footer.site a{color:inherit; text-decoration:none} footer.site a:hover{text-decoration:underline} /* Footeren er en lodret stak links på telefonen. De var 18px høje med 14px imellem — man rammer nabolinjen lige så let som den, man sigter efter. Linjerne får derfor deres egen trykflade i stedet. */ /* Grænsen er 820px — den samme, hvor burgermenuen dukker op. Det er dér, layoutet skifter fra "mus" til "finger", og så skal ALLE trykflader følge med, ikke kun dem på telefonen. */ @media (max-width:820px){ footer.site ul{gap:2px} footer.site ul a{display:flex; align-items:center; min-height:44px; padding:2px 0} } .bund-linje{border-top:1px solid rgba(255,255,255,.15); margin-top:36px; padding-top:18px; font-size:.82rem; opacity:.6; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between} /* ===== Reveal ===== */ .reveal{opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease} .reveal.vist{opacity:1; transform:none} @media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none} } /* ===== Undersider ===== */ .side-hero{ color:#fff; padding-block:clamp(44px,7vw,84px); background: linear-gradient(100deg, rgba(9,17,33,.94) 0%, rgba(10,32,74,.80) 55%, rgba(10,32,74,.55) 100%), url("../billeder/hero.jpg") center 58% / cover no-repeat, #0A204A; } .side-hero .eyebrow{color:#BFD4F5} .side-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem); text-transform:uppercase; text-shadow:0 2px 14px rgba(5,10,25,.45)} .side-hero .lede{margin-top:12px; max-width:56ch; color:#DCE5F4; text-shadow:0 1px 8px rgba(5,10,25,.5)} nav.hoved a[aria-current="page"]{background:var(--flade-2)} .udd-blok{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,56px); align-items:start; padding-block:clamp(40px,6vw,72px); border-bottom:1px solid var(--linje); } .udd-blok:last-of-type{border-bottom:0} @media (max-width:820px){ .udd-blok{grid-template-columns:1fr} } .udd-blok h2{font-size:clamp(1.5rem,3vw,2.1rem)} .udd-tekst > p{color:var(--blaek-2); margin-top:12px; max-width:58ch} .udd-foto{border-radius:16px; overflow:hidden; border:1px solid var(--linje); box-shadow:var(--skygge)} .udd-foto img{width:100%; display:block; aspect-ratio:4/3; object-fit:cover} .fakta{background:var(--flade); border:1px solid var(--linje); border-radius:12px; padding:18px 22px; margin-top:20px} .fakta h3{font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color:var(--skilt); margin-bottom:10px} .fakta ul{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:.95rem} .fakta li{display:flex; gap:9px; align-items:baseline} .fakta li::before{content:"✓"; color:var(--ok); font-weight:900} /* Prøvepunkterne i "Dit forløb" bar altid et grønt flueben, fordi det kom fra reglen ovenfor — også når prøven kun var booket, og også når den slet ikke var det. Markøren fortæller nu sandheden. (Olivers fund 5/8. Kræver sql/min-side-proeveresultat.sql, som sender feltet `resultat` med til eleven.) */ .fakta li.proeve-punkt.afventer::before{content:"✕"; color:var(--blaek-2)} .fakta li.proeve-punkt.booket::before{content:"✕"; color:var(--roed-lys)} .fakta li.proeve-punkt.bestaaet::before{content:"✓"; color:var(--ok)} .fakta li.proeve-punkt.afventer{color:var(--blaek-2)} .privat-liste{margin:12px 0 0; padding-left:20px; display:grid; gap:9px; font-size:1rem; line-height:1.55} .privat-liste li{padding-left:4px} .privat-liste li::marker{color:var(--skilt)} .trin{list-style:none; counter-reset:trin; margin:20px 0 0; padding:0; display:grid; gap:12px} .trin li{display:flex; gap:12px; align-items:flex-start; counter-increment:trin} .trin li::before{ content:counter(trin); flex:none; width:28px; height:28px; border-radius:9px; background:var(--skilt); color:#fff; font-weight:800; font-size:.9rem; display:grid; place-items:center; margin-top:2px; font-family:"Bahnschrift","Avenir Next Condensed","Futura",Arial,sans-serif; } .trin b{display:block} .trin li span{color:var(--blaek-2); font-size:.93rem} .cta-baand{background:linear-gradient(120deg, #0D4EA3, #093A7C); color:#fff; padding-block:clamp(40px,6vw,64px)} .cta-baand .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px} .cta-baand h2{font-size:clamp(1.4rem,3vw,2rem)} .cta-baand p{color:#C9D6EC; margin-top:6px; max-width:52ch} .tider{width:100%; border-collapse:collapse; margin-top:8px; font-size:.95rem} .tider td{padding:9px 0; border-bottom:1px solid var(--linje)} .tider tr:last-child td{border-bottom:0} .tider td:last-child{text-align:right; font-weight:600; font-variant-numeric:tabular-nums} /* ===== Undervisningsplaner (kort m. PDF + Fstyr-link) ===== */ .plan-liste{display:grid; gap:14px; margin-top:32px} .plan-kort{ display:flex; gap:18px; align-items:flex-start; background:var(--flade); border:1px solid var(--linje); border-radius:16px; padding:22px; box-shadow:var(--skygge-blod); border-left:4px solid var(--skilt); } @media (max-width:560px){ .plan-kort{flex-direction:column; gap:12px} } .plan-kat{flex:none} .plan-kat .kat{font-size:1.15rem; padding:8px 15px} .plan-krop{flex:1; min-width:0} .plan-krop h3{font-size:1.2rem; font-family:"Bahnschrift","Avenir Next Condensed","Futura",Arial,sans-serif} .plan-krop p{color:var(--blaek-2); font-size:.95rem; margin-top:6px; max-width:60ch} .plan-knapper{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:16px} .plan-knapper .btn{padding:11px 20px; font-size:.95rem} .plan-link{font-weight:700; font-size:.92rem; text-decoration:none; color:var(--roed-lys)} .plan-link:hover{text-decoration:underline} /* ===== Modulplan (tidslinje) ===== */ .moduler{list-style:none; margin:24px 0 0; padding:0; position:relative} .moduler::before{content:""; position:absolute; left:17px; top:10px; bottom:10px; border-left:3px dashed var(--linje)} .modul{position:relative; padding:0 0 24px 54px} .modul:last-child{padding-bottom:0} .modul .m-nr{ position:absolute; left:0; top:0; width:36px; height:36px; background:var(--skilt); color:#fff; border:2px solid #fff; box-shadow:0 0 0 2px var(--skilt); border-radius:10px; display:grid; place-items:center; font-weight:800; font-size:.95rem; font-family:"Bahnschrift","Avenir Next Condensed","Futura",Arial,sans-serif; } .modul b{display:block; font-size:1.02rem; padding-top:5px} .modul p{color:var(--blaek-2); font-size:.93rem; margin-top:3px; max-width:52ch} .modul .m-tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px} .modul.milepael .m-nr{background:var(--roed); box-shadow:0 0 0 2px var(--roed)} .modul.milepael b{color:var(--roed-lys); text-transform:uppercase; letter-spacing:.06em; font-size:.95rem} .aften-tabel{width:100%; border-collapse:collapse; font-size:.93rem; margin-top:4px} .aften-tabel td{padding:9px 10px 9px 0; border-bottom:1px solid var(--linje); vertical-align:top; color:var(--blaek-2)} .aften-tabel tr:last-child td{border-bottom:0} .aften-tabel td:first-child{white-space:nowrap; font-weight:700; width:1%; color:var(--blaek)} .aften-tabel .fase td{font-weight:700; color:var(--skilt); text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; padding-top:14px} /* ===== Beregner: dropdowns + kompakte tilvalg ===== */ .vaelger{ width:100%; font:inherit; font-weight:600; font-size:.98rem; padding:11px 42px 11px 14px; border:2px solid var(--linje); border-radius:12px; background-color:var(--grund); color:var(--blaek); appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237A8598' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; } .vaelger:hover{border-color:var(--skilt)} .vaelger:focus{outline:none; border-color:var(--skilt)} .vaelger-note{margin-top:8px; font-size:.85rem; color:var(--blaek-2)} .valg-gruppe.kompakt{gap:8px} .valg-gruppe.kompakt .valg{padding:8px 12px; border-width:1.5px; border-radius:10px} .valg-gruppe.kompakt .vn{font-weight:600; font-size:.95rem} .valg-gruppe.kompakt .vn small{font-size:.8rem} /* ===== Egen dropdown (JS erstatter native