/* Moneyweb Skabelon 01 - haandskrevne rettelser (9/10-2026).
   Indlaeses EFTER assets/css/v/*.css og genereres IKKE af pipelinen (dcconv2/byg-skabelon/farver.py).
   Hver blok har en overskrift med tema og aarsag. */

/* Hero 8: lange ydelsesnavne i boblerne klippes med ... i stedet for at straekke pillen */
.h8-19 > a, .h8-4w > a{max-width:min(200px, 60vw)}
.h8-19 > a > span:nth-child(2), .h8-4w > a > span:last-child{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* (.h8-19 = mobil-raekken i markuppen; .h8-4w = de kredsende piller, som designets JS tegner paa desktop) */

/* Hero 2: formular-kortet var for gennemsigtigt (0.72) -> taettere flade, teksten staar roligt */
.h2-2f{background:rgba(var(--mws-dark-rgb, 27, 38, 69), 0.9)}

/* Hero 6: den farvede blob skal naa ind under alle fire billeder */
@media (min-width: 1041px){
  .h6-1r{width:min(60vw, 980px);right:-4%}
}

/* Galleri-Skabelon-2 (hero 2/4/6): designets to accent-blobs bag galleriet laa paa 0.35/0.3 og gav en orange vask
   paa den moerke flade -> svagere, saa fladen forbliver moerk som i designet */
/* !important: blobbene har data-aos, og AOS saetter opacity:1 naar de er animeret ind (derfor var fladen HELT orange) */
.h2-av,.h4-8z,.h6-ar{opacity:0.14 !important}
.h2-aw,.h4-90,.h6-as{opacity:0.12 !important}
/* (20/10-2026) Samme galleri paa Kunder-siderne (k1-6) manglede rettelsen -> olivenbaand under side-toppen i gul/guld */
.k1-3q,.k2-3w,.k3-43,.k4-3k,.k5-3t,.k6-3q{opacity:0.14 !important}
.k1-3r,.k2-3x,.k3-44,.k4-3l,.k5-3u,.k6-3r{opacity:0.12 !important}

/* Farveregel 5 (9/10): hero 12's fuldflade-overlay bruger den moerke, afdaempede tone (--mws-dark) i stedet for den
   rige accent (--blue-dark). Paa gule/lime brands blev overlayet ellers en sennep-vask hen over billedet. */
.h12-s{background:rgba(var(--mws-dark-rgb, 27, 38, 69), 0.78)}
@media (max-width: 760px){ .h12-s{background:rgba(var(--mws-dark-rgb, 27, 38, 69), 0.83)} }

/* (14/10-2026) Hero 1's ekstra bue paa tablet (901-1179 px) er fjernet: designfilerne (handoff 13/10) er facit.
   Reglen ramte desuden alle undersiders header-boelge og gjorde den lavere end i designet. */

/* Design-panelet paa rigtige sites (administrator): gem-sektion */
.mws-p__gem{display:grid;gap:10px;padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--sky-light, #e3e9f3)}
.mws-p__gem form{display:grid;gap:8px}
.mws-p__knap{min-height:44px;border-radius:999px;border:0;background:var(--sky, #1f55c0);color:var(--sky-ink, #fff);font:600 15px Figtree, system-ui, sans-serif;padding:0 18px;cursor:pointer}
.mws-p__knap[disabled]{opacity:.45;cursor:default}
.mws-p__knap--lys{background:var(--off-white, #f2f5fa);color:var(--mws-ink, #0f1324);border:1px solid var(--sky-light, #e3e9f3)}
.mws-p__note--ok{color:var(--mws-accent-text, #1f55c0);font-weight:600}

/* (14/10-2026) Kundens H1 i heroen (alle forsider og undersider). Bindingen saetter .mws-h1-kunde; designets demo (?mws_demo=1) roeres ikke.
   1) Aldrig nowrap paa kundens tekst (designets nowrap-linjer, fx Hero 7 .h7-y/.h7-z, gaelder kun designets faste tekst).
   2) Desktop (fra 901 px): text-wrap: balance og max-width 10em, dog aldrig smallere end designets egen H1 paa samme side
      (maalt i designet ved 1366/1440/1920: Hero 2, 3, 6 m.fl. har bredere H1 med mindre skrift - 10em ville give 6-8 linjer).
   3) Skriftstoerrelsen er designets og aendres ikke.
   max-width er !important, fordi designets renderVals() saetter max-width inline paa H1 (fx Hero 13: 18em). */
h1.mws-h1-kunde, h1.mws-h1-kunde *{white-space:normal !important}
@media (min-width: 901px){
  h1.mws-h1-kunde{max-width:10em !important;text-wrap:balance}
  [data-sc-name="MW-Hero-Skabelon-2"] h1.mws-h1-kunde{max-width:16em !important}
  [data-sc-name="MW-Hero-Skabelon-3"] h1.mws-h1-kunde{max-width:20em !important}
  [data-sc-name="MW-Hero-Skabelon-5"] h1.mws-h1-kunde{max-width:14.7em !important}
  [data-sc-name="MW-Hero-Skabelon-6"] h1.mws-h1-kunde{max-width:20em !important}
  [data-sc-name="MW-Hero-Skabelon-8"] h1.mws-h1-kunde{max-width:12em !important}
  [data-sc-name="MW-Hero-Skabelon-9"] h1.mws-h1-kunde{max-width:11.7em !important}
  [data-sc-name="MW-Hero-Skabelon-10"] h1.mws-h1-kunde{max-width:12em !important}
  [data-sc-name="MW-Hero-Skabelon-11"] h1.mws-h1-kunde{max-width:12.1em !important}
  [data-sc-name="MW-Hero-Skabelon-12"] h1.mws-h1-kunde{max-width:16.1em !important}
  [data-sc-name="MW-Hero-Skabelon-13"] h1.mws-h1-kunde{max-width:10.2em !important}
  [data-sc-name="MW-Hero-Skabelon-14"] h1.mws-h1-kunde{max-width:15.5em !important}
  [data-sc-name="MW-Hero-Skabelon-15"] h1.mws-h1-kunde{max-width:14em !important}
  [data-sc-name="MW-Ydelse-Skabelon-1"] h1.mws-h1-kunde{max-width:10.6em !important}
  [data-sc-name="MW-Ydelse-Skabelon-2"] h1.mws-h1-kunde{max-width:10.1em !important}
  [data-sc-name="MW-Ydelse-Skabelon-3"] h1.mws-h1-kunde{max-width:18.9em !important}
  [data-sc-name="MW-Ydelse-Skabelon-4"] h1.mws-h1-kunde{max-width:17.2em !important}
  [data-sc-name="MW-Ydelse-Skabelon-6"] h1.mws-h1-kunde{max-width:21.1em !important}
  [data-sc-name="MW-Om-Os-Skabelon-2"] h1.mws-h1-kunde{max-width:11.6em !important}
  [data-sc-name="MW-Hero-Skabelon-5"] h1.mws-h1-kunde, [data-sc-name="MW-Hero-Skabelon-8"] h1.mws-h1-kunde, [data-sc-name="MW-Hero-Skabelon-9"] h1.mws-h1-kunde, [data-sc-name="MW-Hero-Skabelon-10"] h1.mws-h1-kunde, [data-sc-name="MW-Hero-Skabelon-11"] h1.mws-h1-kunde, [data-sc-name="MW-Hero-Skabelon-13"] h1.mws-h1-kunde{margin-left:auto;margin-right:auto}
}


/* ===== Design-panelet: sektionsvalg (14/10-2026) ===== */
.mws-p__lbl { margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: inherit; opacity: .75; }
.mws-p__lbl:first-of-type { margin-top: 4px; }
.mws-p__note--adv { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: #fff4e5; color: #8a4b00; font-size: 14px; }

/* ===== Ydelse 3: "Ring mig op"-boksen (14/10-2026) ===== */
/* Konverteren skrev box-sizing:unset under 1180 px; designet bruger border-box overalt (boksen blev 40 px for bred). */
.y3-25 { box-sizing: border-box !important; }

/* Side-toppen paa Priser/FAQ/Kunder (p/f/k 1-6, 20/10-2026, brugeren: "den er grim"): designets tre store
   accent-cirkler (0.75/0.9/0.6) skreg i gul/guld og laa bag undertitlen (gul tekst paa gul cirkel). Nu tone i tone:
   to svage lyse skiver + et bloedt skaer af accenten oppe i hjoernet bag billedet. Fladen forbliver rolig i alle farver. */
.f1-1a, .f2-1g, .f3-1n, .f4-14, .f5-1d, .f6-1a, .k1-1a, .k2-1g, .k3-1n, .k4-14, .k5-1d, .k6-1a, .p1-1a, .p2-1g, .p3-1n, .p4-14, .p5-1d, .p6-1a{background:rgb(var(--mws-white-rgb, 255, 255, 255));opacity:0.045}
.f1-1b, .f2-1h, .f3-1o, .f4-15, .f5-1e, .f6-1b, .k1-1b, .k2-1h, .k3-1o, .k4-15, .k5-1e, .k6-1b, .p1-1b, .p2-1h, .p3-1o, .p4-15, .p5-1e, .p6-1b{background:radial-gradient(closest-side, rgba(var(--sky-rgb, 31, 85, 192), 0.55), rgba(var(--sky-rgb, 31, 85, 192), 0.18) 62%, rgba(var(--sky-rgb, 31, 85, 192), 0));opacity:1}
.f1-1c, .f2-1i, .f3-1p, .f4-16, .f5-1f, .f6-1c, .k1-1c, .k2-1i, .k3-1p, .k4-16, .k5-1f, .k6-1c, .p1-1c, .p2-1i, .p3-1p, .p4-16, .p5-1f, .p6-1c{background:rgb(var(--mws-white-rgb, 255, 255, 255));opacity:0.035}

/* (20/10-2026) Kundetekst maa hoejst bryde paa flere linjer (YDELSE-HEROS.md): mws-vagter.js saetter .mws-brud paa
   designets nowrap-tekster, naar kundens laengere tekst ellers floed ud af feltet. !important vinder over designkodens
   inline white-space, ogsaa naar designet tegner om. */
.mws-brud { white-space: normal !important; overflow-wrap: break-word; }

/* (21/10-2026, brugeren: "Velkommen er ulaeselig") Ved 40 px scroll skiftede menuteksten til moerk med det samme, mens
   designets hvide bjaelke fadede ind over 0,4 s (og omvendt paa vej op): moerk tekst paa det moerke hero-billede i et
   halvt sekund - hver gang. Menuens overgange goeres korte, saa tekst og bjaelke skifter sammen. Mobilmenuen (MobilMenu)
   og dropdowns beroeres ikke. */
[data-sc-name^="Navbar"] :not([data-mws-mm] *):not(.mws-dd__panel *) { transition-duration: .12s !important; }

/* (26/10-2026) Rettelsessystemet: rammen om en hel sektion (fx galleriet, data-mwh-open paa sektionen) tegnes
   INDEN for kanten - en sektion i fuld bredde fik ellers sin ramme skaaret af skaermkanten paa mobil. */
body.mwh-mode-inline [data-sc-name][data-mwh-open],
body.mwh-mode-inline [data-sc-name][data-mwh-open].mwh-hot,
body.mwh-mode-inline [data-sc-name][data-mwh-open].mwh-active { outline-offset: -3px !important; }

/* (29/10-2026, G12-genrettelse) Et tomt felt, der kun vises i rettelsessystemet (fx ydelsens andet afsnit uden tekst),
   staar med en svag pladsholder, saa det kan klikkes og skrives. Besoegende ser det slet ikke (skjult paa serveren). */
.mwh-ed[data-ph]:empty::before { content: attr(data-ph); opacity: .5; }

/* (2/11-2026, Victor: "der skal ikke vaere 4 ikoner paa ydelsessiden, men maks 3") Ydelses-designet y4 har fire fordele
   under knapperne i toppen - kun de tre foerste vises. Paa mobil (to kolonner) staar den tredje alene paa sin linje. */
.y4-1s > :nth-child(n+4) { display: none !important; }

/* ===== Ekstra formular: udseende (2/11-2026, brugeren: "Staa alene (uden billede) / Staa til hoejre med billede til
   venstre / staa til venstre med billede til hoejre / Staa sammen med en video"). inc/varianter.php: mws_form_stil_sektion.
   Sektionen arver .mws-fx-egen (lys flade, sidens luft og gutter); farverne er designets egne variabler, saa den passer til
   hvert sites farver. To kolonner fra 901 px; under det en kolonne med billedet/videoen oeverst. ===== */
.mws-fx-stil__i { max-width: 1180px; margin: 0 auto; }
.mws-fx-stil__del { min-width: 0; }
.mws-fx-stil__medie { margin: 0; min-width: 0; overflow: hidden; border-radius: 20px; background: var(--mws-tint-1, #eef1f6); }
.mws-fx-stil__img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.mws-fx-stil__medie--video { aspect-ratio: 16 / 9; background: var(--mws-dark-deep, #0b1426); box-shadow: 0 24px 60px -32px rgba(var(--mws-dark-rgb, 15, 51, 95), .45); }
.mws-fx-stil__vid { display: block; width: 100%; height: 100%; border: 0; background: #000; }
/* Staa alene: overskrift og tekst i midten, formularen i en rolig bredde */
.mws-fx-stil--alene .mws-fx-stil__i { max-width: 720px; }
.mws-fx-stil--alene .mws-fx-egen__hd { text-align: center; }
.mws-fx-stil--alene .mws-fx-egen__p { max-width: 560px; margin-left: auto; margin-right: auto; }
@media (min-width: 901px) {
  .mws-fx-stil--billede-venstre .mws-fx-stil__i,
  .mws-fx-stil--billede-hoejre .mws-fx-stil__i { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
  .mws-fx-stil--video .mws-fx-stil__i { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: start; }
  .mws-fx-stil--billede-hoejre .mws-fx-stil__medie { order: 2; }
  /* Billedet/videoen bliver staaende, mens man udfylder en lang formular (fx med deltagere) */
  .mws-fx-stil__medie { position: sticky; top: 120px; }
}
@media (max-width: 900px) {
  .mws-fx-stil__i { max-width: 680px; }
  .mws-fx-stil__medie { margin-bottom: 28px; }
  .mws-fx-stil__img { aspect-ratio: 16 / 10; }
}
@media (max-width: 620px) {
  .mws-fx-stil__medie { border-radius: 16px; margin-bottom: 24px; }
}

/* Formularens filfelt "Upload af fil" (2/11-2026) */
.mws-fx-fil { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 96px; padding: 16px; border: 2px dashed rgba(128,128,128,.55); border-radius: 14px; text-align: center; cursor: pointer; box-sizing: border-box; width: 100%; }
.mws-fx-fil:hover, .mws-fx-fil:focus-within { border-color: var(--sky, #1F55C0); }
.mws-fx-fil input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.mws-fx-fil__t { font-weight: 600; }
.mws-fx-fil__u { font-size: .85em; opacity: .7; }
.mws-fx-fil__n { font-size: .9em; font-weight: 600; color: var(--mws-accent-text, var(--sky, #1F55C0)); }

/* Tak-beskeden efter en formular (3/11-2026): kort med formularens hoejde, stort flueben, overskrift og en linje */
.mws-form-ok.mws-form-ok--kort.show { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 36px 24px; box-sizing: border-box; text-align: center; border-radius: 18px; animation: mwsTakInd .35s ease both; }
.mws-form-ok__ic { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; background: var(--sky, #1F55C0); color: var(--sky-ink, #fff); }
.mws-form-ok__t { display: block; font-weight: 700; font-size: 1.35em; line-height: 1.25; }
.mws-form-ok__u { display: block; opacity: .8; font-size: 1em; }
@keyframes mwsTakInd { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mws-form-ok.mws-form-ok--kort.show { animation: none; } }

/* Ydelsens fordele og forloeb (3/11-2026): kort + nummererede trin under teksten i "Det faar du med"-blokken */
.mws-ydx { margin: 22px 0 6px; text-align: left; }
.mws-ydx__fordele { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mws-ydx__f { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.75); border: 1px solid rgba(0,0,0,.07); }
.mws-ydx__f b { font-weight: 700; font-size: 1.02em; color: inherit; }
.mws-ydx__f span { font-size: .94em; opacity: .85; line-height: 1.5; }
.mws-ydx__th { margin: 26px 0 12px; font-size: 1.15em; font-weight: 700; }
.mws-ydx__trin { counter-reset: mwsTrin; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mws-ydx__trin li { counter-increment: mwsTrin; display: flex; align-items: center; gap: 12px; line-height: 1.4; }
.mws-ydx__trin li::before { content: counter(mwsTrin); flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sky, #E9F0D6); color: var(--sky-ink, #1A4631); font-weight: 700; font-size: .9em; }
@media (max-width: 620px) { .mws-ydx__fordele { grid-template-columns: 1fr; } }