/* ============================================================ BaseTools — fælles stilark (design-tokens + basiskomponenter) Version 1.57 — TABELLER PAA TELEFONEN (22. september 2026, BASETOOLS_AFSAETNING_TABELLER_TELEFON.md v1.0). KUN nye regler i regelfamilien TABELLER PAA TELEFONEN nederst; ingen gammel regel roert, :root uroert, ingen ny variabel. Version 1.56 — TOPBJAELKENS MENU (21. september 2026, BASETOOLS_AFSAETNING_TOPBJAELKE.md v1.0). »Forside« og »Rundvisning« i bt_top() og ☰ paa telefonen. KUN nye regler i regelfamilien TOPBJÆLKENS MENU nederst; .bt-o-top { … } og :root er urørte. Version 1.55 — RUNDVISNINGEN (21. september 2026, BASETOOLS_AFSAETNING_RUNDVISNING.md v1.1). KUN nye .bt-o-rv-*-regler til public/rundvisning.php, samlet i regelfamilien RUNDVISNINGEN nederst i filen. Ingen gammel regel roert, :root uroert, ingen ny variabel. Version 1.54 — FORSIDENS REVISION (20. september 2026, Mikaels oplaeg). ÉN additiv regel: .bt-o-modulkort + p { margin-top: var(--bt-rum-4) } — en linje lige under kortene stod klods op ad dem (maalt i Chromium: 0 px luft). Rammer KUN et afsnit direkte efter kortene: to steder paa forsiden, nul paa /affiliate (maalt 20/9). :root uroert, ingen ny farve, ingen gammel regel roert. Version 1.53 — TOPBJAELKEN STAAR FAST (20. september 2026, M5 commit 7, BASETOOLS_AFSAETNING_AFFILIATE.md 16.12 — Mikaels oenske ved accepten: alle offentlige sider, ikke kun /affiliate). ÉN regel roert: .bt-o-top faar position: sticky, top: 0 og z-index: 900 (samme lag som appens .bt-top-app). ÉN additiv regel: .bt-o-top ~ [id] { scroll-margin-top: 40px } — bjaelken er 67 px paa pc og 94 px paa mobil, men html { scroll-padding-top } giver kun 64 px, saa et spring til #kunderne og #opret-formular lagde overskriften under bjaelken (maalt i Chromium 20/9: 3 og 31 px). 64 + 40 = 104 px. Mikaels valg 20/9. :root uroert, ingen ny farve. Version 1.52 — VILKAARENE (19. september 2026, partnervilkaarene 1.1, BASETOOLS_AFSAETNING_AFFILIATE.md afsnit 15 — Mikael ved kontrolpunktet: bredere blok, mindre skrift). TO additive regler, ingen gammel regel roert, :root uroert: .bt-vilkaar-side (accept- siden 960 px i stedet for .bt-smal) og .bt-vilkaar (vilkaarsteksten i --bt-fs-lille med strammere luft). Se regelfamilien VILKAARENE nederst i filen. Version 1.51 — ANKERSPRING PAA PC (18. september 2026, BASETOOLS_AFSAETNING_KOMIGANG_LINKS.md). ÉN additiv regel: html { scroll-padding-top: 64px; } i pc-blokken i regelfamilien FARVELEVERANCEN. Topbjaelken staar fast paa pc siden v1.50, men reglen fandtes kun paa mobil — et spring til #klinikprofil lagde overskriften under bjaelken (maalt i Chromium: 24,6 px fra toppen, bjaelken slutter ved 60). Version 1.50 — FARVELEVERANCEN (18. september 2026, BASETOOLS_TEGNING_FARVER.html v1.0). SEKS additive regler, ingen gammel regel roert, :root uroert, ingen ny farvevaerdi: .bt-kort-betaling (groen) · .bt-kort-refundering (roed) · .bt-kort-komigang (blaa) · topbjaelken .bt-top-app staar fast paa pc, og menuen rykker ned under den · .bt-offentlig .bt-o-felt-fejl giver nu den roede kant, stilarket lovede. Se regelfamilien FARVELEVERANCEN nederst i filen. Version 1.49 — PARTNERSYSTEMET (16. september 2026, P1 commit 4, BASETOOLS_AFSAETNING_AFFILIATE.md v1.2, afsnit 4 »Stilarket«). FIRE additive regler, ingen gammel regel roert, :root uroert: body.bt-partner (»Stoevet blaa« paa de otte interne farvenavne — Admins partnerskaerme, F2) · .bt-badge-advarsel · .bt-flueben input[type="radio"] · .bt-tabel-taet. Se regelfamilien PARTNERSYSTEMET nederst i filen. Farverne er temaet »Stoevet blaa« fra .bt-offentlig.bt-tema-blaa, maalt og kontrastregnet i tegningens del 1, afsnit 7 — ingen ny farvevaerdi. Version 1.48 — MENUEN (16. september 2026, BASETOOLS_AFSAETNING_MENU.md). Menuen staar fast paa pc, mens man ruller, og er 224 px bred, saa intet menupunkt brydes. Paa mobil er striben erstattet af ☰ Menu i en topbjaelke, der staar fast. Se regelfamilien MENUEN nederst i filen. Én eksisterende regel er roert (.bt-sidenav: 200 -> 224 px), og mobilblokkens stribe er slettet. :root er uroert, ingen ny farve. Version 1.47 — HJAELPEBJAELKEN (15. september 2026, commit 3). ÉN ny additiv regelfamilie: .bt-hjaelp-maerke og det, der hører til det — »?« i kortets hjørne og den faste bjælke i bunden, som det folder ud. INGEN eksisterende regel er roert, :root er uroert, og der er ingen ny farveværdi. Se regelfamiliens egen kommentar nederst i filen. Version 1.46 — HJAELPESIDEN KAN LAESES (14. september 2026, hjaelpeteksten). ÉN ny regelfamilie: .bt-hjaelp og .bt-hjaelp-krop. INGEN eksisterende regel er roert, :root er uroert, og der hentes intet udefra. 🔴 HVORFOR DEN KOM: foerste udgave af hjaelpesiden brugte kun eksisterende klasser, som afsaetningen foreskrev. Mikael saa paa resultatet 14/9: manualens 97 KB proesa loeb i ca. 800 px brede linjer, og alt vejede det samme, fordi teksten bruger fed 684 gange. Hans ord: »saa kedeligt som et worddokument skrevet af en 100-aarig professor«. En hjaelpeside ER laesning — linjelaengde er ikke pynt, det er om teksten kan laeses. ⚠️ REGLERNE RAMMER KUN INDE I .bt-hjaelp. Ingen anden skaerm i huset kan se dem. ⚠️ LAESEBREDDEN LIGGER PAA KROPPEN, IKKE PAA KORTET: laa den paa
, ville de fjorten sammenfoldede linjer blive smallere end kortet, de staar i. 🔴 ANDEN RUNDE SAMME DAG — Mikael saa igen: »der er MEGET tekst der ned ad og ingen farver til at fastholde liv i siden«. Tre ting kom til, og INGEN af dem er pynt: · .bt-hjaelp-gor — manualens »Saadan goer du«-afsnit. Der er 69 af dem, og tekstens egen regel siger, at hvert afsnit skal slutte med, hvordan man goer. Det er DET, en kunde leder efter, naar hun er koert fast. Nu er de husets orange og kan ses, mens man ruller — man behoever ikke laese alt for at finde dem. · .bt-hjaelp-nr — sidetallet som et maerke, saa de fjorten linjer har et fast holdepunkt i venstre kant. · code inde i hjaelpen. Huset stylede den ikke i forvejen, og manualen bruger den 19 gange til adresser som basetools.dk/book. ⚠️ FARVERNE ER HUSETS EGNE. Ingen ny vaerdi, :root er uroert. Version 1.45 — HOLDENE FOLDES IND (7. september 2026, holdtilmeldingen). Fire nye OFFENTLIGE regler: .bt-o-hold > summary (+ :focus-visible), .bt-o-hold-navn og .bt-o-hold-fakta. Den offentlige holdside viste hvert hold udfoldet med alle sine datoer; med fem hold skulle Kunde B scrolle laenge for at finde det, hun kom efter. Nu er holdene
, og hele er udfoldningen — navn, pris, antal gange og foerste dato. REN HTML, INGEN JAVASCRIPT, ingen nye farver, ingen nye tokens. ⚠️ ÉT HOLD STAAR FOLDET UD: med ét hold er der intet at overskue. Version 1.44 — VALG AF TILMELDINGSFORM (7. september 2026, holdtilmeldingen). TRE nye interne regler: .bt-tilmeldingsvalg, .bt-tilmeldingsvalg-et og .bt-tilmeldingsvalg-navn. 🔴 EN FJERDE, -aktiv, BLEV SKREVET OG FJERNET IGEN SAMME DAG: den farvede det valgte kort, men farven kom fra serveren og kendte kun den GEMTE vaerdi, mens radioknappen fulgte klikket. De to pegede paa hver sit kort. Radioknappen viser valget selv. Kunde A's tre valg af, hvordan et hold maa tilmeldes, tegnes som stablede kort med en rigtig radioknap i hvert. Hvert kort baerer navn OG forklaring, fordi valget ellers ikke kan traeffes uden at gaette. INGEN NYE FARVER OG INGEN NYE TOKENS — kant, aktiv baggrund og afstande er husets egne. Reglerne er INTERNE. Version 1.43 — HERO'EN I TO SPALTER PAA PC (6. september 2026). En min-width-regel; telefonen er uroert. Version 1.42 — LOEFTESTRIBEN (6. september 2026). Én ny regel-familie: .bt-o-loefter. :root er urørt, intet hentes udefra. Version 1.41 — FODEN CENTRERES (6. september 2026, fod-rettelsen). Én ny regel: .bt-offentlig .bt-o-fod. Foden arvede brødtekstens læselængde på 62 tegn og lå derfor i venstre kant med sin egen tekst centreret inde i en for smal kasse. Ingen eksisterende regel er rørt, :root er urørt, og der hentes intet udefra. Version 1.40 — SKÆRMBILLEDERNE PÅ SALGSSIDEN (5. september 2026, designleverancen commit 4). Tre klasser: bt-o-skaerm (rammen om et skærmbillede), bt-o-skaerm-telefon (telefonen, der ikke må strækkes ud over sine egne 390 px) og bt-o-medie (tekst ved siden af et billede, én spalte under 900 px). :root er urørt, og der hentes intet udefra — de fire billeder er filer i huset. Version 1.39 — SALGSSIDENS BÅND OG PRISKORT (5. september 2026, designleverancen commit 3). Forsiden gik fra fire ens kort til otte bånd med skiftende bund, og prislisten fra en strakt tabel til fire kort. Klasserne bor under bt-o-baand-, bt-o-modulkort- og bt-o-priskort-. :root er urørt, intet hentes udefra, og .bt-o-side og .bt-o-blok er IKKE rørt — kundens bookingside og de tre juridiske sider bruger dem uændret. Version 1.38 — TOPBJÆLKEN PÅ DE OFFENTLIGE SIDER (5. september 2026, designleverancen commit 2b). Fem nye klasser under bt-o-top-. :root er urørt, og der hentes intet udefra. Version 1.37 — LOGOET ERSTATTER BOGSTAVET (5. september 2026, designleverancen commit 2a). `.bt-logo` var et B tegnet i CSS: en orange 32×32-flade med et navy bogstav centreret i. Den er nu en ramme om `public/img/logo.svg`, husets rigtige mærke. Reglen beholder sin plads i det INTERNE lag, fordi den bruges af app.php og login.php — begge uden for lag 2. :root er urørt, og der hentes intet udefra: SVG'en er en fil i huset. ⚠️ MÆRKET ER IKKE KVADRATISK. Konturen er 562×380, altså 1,48:1, så bredden er `auto` og højden styrer. En fast 32×32 ville klemme det sammen. Version 1.36 — HUSKELISTEN »KOM GODT I GANG« (5. september 2026). Et nyt afsnit med fem klasser under bt-kig-. Ingen eksisterende regel er rørt, og :root er urørt: farverne kommer fra de tokens, der allerede findes. Listen er bevidst bygget uden ikoner og uden JavaScript — et flueben og en tom cirkel er tegn, ikke billeder. Version 1.35 — »MANGLER«-KORTET FÅR SAMME BREDDE SOM DAGEN (3. september 2026, dashboardleverancen del 3). Kortet viser de samme linjer og den samme klasseliste som »I dag« og bærer det samme arbejde — så det får den samme dobbelte spaltebredde over 800 px. Ingen andre regler er rørt: linjen, gruppen, klasselisten og deltagerkortet er allerede skrevet uden binding til ét kort. Version 1.34 — ARTEN BÆRES AF FLADEN (2. september 2026, Mikaels tredje gennemsyn: »kan vi ikke bruge baggrundsfarver til at fortælle hvad der er tider og hvad der er hold - det er meget kompakt«). En tid står på kortets egen hvide flade. Et hold står på en let tonet flade og bærer en farvet venstrekant. Det koster INGEN plads — ingen mærkater, ingen ekstra ord — og forskellen ses, før man har læst noget. §23 ER HOLDT: farven er ikke ENESTE bærer. Handlingskolonnen siger det samme — en tid har en rulleliste, et hold har »Deltagere« — og fladen lægger sig ovenpå som en genvej for øjet, ikke som den eneste oplysning. OG DET LØSER OVERBLIKKET: når et hold foldes ud, bliver hele blokken — linje, deltagere og Gem-knap — ÉT tonet område. Man kan se, hvor holdet slutter, og hvor dagen fortsætter. Før løb seks deltagerlinjer sammen med resten af dagen, og man mistede den af syne, mens man markerede. LINJERNE ER STRAMMET: mindre luft og et tyndere skel, så fire aftaler fylder en fjerdedel af skærmen i stedet for en halv. ⚠️ ET FUND, DER KUN KUNNE SES I BROWSEREN (mønster 15): med TO hold foldet ud stod de som ét langt tonet felt, delt af en hårstreg — og så var fladen holdt op med at fortælle noget. En udfoldet gruppe har derfor luft over og under og den orange kant hele vejen rundt. Kilden var korrekt begge gange; billedet var det ikke. Version 1.33 — dagens liste får FASTE KOLONNER (2. september 2026, efter Mikaels anden gennemsyn: »det blev faktisk ikke meget bedre ... det er stadig uoverskueligt«). v1.32 rettede ORDENE og FARVERNE, men ikke STRUKTUREN, og det var strukturen, der var galt: linjen var en flexlinje med ombrydning, så styringen hoppede fra højre kant ned på sin egen linje, så snart navnet blev langt nok. To linjer i træk så forskellige ud, og øjet kunne ikke løbe ned ad en kolonne. NU ER LINJEN ET GITTER MED TRE FASTE KOLONNER: tid · hvad · handling. Rullelisterne står i én lodret kolonne uanset navnenes længde. Under 640 px falder gitteret til én kolonne og stabler — dér ER en telefon. OG HOLDLINJEN ER SELV UDFOLDNINGEN: er hele linjen, så »Deltagere« står i handlingskolonnen i stedet for som en løsreven linje under. Det fjerner et element pr. hold og gør forskellen på en tid og et hold til noget, man SER i kolonnen. Derfor er mærkaterne »Tid« og »Hold« fjernet igen: strukturen siger det nu, og to mærkater på hver linje var støj, ikke oplysning. DELTAGEREN ER ÉN LINJE, ikke to: navn og pris til venstre, de tre valg til højre. Klasselisten gik fra tolv linjers højde til seks. Version 1.32 — forsiden kan LÆSES (2. september 2026, efter Mikaels gennemsyn af del 1 og 2): »det er ikke til at se forskel på om det er en massage eller et hold, der er alm skrift og fed skrift, men det gavner ikke rigtig.« TRE RETTELSER, hver med sin grund: 1) KLOKKESLÆTTET får fast bredde og tabulartal, så tiderne flugter lodret. Før stod de i fed og skubbede navnet ud på skæve pladser. 2) NAVNET bærer vægten i stedet. Det er det, man leder efter, når man scanner sin dag — ikke minuttallet. 3) ARTEN står som et MÆRKAT MED ET ORD — »Tid« eller »Hold«. Aldrig som farve alene: §23's regel om, at status bæres af farve OG form, gælder også her, og en farvet stribe ville være ulæselig for en farveblind. OG DEN VIGTIGSTE: »IKKE MARKERET« ER IKKE LÆNGERE FREMHÆVET. Den stod med accentflade på hver eneste deltager, så en helt umarkeret liste skreg af orange — og fladen sagde »dette er valgt og i orden«, mens ordet betyder »jeg har ikke taget stilling«. Nu er den ubesluttede tilstand ROLIG, og hvert kryds, man sætter, springer frem: mødt på grøn statusflade, ikke mødt på accentflade. Begge bærer BÅDE flade, kant og ord. Version 1.31 — forsidens klasseliste (2. september 2026, dashboardleverancen del 2): et holds deltagere foldes ud under aftalelinjen, hver med tre valg og én fælles Gem-knap. PÅ EN TELEFON ER DET EN ANDEN SITUATION, og det er hele grunden til blokken: man står med mobilen i hånden VED holdet, ikke ved skrivebordet bagefter. Under 600 px bliver hver deltager sit eget kort med tre lige brede knapper, store nok til en tommelfinger, og Gem-knappen klæber til bunden af skærmen, mens listen er åben — ved otte deltagere skal man ellers scrolle ned for at finde den, og optællingen skal kunne ses samtidig med, at man trykker. position: sticky er den eneste virkelig nye byggeklods i hele leverancen; resten er stabling, som huset gør i forvejen. VALGENE ER RADIOKNAPPER, ikke knapper: tre gensidigt udelukkende valg ER en radiogruppe, og så virker tastatur og skærmlæser af sig selv. De TEGNES som knapper. Version 1.30 — forsidens aftalelinje (2. september 2026, dashboardleverancen del 1): dagens aftaler bærer nu tekst, rulleliste og knap på samme linje. På et skrivebord står de tre dele ved siden af hinanden; under 600 px stables de, og styringen får hele bredden — en rulleliste og en knap ved siden af et navn kan ikke være på 340 px uden at blive for små at ramme. REGLERNE ER INTERNE og står i den interne del af filen, ALDRIG på :root og aldrig under .bt-offentlig. dev/verificer_lag2.py måler netop den grænse: en intern regel, der lækker ud på de offentlige sider, ville bryde lag 2-fundamentets scoping. BRYDEPUNKTET 600 px ER HUSETS EGET og bruges i forvejen af lag 2. Version 1.29 — CTA-knappens kant (30. august 2026): husets vigtigste knap — »+ Opret kontakt«, »+ Opret postering«, »Opret sag« — havde ingen kant, og fladen alene bærer ikke UI-kravet på 3:1: ren orange #FF6A0B er 2,87:1 mod et hvidt kort og 2,67:1 mod sidefladen #F5F7FA, hvor knappen ofte står, fordi den ligger OVER listens kort. FYLDET ER IKKE ÆNDRET, og det er et valg: ren orange er husets accent, og en mørkere flade ville flytte hele farveholdningen på hver eneste skærm. I stedet bærer KANTEN kravet — nøjagtig samme greb som .bt-btn-sekundaer har brugt siden v1.25, og med et token, der findes i forvejen: --bt-orange-dark #B84800. Ingen ny farve. MÅLT i Chromium 30/8 af dev/maal_knapper.py på Firmaer-siden: kanten giver 4,93:1 mod sidefladen, hvor fyldet giver 2,67:1. Mod hvid (5,30:1) og mod #FFE9D9 (4,52:1) er tallene REGNET ud af farverne og ikke aflæst på en skærm — begge er dog så langt over 3:1, at et par hundrededele ikke ændrer noget. BREDDEN ER 1,5 px som sekundærens, så de to ikke driver fra hinanden. ⚠️ Bemærk, at Chromium rapporterer 1px som computed border-width ved DPR 1 — det gør den også for sekundæren, og det er afrunding til hele billedpunkter, ikke en fejl i reglen. ⚠️ KANTEN GØR KNAPPEN HØJERE: »+ Opret firma« gik fra 42 px til 44 px, målt. Det rører spørgsmålet om, hvorvidt 44 px skal være et krav for knaphøjder — men det AFGØR det ikke; her flyttes ét tal, og beslutningen står stadig åben. Version 1.28 — knapperne har fået deres farve (29. august 2026): Seks knapper i tre filer stod som nøgen .bt-btn uden modifier og fik derfor browserens standardflade — 1,07:1 mod sidefladen mod projektets UI-krav på 3:1. De har nu -primaer eller -sekundaer, og der er kommet en regel for en slået fra knap; se den ved .bt-btn-sekundaer nedenfor. Målt af dev/maal_knapper.py. Version 1.27 — gruppeoverskrifterne skærpet (29. august 2026): v1.26's overskrifter var for stille. De brugte --bt-text-muted (5,95:1) og forsvandt mellem menupunkterne, som er navy og fede. Nu navy (15,36:1), en hårfin linje OVER hver gruppe og mere luft. Blå (--bt-info) blev overvejet og fravalgt: den farve betyder allerede »infobesked«, og en strukturel etiket må ikke låne en semantisk farve. Adskillelsen kommer fra FORM og ikke kun kulør. Version 1.26 — menuens grupper (29. august 2026, B1): ÉN ny regel, .bt-nav-gruppe. Menuen var én flad liste, hvor arbejdsområder og kontoindstillinger stod side om side; nu står de under hver sin dæmpede overskrift. Ingen ny farve og ingen ny afstand — reglen bruger --bt-text-muted (5,95:1) og de eksisterende rum-variable. Overskriften er en ETIKET og ikke et link: den har ingen hover, ingen fokusring og ingen aktiv-tilstand. Version 1.25 — lag 3-UX, leverance 2 (27. august 2026): TO ændringer. (a) .bt-btn-sekundaer får accentfladen #FFE9D9 som fyld — Mikaels valg 26/8, forslag B af tre. Knappen havde før kortets EGEN farve og var derfor usynlig som flade; kun kanten skilte den ud. KANTEN BLIVER STÅENDE, og det er ikke pynt: MÅLT i Chromium 27/8 er fyldet 1,17:1 mod kortfladen og bærer altså ikke UI-kravet alene — det gør kanten #8A94A8 med 3,05:1, uændret. Navy tekst på det nye fyld er 13,10:1. Ændringen rører ALLE interne skærme, 14 filer. (b) .bt-post-* — posteringsformularens gitter med faste kolonner. .bt-ferie-form er URØRT: den bruges seks steder i fem filer, og posteringsformularen har fået sin egen klasse, så baseline ikke skæres i. Version 1.24 — hero-fotoet (20. august 2026, Trin 44): én ny regel, .bt-o-hero-foto. Fotoet gives som CSS-variablen --bt-hero-foto (inline på hero'en fra b.php), og temafarven lægger sig over som slør. SLØRETS 75 % ER MÅLT, IKKE VALGT (20/8-2026): tekstkontrasten mod blandingen af accent-fladen og et VILKÅRLIGT foto (værste fald: helt hvidt og helt sort) er beregnet for alle syv temaer — grænsen 4,5:1 rammes ved 72 %, og 75 % holder 5,11:1 i værste fald (aften-temaet over hvidt foto). Browsere uden color-mix ignorerer hele reglen og viser hero'en som i dag — designet afhænger aldrig af fotoet. Version 1.23 — salgssagen (16. august 2026, leverance 3): fire badges til sagens tilstande (forfalden, vundet, tabt, henlagt). Ingen ny farve — alle fire genbruger paletpar, der allerede er i brug, og hver tilstand bæres af farve OG tekst. Kontrasten er ARVET, ikke genmålt i en browser: verificer_lag2.py måler kun .bt-offentlig, og de interne skærme har aldrig været målt den vej (mønster 15). En femte regel, .bt-sag-gruppe, blev skrevet og fjernet igen samme dag — se stedet, hvor den stod. Version 1.22 — klientforløbet (15. august 2026, leverance 2): de seks bt-status-* for salgsflowet er afløst af tre bt-klient-* for klientforløbet — aktiv, afsluttet og ikke klient. Farverne er de samme paletflader; kun betydningen er skiftet, fordi det er klientforholdet og ikke salgstrinnet, listen viser. Version 1.21 — beskedernes ikon (14. august 2026): tegnet står nu HØJRESTILLET i en fast kolonne, så afstanden til teksten er ens for alle fire beskedtyper. MÅLT før: 21,5 px ved »!«, 22,5 ved »i«, men kun 13,0 ved »✓« og »✕« — fordi tegnene er 5,7/4,7 px mod 14,3 px brede, mens ikonet stod venstrestillet og teksten altid samme sted. Udråbstegnet hang derfor løsrevet fra sin egen sætning. MÅLT efter: 6,8 px for alle fire. Version 1.20 — mobil og tilgængelighed (13. august 2026): kalenderens celler holder 44 px i bredden på smalle skærme, brede tabeller ruller i deres eget kort i stedet for at skubbe hele siden, undermenuen bliver vandret sammen med hovedmenuen, og .bt-kun-oplaest giver skærmlæsere rigtig tekst i stedet for aria-label på et . Alle fire er MÅLT i Chromium ved 360/390/414/430 px — se hver regel. Version 1.19 — lag 2 (august 2026): holdsidens fulde afholdelse (.bt-o-valgkort-lukket). Samme princip som kalenderens lukkede dag: tilstanden bæres af BÅDE form og ord — stiplet kant, dæmpet tekst, ingen markør, og elementet er et , ikke et , så der ikke kan trykkes forgæves. Teksten »Kan ikke vælges« står ved siden af mærkatet, så beskeden aldrig hviler på farve alene (§23, forbudsregel 3). Ingen ny farve — genbruger de tokens, kortet og mærkaterne allerede bruger. Version 1.18 — lag 2 (august 2026): månedskalenderen på bookingsidens trin 2 (.bt-o-kal-*). Tre dagtilstande, hver båret af BÅDE flade og form: ledig = kortflade med kant og et , lukket/optaget = sideflade uden kant og UDEN link (kan ikke klikkes forgæves). Designets tredje tilstand »valgt« er IKKE bygget: trinnet foldes sammen i samme øjeblik en dato vælges, så ingen dag kan stå som valgt — en regel, der aldrig kan rammes, står ikke i filen. Ingen ny farve — MÅLT 11/8-2026 i alle syv temaer: dæmpet tekst på sidefladen 5,51-8,10:1, kanten mod kortfladen 3,05-3,67:1. Version 1.17 — lag 2 (august 2026): .bt-o-besked bruger normalt tekstflow med absolut placeret ikon — display:flex gjorde hvert inline-element til et flex-item og indsatte mellemrum i teksten. Version 1.16 — lag 2 (august 2026): .bt-o-hero-alene — hero'en som sidens midte, når profilen ellers er tom. Version 1.15 — lag 2-UX (august 2026): tokens, syv temaer og komponentklasser til de OFFENTLIGE sider (b.php, book.php, hold.php, opret.php) — ALT scopet under .bt-offentlig. :root og de interne skærme er urørte. Version 1.14 — Trin 22 (august 2026): undermenu i sidemenuen (.bt-subnav) — modulernes undersider er altid synlige. Version 1.13 — Trin 12 (august 2026): fluebensfelt (.bt-flueben) til aflysningsvilkårene — boks og tekst på samme linje. Version 1.12 — Trin 11 (august 2026): økonomi (sumtal, aktiv årsrække) og statusskift-formular i kalenderen. Version 1.11 — Trin 20 (august 2026): notattype-badges (journal/notat på kontaktens notatliste). Version 1.10 — Trin 9 (august 2026): kalender for Kunde A (ugegrid, dagceller, bookingstatus-badges, oversigtsfaner). Version 1.9 — Trin 8 (august 2026): offentlig bookingside (valgliste, tidsslots). Redesignes i Fase 4 (§23, lag 2). Version 1.8 — Trin 18 (august 2026): sammenklappelig sektion (bt-detaljer) til inaktive ydelser. Version 1.7 — Trin 17 (august 2026): farezone (GDPR-sletning) og printregler til dataudtrækket. Version 1.6 — Trin 7 (august 2026): åbningstidstabel og ferieformular (booking-indstillinger). Version 1.5 — Trin 16 (august 2026): textarea og notatkort (journalen) tilføjet. Version 1.4 — Trin 6 (august 2026): select-felter (statusflow og statusfilter) stylet som inputfelter. Version 1.3 — Trin 5 (august 2026): feltfejl og smalle formularkort tilføjet. Version 1.2 — Trin 4 (august 2026): værktøjslinje, statusbadges for CRM-statusflowet og paginering tilføjet. Version 1.1 — Trin 3 (august 2026): shell-layout og sidemenu tilføjet (bt-shell, bt-sidenav, bt-indhold, bt-kort-grid). Version 1.0 — Trin 2 (august 2026) PALETTEN ER LÅST og alle kontrasttal er BEREGNEDE (6/8-2026): - Navy på hvid: 15,36:1 | Orange på navy: 5,35:1 - Navy tekst på orange: 5,35:1 | Orange på hvid: 2,87:1 = FORBUDT - Mørk orange på hvid: 5,30:1 (links/fokus) Regler: ren orange (#FF6A0B) må ALDRIG stå som tekst, link eller ikon på lys baggrund. CTA-knapper er orange flade med NAVY tekst. Status bæres altid af farve OG form/tekst — aldrig farve alene. ============================================================ */ :root { /* Brandfarver */ --bt-navy: #1C243C; /* brødtekst, primær knap, mørke flader */ --bt-orange: #FF6A0B; /* accent: på navy, eller flade m. navy tekst */ --bt-orange-dark: #B84800; /* links, fokusring, orange tekst på lyst (5,30:1) */ --bt-orange-bg: #FFE9D9; /* bleg accentflade (navy tekst: 13,10:1) */ /* Neutrale */ --bt-bg: #F5F7FA; /* sidebaggrund */ --bt-card: #FFFFFF; /* kort og paneler */ --bt-border: #D8DEE4; /* dekorative skillelinjer — IKKE inputfelter */ --bt-border-input: #8A94A8; /* inputkanter (3,05:1 — opfylder UI-kravet) */ --bt-text: #1C243C; --bt-text-muted: #5A6478; /* dæmpet tekst (5,95:1) */ /* Status: tekstfarve (>=4,5:1 på hvid) + bleg flade (navy tekst >=12:1) */ --bt-success: #1D7A46; --bt-success-bg: #E4F3EA; --bt-warning: #8A5800; --bt-warning-bg: #FCF0DC; --bt-error: #B3261E; --bt-error-bg: #FBE7E5; --bt-info: #1B5FAF; --bt-info-bg: #E4EEFA; /* Typografi-skala og afstande */ --bt-font: system-ui, -apple-system, "Segoe UI", sans-serif; --bt-fs-lille: 0.85rem; --bt-fs-normal: 0.95rem; --bt-fs-stor: 1.15rem; --bt-fs-h1: 1.35rem; --bt-rum-1: 0.25rem; --bt-rum-2: 0.5rem; --bt-rum-3: 1rem; --bt-rum-4: 1.5rem; --bt-radius: 8px; } /* ---------- grundlag ---------- */ * { box-sizing: border-box; } body { font-family: var(--bt-font); font-size: var(--bt-fs-normal); margin: 0; background: var(--bt-bg); color: var(--bt-text); overflow-wrap: break-word; /* lange ord/URL'er må aldrig sprænge layoutet */ line-height: 1.5; } h1 { font-size: var(--bt-fs-h1); margin: 0 0 var(--bt-rum-3); } h2 { font-size: var(--bt-fs-stor); margin: 0 0 var(--bt-rum-2); } a { color: var(--bt-orange-dark); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--bt-navy); } /* ---------- topbjælke ---------- */ .bt-top { background: var(--bt-navy); color: #fff; padding: var(--bt-rum-3) var(--bt-rum-4); display: flex; align-items: center; gap: var(--bt-rum-2); } .bt-top a { color: #fff; } /* HUSETS MÆRKE. Stod som et B i CSS indtil v1.37 — en orange flade med et navy bogstav. Nu er det logo.svg, som er orange paa gennemsigtig bund og derfor staar direkte paa den navy topbjaelke uden en flade under sig. Hoejden styrer; bredden foelger med, fordi konturen er 1,48:1 og ikke kvadratisk. */ .bt-logo { height: 28px; width: auto; display: block; flex: none; } .bt-top .bt-accent { color: var(--bt-orange); } /* orange tekst KUN på navy */ /* ---------- layout ---------- */ .bt-main { max-width: 960px; margin: var(--bt-rum-4) auto; padding: 0 var(--bt-rum-3); } .bt-smal { max-width: 420px; } .bt-kort { background: var(--bt-card); border: 1px solid var(--bt-border); border-radius: 10px; padding: var(--bt-rum-4); margin-bottom: var(--bt-rum-3); } /* ---------- knapper ---------- */ .bt-btn { display: inline-block; border: 0; border-radius: var(--bt-radius); padding: 0.6rem 1.1rem; font-size: var(--bt-fs-normal); font-family: var(--bt-font); font-weight: 600; cursor: pointer; text-decoration: none; } .bt-btn-primaer { background: var(--bt-navy); color: #fff; } .bt-btn-cta { background: var(--bt-orange); color: var(--bt-navy); border: 1.5px solid var(--bt-orange-dark); } /* ALDRIG hvid tekst her · KANTEN bærer UI-kravet, se v1.29 */ .bt-btn-sekundaer { background: var(--bt-orange-bg); color: var(--bt-navy); border: 1.5px solid var(--bt-border-input); } /* En SLÅET FRA knap — tilføjet 29/8-2026. HVORFOR DEN ER NØDVENDIG: .bt-btn sætter hverken baggrund eller tekstfarve, så en knap uden modifier fik browserens standardflade, og browseren dæmpede den SELV med alfa, når den var slået fra (målt: rgba(16,16,16,0.3)). I samme leverance fik alle knapper en modifier — og dermed en rigtig baggrund, som overskriver netop den dæmpning. Uden reglen her ville en knap, man IKKE kan trykke på, se ud som en, man kan. Systemets eneste slåede fra knapper er profilsidens to flytteknapper. FORMEN ER HUSETS EGEN: .bt-offentlig .bt-o-btn[disabled] har brugt opacity .55 siden lag 2. Samme tal her, så de to sider af huset ikke driver fra hinanden. aria-disabled er med, fordi en knap tegnet som ikke kan bære attributten disabled. */ .bt-btn[disabled], .bt-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; } .bt-btn:focus-visible, input:focus-visible { outline: 3px solid var(--bt-orange-dark); outline-offset: 1px; } /* ---------- formularer ---------- */ .bt-felt { margin-bottom: var(--bt-rum-3); } .bt-felt label { display: block; font-weight: 600; margin-bottom: var(--bt-rum-1); } .bt-felt input, .bt-felt select, .bt-felt textarea { width: 100%; border: 1.5px solid var(--bt-border-input); border-radius: var(--bt-radius); padding: 0.55rem 0.7rem; font-size: var(--bt-fs-normal); font-family: var(--bt-font); background: var(--bt-card); color: var(--bt-text); } .bt-felt textarea { resize: vertical; min-height: 90px; } /* Fluebensfelt (Trin 12): checkbox og tekst på SAMME linje. .bt-felt strækker inputs til 100 % bredde — det giver en boks, der svæver alene midt i kortet. Her låses boksen til fast mål og lægges på linje med teksten. */ .bt-flueben label { display: flex; align-items: center; gap: var(--bt-rum-1); margin-bottom: 0; } .bt-flueben input[type="checkbox"] { width: 1.1rem; height: 1.1rem; margin: 0; flex: none; } select:focus-visible, textarea:focus-visible { outline: 3px solid var(--bt-orange-dark); outline-offset: 1px; } /* ---------- booking-indstillinger (Trin 7) ---------- */ .bt-tid-tabel input[type="time"] { border: 1.5px solid var(--bt-border-input); border-radius: var(--bt-radius); padding: 0.35rem 0.5rem; font-size: var(--bt-fs-normal); font-family: var(--bt-font); } .bt-tid-tabel input[type="checkbox"] { width: 1.1rem; height: 1.1rem; } .bt-ferie-form { display: flex; gap: var(--bt-rum-3); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--bt-rum-3); } .bt-ferie-form .bt-felt { margin-bottom: 0; } .bt-ferie-form input[type="date"] { border: 1.5px solid var(--bt-border-input); border-radius: var(--bt-radius); padding: 0.45rem 0.6rem; font-size: var(--bt-fs-normal); font-family: var(--bt-font); } /* ---------- posteringsformularen (lag 3-UX, leverance 2) ---------- FASTE kolonner, ikke en flex-række med max-width/min-width pr. felt. Den gamle .bt-ferie-form ombrød forskelligt ved hver vinduesbredde, fordi hvert felt havde sit eget mål — det var årsagen til Mikaels note »felterne hopper rundt« (10/8, §23). To kolonner fra 640 px, én under. .bt-post-bred lægger et felt over begge kolonner. */ .bt-post-typer { display: flex; flex-wrap: wrap; gap: var(--bt-rum-2); margin-bottom: var(--bt-rum-3); } .bt-post-gitter { display: grid; grid-template-columns: 1fr; gap: var(--bt-rum-3); align-items: start; margin-bottom: var(--bt-rum-3); } .bt-post-gitter .bt-felt { margin-bottom: 0; } .bt-post-gitter input[type="text"], .bt-post-gitter input[type="date"], .bt-post-gitter select { width: 100%; box-sizing: border-box; border: 1.5px solid var(--bt-border-input); border-radius: var(--bt-radius); padding: 0.45rem 0.6rem; font-size: var(--bt-fs-normal); font-family: var(--bt-font); } .bt-post-gruppe { border: 1.5px solid var(--bt-border); border-radius: var(--bt-radius); padding: var(--bt-rum-3); margin: 0; } .bt-post-gruppe legend { padding: 0 var(--bt-rum-2); font-weight: 600; } .bt-post-gitter-indre { display: grid; grid-template-columns: 1fr; gap: var(--bt-rum-3); } @media (min-width: 640px) { .bt-post-gitter, .bt-post-gitter-indre { grid-template-columns: 1fr 1fr; } .bt-post-bred, .bt-post-gruppe, .bt-post-knap { grid-column: 1 / -1; } } /* ---------- offentlig bookingside (Trin 8) ---------- */ .bt-book-main { max-width: 720px; } .bt-book h2 { margin-top: var(--bt-rum-4); } .bt-valgliste { display: grid; gap: var(--bt-rum-2); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .bt-valg { display: flex; flex-direction: column; gap: 0.15rem; border: 1.5px solid var(--bt-border-input); border-radius: var(--bt-radius); padding: var(--bt-rum-2) var(--bt-rum-3); text-decoration: none; color: var(--bt-navy); background: var(--bt-card); } .bt-valg:hover { background: var(--bt-bg); color: var(--bt-navy); } .bt-valg-aktiv { border-color: var(--bt-orange); background: var(--bt-orange-bg); } .bt-valg-navn { font-weight: 600; } .bt-slots { display: flex; flex-wrap: wrap; gap: var(--bt-rum-2); } .bt-slot { display: inline-block; border: 1.5px solid var(--bt-border-input); border-radius: var(--bt-radius); padding: 0.4rem 0.7rem; text-decoration: none; font-weight: 600; color: var(--bt-navy); background: var(--bt-card); } .bt-slot:hover { background: var(--bt-bg); color: var(--bt-navy); } .bt-slot-aktiv { border-color: var(--bt-orange); background: var(--bt-orange-bg); } .bt-book-fod { text-align: center; margin: var(--bt-rum-4) 0; } /* ---------- kalender for Kunde A (Trin 9) ---------- I dag markeres med form (kraftig kant) OG tekst "(i dag)" — aldrig farve alene. Aflyste bookinger markeres med gennemstregning OG dæmpet farve. */ .bt-uge-vaerktoej { display: flex; align-items: center; gap: var(--bt-rum-2); flex-wrap: wrap; margin-bottom: var(--bt-rum-3); } .bt-uge-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--bt-rum-2); } .bt-dag { background: var(--bt-card); border: 1px solid var(--bt-border); border-radius: var(--bt-radius); padding: var(--bt-rum-2); min-height: 110px; min-width: 0; /* lange navne må ikke sprænge griddet */ } .bt-dag-lukket { background: var(--bt-bg); } .bt-dag-idag { border: 2px solid var(--bt-orange); } /* + tekst "(i dag)" */ .bt-dag-valgt { background: var(--bt-orange-bg); } .bt-dag-hoved { display: block; font-weight: 600; color: var(--bt-navy); text-decoration: none; margin-bottom: var(--bt-rum-1); } .bt-dag-hoved:hover { text-decoration: underline; color: var(--bt-navy); } .bt-dag-hoved:focus-visible { outline: 3px solid var(--bt-orange-dark); outline-offset: 1px; } .bt-dag-idag-tekst { color: var(--bt-orange-dark); font-size: var(--bt-fs-lille); } .bt-dag-booking { display: block; font-size: var(--bt-fs-lille); border-left: 3px solid var(--bt-info); padding-left: 0.4rem; margin: 0.35rem 0; overflow-wrap: anywhere; } .bt-dag-booking-aflyst { border-left-color: var(--bt-border-input); color: var(--bt-text-muted); text-decoration: line-through; } .bt-fane-aktiv { /* aktiv fane i oversigten */ display: inline-block; padding: 0.6rem 1.1rem; border-radius: var(--bt-radius); background: var(--bt-navy); color: #fff; font-weight: 600; } @media (max-width: 768px) { /* smalle skærme: ugen vises som én kolonne, dagene under hinanden */ .bt-uge-grid { grid-template-columns: 1fr; } .bt-dag { min-height: 0; } } /* ---------- bookingstatus-badges (Trin 9) ---------- Status bæres af farve OG tekst — aldrig farve alene. */ .bt-status-booket { background: var(--bt-info-bg); color: var(--bt-info); } .bt-status-gennemfoert { background: var(--bt-success-bg); color: var(--bt-success); } .bt-status-udeblevet { background: var(--bt-warning-bg); color: var(--bt-warning); } .bt-status-aflyst { background: #EEF0F4; color: var(--bt-text-muted); } /* ---------- sammenklappelig sektion (Trin 18: inaktive ydelser) ---------- */ .bt-detaljer { margin-top: var(--bt-rum-3); } .bt-detaljer summary { cursor: pointer; font-weight: 600; color: var(--bt-text-muted); padding: var(--bt-rum-2) 0; } .bt-detaljer summary:hover { color: var(--bt-navy); } .bt-detaljer summary:focus-visible { outline: 3px solid var(--bt-orange-dark); outline-offset: 1px; } .bt-detaljer[open] summary { color: var(--bt-navy); } /* ---------- GDPR: farezone og print (Trin 17) ---------- */ .bt-farezone { border: 1.5px solid var(--bt-error); border-radius: var(--bt-radius); background: var(--bt-error-bg); padding: var(--bt-rum-3); margin-top: var(--bt-rum-3); } .bt-farezone h3 { margin: 0 0 var(--bt-rum-2); color: var(--bt-error); font-size: var(--bt-fs-normal); } .bt-btn-fare { background: var(--bt-error); color: #fff; } /* hvid på #B3261E: over 4,5:1 */ .bt-farezone input[type="checkbox"] { width: 1.05rem; height: 1.05rem; } @media print { /* Dataudtrækket printes rent: kun indholdet, ingen navigation */ .bt-top, .bt-sidenav, .bt-print-skjul { display: none !important; } .bt-shell, .bt-indhold { display: block; padding: 0; margin: 0; max-width: none; } body { background: #fff; } .bt-kort { border: 1px solid #999; break-inside: avoid; } } /* ---------- økonomi (Trin 11) ---------- Fortegn bæres af tegn (+/−) OG farve — aldrig farve alene. */ .bt-sum { font-size: var(--bt-fs-stor); font-weight: 700; margin: 0 0 var(--bt-rum-1); } .bt-sum-plus { color: var(--bt-success); } /* 5,35:1 på hvid */ .bt-sum-minus { color: var(--bt-error); } /* 6,54:1 på hvid */ .bt-raekke-aktiv td { background: var(--bt-orange-bg); } /* statusskift i kalenderens dagsdetaljer (Trin 11) */ .bt-statusskift { display: flex; gap: 0.35rem; align-items: center; } .bt-statusskift select { border: 1.5px solid var(--bt-border-input); border-radius: var(--bt-radius); padding: 0.35rem 0.5rem; font-size: var(--bt-fs-lille); font-family: var(--bt-font); background: var(--bt-card); color: var(--bt-text); } .bt-statusskift .bt-btn { padding: 0.35rem 0.7rem; font-size: var(--bt-fs-lille); } /* ---------- notattype-badges (Trin 20) ---------- Type bæres af farve OG tekst — aldrig farve alene. */ .bt-notattype-journal { background: var(--bt-info-bg); color: var(--bt-info); } .bt-notattype-notat { background: var(--bt-orange-bg); color: var(--bt-navy); } /* ---------- notater/journal (Trin 16) ---------- */ .bt-notat { border-top: 1px solid var(--bt-border); padding: var(--bt-rum-2) 0; margin-top: var(--bt-rum-2); } .bt-notat-dato { color: var(--bt-text-muted); font-size: var(--bt-fs-lille); font-weight: 600; margin: 0 0 var(--bt-rum-1); } .bt-notat-tekst { margin: 0; white-space: normal; } /* Statusfilter i værktøjslinjen (Trin 6) */ .bt-vaerktoej select { border: 1.5px solid var(--bt-border-input); border-radius: var(--bt-radius); padding: 0.55rem 0.7rem; font-size: var(--bt-fs-normal); font-family: var(--bt-font); background: var(--bt-card); color: var(--bt-text); } /* ---------- beskeder (farve + symbol + tekst — aldrig farve alene) ---------- */ .bt-besked { border-radius: var(--bt-radius); padding: 0.6rem 0.8rem; margin: var(--bt-rum-2) 0; font-size: var(--bt-fs-lille); } .bt-besked b { white-space: nowrap; } /* Undtagelsen (23/9-2026): en lang fed saetning skal kunne bryde, ellers bliver siden bredere end telefonen (Konto og data, 452 px ved 390). */ .bt-besked b.bt-bryd { white-space: normal; } .bt-besked-ok { background: var(--bt-success-bg); } .bt-besked-ok b { color: var(--bt-success); } .bt-besked-advarsel{ background: var(--bt-warning-bg); } .bt-besked-advarsel b{ color: var(--bt-warning); } .bt-besked-fejl { background: var(--bt-error-bg); } .bt-besked-fejl b { color: var(--bt-error); } .bt-besked-info { background: var(--bt-info-bg); } .bt-besked-info b { color: var(--bt-info); } /* ---------- badges (moduler, status) ---------- */ .bt-badge { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; padding: 0.2rem 0.65rem; font-size: var(--bt-fs-lille); font-weight: 600; } .bt-badge-aktiv { background: var(--bt-success-bg); color: var(--bt-success); } .bt-badge-inaktiv { background: #EEF0F4; color: var(--bt-text-muted); } /* ---------- tabeller ---------- */ .bt-tabel { border-collapse: collapse; width: 100%; font-size: var(--bt-fs-normal); } .bt-tabel th, .bt-tabel td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--bt-border); } .bt-tabel th { background: var(--bt-bg); } @media (max-width: 768px) { .bt-tabel { font-size: var(--bt-fs-lille); } .bt-tabel th, .bt-tabel td { padding: 0.35rem 0.4rem; } } .bt-daempet { color: var(--bt-text-muted); font-size: var(--bt-fs-lille); } /* ---------- tekst kun for skærmlæsere ---------- MÅLT 13. august 2026: aria-label på et UDEN rolle eksponeres ikke af VoiceOver og TalkBack — de læser elementets tekstindhold. Kalenderens lukkede dage stod med aria-label="18. august — ingen ledige tider" og blev læst op som bare »18«. Rigtig tekst, gemt for øjet men ikke for oplæsningen, virker i alle skærmlæsere. På et eller en