/* Datoden WordPress 1.10.198 — 2026-10-02 | Copyrightraden: kortare, samma stil som texten ovanför.
   Datoden WordPress 1.10.196 — 2026-10-02 | Sidfoten: Språk som hopfälld lista.
   Datoden WordPress 1.10.195 — 2026-10-02 | Sidfoten: Appar i linje med Konto, hovring med rundade hörn.
   Datoden WordPress 1.10.193 — 2026-10-02 | Sidfoten: Appar och Konto som hopfällda listor.
   Datoden WordPress 1.10.192 — 2026-10-02 | /appar/: större kort, tre per rad.
   Datoden WordPress 1.10.191 — 2026-10-02 | Rättat: startsidans första avsnitt krympte till 70 % på datorn (appstartaren låg först).
   Datoden WordPress 1.10.190 — 2026-10-02 | Mer: pilen i stängda utfällbara rader centrerad.
   Datoden WordPress 1.10.189 — 2026-10-02 | Appskalet: ingen egen flikrad i ramen.
   Datoden WordPress 1.10.188 — 2026-10-02 | Flikraden ligger still vid sidbyten (view transition).
   Datoden WordPress 1.10.186 — 2026-10-02 | Appen snabbare: inga in-animationer, sidövergångar.
   Datoden WordPress 1.10.184 — 2026-10-02 | Mer: Språk som utfällbar rad.
   Datoden WordPress 1.10.182 — 2026-10-02 | Appläge: flikrad och ark utan grå knappstil i ljust läge.
   Datoden WordPress 1.10.180 — 2026-10-02 | Appläget: bara logotypen överst, Konto och Mer som ark nerifrån, språkval under Mer.
   Datoden WordPress 1.10.179 — 2026-10-02 | Appläge: appstartare, flikrad, Mer-ark.
   Datoden WordPress 1.10.178 — 2026-10-02 | Hamburgermenyn: mindre luft mellan de sista raderna.
   Datoden WordPress 1.10.177 — 2026-10-02 | Hamburgermenyn: utan avgränsare, Om oss/Kontakt i linje med apparna.
   Datoden WordPress 1.10.176 — 2026-10-02 | Hamburgermenyn: centrerad spalt, vänsterställd text.
   Datoden WordPress 1.10.170 — 2026-10-02 | Sidfoten: appar som nedfällbara listor, Konto-grupp.
   Datoden WordPress 1.10.169 — 2026-10-02 | Menyn Appar (rullgardin) och översiktssidan /appar/.
   Datoden WordPress 1.10.167 — 2026-10-02 | Avgränsare i huvudmenyn mellan apparna och Om oss/Kontakt.
   Datoden WordPress 1.10.164 — 2026-10-02 | Appbricka Bild på startsidan.
   Datoden WordPress 1.10.156 — 2026-10-02 | 1.10.154:s breddregel för Välj app borttagen (bredden sätts av header.js v383).
   Datoden WordPress 1.10.154 — 2026-10-02 | Välj app-menyn lika bred som Kom igång gratis-menyn (240 px innehåll).
   Datoden WordPress 1.10.85 — 2026-09-30 | Pil upp (till toppen) bredvid färglägesväljaren när man scrollat ner; Till toppen-länken borttagen.
   Datoden WordPress 1.10.78 — 2026-09-30 | Prova apparna under appmenyn i skrivstil.
   Datoden WordPress 1.10.77 — 2026-09-30 | Lappen mindre och ovanför appmenyn, lutande handstil.
   Datoden WordPress 1.10.76 — 2026-09-30 | Handritad lapp "Prova apparna" vid appmenyn för utloggade besökare.
   Datoden WordPress 1.10.75 — 2026-09-30 | En list: toppheaderns knappar (appmeny, Logga in/Mitt konto, språk) ligger i webbplatsens sidhuvud.
   Datoden WordPress 1.10.73 — 2026-09-30 | Ljust läge: Logga in-knappens text syns; stabil bakgrund/färgschema för mobilens systemfält. */
/* Datoden WordPress 1.10.72 — 2026-09-30 | Mobil: Logga in till vänster om hamburgermenyn. */
/* Datoden WordPress v41 — (utan scroll-snap: fasthakningen mellan avsnitt gjorde att rullning uppåt drogs tillbaka och att kontomenyn blinkade) */
/* Datoden WordPress v43 — 2026-09-29 | Aktuell logotyp i header/sidfot; kontomenyns logotyp dold på webbplatsens sidor. */
/* Datoden WordPress v42 — 2026-09-29 | Hela sidhuvudet (kontomeny + webbplatsmeny) glider upp ur bild vid rullning nedåt och ner igen vid rullning uppåt. */
/* Datoden WordPress v41 — 2026-09-29 | Webbplatsmenyn är fast som förut; kontomenyn ligger ovanför och kommer fram när man rullar uppåt. */
/* Datoden WordPress v40 — 2026-09-29 | Kontomenyn (inloggad) och webbplatsens meny delar ett fast element (.ddp-top) och följer med vid rullning. */
/* Datoden WordPress v39 — 2026-09-29 | Helskärmsavsnitten får exakt fönstrets höjd (kompakta mått efter fönsterhöjd) och pilknappen ligger kvar i fönstret. */
/* Datoden WordPress v38 — 2026-09-29 | Sidhuvudets höjd är fast; den uppmätta höjden matas aldrig tillbaka in i sidhuvudet (orsakade oändlig tillväxt). */
/* Datoden WordPress v37 — 2026-09-29 | Webbplatsens design: helskärmsavsnitt, bildspel, sidor och sidfot. Ljust och mörkt läge. */
.ddp-site-body{
  --bg:var(--datoden-bg-ffffff,#ffffff);--bg-soft:var(--datoden-bg-f4f6fb,#f4f6fb);--surface:var(--datoden-bg-ffffff,#ffffff);--surface-2:var(--datoden-accent-tint,#eef0f8);--text:#141824;--muted:#4f586c;--border:var(--datoden-bg-dfe3ee,#dfe3ee);
  --brand:var(--datoden-accent,#3953a4);--brand-dark:var(--datoden-accent-dark,#2f478f);--brand-text:var(--datoden-accent,#3953a4);--brand-soft:var(--datoden-accent-tint,#eef0f8);--accent:#e9832b;
  --shadow:0 24px 60px rgba(30,45,100,.14);--radius:18px;--footer-bg:var(--datoden-bg-141824,#141824);--footer-text:#c9cee0;--footer-head:#ffffff;
  --header-bg:rgba(255,255,255,.86);
  --color-surface:var(--surface);--color-border:var(--border);--color-text:var(--text);--color-blue:var(--brand);
  margin:0;background:var(--bg);color:var(--text);font:400 17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
html[data-theme="dark"] .ddp-site-body{
  --bg:var(--datoden-bg-0f1117,#0f1117);--bg-soft:var(--datoden-bg-151824,#151824);--surface:var(--datoden-bg-1a1e2b,#1a1e2b);--surface-2:var(--datoden-bg-222739,#222739);--text:#f3f4f8;--muted:#aab1c3;--border:var(--datoden-bg-2b3145,#2b3145);
  --brand-text:var(--datoden-accent-light,#9cacdf);--brand-soft:#232a44;--shadow:0 24px 60px rgba(0,0,0,.42);--footer-bg:var(--datoden-bg-0a0c11,#0a0c11);--footer-text:#aab1c3;--header-bg:rgba(15,17,23,.86);
}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .ddp-site-body{
    --bg:var(--datoden-bg-0f1117,#0f1117);--bg-soft:var(--datoden-bg-151824,#151824);--surface:var(--datoden-bg-1a1e2b,#1a1e2b);--surface-2:var(--datoden-bg-222739,#222739);--text:#f3f4f8;--muted:#aab1c3;--border:var(--datoden-bg-2b3145,#2b3145);
    --brand-text:var(--datoden-accent-light,#9cacdf);--brand-soft:#232a44;--shadow:0 24px 60px rgba(0,0,0,.42);--footer-bg:var(--datoden-bg-0a0c11,#0a0c11);--footer-text:#aab1c3;--header-bg:rgba(15,17,23,.86);
  }
}
/* 1.10.73: sidans bakgrund och färgschema även på <html> (Androids nedre systemfält/överscroll tar färg därifrån) */
html.ddp-site{background:var(--datoden-bg-ffffff,#ffffff);color-scheme:light}
html.ddp-site[data-theme="dark"]{background:var(--datoden-bg-0f1117,#0f1117);color-scheme:dark}
@media (prefers-color-scheme:dark){html.ddp-site:not([data-theme="light"]){background:var(--datoden-bg-0f1117,#0f1117);color-scheme:dark}}
html.ddp-site{--ddp-header-h:73px;--ddp-top-h:73px;--sh:calc(100svh - var(--ddp-header-h));--sec-h:100svh;scroll-behavior:smooth;scroll-padding-top:0}
.ddp-site-body *,.ddp-site-body *::before,.ddp-site-body *::after{box-sizing:border-box}
.ddp-site-body img,.ddp-site-body svg{max-width:100%}
.ddp-site-body a{color:var(--brand-text);text-underline-offset:3px}
.ddp-site-body h1,.ddp-site-body h2,.ddp-site-body h3{margin:0 0 .5em;font-weight:800;letter-spacing:-.02em;line-height:1.12;color:var(--text)}
.ddp-site-body h1{font-size:clamp(2.1rem,4.6vw,3.6rem)}
.ddp-site-body h2{font-size:clamp(1.7rem,3.2vw,2.6rem)}
.ddp-site-body h3{font-size:1.25rem;line-height:1.25}
.ddp-site-body p{margin:0 0 1em}
.ddp-skip{position:absolute;left:12px;top:-60px;z-index:100000;padding:10px 16px;border-radius:10px;background:var(--brand);color:var(--datoden-on-accent,#fff)!important;font-weight:700;text-decoration:none}
.ddp-skip:focus{top:12px}
.ddp-container{width:min(1400px,calc(100% - 48px));margin-inline:auto}
.ddp-container--narrow{width:min(820px,calc(100% - 48px))}
.ddp-muted{color:var(--muted)}
.ddp-icon{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Sidhuvud ---------- */
.ddp-top{position:sticky;top:var(--ddp-admin-h,0px);z-index:900;transition:top .26s cubic-bezier(.2,.7,.2,1)}
/* Kontomenyn och webbplatsmenyn är ett gemensamt sidhuvud: nedåtrullning glider hela upp ur bild, uppåtrullning glider ner igen. Ingen transform används, så fasta popuper i kontomenyn påverkas inte. */
.ddp-top.is-condensed{top:calc(var(--ddp-admin-h,0px) - var(--ddp-top-h,73px) - 3px)}
.ddp-header{position:relative;z-index:900;background:var(--header-bg);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--border)}
body.admin-bar{--ddp-admin-h:32px}
@media (max-width:782px){body.admin-bar{--ddp-admin-h:46px}}
.ddp-header__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(1400px,calc(100% - 48px));min-height:72px;margin-inline:auto}
.ddp-logo{display:inline-flex;align-items:center;text-decoration:none}
.ddp-logo__img{display:block;height:44px;width:auto;max-width:240px;object-fit:contain}
.ddp-logo__img--dark{display:none}
html[data-theme="dark"] .ddp-logo__img--light{display:none}
html[data-theme="dark"] .ddp-logo__img--dark{display:block}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .ddp-logo__img--light{display:none}html:not([data-theme="light"]) .ddp-logo__img--dark{display:block}}
.ddp-menu{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.ddp-menu-sep{width:1px;height:22px;margin:0 8px;background:currentColor;opacity:.28;flex:none;list-style:none} /* 1.10.167: mellan apparna och Om oss/Kontakt */
.ddp-menu>li{position:relative;margin:0}
.ddp-menu a{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:10px;color:var(--text);font-weight:650;font-size:.97rem;text-decoration:none;transition:background .18s,color .18s}
.ddp-menu a:hover,.ddp-menu a:focus-visible{background:var(--surface-2);color:var(--brand-text)}
.ddp-menu .current-menu-item>a{color:var(--brand-text);background:var(--brand-soft)}
.ddp-menu .datoden-demo-menu-item>.datoden-demo-menu>a{border:1px solid var(--border)}
.ddp-menu .datoden-wp-login-item>a{background:var(--brand);color:var(--datoden-on-accent,#fff)}
.ddp-menu .datoden-wp-login-item>a:hover,.ddp-menu .datoden-wp-login-item>a:focus-visible{background:var(--brand-dark);color:var(--datoden-on-accent,#fff)}
.ddp-menu .datoden-demo-choices{background:var(--surface);border:1px solid var(--border);color:var(--text)}
.ddp-menu .datoden-demo-choices a{width:100%}
.ddp-navtoggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--border);border-radius:12px;background:transparent;color:var(--text);cursor:pointer}
.ddp-navtoggle .ddp-navtoggle__close{display:none}
.ddp-header.is-open .ddp-navtoggle__open{display:none}
.ddp-header.is-open .ddp-navtoggle__close{display:block}
@media (max-width:900px){
  .ddp-navtoggle{display:inline-flex}
  .ddp-nav{position:absolute;left:0;right:0;top:100%;max-height:calc(100dvh - var(--ddp-top-h,73px));overflow:auto;padding:12px 24px 20px;background:var(--bg);border-bottom:1px solid var(--border);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
  .ddp-header.is-open .ddp-nav{opacity:1;visibility:visible;transform:none}
  .ddp-menu{flex-direction:column;align-items:stretch;gap:6px}
  .ddp-menu a{width:100%;padding:13px 14px}
  .ddp-menu .datoden-demo-menu .datoden-demo-choices{position:static;box-shadow:none;margin-top:6px}
}

/* ---------- Avsnitt (startsida) ---------- */
.ddp-section{position:relative;display:flex;flex-direction:column;min-height:100vh;min-height:var(--sec-h);padding:clamp(10px,2.4svh,36px) 0 0;overflow:hidden;overflow:clip}
.ddp-section>.ddp-container{position:relative;z-index:1;margin-block:auto}
.ddp-section:nth-of-type(even){background:var(--bg-soft)}
.ddp-section__head{max-width:760px;margin:0 auto clamp(24px,4vh,44px);text-align:center}
.ddp-kicker{display:inline-block;margin:0 0 14px;padding:6px 14px;border-radius:999px;background:var(--brand-soft);color:var(--brand-text);font-size:.82rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase}
.ddp-kicker--small{margin-bottom:10px;padding:4px 12px;font-size:.74rem}
.ddp-sub{color:var(--muted);font-size:1.12rem;margin:0}
.ddp-lead{font-size:clamp(1.06rem,1.6vw,1.25rem);color:var(--muted);max-width:60ch}
.ddp-lead strong{color:var(--text)}
.ddp-next{position:sticky;bottom:clamp(12px,2.4svh,26px);z-index:3;flex:none;align-self:center;display:grid;place-items:center;width:clamp(42px,6svh,54px);height:clamp(42px,6svh,54px);margin:clamp(6px,1.4svh,14px) 0 clamp(12px,2.4svh,26px);border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--brand-text);cursor:pointer;box-shadow:0 10px 30px rgba(30,45,100,.16)}
.ddp-next .ddp-icon{width:26px;height:26px;animation:ddp-bob 1.8s ease-in-out infinite}
.ddp-next:hover,.ddp-next:focus-visible{background:var(--brand);color:var(--datoden-on-accent,#fff);border-color:var(--brand);transform:translateY(2px)}
/* Bara det avsnitt som ligger i fönstrets mitt visar sin pilknapp, så att två pilar aldrig syns samtidigt. */
.ddp-js .ddp-section:not(.is-current) .ddp-next{opacity:0;visibility:hidden;pointer-events:none}
.ddp-next{transition:opacity .22s,visibility .22s,background .2s,color .2s,transform .2s,box-shadow .2s}
@keyframes ddp-bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}

/* ---------- Hero ---------- */
.ddp-hero,.ddp-section.ddp-hero{background:radial-gradient(1200px 600px at 78% 30%,var(--brand-soft),transparent 60%),var(--bg)} /* 1.10.249: startsidans första avsnitt är nu andra <section> (appstartaren ligger först) – annars vann :nth-of-type(even) och gav den blekare bakgrunden */
.ddp-hero__bg{position:absolute;inset:0;pointer-events:none}
.ddp-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:ddp-float 14s ease-in-out infinite}
.ddp-orb--1{width:420px;height:420px;left:-120px;top:-80px;background:var(--datoden-accent,#3953a4)}
.ddp-orb--2{width:340px;height:340px;right:-80px;bottom:-60px;background:#e9832b;opacity:.28;animation-delay:-5s}
.ddp-orb--3{width:300px;height:300px;right:24%;top:-120px;background:#1f9d78;opacity:.22;animation-delay:-9s}
@keyframes ddp-float{0%,100%{transform:translate(0,0)}50%{transform:translate(28px,36px)}}
.ddp-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(24px,5vw,64px)}
.ddp-hero__text h1{margin-bottom:.45em}
.ddp-actions{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.ddp-actions--center{justify-content:center}
.ddp-chips{display:flex;flex-wrap:wrap;gap:10px 14px;margin:28px 0 0;padding:0;list-style:none}
.ddp-chips li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-size:.92rem;font-weight:600}
.ddp-chips .ddp-icon{color:var(--brand-text)}
@media (max-width:900px){.ddp-hero__grid{grid-template-columns:1fr}}

/* ---------- Knappar ---------- */
.ddp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border:1px solid transparent;border-radius:14px;font-weight:750;font-size:1rem;line-height:1.2;text-decoration:none!important;cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .18s,box-shadow .18s}
.ddp-btn:hover,.ddp-btn:focus-visible{transform:translateY(-2px)}
.ddp-btn--primary{background:var(--brand);color:var(--datoden-on-accent,#fff)!important;box-shadow:0 12px 28px rgba(var(--datoden-accent-rgb,57,83,164),.32)}
.ddp-btn--primary:hover,.ddp-btn--primary:focus-visible{background:var(--brand-dark)}
.ddp-btn--ghost{background:transparent;color:var(--text)!important;border-color:var(--border)}
.ddp-btn--ghost:hover,.ddp-btn--ghost:focus-visible{background:var(--surface-2);border-color:var(--brand-text)}
.ddp-btn--outline{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.55)}
.ddp-btn--outline:hover,.ddp-btn--outline:focus-visible{background:rgba(255,255,255,.14)}
.ddp-btn--light{background:var(--datoden-bg-ffffff,#fff);color:var(--datoden-accent-dark,#2f478f)!important}
.ddp-btn--light:hover,.ddp-btn--light:focus-visible{background:var(--datoden-accent-tint,#eef0f8)}
.ddp-site-body :focus-visible{outline:3px solid var(--brand-text);outline-offset:3px}

/* ---------- Bildspel ---------- */
.ddp-slider{position:relative}
.ddp-slides{display:grid}
.ddp-slide{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(20px,4vw,56px);padding:clamp(20px,3vw,40px);border:1px solid var(--border);border-radius:28px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.ddp-slide.is-active{opacity:1;visibility:visible}
.ddp-slide__text h3{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.ddp-slide__text p{color:var(--muted)}
.ddp-checks{display:grid;gap:8px;margin:0 0 4px;padding:0;list-style:none}
.ddp-checks li{display:flex;gap:10px;align-items:flex-start;color:var(--text);font-weight:550}
.ddp-checks .ddp-icon{margin-top:.2em;color:#1f9d78;stroke-width:2.6}
.ddp-slide.is-animating .ddp-slide__text{animation:ddp-from-left .75s cubic-bezier(.2,.7,.2,1) both}
.ddp-slide.is-animating .ddp-slide__media{animation:ddp-from-top .85s cubic-bezier(.2,.7,.2,1) .5s both}
@keyframes ddp-from-left{from{opacity:0;transform:translateX(-64px)}to{opacity:1;transform:none}}
@keyframes ddp-from-top{from{opacity:0;transform:translateY(-64px)}to{opacity:1;transform:none}}
.ddp-slider__bar{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px}
.ddp-slider__btn{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text);cursor:pointer;transition:background .18s,color .18s,transform .18s}
.ddp-slider__btn:hover,.ddp-slider__btn:focus-visible{background:var(--brand);color:var(--datoden-on-accent,#fff);border-color:var(--brand)}
.ddp-dots{display:flex;gap:10px}
.ddp-dot{width:12px;height:12px;padding:0;border:0;border-radius:999px;background:var(--border);cursor:pointer;transition:width .25s,background .25s}
.ddp-dot.is-active{background:var(--brand)}
@media (max-width:900px){.ddp-slide{grid-template-columns:1fr}.ddp-slide__media{order:-1}}

/* ---------- Illustrationer ---------- */
.ddp-illus{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 34px rgba(30,45,100,.2))}
.ill-card{fill:var(--surface);stroke:var(--border);stroke-width:1.5}
.ill-dot--1{fill:#ff6b6b}.ill-dot--2{fill:#ffc247}.ill-dot--3{fill:#3ecf8e}
.ill-title{font:800 24px system-ui,sans-serif;fill:var(--text)}
.ill-muted{font:500 13px system-ui,sans-serif;fill:var(--muted)}
.ill-small{font:500 12.5px system-ui,sans-serif;fill:var(--text)}
.ill-body{font:700 15px system-ui,sans-serif}
.ill-strong{font-weight:750}
.ill-brand{fill:var(--brand-text)}
.ill-head{fill:var(--surface-2)}
.ill-row{fill:transparent}.ill-row--alt{fill:var(--bg-soft)}
.ill-line{stroke:var(--border);stroke-width:1.5}
.ill-chip{fill:var(--brand)}.ill-chip-text{fill:#fff;font-weight:750}
.ill-tab{fill:var(--surface-2)}
.ill-b1{fill:var(--datoden-accent,#3953a4)}.ill-b2{fill:#d9731b}.ill-b3{fill:#177f60}.ill-b4{fill:#7a4fc2}.ill-b5{fill:#c43a6c}
.ill-block-text{fill:#fff;font-weight:650}

/* ---------- Steg och kort ---------- */
.ddp-steplist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none;counter-reset:none}
.ddp-steplist--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ddp-step{position:relative;padding:28px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.ddp-step__num{display:grid;place-items:center;width:46px;height:46px;margin-bottom:16px;border-radius:14px;background:var(--brand);color:var(--datoden-on-accent,#fff);font-weight:800;font-size:1.2rem}
.ddp-step h3{margin-bottom:.4em}
.ddp-step p{margin:0;color:var(--muted)}
.ddp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.ddp-cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ddp-card{padding:26px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);transition:transform .22s,box-shadow .22s,border-color .22s}
.ddp-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--brand-text)}
.ddp-card__icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:16px;border-radius:14px;background:var(--brand-soft);color:var(--brand-text)}
.ddp-card__icon .ddp-icon{width:24px;height:24px}
.ddp-card h3{margin-bottom:.4em}
.ddp-card h3 a{color:inherit;text-decoration:none}
.ddp-card h3 a:hover{text-decoration:underline}
.ddp-card p{margin:0;color:var(--muted);font-size:.98rem}
@media (max-width:1000px){.ddp-cards,.ddp-cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}.ddp-steplist--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.ddp-cards,.ddp-cards--4,.ddp-steplist,.ddp-steplist--4{grid-template-columns:1fr}}

/* ---------- Vanliga frågor ---------- */
.ddp-faq{display:grid;gap:12px}
.ddp-faq__item{border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden}
.ddp-faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-weight:700;font-size:1.06rem;cursor:pointer;list-style:none}
.ddp-faq__item summary::-webkit-details-marker{display:none}
.ddp-faq__item summary .ddp-icon{transition:transform .2s;color:var(--brand-text)}
.ddp-faq__item[open] summary .ddp-icon{transform:rotate(180deg)}
.ddp-faq__answer{padding:0 22px 18px;color:var(--muted)}
.ddp-faq__answer p{margin:0}

/* ---------- Avslutande uppmaning ---------- */
.ddp-cta{background:linear-gradient(135deg,var(--datoden-accent-dark,#2f478f),var(--datoden-accent,#3953a4) 55%,var(--datoden-accent-2,#4b66c3))!important;color:var(--datoden-on-accent,#fff)}
.ddp-cta h2,.ddp-cta .ddp-lead,.ddp-cta a{color:#fff}
.ddp-cta .ddp-lead{margin-inline:auto;color:rgba(255,255,255,.88)}
.ddp-cta .ddp-btn--primary{background:var(--datoden-bg-ffffff,#fff);color:var(--datoden-accent-dark,#2f478f)!important;box-shadow:0 12px 28px rgba(0,0,0,.22)}
.ddp-cta .ddp-btn--primary:hover{background:var(--datoden-accent-tint,#eef0f8)}
.ddp-cta__inner{text-align:center}

/* ---------- Undersidor ---------- */
.ddp-pagehero{position:relative;padding:clamp(40px,8vh,88px) 0 clamp(32px,6vh,64px);overflow:hidden;background:radial-gradient(900px 420px at 80% 20%,var(--brand-soft),transparent 60%),var(--bg)}
.ddp-pagehero>.ddp-container{position:relative;z-index:1}
.ddp-pagehero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(24px,5vw,64px)}
@media (max-width:900px){.ddp-pagehero__grid{grid-template-columns:1fr}}
.ddp-crumbs{display:flex;gap:10px;align-items:center;margin:0 0 18px;font-size:.92rem;color:var(--muted)}
.ddp-crumbs a{color:var(--muted)}
.ddp-block{padding:clamp(44px,8vh,88px) 0}
.ddp-block--soft{background:var(--bg-soft)}
.ddp-block.ddp-cta{padding:clamp(56px,10vh,110px) 0}
.ddp-prose h2{margin-bottom:.6em}
.ddp-prose p{color:var(--muted);font-size:1.08rem}
.ddp-prose strong{color:var(--text)}
.ddp-note{margin:28px 0 0;text-align:center;color:var(--muted)}

/* ---------- Kontakt ---------- */
.ddp-contact{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,64px);align-items:start}
@media (max-width:900px){.ddp-contact{grid-template-columns:1fr}}
.ddp-address{font-style:normal}
.ddp-address__row{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.ddp-address__row .ddp-icon{margin-top:.25em;color:var(--brand-text)}
.ddp-form{display:grid;gap:4px;padding:28px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.ddp-form p{margin:0 0 14px}
.ddp-form label{display:block;margin-bottom:6px;font-weight:700;font-size:.95rem}
.ddp-form input[type=text],.ddp-form input[type=email],.ddp-form select,.ddp-form textarea{width:100%;padding:13px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);font:inherit}
.ddp-form input:focus,.ddp-form select:focus,.ddp-form textarea:focus{border-color:var(--brand-text);outline:2px solid var(--brand-text);outline-offset:1px}
.ddp-form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:600px){.ddp-form__row{grid-template-columns:1fr}}
.ddp-form__trap{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.ddp-form__note{color:var(--muted);font-size:.88rem}
.ddp-alert{margin:0 0 18px;padding:14px 18px;border-radius:14px;font-weight:600}
.ddp-alert--ok{background:#e3f6ec;color:#0f5c3d;border:1px solid #9fdcc0}
.ddp-alert--error{background:var(--datoden-bg-fdeaea,#fdeaea);color:#8a1f1f;border:1px solid #f0b3b3}
html[data-theme="dark"] .ddp-alert--ok{background:#123326;color:#9be3c0;border-color:#1f6b4b}
html[data-theme="dark"] .ddp-alert--error{background:var(--datoden-bg-3a1717,#3a1717);color:#f3b0b0;border-color:#7a2e2e}

/* ---------- Sidfot ---------- */
.ddp-footer{padding:clamp(40px,7vh,72px) 0 28px;background:var(--footer-bg);color:var(--footer-text);font-size:.96rem;line-height:1.6}
.ddp-footer a{color:var(--footer-text);text-decoration:none}
.ddp-footer a:hover,.ddp-footer a:focus-visible{color:#fff;text-decoration:underline}
.ddp-footer h2{margin:0 0 14px;font-size:.85rem;letter-spacing:.09em;text-transform:uppercase;color:var(--footer-head)}
.ddp-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(24px,4vw,56px)}
.ddp-footer ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.ddp-footer address{font-style:normal}
.ddp-footer address p{display:flex;gap:10px;align-items:flex-start;margin:0 0 9px}
.ddp-footer address .ddp-icon{margin-top:.3em;color:var(--datoden-accent-light,#9cacdf)}
.ddp-footer__brand p{margin:14px 0 0;max-width:38ch}
.ddp-footer .ddp-logo__img--light{display:none}
.ddp-footer .ddp-logo__img--dark{display:block}
.ddp-footer__seo{margin:32px 0 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);color:#8990a5;font-size:.88rem}
.ddp-footer__bottom{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-top:18px;font-size:.88rem}
.ddp-footer__bottom p{margin:0}
@media (max-width:900px){.ddp-footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ddp-footer__grid{grid-template-columns:1fr}}

/* ---------- Visa vid rullning ---------- */
.ddp-js .ddp-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.ddp-js .ddp-reveal.is-in{opacity:1;transform:none}
.ddp-js .ddp-cards .ddp-reveal:nth-child(2),.ddp-js .ddp-steplist .ddp-reveal:nth-child(2){transition-delay:.08s}
.ddp-js .ddp-cards .ddp-reveal:nth-child(3),.ddp-js .ddp-steplist .ddp-reveal:nth-child(3){transition-delay:.16s}
.ddp-js .ddp-cards .ddp-reveal:nth-child(4),.ddp-js .ddp-steplist .ddp-reveal:nth-child(4){transition-delay:.24s}

/* ---------- Inloggnings- och utloggningssidor i webbplatsens skal ---------- */
.ddp-main--login .datoden-portal-main,.ddp-main--logga-ut .datoden-portal-main{padding:clamp(32px,8vh,96px) 24px;min-height:60vh}

@media (prefers-reduced-motion:reduce){
  html.ddp-site{scroll-behavior:auto}
  .ddp-site-body *,.ddp-site-body *::before,.ddp-site-body *::after{animation:none!important;transition:none!important}
  .ddp-js .ddp-reveal{opacity:1;transform:none}
  .ddp-site-body .datoden-loading-inline::before{animation:datoden-spin 2.4s linear infinite!important}
}

/* ---------- Helskärmsavsnitt anpassas efter fönstrets höjd (v39) ---------- */
/* Övriga avsnitt är lika höga som fönstret (sidhuvudet är uppglidet när man rullat dit). Första avsnittet vid sidans topp ligger under hela sidhuvudet. */
.ddp-main>.ddp-section:first-child,.ddp-main>.ddp-launcher:first-child+.ddp-section{min-height:calc(100vh - var(--ddp-top-h,73px));min-height:calc(var(--sec-h) - var(--ddp-top-h,73px))} /* 1.10.191: appstartaren (dold utanför appen) ligger först i startsidan – det första synliga avsnittet räknas ändå som första */
.ddp-section .ddp-section__head{margin-bottom:clamp(8px,2.2svh,34px)}
.ddp-section h1{font-size:clamp(1.65rem,min(3.6vw,5.6svh),3.4rem);margin-bottom:.35em}
.ddp-section h2{font-size:clamp(1.35rem,min(3vw,4.6svh),2.5rem);margin-bottom:.3em}
.ddp-section h3{font-size:clamp(1rem,2.5svh,1.25rem);margin-bottom:.3em}
.ddp-section .ddp-lead{font-size:clamp(.94rem,2.1svh,1.2rem);margin-bottom:.4em}
.ddp-section .ddp-sub{font-size:clamp(.9rem,2svh,1.1rem)}
.ddp-section .ddp-kicker{margin-bottom:clamp(5px,1.3svh,14px);padding:clamp(3px,.7svh,6px) 12px}
.ddp-section .ddp-actions{margin-top:clamp(10px,2.4svh,26px)}
.ddp-section .ddp-btn{min-height:clamp(38px,5.2svh,48px);padding:8px 20px;font-size:clamp(.9rem,2svh,1rem)}
.ddp-section .ddp-chips{margin-top:clamp(10px,2.4svh,26px);gap:8px 10px}
.ddp-section .ddp-chips li{padding:clamp(4px,.9svh,8px) 12px;font-size:clamp(.8rem,1.8svh,.92rem)}
.ddp-services .ddp-slide__media .ddp-illus{width:auto;max-width:100%;max-height:calc(var(--sh) - clamp(250px,42svh,330px));margin-inline:auto}
.ddp-slide{padding:clamp(12px,2.4svh,32px)}
.ddp-slide__text p{font-size:clamp(.9rem,2svh,1.02rem);margin-bottom:.6em}
.ddp-slide__text h3{font-size:clamp(1.15rem,min(2.4vw,3.6svh),2rem)}
.ddp-slide .ddp-checks{gap:clamp(2px,.8svh,8px)}
.ddp-slide .ddp-checks li{font-size:clamp(.86rem,1.9svh,1rem)}
.ddp-slider__bar{margin-top:clamp(8px,1.8svh,20px)}
.ddp-slider__btn{width:clamp(38px,5svh,46px);height:clamp(38px,5svh,46px)}
.ddp-section .ddp-steplist{gap:clamp(12px,2.4svh,24px)}
.ddp-section .ddp-step{padding:clamp(14px,2.6svh,28px)}
.ddp-section .ddp-step__num{width:clamp(34px,5svh,46px);height:clamp(34px,5svh,46px);margin-bottom:clamp(8px,1.6svh,16px);font-size:clamp(1rem,2.4svh,1.2rem)}
.ddp-section .ddp-step p{font-size:clamp(.88rem,2svh,1rem)}
.ddp-section .ddp-cards{gap:clamp(10px,2svh,22px)}
.ddp-section .ddp-card{padding:clamp(12px,2.2svh,26px)}
.ddp-section .ddp-card__icon{width:clamp(34px,5svh,48px);height:clamp(34px,5svh,48px);margin-bottom:clamp(6px,1.4svh,16px)}
.ddp-section .ddp-card p{font-size:clamp(.84rem,1.9svh,.98rem)}
.ddp-section .ddp-faq{gap:clamp(6px,1.4svh,12px)}
.ddp-section .ddp-faq__item summary{padding:clamp(9px,1.8svh,18px) 20px;font-size:clamp(.94rem,2.1svh,1.06rem)}
.ddp-section .ddp-faq__answer{padding:0 20px clamp(9px,1.8svh,18px);font-size:clamp(.88rem,2svh,1rem)}
.ddp-section.ddp-cta .ddp-btn--outline{color:#fff!important}
/* Tätare radavstånd i bildspelet så att hela avsnittet ryms i fönstret */
.ddp-slide__text{line-height:1.42}
.ddp-slide__text p{line-height:1.5}
.ddp-slide .ddp-checks li{line-height:1.32}
.ddp-slide .ddp-kicker{margin-bottom:clamp(4px,1svh,10px)}
.ddp-services .ddp-section__head{margin-bottom:clamp(6px,1.6svh,24px)}
.ddp-services .ddp-slide{gap:clamp(14px,3svh,44px)}
@media (max-height:780px) and (min-width:901px){
  .ddp-section .ddp-chips{display:none}
  .ddp-section .ddp-section__head .ddp-sub{display:none}
}
@media (max-width:900px){
  .ddp-section .ddp-chips{display:flex}
  .ddp-next{bottom:12px}
}

/* Kontomenyn (Datoden-toppheadern) visar ingen egen logotyp på webbplatsens sidor: webbplatsmenyn under den har logotypen. */
.ddp-site-body .datoden-portal-header-host .datoden-brand{visibility:hidden!important} /* 1.10.41: platsen behålls (samma mått som på alla sidor, meddelanden hamnar på samma ställe) */
@media (max-width:900px){.ddp-logo__img{height:36px}}

/* v49 — Datoden WordPress: sidbredd 1400 px som toppheadern; undersidornas toppavsnitt fyller hela fönsterhöjden under menyn så att bakgrunden är 100 % hög. */
.ddp-pagehero{display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;min-height:calc(100vh - var(--ddp-top-h,73px));min-height:calc(100svh - var(--ddp-top-h,73px))}
.ddp-pagehero>.ddp-container{margin-block:auto;width:min(1400px,calc(100% - 48px))}
.ddp-pagehero>.ddp-hero__bg{position:absolute;inset:0;height:100%}
.ddp-trust{display:flex;align-items:center;gap:14px;max-width:860px;margin:clamp(14px,3svh,30px) auto 0;padding:14px 20px;border:1px solid var(--line,rgba(120,130,160,.28));border-radius:16px;background:var(--card,var(--bg));color:var(--text);font-size:clamp(.92rem,1.9svh,1.05rem);line-height:1.5;box-shadow:0 10px 30px rgba(30,45,100,.08)}
.ddp-trust__icon{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--brand-soft);color:var(--brand-text,var(--brand))}
.ddp-trust__icon .ddp-icon{width:24px;height:24px}
.ddp-trust strong{color:var(--text)}
@media (max-width:600px){.ddp-trust{align-items:flex-start;padding:12px 14px}.ddp-trust__icon{width:38px;height:38px}}
.ddp-section .ddp-container>p.ddp-trust,.ddp-container>p.ddp-trust{margin:clamp(14px,3svh,30px) auto 0;width:fit-content;max-width:min(860px,100%)}

/* v52 — Bakgrundsbilderna (ljusklotten) klipps inte längre av avsnittets kant: overflow visible, så att de flyter över till nästa avsnitt.
   Sidan får ändå aldrig horisontell rullning (clip på sidnivå), och klotten ligger över nästa avsnitts bakgrund men under dess innehåll. */
html.ddp-site,html.ddp-site body{overflow-x:clip}
.ddp-section,.ddp-pagehero{overflow:visible}
.ddp-hero__bg{overflow:visible;z-index:1}
.ddp-section>.ddp-container,.ddp-pagehero>.ddp-container{z-index:2}
@supports not (overflow:clip){html.ddp-site,html.ddp-site body{overflow-x:hidden}}

/* 1.10.29 — illustration för PDF, följer ljust/mörkt läge som de andra illustrationerna */
.ill-paper{fill:var(--bg-soft);stroke:var(--border);stroke-width:1.5}
.ill-paper-line{fill:var(--border)}
.ill-paper-title{font:800 26px system-ui,sans-serif;fill:var(--text)}
.ill-paper-text{font:650 13px system-ui,sans-serif;fill:var(--text)}
.ill-paper-muted{font:500 11px system-ui,sans-serif;fill:var(--muted)}
.ill-paper-rule{stroke:var(--muted);stroke-width:1;opacity:.6}
.ill-edit{fill:var(--brand-soft);stroke:var(--brand-text);stroke-width:1.5;stroke-dasharray:5 4}
.ill-hl{fill:#ffd84d;opacity:.55}
html[data-theme="dark"] .ill-hl{opacity:.35}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .ill-hl{opacity:.35}}
.ill-sign{fill:none;stroke:var(--brand-text);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ill-thumb{fill:var(--bg-soft);stroke:var(--border);stroke-width:1.5}
.ill-thumb--on{stroke:var(--brand-text);stroke-width:2.5}
/* 1.10.30 — sidan Appen */
.ddp-btn .ddp-icon{width:20px;height:20px;margin-right:8px;flex:none}
button.ddp-btn{font-family:inherit;appearance:none}
button.ddp-btn[hidden]{display:none}
.ddp-install-note{display:flex;align-items:center;gap:8px;margin:18px 0 0;font-weight:650;color:var(--brand-text)}
.ddp-install-note[hidden]{display:none}
.ddp-howto{margin:12px 0 0;padding-left:1.3em;display:grid;gap:8px;color:var(--muted)}
.ddp-howto strong{color:var(--text)}
.ddp-card.is-yours{border-color:var(--brand-text);box-shadow:0 0 0 2px var(--brand-soft),var(--shadow)}
.ddp-phonewrap{display:flex;justify-content:center}
.ddp-illus--phone{width:auto;height:min(560px,calc(100svh - 220px));max-width:100%}
.ill-phone{fill:var(--text);opacity:.9}
.ill-screen{fill:var(--bg-soft)}
.ill-notch{fill:var(--text);opacity:.9}
.ill-tile{fill:var(--surface);stroke:var(--border);stroke-width:1.5}
.ill-homebar{fill:var(--muted);opacity:.6}

/* 1.10.36 — bildspelet: den aktiva punkten visar tiden till nästa bild (fylls från vänster) */
.ddp-dot{position:relative;overflow:hidden;background:color-mix(in srgb,var(--muted) 40%,transparent)}
.ddp-dot:hover{background:color-mix(in srgb,var(--muted) 65%,transparent)}
.ddp-dot.is-active{background:color-mix(in srgb,var(--brand-text) 28%,transparent)}
.ddp-dot.is-active::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--brand-text);transform-origin:left center;transform:scaleX(1)}
.ddp-dot.is-active.is-counting::after{animation:ddp-slide-progress var(--ddp-slide-ms,9000ms) linear both}
[data-ddp-slider].is-paused .ddp-dot.is-active.is-counting::after{animation-play-state:paused}
[data-ddp-slider].is-stopped .ddp-dot.is-active::after{animation:none;transform:scaleX(1)}
@keyframes ddp-slide-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.ddp-dot.is-active::after{animation:none!important;transform:scaleX(1)}}

/* 1.10.37 — paus/spela i den aktiva punkten: hover visar paus, pausat visar spela; stapeln tonas ner */
.ddp-dots{align-items:center}
.ddp-dot.is-active{width:40px;height:16px}
.ddp-dot__icon{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:1;pointer-events:none}
.ddp-dot__icon svg{width:10px;height:10px;fill:var(--text)}
.ddp-dot__play{display:none}
.ddp-dot.is-active:is(:hover,:focus-visible) .ddp-dot__icon{display:flex}
.ddp-dot.is-active:is(:hover,:focus-visible)::after{opacity:.45}
[data-ddp-slider].is-halted .ddp-dot.is-active .ddp-dot__icon{display:flex}
[data-ddp-slider].is-halted .ddp-dot.is-active .ddp-dot__pause{display:none}
[data-ddp-slider].is-halted .ddp-dot.is-active .ddp-dot__play{display:block}
[data-ddp-slider].is-halted .ddp-dot.is-active::after{opacity:.45}
[data-ddp-slider].is-halted .ddp-dot.is-active.is-counting::after{animation-play-state:paused}

/* 1.10.39 — större rubrik i Schema-illustrationen */
.ill-title--lg{font-size:30px}

/* 1.10.42 — logotypanimation på startsidan: vit platta bara bakom animationen, därefter den vanliga logotypen */
.ddp-logo{position:relative}
.ddp-logo.is-animating .ddp-logo__img{opacity:0}
/* 1.10.43: på startsidan är logotypen dold från början tills animationen spelats klart (eller hoppats över) */
.ddp-logo[data-ddp-logo-anim]:not(.is-anim-done):not(.is-anim-finished):not(.is-anim-skip) .ddp-logo__img{opacity:0}
.ddp-logo-anim{position:absolute;left:0;top:0;height:var(--ddp-logo-h,44px);width:calc(var(--ddp-logo-h,44px) * 2.529);pointer-events:none;z-index:2}
.ddp-logo-anim svg{display:block;width:100%;height:100%;overflow:visible;position:relative;z-index:1}

/* 1.10.49 — ingen platta bakom animationen i något läge */

/* 1.10.51 — sömlöst byte: logotypen tänds direkt (ingen toning) under animationen, som sedan tas bort */
.ddp-logo.is-anim-finished .ddp-logo__img{opacity:1!important;transition:none!important}
.ddp-logo.is-animating.is-anim-finished .ddp-logo-anim{opacity:1;transition:none}

/* 1.10.54 — språkval i menyn */
.ddp-menu-lang a{display:inline-flex;align-items:center;gap:6px}
.ddp-menu-lang .ddp-icon{width:16px;height:16px}

/* 1.10.75 — EN list: toppheaderns knappar i webbplatsens sidhuvud (platsen [data-ddp-account-slot]).
   Webbplatsens egna Logga in och språkval finns bara som reserv i platsen, tills toppheadern har lagts in. */
.ddp-header .ddp-nav{margin-left:auto}
.ddp-header .datoden-wp-login-item,.ddp-header .ddp-menu-lang{display:none!important}
.ddp-header__account{display:flex;align-items:center;gap:8px;flex:none;min-height:38px}
.ddp-header .ddp-slot-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border:1px solid var(--border);border-radius:999px;color:var(--text);font-weight:650;font-size:.95rem;text-decoration:none;white-space:nowrap;background:transparent}
.ddp-header .ddp-slot-btn:hover,.ddp-header .ddp-slot-btn:focus-visible{border-color:var(--brand);color:var(--brand-text)}
.ddp-header .ddp-slot-login{background:var(--brand);border-color:var(--brand);color:var(--datoden-on-accent,#fff)}
.ddp-header .ddp-slot-login:hover,.ddp-header .ddp-slot-login:focus-visible{background:var(--brand-dark);border-color:var(--brand-dark);color:var(--datoden-on-accent,#fff)}
.ddp-header .ddp-slot-lang .ddp-icon{width:16px;height:16px}
/* Toppheadern i platsen: ingen egen list (bakgrund/ram/höjd sätts också i portal.js, eftersom den centrala CSS:en ligger i ett starkare lager) */
html body:not(#a) .ddp-header [data-ddp-account-slot] .datoden-globalbar{position:static!important;height:auto!important;min-height:0!important;width:auto!important;max-width:none!important;padding:0!important;margin:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;background:transparent!important;z-index:auto!important}
html body:not(#a) .ddp-header [data-ddp-account-slot] .datoden-globalbar-inner{width:auto!important;max-width:none!important;margin:0!important;padding:0!important;min-height:0!important}
html body:not(#a) .ddp-header [data-ddp-account-slot] .datoden-global-spacer{display:none!important}
html.ddp-merged .datoden-portal-header-host{min-height:0!important}
/* Hamburgermenyn tar över sidorna tidigare nu när knapparna delar raden */
@media (max-width:1180px){
  .ddp-navtoggle{display:inline-flex}
  .ddp-header .ddp-nav{margin-left:0}
  .ddp-header__account{margin-left:auto}
  .ddp-nav{position:absolute;left:0;right:0;top:100%;max-height:calc(100dvh - var(--ddp-top-h,73px));overflow:auto;padding:12px 24px 20px;background:var(--bg);border-bottom:1px solid var(--border);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
  .ddp-header.is-open .ddp-nav{opacity:1;visibility:visible;transform:none}
  .ddp-menu{flex-direction:column;align-items:stretch;gap:6px}
  .ddp-menu a{width:100%;padding:13px 14px}
  .ddp-menu .datoden-demo-menu .datoden-demo-choices{position:static;box-shadow:none;margin-top:6px}
}
@media (max-width:600px){
  .ddp-header__inner{gap:8px;width:calc(100% - 24px)}
  .ddp-header .ddp-logo{flex:none}
  .ddp-header__account{gap:6px;min-width:0;flex:0 1 auto}
  .ddp-logo__img{height:30px}
  .ddp-header .ddp-slot-btn{height:36px;padding:0 11px}
  .ddp-header .ddp-slot-lang .ddp-lang-label{display:none}
  /* bara ikoner på appmenyn och språkvalet; namnet/Logga in får resten av platsen */
  html body:not(#a) .ddp-header [data-ddp-account-slot] :is(.datoden-appswitch-btn,.datoden-langswitch-btn) .datoden-btn-caret,
  html body:not(#a) .ddp-header [data-ddp-account-slot] .datoden-langswitch-code{display:none!important}
  html body:not(#a) .ddp-header [data-ddp-account-slot] .datoden-globalbar-inner{gap:6px!important}
  html body:not(#a) .ddp-header [data-ddp-account-slot] :is(.datoden-appswitch,.datoden-langswitch){flex:none!important}
  html body:not(#a) .ddp-header [data-ddp-account-slot] .datoden-accountmenu{min-width:0!important;flex:0 1 auto!important;max-width:max(64px,calc(100vw - 300px))}
  html body:not(#a) .ddp-header [data-ddp-account-slot] .datoden-globalbar{min-width:0!important}
  html body:not(#a) .ddp-header [data-ddp-account-slot] .datoden-accountmenu .datoden-account-btn{min-width:0;max-width:100%}
  html body:not(#a) .ddp-header [data-ddp-account-slot] .datoden-globalbar-inner>a:not(.datoden-brand){min-width:0;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:380px){
  .ddp-logo__img{height:24px}
  .ddp-header__inner{gap:6px;width:calc(100% - 16px)}
}

/* 1.10.78 — "Prova apparna" i vanlig skrivstil direkt under appmenyn, pilen pekar upp mot knappen. Tar ingen plats i menyn. */
.ddp-try-note{position:absolute;left:calc(50% - 10px);top:calc(100% + 1px);display:flex;align-items:flex-start;gap:4px;pointer-events:none;color:var(--brand-text);z-index:2}
.ddp-try-note svg{display:block;flex:none;overflow:visible}
.ddp-try-note__text{display:block;margin-top:5px;transition:transform .25s ease} /* 1.10.80: större text hänger under listen; pilen står kvar */
.ddp-try-note.is-up .ddp-try-note__text{transform:translateY(-6px)} /* 1.10.81: upp vid scrollning nedåt */
@media (prefers-reduced-motion:reduce){.ddp-try-note__text{transition:none}}

/* 1.10.85 — pil upp till sidans topp, nere till höger bredvid färglägesväljaren (samma utseende). Syns när man har scrollat ner. */
.ddp-scrollup{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:2147482999;box-sizing:border-box;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:1px solid var(--du-ctl-line,#cdd4e5);border-radius:14px;background:var(--du-card,#fff);color:var(--du-ink,#141824);box-shadow:0 10px 28px rgba(20,28,60,.22);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s,right .2s}
.ddp-scrollup.is-visible{opacity:1;visibility:visible;transform:none}
.ddp-scrollup.is-beside-theme{right:calc(max(14px,env(safe-area-inset-right)) + 52px)}
.ddp-scrollup:hover{border-color:var(--du-accent,var(--datoden-accent,#3953a4));background:var(--du-soft,var(--datoden-accent-tint,#eef0f8))}
.ddp-scrollup:focus-visible{outline:0;box-shadow:0 0 0 3px var(--du-ring,rgba(var(--datoden-accent-rgb,57,83,164),.35)),0 10px 28px rgba(20,28,60,.22)}
.ddp-scrollup svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.ddp-scrollup{transition:none}}

/* 1.10.105 — pil ner i undersidornas första avsnitt (samma knapp som på startsidan) */
.ddp-pagehero .ddp-next--hero{position:absolute;left:50%;bottom:clamp(14px,3svh,34px);margin:0;transform:translateX(-50%);z-index:3}
.ddp-pagehero .ddp-next--hero:hover,.ddp-pagehero .ddp-next--hero:focus-visible{transform:translate(-50%,2px)}
.ddp-pagehero .ddp-next--hero.is-away{opacity:0;visibility:hidden;pointer-events:none}

/* 1.10.110 — enklare första budskap: fyra appbrickor i stället för de staplade illustrationerna */
.ddp-hero--simple h1{font-size:clamp(2.3rem,5.2vw,4.2rem);line-height:1.04;letter-spacing:-.03em;max-width:12ch;margin:0 0 .5em}
.ddp-hero--simple .ddp-lead{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:34ch}
.ddp-apptiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);max-width:520px;margin-inline:auto}
.ddp-apptile{position:relative;display:grid;gap:6px;align-content:start;padding:clamp(18px,2.2vw,28px);border-radius:24px;background:var(--surface,#fff);border:1px solid var(--border,#e2e6f0);box-shadow:0 18px 40px rgba(20,28,60,.08);color:var(--text,#141824);text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.ddp-apptile:nth-child(2),.ddp-apptile:nth-child(4){transform:translateY(clamp(14px,2.4vw,30px))}
.ddp-apptile:hover,.ddp-apptile:focus-visible{transform:translateY(-4px);box-shadow:0 24px 50px rgba(20,28,60,.14)}
.ddp-apptile:nth-child(2):hover,.ddp-apptile:nth-child(4):hover,.ddp-apptile:nth-child(2):focus-visible,.ddp-apptile:nth-child(4):focus-visible{transform:translateY(calc(clamp(14px,2.4vw,30px) - 4px))}
.ddp-apptile__icon{display:grid;place-items:center;width:clamp(48px,5vw,60px);height:clamp(48px,5vw,60px);border-radius:16px;margin-bottom:8px;color:#fff}
.ddp-apptile__icon svg{width:55%;height:55%}
.ddp-apptile--rapport .ddp-apptile__icon{background:linear-gradient(135deg,var(--datoden-accent,#3953a4),var(--datoden-accent-light,#5b7be0))}
.ddp-apptile--schema .ddp-apptile__icon{background:linear-gradient(135deg,#177f60,#2fb38a)}
.ddp-apptile--pdf .ddp-apptile__icon{background:linear-gradient(135deg,#c2410c,#f08a3e)}
.ddp-apptile .ddp-apptile__name{color:var(--text,#141824)!important;font-weight:800;font-size:clamp(1.1rem,1.5vw,1.35rem);letter-spacing:-.01em}
.ddp-apptile__desc{color:var(--muted,#5b6479);font-size:.95rem}
@media (max-width:900px){.ddp-apptiles{max-width:440px;margin-top:8px}.ddp-hero--simple h1{max-width:none}}
@media (max-width:480px){.ddp-apptile{padding:16px;border-radius:20px}.ddp-apptile__desc{font-size:.85rem}}
@media (prefers-reduced-motion:reduce){.ddp-apptile{transition:none}}

/* 1.10.111 — brickorna svävar lugnt i otakt och ikonerna vickar lite (som de staplade bilderna gjorde förut) */
@keyframes ddpTileFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes ddpIconSway{0%,100%{rotate:0deg;scale:1}50%{rotate:-6deg;scale:1.06}}
.ddp-apptile{animation:ddpTileFloat 6.5s ease-in-out infinite}
.ddp-apptile:nth-child(2){animation-duration:7.5s;animation-delay:-1.8s}
.ddp-apptile:nth-child(3){animation-duration:7s;animation-delay:-3.6s}
.ddp-apptile:nth-child(4){animation-duration:8s;animation-delay:-5.2s}
.ddp-apptile__icon{animation:ddpIconSway 5s ease-in-out infinite}
.ddp-apptile:nth-child(2) .ddp-apptile__icon{animation-delay:-1.2s}
.ddp-apptile:nth-child(3) .ddp-apptile__icon{animation-delay:-2.6s}
.ddp-apptile:nth-child(4) .ddp-apptile__icon{animation-delay:-3.9s}
.ddp-apptile:hover .ddp-apptile__icon,.ddp-apptile:focus-visible .ddp-apptile__icon{animation-play-state:paused;rotate:-8deg;scale:1.1;transition:rotate .25s,scale .25s}
@media (prefers-reduced-motion:reduce){.ddp-apptile,.ddp-apptile__icon{animation:none}}

/* 1.10.114 — appmenyn vid knappen "Kom igång gratis" (samma val som Välj app) */
.ddp-inline-appmenu{position:absolute;z-index:2147482000;min-width:240px;display:grid;gap:2px;padding:6px;border-radius:16px;background:var(--surface,#fff);border:1px solid var(--border,#dfe3ee);box-shadow:0 18px 44px rgba(20,28,60,.18)}
.ddp-inline-appmenu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--text,#141824)!important;text-decoration:none!important;font-weight:650}
.ddp-inline-appmenu a:hover,.ddp-inline-appmenu a:focus-visible{background:var(--surface-2,var(--bg-soft));color:var(--text)!important;outline:none}
.ddp-inline-appmenu svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--muted,#4f586c)}
.ddp-inline-appmenu .datoden-appswitch-sep{height:1px;margin:4px 8px;background:var(--border,#dfe3ee)}

/* 1.10.116 — "Kom igång gratis": liten pil som visar att knappen öppnar en meny */
[data-ddp-appmenu-trigger]{gap:8px}
[data-ddp-appmenu-trigger]::after{content:"";width:12px;height:12px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s}
[data-ddp-appmenu-trigger][aria-expanded="true"]::after{transform:rotate(180deg)}

/* 1.10.117 — menyn ovanför knappen: pilen pekar uppåt */
[data-ddp-appmenu-trigger].is-menu-up::after{transform:rotate(180deg)}
[data-ddp-appmenu-trigger].is-menu-up[aria-expanded="true"]::after{transform:none}

/* 1.10.131 — Font-sidans illustration */
.ddp-font-art{width:100%;max-width:440px;height:auto;display:block;margin-inline:auto;filter:drop-shadow(0 18px 40px rgba(20,28,60,.10))}
.ddp-vektor-art{width:100%;max-width:440px;height:auto;display:block;margin-inline:auto;filter:drop-shadow(0 18px 40px rgba(20,28,60,.10))}
.ddp-bild-art{width:100%;max-width:440px;height:auto;display:block;margin-inline:auto;filter:drop-shadow(0 18px 40px rgba(20,28,60,.10))}
@media (max-width:1180px){.ddp-menu-sep{width:auto;height:1px;margin:6px 0}} /* 1.10.167: vågrät i hamburgermenyn */
/* 1.10.169: menyn Appar – rullgardin med alla appar (vanliga länkar i HTML), knappen leder till /appar/ */
.ddp-sub-caret{width:14px;height:14px;transition:transform .2s;opacity:.7}
.ddp-has-sub>.ddp-submenu{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,6px);z-index:60;display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:4px;min-width:480px;margin:0;padding:10px;list-style:none;background:var(--surface,#fff);border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 40px rgba(15,23,42,.16);opacity:0;visibility:hidden;transition:opacity .16s,transform .16s,visibility .16s}
.ddp-has-sub>.ddp-submenu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.ddp-has-sub:hover>.ddp-submenu,.ddp-has-sub:focus-within>.ddp-submenu,.ddp-has-sub.is-open>.ddp-submenu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.ddp-has-sub:hover .ddp-sub-caret,.ddp-has-sub:focus-within .ddp-sub-caret,.ddp-has-sub.is-open .ddp-sub-caret{transform:rotate(180deg)}
.ddp-submenu a{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:12px}
.ddp-submenu__text{display:grid;gap:1px;line-height:1.25}
.ddp-submenu__text small{font-weight:500;font-size:.82rem;color:var(--muted)}
.ddp-submenu__icon{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;color:#fff;flex:none;background:linear-gradient(135deg,#3953a4,#6b84d6)}
.ddp-submenu__icon svg{width:20px;height:20px}
.ddp-submenu__icon--bild{background:linear-gradient(135deg,#0e7490,#22b8cf)}
.ddp-submenu__icon--font{background:linear-gradient(135deg,#7c3aed,#a879f5)}
.ddp-submenu__icon--pdf{background:linear-gradient(135deg,#c2410c,#f08a3e)}
.ddp-submenu__icon--rapport{background:linear-gradient(135deg,#3953a4,#6b84d6)}
.ddp-submenu__icon--schema{background:linear-gradient(135deg,#15803d,#4ade80)}
.ddp-submenu__icon--vektor{background:linear-gradient(135deg,#be185d,#f472b6)}
.ddp-submenu__all{grid-column:1 / -1;border-top:1px solid var(--border);margin-top:4px;padding-top:4px}
.ddp-submenu__all a{justify-content:center;font-size:.92rem}
.ddp-submenu__all svg{width:16px;height:16px}
@media (max-width:1180px){
  /* 1.10.357: visibility inherit – undermenyerna följer den stängda mobilmenyn (visible gjorde dem osynliga men klickbara ovanpå sidans knappar) */
  .ddp-has-sub>.ddp-submenu{position:static;transform:none;opacity:1;visibility:inherit;display:grid;grid-template-columns:1fr;min-width:0;padding:2px 0 6px 12px;border:0;box-shadow:none;background:transparent}
  .ddp-has-sub:hover>.ddp-submenu,.ddp-has-sub:focus-within>.ddp-submenu,.ddp-has-sub.is-open>.ddp-submenu{visibility:inherit}
  .ddp-has-sub>.ddp-submenu::before{display:none}
  .ddp-has-sub:hover>.ddp-submenu,.ddp-has-sub:focus-within>.ddp-submenu{transform:none}
  .ddp-sub-caret{display:none}
  .ddp-submenu a{padding:8px 12px}
  .ddp-submenu__icon{width:30px;height:30px}
}
/* 1.10.169: översiktssidan /appar/ */
.ddp-pagehero--short{min-height:0}
.ddp-appcards{display:grid}
.ddp-appcard{display:flex;flex-direction:column}
.ddp-appcard h2{margin:6px 0 0}
.ddp-appcard h2 a{color:inherit;text-decoration:none}
.ddp-appcard h2 a:hover{text-decoration:underline}
.ddp-appcard__desc{margin:0;font-weight:650;color:var(--brand-text)}
.ddp-appcard p{margin:0}
.ddp-appcard .ddp-actions{margin-top:auto;padding-top:8px}
.ddp-footer__sep{margin-top:6px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.ddp-allapps{margin-top:clamp(12px,2vh,24px)}
/* 1.10.176: hamburgermenyn – innehållet i en centrerad spalt, texten vänsterställd */
@media (max-width:1180px){
  .ddp-header .ddp-nav .ddp-menu{width:100%;max-width:420px;margin-inline:auto}
  .ddp-has-sub>.ddp-submenu .ddp-submenu__all a{justify-content:flex-start}
  /* 1.10.177: inga avgränsare; Om oss och Kontakt i linje med apparna */
  .ddp-menu-sep{display:none!important}
  .ddp-has-sub>.ddp-submenu .ddp-submenu__all{border-top:0;margin-top:0;padding-top:0}
  .ddp-header .ddp-nav .ddp-menu>.ddp-menu-item:not(.ddp-has-sub){padding-left:10px}
  /* 1.10.178: mindre luft mellan Alla appar, Om oss och Kontakt */
  .ddp-header .ddp-nav .ddp-menu{gap:0}
  .ddp-header .ddp-nav .ddp-menu>.ddp-menu-item:not(.ddp-has-sub)>a{padding-top:8px;padding-bottom:8px}
  .ddp-has-sub>.ddp-submenu{padding-bottom:0}
  .ddp-has-sub>.ddp-submenu .ddp-submenu__all a{padding-top:8px;padding-bottom:8px}
}
/* 1.10.179: appläge (installerad app eller ?app=1) – appstartare, flikrad nederst, ingen sidfot eller hamburgermeny */
.ddp-launcher,.ddp-tabbar,.ddp-sheet{display:none}
html.ddp-appmode{-webkit-tap-highlight-color:transparent}
html.ddp-appmode body{overscroll-behavior-y:none;padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
.ddp-appmode .ddp-footer,.ddp-appmode .ddp-navtoggle,.ddp-appmode .ddp-nav,.ddp-appmode .ddp-try-note,.ddp-appmode .ddp-scrollup,.ddp-appmode .ddp-next{display:none!important}
.ddp-appmode .ddp-main--home>section:not(.ddp-launcher){display:none}
.ddp-appmode .ddp-pagehero,.ddp-appmode .ddp-section{min-height:0}
.ddp-appmode .ddp-launcher{display:block;padding:clamp(18px,4vh,40px) 0 24px}
.ddp-launcher__inner{width:min(720px,calc(100% - 32px));margin:0 auto}
.ddp-launcher__hello{margin:0;color:var(--muted);font-weight:650}
.ddp-launcher h1{margin:2px 0 18px;font-size:clamp(1.7rem,6vw,2.3rem);letter-spacing:-.02em}
.ddp-launcher__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 10px;margin-bottom:26px}
@media (min-width:560px){.ddp-launcher__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ddp-appmode .ddp-launcher a{color:var(--text);text-decoration:none}
.ddp-launcher__app{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 2px;border-radius:18px;color:var(--text);text-decoration:none;font-weight:650;font-size:.92rem;-webkit-user-select:none;user-select:none;transition:transform .12s}
.ddp-launcher__app:active{transform:scale(.94)}
.ddp-launcher__app:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ddp-launcher__icon{width:64px;height:64px;border-radius:18px;box-shadow:0 8px 22px rgba(15,23,42,.18)}
.ddp-launcher__icon svg{width:30px;height:30px}
.ddp-launcher__cards{display:grid;gap:10px}
.ddp-launcher__card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--border);color:var(--text);text-decoration:none}
.ddp-launcher__card:active{transform:scale(.99)}
.ddp-launcher__card>.ddp-icon{width:22px;height:22px;flex:none;color:var(--brand-text)}
.ddp-launcher__card span{display:grid;gap:1px}
.ddp-launcher__card small{color:var(--muted)}
html.ddp-loggedin .ddp-launcher [data-ddp-guest-only]{display:none}
.ddp-appmode .ddp-tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:2147480000;padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--surface,#fff) 88%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--border)}
.ddp-appmode .ddp-tabbar a,.ddp-appmode .ddp-tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:4px 0;border:0;border-radius:12px;background:none;color:var(--muted);font-family:inherit;font-size:.74rem;font-weight:600;line-height:1.1;text-decoration:none;cursor:pointer}
.ddp-tabbar svg{width:24px;height:24px}
.ddp-appmode .ddp-tabbar .is-active{color:var(--brand-text)}
.ddp-tabbar a:active,.ddp-tabbar button:active{background:var(--surface-2)}
.ddp-appmode .ddp-sheet:not([hidden]){display:flex;position:fixed;inset:0;z-index:2147480500;align-items:flex-end;background:rgba(10,14,30,.45)}
.ddp-sheet__panel{width:100%;max-width:560px;margin:0 auto;padding:10px 16px calc(14px + env(safe-area-inset-bottom,0px));border-radius:22px 22px 0 0;background:var(--surface,#fff);color:var(--text);box-shadow:0 -10px 40px rgba(0,0,0,.25);animation:ddpSheet .2s ease-out}
@keyframes ddpSheet{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.ddp-sheet__grip{display:block;width:40px;height:5px;margin:2px auto 10px;border-radius:3px;background:var(--border)}
.ddp-sheet ul{list-style:none;margin:0;padding:0;display:grid}
.ddp-appmode .ddp-sheet li a{display:block;padding:14px 6px;border-bottom:1px solid var(--border);color:var(--text);text-decoration:none;font-weight:600}
.ddp-sheet__close{width:100%;margin-top:12px;padding:13px;border:0;border-radius:14px;background:var(--surface-2);color:var(--text);font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer}
@media (prefers-reduced-motion:reduce){.ddp-sheet__panel{animation:none}}
/* 1.10.180: appläget – bara logotypen i sidhuvudet (toppheadern döljs; Konto och språk finns i flikraden), menyer som ark nerifrån */
.ddp-appmode .ddp-header__account,.ddp-appmode [data-ddp-account-slot],.ddp-appmode .datoden-portal-header-host{display:none!important}
.ddp-appmode .ddp-header__inner{justify-content:center;min-height:calc(54px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px)}
.ddp-appmode .ddp-header .ddp-logo img{height:32px;width:auto}
.ddp-sheet__head{margin:0 6px 6px;font-weight:800;font-size:1.05rem}
.ddp-appmode .ddp-sheet li a,.ddp-appmode .ddp-sheet li button{display:flex;align-items:center;gap:12px;width:100%;padding:14px 6px;border:0;border-bottom:1px solid var(--border);background:none;color:var(--text);text-decoration:none;font-family:inherit;font-size:1rem;font-weight:600;text-align:left;cursor:pointer}
.ddp-appmode .ddp-sheet li svg{width:20px;height:20px;flex:none;color:var(--muted)}
.ddp-appmode .ddp-sheet li .datoden-logout,.ddp-appmode .ddp-sheet li .datoden-logout svg{color:#d33a3a}
.ddp-sheet li [aria-checked="true"]::after{content:"✓";margin-left:auto;color:var(--brand-text);font-weight:800}
.ddp-sheet__panel{max-height:calc(100dvh - 60px);overflow:auto;overscroll-behavior:contain}
/* 1.10.182: Stäng är en länk */
.ddp-appmode .ddp-sheet__close{display:block;box-sizing:border-box;text-align:center;text-decoration:none;color:var(--text)}
.ddp-appmode .ddp-tabbar a[href="#"]{color:var(--muted)}
/* 1.10.184: Mer – Språk som utfällbar rad, samma storlek och vänsterställning som övriga val */
.ddp-sheet__details summary{display:flex;align-items:center;gap:12px;padding:14px 6px;border-bottom:1px solid var(--border);color:var(--text);font-size:1rem;font-weight:600;cursor:pointer;list-style:none}
.ddp-sheet__details summary::-webkit-details-marker{display:none}
.ddp-sheet__details summary::after{content:"";width:8px;height:8px;margin:0 6px 0 4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);opacity:.6;transition:transform .2s}
.ddp-sheet__details[open] summary::after{transform:rotate(-135deg)}
.ddp-sheet__current{margin-left:auto;color:var(--muted);font-weight:500}
.ddp-appmode .ddp-sheet .ddp-sheet__details li a{padding-left:22px}
/* 1.10.186: appen ska kännas rapp – inget fade-in vid rullning, ingen dubbeltrycksfördröjning, mjuk övergång mellan sidor (installerad app) */
.ddp-appmode .ddp-reveal{opacity:1!important;transform:none!important;transition:none!important}
html.ddp-appmode{touch-action:manipulation}
@media (display-mode: standalone){@view-transition{navigation:auto}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.14s}
/* 1.10.188: flikraden ligger still vid sidbyten i den installerade appen (samma view-transition-namn som i apparna, inget fade) */
.ddp-appmode .ddp-tabbar{view-transition-name:ddp-tabbar}
::view-transition-group(ddp-tabbar){animation-duration:0s}
::view-transition-old(ddp-tabbar){display:none}
::view-transition-new(ddp-tabbar){animation:none}
/* 1.10.189: i appskalets ram – skalet har flikraden, sidan visar ingen egen */
.ddp-inshell .ddp-tabbar,.ddp-inshell .ddp-sheet{display:none!important}
html.ddp-inshell body{padding-bottom:0!important}
/* 1.10.192: /appar/ – större kort: tre per rad på dator (sex appar = två jämna rader), två på surfplatta, en på mobil */
.ddp-appcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
@media (max-width:1000px){.ddp-appcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ddp-appcards{grid-template-columns:minmax(0,1fr)}}
.ddp-appcard{padding:clamp(22px,2.4vw,32px);gap:10px}
.ddp-appcard h2{font-size:clamp(1.4rem,2vw,1.7rem)}
.ddp-appcard__desc{font-size:1.05rem}
.ddp-appcard__icon{width:60px;height:60px;border-radius:16px}
.ddp-appcard__icon svg{width:30px;height:30px}
/* 1.10.193: sidfoten – Appar och Konto som hopfällda listor med rubriken som knapp */
.ddp-footer__group{margin:0 0 14px}
.ddp-footer__group summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;color:var(--footer-head)}
.ddp-footer__group summary::-webkit-details-marker{display:none}
.ddp-footer__group summary h2{margin:0}
.ddp-footer__group summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7;transition:transform .2s;margin-right:4px}
.ddp-footer__group[open] summary::after{transform:rotate(-135deg)}
.ddp-footer__group summary:hover,.ddp-footer__group summary:focus-visible{color:#fff}
.ddp-footer__group>ul{margin-top:12px}
.ddp-footer__group+.ddp-footer__group{padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
/* 1.10.194: Konto alltid utfällt under Appar */
.ddp-footer__group--open h2{margin:0}
/* 1.10.195: Appar i linje med Konto; vid hovring utfyllnad och rundade hörn som andra utfällbara menyer (texten står still) */
.ddp-footer__group summary{margin:-8px -10px;padding:8px 10px;border-radius:10px;transition:background .15s,color .15s}
.ddp-footer__group summary::marker{content:""}
.ddp-footer__group summary:hover,.ddp-footer__group summary:focus-visible{background:rgba(255,255,255,.07);outline:none}
.ddp-footer__group[open] summary{margin-bottom:-8px}
/* 1.10.196: Språk i sidfoten – valt språk till höger om rubriken, markerat i listan */
.ddp-footer__cur{margin-left:auto;margin-right:6px;font-size:.88rem;color:var(--footer-text);opacity:.8}
.ddp-footer__group a[aria-current="true"]{color:#fff;font-weight:650}
/* 1.10.198: copyrightraden i samma storlek och färg som texten ovanför */
.ddp-footer__bottom,.ddp-footer__bottom p{font-size:.88rem;color:#8990a5}
.ddp-footer__bottom a{color:inherit;text-decoration:underline;text-decoration-color:rgba(137,144,165,.45);text-underline-offset:3px}
.ddp-footer__bottom a:hover,.ddp-footer__bottom a:focus-visible{color:#fff}
/* 1.10.216: inloggad – skrivstilstexten "Välj din app här" i grönt */
.ddp-try-note.ddp-try-note--in{color:#15803d}
html[data-theme="dark"] .ddp-try-note.ddp-try-note--in{color:#4ade80}


/* 1.10.330: Läs om WordPress-tillägg i huvudmenyn och WP-tillägg på startsidan */
.ddp-submenu__icon--wp{background:linear-gradient(135deg,#21759b,#4aa3d0)}
.ddp-submenu--wp a{padding:8px 12px}.ddp-submenu--wp .ddp-submenu__icon{width:32px;height:32px}.ddp-submenu--wp .ddp-submenu__icon svg{width:18px;height:18px}
@media (min-width:1181px){.ddp-has-sub--wp>.ddp-submenu{min-width:560px;max-height:calc(100vh - 120px);overflow:auto}}
.ddp-apptile--wp .ddp-apptile__icon{background:linear-gradient(135deg,#21759b,#4aa3d0)}
.ddp-slide__media .ddpro-illus{width:100%;height:auto;display:block;max-width:560px;margin-inline:auto;filter:drop-shadow(0 18px 40px rgba(20,28,60,.12))}
/* 1.10.331: det valda syns i menyn – sidan man är på är markerad i rullgardinen (och i hamburgermenyn) */
.ddp-submenu a[aria-current="page"]{background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--brand)}
.ddp-submenu a[aria-current="page"] strong{color:var(--brand-text)}
.ddp-submenu a[aria-current="page"] .ddp-submenu__icon{box-shadow:0 0 0 2px var(--surface,#fff),0 0 0 4px var(--brand)}
.ddp-submenu a:not([aria-current]):hover{background:var(--surface-2,rgba(0,0,0,.04))}
/* 1.10.342: bron mellan menyknappen och rullgardinen ligger på menyraden – rullgardinen för WordPress-tillägg har overflow:auto, som klippte
   bort bron i rullgardinen själv, så den stängdes när man förde musen långsamt ned från knappen */
@media (min-width:1181px){.ddp-has-sub:hover::after,.ddp-has-sub:focus-within::after,.ddp-has-sub.is-open::after{content:"";position:absolute;left:50%;top:100%;width:min(600px,100vw);height:22px;transform:translateX(-50%);z-index:59}}

/* WP 1.10.343: menyn Läs om WordPress-tillägg visar tilläggens egna ikoner (samma som på WordPress.org och i wp-admin) */
.ddp-submenu__icon--pic{background:none;overflow:hidden}
.ddp-submenu__icon--pic img{display:block;width:100%;height:100%;border-radius:inherit}
/* WP 1.10.345: ikonerna har ett bortklippt hörn – små rundade hörn, ingen bakgrund */
.ddp-submenu__icon--pic,.ddp-submenu--wp .ddp-submenu__icon--pic{border-radius:4px;background:none}

/* WP 1.10.347: apparnas ikoner med Datodens märke (ddp_site_app_icon – avhugget genomskinligt hörn): ingen ruta, ingen skugga bakom, små rundade hörn */
svg.ddp-appicon{display:block;width:100%!important;height:100%!important;fill:initial;stroke:none}
.ddp-pic{background:none!important;box-shadow:none!important;overflow:hidden;padding:0}
.ddp-submenu__icon--pic{border-radius:4px}
.ddp-appcard__icon.ddp-pic,.ddp-launcher__icon.ddp-pic{border-radius:8px}
.ddp-apptile__icon.ddp-pic{border-radius:7px}
.ddp-card__icon.ddp-pic{border-radius:6px}

/* WP 1.10.349: appsidorna – appens ikon intill rubriken (som tilläggens sidor på /pro/) */
.ddp-titlerow{display:flex;align-items:center;gap:20px;margin:0 0 clamp(14px,2vw,26px)}
.ddp-titlerow>h1{margin-top:0;margin-bottom:0;min-width:0}
.ddp-titlerow__icon{flex:none;width:80px;height:80px;border-radius:10px}
@media (max-width:600px){.ddp-titlerow{gap:14px}.ddp-titlerow__icon{width:56px;height:56px;border-radius:7px}}

/* 1.10.352: appikonerna i Välj app och i menyn under Kom igång gratis lika stora som under Läs om apparna (36 px). Radernas ikonkolumn
   är 18 px (inbyggd stil från Login), så appikonen går ut 18 px åt höger och texten flyttas lika mycket; ikoner som inte är appar
   (Installera appen) står mitt i samma yta, och pilen för appen man är i ligger kvar till vänster.
   Lagret datoden-ui: Logins regler (18 px) ligger i lager, och !important i ett lager går före alla utan lager – i det först skapade
   lagret (datoden-ui, från datoden-ui.css) går de före alla andra; där vinner den här regeln på sin tyngd. */
@layer datoden-ui{
html body:not(#a) :is(.datoden-appswitch-menu,.ddp-inline-appmenu) a>svg:has(>use[href^="#icon-app-"]){width:36px!important;height:36px!important;max-width:none!important}
html body:not(#a) :is(.datoden-appswitch-menu,.ddp-inline-appmenu) a>svg:not(.datoden-appswitch-cur):not(:has(>use[href^="#icon-app-"])){margin-left:9px!important}
html body:not(#a) :is(.datoden-appswitch-menu,.ddp-inline-appmenu) a>span:not(.datoden-app-desc){margin-left:18px!important}
}

/* 1.10.354: Delade scheman på kontot – appstartaren och menyn Mina appar, ikonen med schemanamnets två första bokstäver (versaler) */
.ddp-saved__title{margin:0 0 12px;font-size:1.05rem;font-weight:750;letter-spacing:-.01em}
.ddp-saved__icon{display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.4rem;letter-spacing:.02em;line-height:1}
.ddp-saved__icon--0{background:linear-gradient(135deg,#15803d,#4ade80)}.ddp-saved__icon--1{background:linear-gradient(135deg,#3953a4,#6b84d6)}
.ddp-saved__icon--2{background:linear-gradient(135deg,#b45309,#f59e0b)}.ddp-saved__icon--3{background:linear-gradient(135deg,#9d174d,#ec4899)}
.ddp-saved__icon--4{background:linear-gradient(135deg,#0e7490,#22d3ee)}.ddp-saved__icon--5{background:linear-gradient(135deg,#6d28d9,#a78bfa)}
.ddp-saved__name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.datoden-appswitch-menu .ddp-share-sep{height:1px;margin:6px 10px;background:var(--du-line,#e0e4f0);pointer-events:none}
.datoden-appswitch-menu .ddp-share-head{padding:6px 12px 2px 26px;color:var(--du-muted,#5b6479);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;pointer-events:none}
.datoden-appswitch-menu a.ddp-share-link{display:grid!important;grid-template-columns:22px minmax(0,1fr)!important;column-gap:10px!important;align-items:center!important;padding-left:24px!important;white-space:nowrap!important}
.datoden-appswitch-menu a.ddp-share-link>span:last-child{overflow:hidden;text-overflow:ellipsis}
.ddp-share-badge{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;color:#fff;font:800 10px/1 system-ui,sans-serif;letter-spacing:.02em}