/* ==========================================================================
   DT-Slideshow
   Anpassa med CSS-variabler, t.ex.  .dtss { --dtss-accent: #e63946; --dtss-radius: 0; }
   ========================================================================== */

.dtss {
	--dtss-accent: #f4c247;
	--dtss-radius: 14px;
	--dtss-bg: #0c1a26;
	--dtss-text: #fff;
	--dtss-speed: 0.9s;
	--dtss-interval: 6s;
	--dtss-ease: cubic-bezier(0.65, 0, 0.35, 1);
	position: relative;
	margin-block: 2rem;
	color: var(--dtss-text);
	-webkit-tap-highlight-color: transparent;
}

.dtss *,
.dtss *::before,
.dtss *::after { box-sizing: border-box; }

/* Skydd mot temats regler för innehåll (t.ex. .entry-content figure { margin: 2em 0 } och rundade bilder). */
.dtss .dtss__slide { margin: 0; padding: 0; }
.dtss .dtss__img,
.dtss .dtss__side-img { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
/* Sidornas opacitet: den suddiga kopian (och de mjuka kanterna) blir genomskinlig, och sidans bakgrund syns igenom. */
.dtss__side, .dtss__bg-side { opacity: var(--dtss-side-o, 1); }
/* Den suddiga bakgrunden i de mjuka kanterna tonas över till den nya bilden under övergången (två lager, se dt-slideshow.js). */
.dtss__glow { opacity: 0; transition: opacity var(--dtss-speed, 0.8s) ease; }
.dtss__glows { position: absolute; inset: 0; opacity: var(--dtss-side-o, 1); }
.dtss__glow.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .dtss__glow { transition: none; } }
.dtss--side-see .dtss__viewport, .dtss--side-see .dtss__bg-side { background: transparent; }
.dtss .dtss__caption > * { margin-top: 0; margin-bottom: 0; }

.dtss__sr {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Hela bredden även i teman som inte har alignfull. */
/* Hela bredden: 100vw minus rullistens bredd (--dtss-sbw sätts av dt-slideshow.js), annars blir sidan rullbar i sidled i Windows. */
.dtss--w-full { --dtss-fw: calc(100vw - var(--dtss-sbw, 0px)); width: var(--dtss-fw); max-width: var(--dtss-fw); margin-left: calc(50% - var(--dtss-fw) / 2); margin-right: calc(50% - var(--dtss-fw) / 2); }

/* ---------- ytan ---------- */
.dtss__viewport {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--dtss-ratio, 16 / 9);
	background: var(--dtss-bg);
	isolation: isolate;
	touch-action: pan-y;
}
.dtss--rounded .dtss__viewport { border-radius: var(--dtss-radius); }
.dtss--shadow .dtss__viewport { box-shadow: 0 24px 60px -20px rgba(8, 20, 32, 0.55); }
.dtss--screen .dtss__viewport { aspect-ratio: auto; height: 100vh; height: 100svh; }
/* Högsta höjd (inställningen Högsta höjd): bilden beskärs runt fokuspunkten. Inte på telefoner – där styr mobilformatet. */
@media (min-width: 641px) {
	.dtss__viewport { max-height: var(--dtss-maxh, none); }
}
.dtss-force-m .dtss__viewport { max-height: none; }
@media (max-width: 640px) {
	.dtss:not(.dtss--screen) .dtss__viewport { aspect-ratio: var(--dtss-ratio-m, var(--dtss-ratio, 16 / 9)); }
	.dtss--hide-text-m .dtss__caption { display: none; }
}

.dtss__track { position: absolute; inset: 0; perspective: 1800px; }

/* Mjuka kanter (över, under eller båda): den suddiga bakgrunden (som vid sidorna) fortsätter en bit ovanför och/eller under
   bildspelet och tonas sedan mjukt ut i sidan. Bildspelet får lika mycket luft (padding) där. --dtss-glow sätts av dt-slideshow.js
   till den bild som visas; suddighet och mörkläggning följer valen för sidorna. */
.dtss[class*="dtss--edge-"] { position: relative; isolation: isolate; }
.dtss--edge-top, .dtss--edge-both { padding-top: max(0px, calc(var(--dtss-edge) - var(--dtss-lift, 0px))); }
.dtss--edge-bottom, .dtss--edge-both { padding-bottom: max(0px, calc(var(--dtss-edge) - var(--dtss-lift, 0px))); }
/* Den del av kanten som inte tar plats ligger bakom innehållet ovanför/under bildspelet. Innehållet efter bildspelet (syskon, och
   syskon till föräldern) läggs därför över bakgrunden – annars skulle bildspelet, som är positionerat, ritas ovanpå texten. */
/* (Innehållet efter bildspelet läggs ovanpå av dt-slideshow.js – bara element som inte redan är positionerade, så att t.ex. temats
   absolut placerade pilar inte flyttas.) */
/* Den del av kanten som inte tar plats ligger bakom innehållet ovanför/under bildspelet. */
.dtss--edge-bottom .dtss__glowwrap, .dtss--edge-both .dtss__glowwrap { bottom: calc(-1 * var(--dtss-lift, 0px)); }
.dtss--edge-top .dtss__glowwrap, .dtss--edge-both .dtss__glowwrap { top: calc(-1 * var(--dtss-lift, 0px)); }
.dtss__glowwrap { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* Med mjuka kanter klipps bildytan bara i sidled och mot den sida som saknar mjuk kant, så att bildens egen skugga följer med bilden (även när bilderna byts) och tonas ut
   mjukt ovanför/under den i stället för att skäras av vid bildytans kant. Bildens skugga är något större och mjukare här. */
.dtss[class*="dtss--edge-"] .dtss__viewport { overflow: visible; }
/* Bilder som glider åt sidorna får inte göra sidan rullbar i sidled (clip-path klipper bara det synliga). */
/* (Klipps på bildytan, inte på hela bildspelet – annars skärs bakgrunden av när den flödar ut åt sidorna på en mörk sida.) */
.dtss[class*="dtss--edge-"] .dtss__viewport { overflow-x: clip; overflow-y: visible; }
/* Klipp i sidled och mot den sida som inte har mjuk kant; släpp igenom skuggan mot den mjuka kanten (högst kantens höjd). */
.dtss--edge-bottom .dtss__viewport { clip-path: inset(0 0 calc(-1 * var(--dtss-edge)) 0); }
.dtss--edge-top .dtss__viewport { clip-path: inset(calc(-1 * var(--dtss-edge)) 0 0 0); }
.dtss--edge-both .dtss__viewport { clip-path: inset(calc(-1 * var(--dtss-edge)) 0); }
.dtss[class*="dtss--edge-"].dtss--side-blur .dtss__frame,
.dtss[class*="dtss--edge-"].has-bg.dtss--maxw .dtss__frame {
	/* Negativ spridning: skuggan går inte ut åt sidorna (där bildytan klipps – den fick annars raka kanter) utan ligger mjukt under bilden. */
	box-shadow: 0 calc(var(--dtss-sh, 60px) * 0.9) calc(var(--dtss-sh, 60px) * 1.1) calc(var(--dtss-sh, 60px) * -0.85) rgba(0, 0, 0, calc(var(--dtss-sho, 0.35) * 1.5));
}
/* Bara den visade bilden (och den som håller på att bytas) får synas utanför bildytan. */
.dtss[class*="dtss--edge-"] .dtss__slide:not(.is-active):not(.is-entering):not(.is-leaving) { visibility: hidden; }
/* Med suddiga sidor tar den gemensamma suddiga bakgrunden över även vid sidorna, så att den blir en enda yta utan skarv. */
.dtss[class*="dtss--edge-"].dtss--side-blur .dtss__viewport { background: transparent; }
.dtss[class*="dtss--edge-"].dtss--side-blur .dtss__side { display: none; }
/* Sidorna med fast bakgrundsbild och mjuk kant: den suddiga kanten (bakgrundsbilden) tar över även vid sidorna – en enda yta utan skarv. */
.dtss[class*="dtss--edge-"].dtss--glow-bg .dtss__viewport { background: transparent; }
.dtss[class*="dtss--edge-"].dtss--glow-bg .dtss__bg-side { display: none; }
.dtss__glow {
	position: absolute; inset: -80px; background: var(--dtss-glow, none) center / cover no-repeat;
	filter: blur(var(--dtss-side-blur, 42px)) saturate(1.15) brightness(var(--dtss-side-b, 0.55)); transform: translateZ(0);
}
/* Uttoningen ut i sidan (i stil med Apple/Spotify). Den är klar vid 82 % av höjden och sedan helt sidans färg, så att den inte slutar tvärt: i stället för att göra bakgrunden genomskinlig (som blir grumligt grå mot en
   ljus sida) läggs sidans egen färg (--dtss-page-bg, läses av dt-slideshow.js) över i en mjuk kurva, blandad i oklab så att färgerna
   går rent över. Samtidigt ökar suddigheten mot slutet (backdrop-filter) och ett svagt brus tar bort ränder i övergången. */
.dtss__fade { position: absolute; z-index: 3; left: 0; right: 0; height: calc(var(--dtss-edge) + 2px); pointer-events: none; } /* över de två bakgrundslagren */
.dtss__fade--bottom { bottom: -1px; background: linear-gradient(to bottom, transparent 0%, color-mix(in oklab, var(--dtss-page-bg, #fff) 0.0%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 0.0%), color-mix(in oklab, var(--dtss-page-bg, #fff) 1.1%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 5.47%), color-mix(in oklab, var(--dtss-page-bg, #fff) 4.3%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 10.93%), color-mix(in oklab, var(--dtss-page-bg, #fff) 9.5%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 16.4%), color-mix(in oklab, var(--dtss-page-bg, #fff) 16.5%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 21.87%), color-mix(in oklab, var(--dtss-page-bg, #fff) 25.0%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 27.33%), color-mix(in oklab, var(--dtss-page-bg, #fff) 34.5%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 32.8%), color-mix(in oklab, var(--dtss-page-bg, #fff) 44.8%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 38.27%), color-mix(in oklab, var(--dtss-page-bg, #fff) 55.2%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 43.73%), color-mix(in oklab, var(--dtss-page-bg, #fff) 65.5%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 49.2%), color-mix(in oklab, var(--dtss-page-bg, #fff) 75.0%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 54.67%), color-mix(in oklab, var(--dtss-page-bg, #fff) 83.5%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 60.13%), color-mix(in oklab, var(--dtss-page-bg, #fff) 90.5%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 65.6%), color-mix(in oklab, var(--dtss-page-bg, #fff) 95.7%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 71.07%), color-mix(in oklab, var(--dtss-page-bg, #fff) 98.9%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 76.53%), color-mix(in oklab, var(--dtss-page-bg, #fff) 100.0%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 82.0%), var(--dtss-page-bg, #fff) 100%); }
.dtss__fade--top { top: -1px; background: linear-gradient(to top, transparent 0%, color-mix(in oklab, var(--dtss-page-bg, #fff) 0.0%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 0.0%), color-mix(in oklab, var(--dtss-page-bg, #fff) 1.1%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 5.47%), color-mix(in oklab, var(--dtss-page-bg, #fff) 4.3%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 10.93%), color-mix(in oklab, var(--dtss-page-bg, #fff) 9.5%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 16.4%), color-mix(in oklab, var(--dtss-page-bg, #fff) 16.5%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 21.87%), color-mix(in oklab, var(--dtss-page-bg, #fff) 25.0%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 27.33%), color-mix(in oklab, var(--dtss-page-bg, #fff) 34.5%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 32.8%), color-mix(in oklab, var(--dtss-page-bg, #fff) 44.8%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 38.27%), color-mix(in oklab, var(--dtss-page-bg, #fff) 55.2%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 43.73%), color-mix(in oklab, var(--dtss-page-bg, #fff) 65.5%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 49.2%), color-mix(in oklab, var(--dtss-page-bg, #fff) 75.0%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 54.67%), color-mix(in oklab, var(--dtss-page-bg, #fff) 83.5%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 60.13%), color-mix(in oklab, var(--dtss-page-bg, #fff) 90.5%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 65.6%), color-mix(in oklab, var(--dtss-page-bg, #fff) 95.7%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 71.07%), color-mix(in oklab, var(--dtss-page-bg, #fff) 98.9%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 76.53%), color-mix(in oklab, var(--dtss-page-bg, #fff) 100.0%, transparent) calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 82.0%), var(--dtss-page-bg, #fff) 100%); }
.dtss__fadeblur { position: absolute; inset: 0; -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); }
.dtss__fade--bottom .dtss__fadeblur { -webkit-mask-image: linear-gradient(to bottom, transparent calc((1 - var(--dtss-fade, 1)) * 100%), #000 calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 60%)); mask-image: linear-gradient(to bottom, transparent calc((1 - var(--dtss-fade, 1)) * 100%), #000 calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 60%)); }
.dtss__fade--top .dtss__fadeblur { -webkit-mask-image: linear-gradient(to top, transparent calc((1 - var(--dtss-fade, 1)) * 100%), #000 calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 60%)); mask-image: linear-gradient(to top, transparent calc((1 - var(--dtss-fade, 1)) * 100%), #000 calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 60%)); }
.dtss__fade--top::after { -webkit-mask-image: linear-gradient(to top, transparent calc((1 - var(--dtss-fade, 1)) * 100%), #000 calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 25%), #000 calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 50%), transparent calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 80%)); mask-image: linear-gradient(to top, transparent calc((1 - var(--dtss-fade, 1)) * 100%), #000 calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 25%), #000 calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 50%), transparent calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 80%)); }
.dtss__fade::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); opacity: 0.06; mix-blend-mode: overlay; -webkit-mask-image: linear-gradient(to bottom, transparent calc((1 - var(--dtss-fade, 1)) * 100%), #000 calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 25%), #000 calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 50%), transparent calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 80%)); mask-image: linear-gradient(to bottom, transparent calc((1 - var(--dtss-fade, 1)) * 100%), #000 calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 25%), #000 calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 50%), transparent calc((1 - var(--dtss-fade, 1)) * 100% + var(--dtss-fade, 1) * 80%)); }
/* Mörk sida: en ljus bild som är halvgenomskinlig och mörklagd blir ett grått dis. Här blir bakgrunden i stället ett färgat sken –
   mycket suddigare (inga konturer), mättare färger och mörkare, med något högre täckning – som på strömningstjänster. Bruset tonas ned. */
.dtss--on-dark .dtss__glow {
	inset: -160px;
	filter: blur(max(var(--dtss-side-blur, 42px), 90px)) saturate(1.9) brightness(calc(var(--dtss-side-b, 1) * 0.55));
}
/* Förberäknad suddig bakgrund (dt-slideshow.js, glowImage): redan suddig, färgjusterad och ditherad – inget CSS-filter. */
.dtss--on-dark .dtss__glow.is-pre { filter: none; background: none; }
.dtss__glowc { display: none; }
.dtss--on-dark .dtss__glow.is-pre > .dtss__glowc { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.dtss--on-dark .dtss__glows { opacity: calc(var(--dtss-side-o, 1) * 0.5 + 0.4); }
/* På mörk sida tonas själva bakgrunden ut (genomskinlighet) i stället för att sidans färg läggs över – mot en mörk sida blir det rent,
   utan grå mellanzon. */
.dtss--on-dark .dtss__fade { display: none; }
/* Masken (med inbyggt brus mot ränder) sätts av dt-slideshow.js. */
/* Telefon med texten under bilden: ingen suddig kant. */
@media (max-width: 640px) {
	.dtss--m-below[class*="dtss--edge-"] { padding-top: 0; padding-bottom: 0; }
	.dtss--m-below .dtss__glowwrap { display: none; }
}
.dtss-force-m .dtss--m-below[class*="dtss--edge-"] { padding-top: 0; padding-bottom: 0; }
.dtss-force-m .dtss--m-below .dtss__glowwrap { display: none; }

/* En bakgrundsbild för hela bildspelet: står still bakom alla bilder (sidorna vid största bildbredd, genomskinliga bilder, övergångar). */
.dtss__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* Själva bakgrundsbilden ligger inom bildens bredd (största bildbredd); utanför syns sidorna. */
.dtss__bg-frame { position: absolute; inset: 0; overflow: hidden; }
.dtss--maxw .dtss__bg-frame { left: 50%; right: auto; width: min(100%, var(--dtss-max)); transform: translateX(-50%); }
.dtss__bg-frame::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--dtss-bg-dim, 0)); }
.dtss__bg-side { position: absolute; inset: 0; overflow: hidden; background: #0b0f14; }
.dtss__bg-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.dtss__bg--blur .dtss__bg-img { inset: -6%; width: 112%; height: 112%; filter: blur(28px) saturate(1.1); transform: translateZ(0); }
.dtss__bg--blur .dtss__bg-img.dtss__img--contain, .dtss__bg--blur .dtss__bg-img.dtss__img--original { inset: 0; width: 100%; height: 100%; }
.dtss .dtss__bg-img.dtss__img--size {
	inset: auto;
	width: calc(var(--fit, 0.6) * 100%);
	height: calc(var(--fit, 0.6) * 100%);
	left: calc((100% - var(--fit, 0.6) * 100%) * var(--fx, 0.5));
	top: calc((100% - var(--fit, 0.6) * 100%) * var(--fy, 0.5));
}
.dtss.has-bg .dtss__track { z-index: 1; }
.dtss.has-bg.dtss--maxw .dtss__frame { box-shadow: 0 0 var(--dtss-sh, 60px) rgba(0, 0, 0, var(--dtss-sho, 0.35)); }

.dtss__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	visibility: hidden;
}
/* Baksidan döljs bara under kub och vänd – annars blir texten suddig och flimrar. */
.dtss__slide[data-anim="cube"],
.dtss__slide[data-anim="flip"] {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.dtss__slide.is-active { visibility: visible; z-index: 2; }
.dtss__slide.is-leaving { visibility: visible; z-index: 1; }

.dtss__frame { position: absolute; inset: 0; }
.dtss__media { position: absolute; inset: 0; overflow: hidden; }

/* ---------- hela bredden med största bildbredd ---------- */
.dtss--maxw { container-type: inline-size; }
.dtss--maxw .dtss__viewport {
	aspect-ratio: auto;
	height: calc(min(100vw, var(--dtss-max)) * var(--dtss-inv));
}
@supports (width: 1cqw) {
	.dtss--maxw .dtss__viewport { height: calc(min(100cqw, var(--dtss-max)) * var(--dtss-inv)); }
}
.dtss--maxw.dtss--screen .dtss__viewport { height: 100vh; height: 100svh; }
.dtss--maxw .dtss__frame { left: 50%; right: auto; width: min(100%, var(--dtss-max)); transform: translateX(-50%); }
.dtss--side-dark .dtss__viewport { background: #0b0f14; }
.dtss--side-accent .dtss__viewport { background: color-mix(in srgb, var(--dtss-cur-accent, var(--dtss-accent)) 55%, #0b0f14); transition: background-color 0.6s ease; }
.dtss__side { position: absolute; inset: 0; overflow: hidden; background: #0b0f14; }
.dtss__side-img {
	position: absolute;
	inset: -8%;
	width: 116%;
	height: 116%;
	max-width: none;
	object-fit: cover;
	filter: blur(var(--dtss-side-blur, 42px)) saturate(1.15) brightness(var(--dtss-side-b, 0.55));
	transform: translateZ(0);
}
/* Kant mot den suddiga bakgrunden, så att bilden ser ut att ligga ovanpå. */
.dtss--side-blur .dtss__frame { box-shadow: 0 0 var(--dtss-sh, 60px) rgba(0, 0, 0, var(--dtss-sho, 0.35)); }
/* Pilarna ligger i ytterkanten, punkterna under själva bilden. */
.dtss--maxw .dtss__bar { left: max(0px, calc(50% - var(--dtss-max) / 2)); right: max(0px, calc(50% - var(--dtss-max) / 2)); }
/* Största bildbredd gäller alltid fullt ut; med Högsta höjd beskärs bilden runt fokuspunkten (som utan största bildbredd). */
@media (max-width: 640px) {
	.dtss--maxw:not(.dtss--screen) .dtss__viewport { height: auto; aspect-ratio: var(--dtss-ratio-m, var(--dtss-ratio, 16 / 9)); }
}
.dtss__img {
	display: block; width: 100%; height: 100%; max-width: none;
	object-fit: cover;
	-webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}

/* Bildens storlek (per bild): visa hela bilden, originalstorlek (aldrig större än sina egna pixlar) eller en egen storlek i procent av ytan.
   Fokuspunkten bestämmer var bilden ligger. Runt bilden syns bakgrundsbilden för hela bildspelet, annars bildspelets bakgrund. */
.dtss__img--contain { object-fit: contain; }
.dtss__img--original { object-fit: scale-down; }
.dtss__img--size {
	position: absolute;
	width: calc(var(--fit, 0.6) * 100%);
	height: calc(var(--fit, 0.6) * 100%);
	left: calc((100% - var(--fit, 0.6) * 100%) * var(--fx, 0.5));
	top: calc((100% - var(--fit, 0.6) * 100%) * var(--fy, 0.5));
	object-fit: contain;
}

/* ---------- toning för läsbar text ---------- */
.dtss__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(5, 12, 20, calc(var(--o, 0.3) * 0.55)); }
.dtss__slide--v-bottom .dtss__shade { background: linear-gradient(to top, rgba(5, 12, 20, var(--o, 0.3)) 0%, rgba(5, 12, 20, calc(var(--o, 0.3) * 0.35)) 55%, rgba(5, 12, 20, calc(var(--o, 0.3) * 0.15)) 100%); }
.dtss__slide--v-top .dtss__shade { background: linear-gradient(to bottom, rgba(5, 12, 20, var(--o, 0.3)) 0%, rgba(5, 12, 20, calc(var(--o, 0.3) * 0.35)) 55%, rgba(5, 12, 20, calc(var(--o, 0.3) * 0.15)) 100%); }

/* ---------- övergångar mellan bilder ----------
   JS sätter is-entering / is-leaving, data-anim="<effekt>" och --dir (1 framåt, -1 bakåt). */
.dtss__slide.is-entering,
.dtss__slide.is-leaving {
	animation-duration: var(--dtss-speed);
	animation-timing-function: var(--dtss-ease);
	animation-fill-mode: both;
}

/* Bildens skugga tonas in med den nya bilden och ut med den gamla (annars ligger två skuggor på varandra under övergången och
   den gamla försvinner tvärt när den är klar). */
.dtss__slide.is-entering .dtss__frame { animation: dtss-shadow-in var(--dtss-speed) ease both; }
.dtss__slide.is-leaving .dtss__frame { animation: dtss-shadow-out var(--dtss-speed) ease both; }
@keyframes dtss-shadow-in { from { box-shadow: none; } }
@keyframes dtss-shadow-out { to { box-shadow: none; } }
.dtss__slide.is-entering[data-anim="fade"] { animation-name: dtss-fade-in; }

.dtss__slide.is-entering[data-anim="slide"] { animation-name: dtss-slide-in; }
.dtss__slide.is-leaving[data-anim="slide"] { animation-name: dtss-slide-out; }

.dtss__slide.is-entering[data-anim="slide-up"] { animation-name: dtss-up-in; }
.dtss__slide.is-leaving[data-anim="slide-up"] { animation-name: dtss-up-out; }

.dtss__slide.is-entering[data-anim="zoom"] { animation-name: dtss-zoom-in; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
.dtss__slide.is-entering[data-anim="zoom-out"] { animation-name: dtss-zoomout-in; }
.dtss__slide.is-leaving[data-anim="zoom-out"] { animation-name: dtss-zoomout-out; }

.dtss__slide.is-entering[data-anim="blur"] { animation-name: dtss-blur-in; }

.dtss__slide.is-entering[data-anim="wipe"] { animation-name: dtss-wipe-in; }
.dtss__slide.is-entering.is-back[data-anim="wipe"] { animation-name: dtss-wipe-in-back; }

.dtss__slide.is-entering[data-anim="circle"] { animation-name: dtss-circle-in; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); }

.dtss__slide.is-entering[data-anim="parallax"] { animation-name: dtss-parallax-in; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
.dtss__slide.is-leaving[data-anim="parallax"] { animation-name: dtss-parallax-out; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
/* Parallax: bilden som försvinner glider långsammare bakåt, blir mindre och mörkare och tonas ut, och texten tonas ut först – den nya bilden lägger sig
   ovanpå med en mjuk skugga i kanten. */
/* Med största bildbredd är bildytan bredare än bilden: kantskuggan ska då inte ligga på bildytans kant (en bit före bilden) – bilden
   har redan sin egen skugga som följer med. */
.dtss--maxw .dtss__slide.is-entering[data-anim="parallax"] { box-shadow: none !important; }
.dtss__slide.is-leaving[data-anim="parallax"] .dtss__caption { opacity: 0; transition: opacity calc(var(--dtss-speed) * 0.45) ease; }

.dtss__slide.is-entering[data-anim="cube"] { animation-name: dtss-cube-in; transform-origin: 0% 50%; }
.dtss__slide.is-leaving[data-anim="cube"] { animation-name: dtss-cube-out; transform-origin: 100% 50%; }
.dtss__slide.is-entering.is-back[data-anim="cube"] { animation-name: dtss-cube-in-back; transform-origin: 100% 50%; }
.dtss__slide.is-leaving.is-back[data-anim="cube"] { animation-name: dtss-cube-out-back; transform-origin: 0% 50%; }

.dtss__slide.is-entering[data-anim="flip"] { animation-name: dtss-flip-in; animation-timing-function: linear; }
.dtss__slide.is-leaving[data-anim="flip"] { animation-name: dtss-flip-out; animation-timing-function: linear; }

@keyframes dtss-fade-in { from { opacity: 0; } }
@keyframes dtss-slide-in { from { transform: translateX(calc(100% * var(--dir, 1))); } }
@keyframes dtss-slide-out { to { transform: translateX(calc(-100% * var(--dir, 1))); } }
@keyframes dtss-up-in { from { transform: translateY(calc(100% * var(--dir, 1))); } }
@keyframes dtss-up-out { to { transform: translateY(calc(-100% * var(--dir, 1))); } }
@keyframes dtss-zoom-in { from { opacity: 0; transform: scale3d(1.08, 1.08, 1); } }
@keyframes dtss-zoomout-in { from { opacity: 0; transform: scale(0.82); } }
@keyframes dtss-zoomout-out { to { opacity: 0; transform: scale(1.12); } }
@keyframes dtss-blur-in { from { opacity: 0; filter: blur(28px); transform: scale(1.06); } }
@keyframes dtss-wipe-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes dtss-wipe-in-back { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dtss-circle-in { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
@keyframes dtss-parallax-in {
	from { transform: translateX(calc(100% * var(--dir, 1))); box-shadow: calc(-36px * var(--dir, 1)) 0 70px rgba(0, 0, 0, 0.45); }
	to { transform: translateX(0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
}
@keyframes dtss-parallax-out {
	/* Ingen from: en bild som avbryts mitt i sin väg in går ut därifrån den är (se dt-slideshow.js). */
	to { transform: translateX(calc(-30% * var(--dir, 1))) scale(0.96); filter: brightness(0.45); opacity: 0; }
}
@keyframes dtss-cube-in { from { transform: translateX(100%) rotateY(90deg); } to { transform: translateX(0) rotateY(0); } }
@keyframes dtss-cube-out { to { transform: translateX(-100%) rotateY(-90deg); } }
@keyframes dtss-cube-in-back { from { transform: translateX(-100%) rotateY(-90deg); } to { transform: translateX(0) rotateY(0); } }
@keyframes dtss-cube-out-back { to { transform: translateX(100%) rotateY(90deg); } }
@keyframes dtss-flip-in { 0%, 50% { opacity: 0; transform: rotateY(calc(90deg * var(--dir, 1))); } 51% { opacity: 1; } 100% { opacity: 1; transform: rotateY(0); } }
@keyframes dtss-flip-out { 0% { transform: rotateY(0); } 50% { opacity: 1; transform: rotateY(calc(-90deg * var(--dir, 1))); } 51%, 100% { opacity: 0; transform: rotateY(calc(-90deg * var(--dir, 1))); } }

/* ---------- långsam zoom och panorering (Ken Burns) ----------
   Rörelsen tar fart direkt när bilden kommer in och bromsar sedan in, allt saktare, tills den nästan står still.
   Hela bildytan (inte själva bilden) flyttas, så att webbläsaren kan rita den som ett lager – jämnare rörelse. */
.dtss__frame { overflow: hidden; }
.dtss__media { transform-origin: 50% 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.dtss--has-kb .dtss__media { will-change: transform; }
.dtss__slide.is-active[data-kb] .dtss__media,
.dtss__slide.is-leaving[data-kb] .dtss__media {
	animation-duration: calc(var(--dtss-interval) + var(--dtss-speed) * 2);
	animation-timing-function: cubic-bezier(0.1, 0.6, 0.2, 1);
	animation-fill-mode: both;
}
.dtss__slide.is-active[data-kb="off"] .dtss__media,
.dtss__slide.is-leaving[data-kb="off"] .dtss__media { animation: none; }
.dtss__slide.is-active[data-kb="in"] .dtss__media,
.dtss__slide.is-leaving[data-kb="in"] .dtss__media { animation-name: dtss-kb-in; }
.dtss__slide.is-active[data-kb="out"] .dtss__media,
.dtss__slide.is-leaving[data-kb="out"] .dtss__media { animation-name: dtss-kb-out; }
.dtss__slide.is-active[data-kb="left"] .dtss__media,
.dtss__slide.is-leaving[data-kb="left"] .dtss__media { animation-name: dtss-kb-left; }
.dtss__slide.is-active[data-kb="right"] .dtss__media,
.dtss__slide.is-leaving[data-kb="right"] .dtss__media { animation-name: dtss-kb-right; }
@keyframes dtss-kb-in { from { transform: scale3d(1, 1, 1); } to { transform: scale3d(1.1, 1.1, 1); } }
@keyframes dtss-kb-out { from { transform: scale3d(1.1, 1.1, 1); } to { transform: scale3d(1, 1, 1); } }
@keyframes dtss-kb-left { from { transform: scale3d(1.1, 1.1, 1) translate3d(2.5%, 0, 0); } to { transform: scale3d(1.1, 1.1, 1) translate3d(-2.5%, 0, 0); } }
@keyframes dtss-kb-right { from { transform: scale3d(1.1, 1.1, 1) translate3d(-2.5%, 0, 0); } to { transform: scale3d(1.1, 1.1, 1) translate3d(2.5%, 0, 0); } }

/* En bild utan huvudbild (bara liten bild, rubrik, text eller knapp): ingen bildyta – ingen skugga eller ruta runt den, så att
   innehållet ligger fritt på bildspelets bakgrund (eller sidan). */
.dtss .dtss__slide--noimg .dtss__frame { box-shadow: none !important; animation: none !important; background: transparent; }
/* Mobilen med texten under bilden: ingen tom bildyta ovanför texten. */
@media (max-width: 640px) { .dtss--m-below .dtss__slide--noimg .dtss__media { display: none; } }
.dtss-force-m .dtss--m-below .dtss__slide--noimg .dtss__media { display: none; }

/* ---------- texter, lager ----------
   Storlekar som följer skärmens bredd räknas i var(--dtss-vw, 1vw): på webbplatsen är det 1vw, i byggarens
   förminskade förhandsgranskning sätts det till 1 % av den bredd som visas (dator eller mobil). */
.dtss__caption {
	position: absolute;
	inset: 0;
	z-index: 2;
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: clamp(1.25rem, calc(5 * var(--dtss-vw, 1vw)), 3.5rem) clamp(1.25rem, calc(6 * var(--dtss-vw, 1vw)), 4.5rem) clamp(3.5rem, calc(7 * var(--dtss-vw, 1vw)), 5rem);
	pointer-events: none;
}
.dtss__caption > * { pointer-events: auto; }
/* Tomma platser för rubrik och text finns bara i byggarens förhandsvisning och syns först när man skriver i dem. */
.dtss .dtss__layer--empty,
.dtss .dtss__caption--ghost { display: none; }
.dtss--single .dtss__caption { padding-bottom: clamp(1.25rem, calc(5 * var(--dtss-vw, 1vw)), 3.5rem); }
.dtss__caption--h-left { align-items: flex-start; text-align: left; }
.dtss__caption--h-center { align-items: center; text-align: center; }
.dtss__caption--h-right { align-items: flex-end; text-align: right; }
.dtss__caption--v-top { justify-content: flex-start; }
.dtss__caption--v-middle { justify-content: center; }
.dtss__caption--v-bottom { justify-content: flex-end; }

.dtss__title {
	/* Rubriken bryts inte – den görs mindre i stället (dt-slideshow.js, fitTitles). Egna radbrytningar (Skift+Enter) gäller. */
	max-width: 100%;
	white-space: nowrap;
	font-family: var(--font-display, inherit);
	font-size: clamp(1.5rem, calc(4.2 * var(--dtss-vw, 1vw)), 3.4rem);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.025em;
	text-wrap-style: balance; /* inte text-wrap: det skulle slå på radbrytning igen */
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}
.dtss__text {
	max-width: 46ch;
	font-size: clamp(0.98rem, calc(1.6 * var(--dtss-vw, 1vw)), 1.2rem);
	line-height: 1.5;
	opacity: 0.92;
}

/* storlekar som väljs i byggaren */
.dtss__title--s { font-size: clamp(1.15rem, calc(2.4 * var(--dtss-vw, 1vw)), 1.9rem); }
.dtss__title--m { font-size: clamp(1.3rem, calc(3.2 * var(--dtss-vw, 1vw)), 2.6rem); }
.dtss__title--xl { font-size: clamp(2rem, calc(6 * var(--dtss-vw, 1vw)), 4.8rem); }
.dtss__text--s { font-size: clamp(0.85rem, calc(1.2 * var(--dtss-vw, 1vw)), 0.98rem); }
.dtss__text--l { font-size: clamp(1.1rem, calc(2 * var(--dtss-vw, 1vw)), 1.45rem); }
.dtss__text--xl { font-size: clamp(1.25rem, calc(2.6 * var(--dtss-vw, 1vw)), 1.8rem); max-width: 40ch; }

/* formatering i texterna */
.dtss__title strong, .dtss__title b { font-weight: 900; }
.dtss__text strong, .dtss__text b { font-weight: 700; }
.dtss__title a, .dtss__text a { color: inherit; text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
.dtss__title a:hover, .dtss__text a:hover { text-decoration-thickness: 0.14em; }

/* Texterna bredvid en liten bild ligger i en grupp. På datorn påverkar den inte utseendet (display: contents);
   på mobilen står den lilla bilden till vänster om gruppen. */
.dtss__texts { display: contents; }

/* bild ovanför texten, t.ex. en logotyp */
/* Bredden räknas mot bildytan (cqw, bildtextens bredd), inte mot plattan – plattan är bara så bred som texten, och då
   styrde rubrikens längd storleken i stället för reglaget. */
.dtss__caption { container-type: inline-size; }
.dtss__logo { display: block; width: min(var(--w, 160px), 60cqw); }
.dtss__logo img { display: block; width: 100%; height: auto; }

/* platta bakom bilden ovanför texten – bredden gäller själva bilden */
.dtss__logo--plate { box-sizing: content-box; background: var(--lpc, rgba(255, 255, 255, 0.9)); border-radius: calc(var(--dtss-radius) * 0.6); }
.dtss__logo--pad-s { padding: 0.5rem 0.65rem; }
.dtss__logo--pad-m { padding: 0.85rem 1.1rem; }
.dtss__logo--pad-l { padding: 1.3rem 1.7rem; }
.dtss__logo--glass {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04) 60%), var(--lpc, rgba(255, 255, 255, 0.2));
	border: 1px solid rgba(255, 255, 255, 0.35);
	-webkit-backdrop-filter: blur(18px) saturate(1.7) brightness(1.18);
	backdrop-filter: blur(18px) saturate(1.7) brightness(1.18);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 30px -12px rgba(0, 0, 0, 0.45);
}
/* Rund: bredden är cirkelns diameter, luften styr hur stor bilden blir i den. */
.dtss__logo--round { box-sizing: border-box; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; }
.dtss__logo--round.dtss__logo--pad-s { padding: 10%; }
.dtss__logo--round.dtss__logo--pad-m { padding: 16%; }
.dtss__logo--round.dtss__logo--pad-l { padding: 22%; }
.dtss__logo--round img { width: 100%; height: 100%; object-fit: contain; }
.dtss__slide.is-leaving .dtss__logo--glass,
.dtss__slide.is-entering .dtss__logo--glass,
.dtss__slide.is-leaving .dtss__logo--glass-dark,
.dtss__slide.is-entering .dtss__logo--glass-dark { -webkit-backdrop-filter: none; backdrop-filter: none; }
.dtss__button {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	margin-top: 0.5rem;
	padding: 0.6rem 1.3rem;
	border-radius: 999px;
	background: var(--dtss-accent);
	color: var(--dtss-accent-ink, #14110a);
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.15s ease, filter 0.15s ease;
}
.dtss__button:hover { color: var(--dtss-accent-ink, #14110a); filter: brightness(1.08); transform: translateY(-1px); }

/*
 * Texten på bilden som lämnar tonas bort snabbt, innan bilden flyttas, vrids eller blir suddig.
 * Annars ritas den som en bild under övergången och ser trasig ut en stund.
 */
.dtss__slide.is-leaving .dtss__caption { opacity: 0; transition: opacity 0.18s ease; }
.dtss__slide.is-leaving .dtss__plate--glass,
.dtss__slide.is-entering .dtss__plate--glass,
.dtss__slide.is-leaving .dtss__plate--glass-dark,
.dtss__slide.is-entering .dtss__plate--glass-dark { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Byter man bild innan texten, den lilla bilden och plattan har kommit in fryses de där de är (i stället för att hoppa fram och blinka)
   och tonas sedan ut med bilden. */
.dtss__slide.is-leaving .dtss__layer, .dtss__slide.is-leaving .dtss__plate { animation-play-state: paused !important; }
/* Lagren tonar in efter varandra när bilden visas. --i = lagrets ordning. */
.dtss__slide:is(.is-active, .is-leaving) .dtss__layer {
	animation-duration: var(--dtss-tdur, 0.8s);
	animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
	animation-fill-mode: both;
	animation-delay: calc(var(--dtss-speed) * 0.8 + var(--dtss-delay, 0s) + var(--i, 0) * var(--dtss-stagger, 0.14s));
}
.dtss__slide:is(.is-active, .is-leaving) .dtss-anim--fade-up .dtss__layer { animation-name: dtss-l-up; }
.dtss__slide:is(.is-active, .is-leaving) .dtss-anim--fade-down .dtss__layer { animation-name: dtss-l-down; }
.dtss__slide:is(.is-active, .is-leaving) .dtss-anim--fade-right .dtss__layer { animation-name: dtss-l-right; }
.dtss__slide:is(.is-active, .is-leaving) .dtss-anim--fade-left .dtss__layer { animation-name: dtss-l-left; }
.dtss__slide:is(.is-active, .is-leaving) .dtss-anim--zoom .dtss__layer { animation-name: dtss-l-zoom; }
.dtss__slide:is(.is-active, .is-leaving) .dtss-anim--blur .dtss__layer { animation-name: dtss-l-blur; }
@keyframes dtss-l-up { from { opacity: 0; transform: translateY(26px); } }
@keyframes dtss-l-down { from { opacity: 0; transform: translateY(-26px); } }
@keyframes dtss-l-right { from { opacity: 0; transform: translateX(-40px); } }
@keyframes dtss-l-left { from { opacity: 0; transform: translateX(40px); } }
@keyframes dtss-l-zoom { from { opacity: 0; transform: scale(0.85); } }
@keyframes dtss-l-blur { from { opacity: 0; filter: blur(12px); } }

.dtss__cover-link { position: absolute; inset: 0; z-index: 3; }

/* ---------- platta bakom texten ---------- */
.dtss__plate {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	gap: 0.55rem;
	max-width: min(48rem, 100%);
	padding: clamp(1rem, calc(2.6 * var(--dtss-vw, 1vw)), 1.75rem) clamp(1.1rem, calc(3 * var(--dtss-vw, 1vw)), 2.1rem);
	border-radius: calc(var(--dtss-radius) * 0.75);
	background: var(--pc, rgba(12, 26, 38, 0.7));
}
.dtss__plate .dtss__title { text-shadow: none; }
.dtss__plate--glass {
	/* Glas: ljust skimmer överst + vald ton, och bilden bakom blir suddig, ljusare och mer färgstark. */
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04) 60%), var(--pc, rgba(255, 255, 255, 0.2));
	border: 1px solid rgba(255, 255, 255, 0.35);
	-webkit-backdrop-filter: blur(18px) saturate(1.7) brightness(1.18);
	backdrop-filter: blur(18px) saturate(1.7) brightness(1.18);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 18px 40px -18px rgba(0, 0, 0, 0.45);
}

/* Mörkt frostat glas: bilden bakom blir suddig och mörkare – för vit text på ljusa bilder. */
.dtss__plate--glass-dark,
.dtss__logo--glass-dark {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 55%), var(--pc, rgba(10, 14, 20, 0.5));
	border: 1px solid rgba(255, 255, 255, 0.16);
	-webkit-backdrop-filter: blur(18px) saturate(1.4) brightness(0.6);
	backdrop-filter: blur(18px) saturate(1.4) brightness(0.6);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 18px 40px -18px rgba(0, 0, 0, 0.55);
}
.dtss__logo--glass-dark { background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 55%), var(--lpc, rgba(10, 14, 20, 0.4)); }
/*
 * Glas i glas: ett frostat glas inuti en platta med frostat glas kan bara göra den yttre plattan suddig, inte bilden,
 * och blir då en grå fläck. Inuti en platta blir bilden-ovanför-textens glas därför en ren, halvgenomskinlig ruta.
 */
.dtss__plate .dtss__logo--glass,
.dtss__plate .dtss__logo--glass-dark {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.35);
}
.dtss__plate .dtss__logo--glass {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.78));
	border: 1px solid rgba(255, 255, 255, 0.9);
}
.dtss__plate .dtss__logo--glass-dark {
	background: rgba(8, 12, 18, 0.32);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Kant i kant: plattan går över hela bildens bredd. */
.dtss__caption--bar { padding-left: 0; padding-right: 0; }
.dtss__caption--bar.dtss__caption--v-top { padding-top: 0; }
.dtss__caption--bar.dtss__caption--v-bottom { padding-bottom: 0; }
.dtss__caption--bar .dtss__plate { width: 100%; max-width: none; border-radius: 0; padding-left: clamp(1.25rem, calc(6 * var(--dtss-vw, 1vw)), 4.5rem); padding-right: clamp(1.25rem, calc(6 * var(--dtss-vw, 1vw)), 4.5rem); }
.dtss__caption--bar.dtss__caption--v-bottom .dtss__plate { padding-bottom: clamp(3.25rem, calc(6 * var(--dtss-vw, 1vw)), 4.5rem); }
.dtss--single .dtss__caption--bar.dtss__caption--v-bottom .dtss__plate { padding-bottom: clamp(1rem, calc(2.6 * var(--dtss-vw, 1vw)), 1.75rem); }
.dtss__slide:is(.is-active, .is-leaving) .dtss__plate {
	animation: dtss-plate-in var(--dtss-tdur, 0.8s) cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: calc(var(--dtss-speed) * 0.7 + var(--dtss-delay, 0s));
}
/* Med platta kommer texten in strax efter att plattan börjat synas. */
.dtss__slide:is(.is-active, .is-leaving) .has-plate .dtss__layer { animation-delay: calc(var(--dtss-speed) * 0.7 + var(--dtss-delay, 0s) + var(--dtss-tdur, 0.8s) * 0.45 + var(--i, 0) * var(--dtss-stagger, 0.14s)); }
.dtss__slide:is(.is-active, .is-leaving) .dtss__plate--in-fade { animation-name: dtss-p-fade; }
.dtss__slide:is(.is-active, .is-leaving) .dtss__plate--in-drop { animation-name: dtss-p-drop; }
.dtss__slide:is(.is-active, .is-leaving) .dtss__plate--in-left { animation-name: dtss-p-left; }
.dtss__slide:is(.is-active, .is-leaving) .dtss__plate--in-right { animation-name: dtss-p-right; }
.dtss__slide:is(.is-active, .is-leaving) .dtss__plate--in-zoom { animation-name: dtss-p-zoom; }
.dtss__slide:is(.is-active, .is-leaving) .dtss__plate--in-blur { animation-name: dtss-p-blur; }
.dtss__slide:is(.is-active, .is-leaving) .dtss__plate--in-wipe { animation-name: dtss-p-wipe; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
.dtss__slide:is(.is-active, .is-leaving) .dtss__plate--in-unfold { animation-name: dtss-p-unfold; transform-origin: 50% 0; animation-timing-function: cubic-bezier(0.34, 1.3, 0.64, 1); }
.dtss__slide:is(.is-active, .is-leaving) .dtss__plate--in-none { animation: none; }
@keyframes dtss-plate-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes dtss-p-fade { from { opacity: 0; } }
@keyframes dtss-p-drop { from { opacity: 0; transform: translateY(-24px); } }
@keyframes dtss-p-left { from { opacity: 0; transform: translateX(-60px); } }
@keyframes dtss-p-right { from { opacity: 0; transform: translateX(60px); } }
@keyframes dtss-p-zoom { from { opacity: 0; transform: scale(0.82); } }
@keyframes dtss-p-blur { from { opacity: 0; filter: blur(14px); } }
@keyframes dtss-p-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dtss-p-unfold { from { opacity: 0; transform: perspective(800px) rotateX(-75deg); } }

/* ---------- pilar ---------- */
.dtss__arrow {
	position: absolute;
	top: 50%;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 2.9rem;
	height: 2.9rem;
	margin-top: -1.45rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(6, 20, 32, 0.4);
	color: #fff;
	cursor: pointer;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.dtss__arrow:hover { background: rgba(6, 20, 32, 0.7); }
.dtss__arrow, .dtss__play, .dtss__dot, .dtss__thumb { transition-property: opacity, background-color, border-color, transform; }
.dtss__arrow:active { transform: scale(0.94); }
.dtss__arrow--prev { left: clamp(0.6rem, calc(2 * var(--dtss-vw, 1vw)), 1.25rem); }
.dtss__arrow--next { right: clamp(0.6rem, calc(2 * var(--dtss-vw, 1vw)), 1.25rem); }
/* Med största bildbredd ligger pilarna inom bildens område (inte vid fönstrets kant). */
.dtss--maxw .dtss__arrow--prev { left: calc(max(0px, 50% - var(--dtss-max) / 2) + clamp(0.6rem, calc(2 * var(--dtss-vw, 1vw)), 1.25rem)); }
.dtss--maxw .dtss__arrow--next { right: calc(max(0px, 50% - var(--dtss-max) / 2) + clamp(0.6rem, calc(2 * var(--dtss-vw, 1vw)), 1.25rem)); }
.dtss--arrows-square .dtss__arrow { border-radius: 10px; }
.dtss--arrows-minimal .dtss__arrow { width: 3.2rem; height: 3.2rem; margin-top: -1.6rem; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.6)); }
.dtss--arrows-minimal .dtss__arrow svg { width: 34px; height: 34px; }
@media (hover: hover) {
	.dtss__arrow { opacity: 0; }
	.dtss.is-hover .dtss__arrow,
	.dtss:has(:focus-visible) .dtss__arrow { opacity: 1; } /* bara tangentbordsfokus – ett musklick på en pil håller dem inte kvar */
}

/* ---------- tidsstreck överst (styr också bildbytet) ---------- */
.dtss__timer { position: absolute; top: 0; right: 0; left: 0; z-index: 4; height: 3px; opacity: 0; pointer-events: none; }
.dtss--progress .dtss__timer { opacity: 1; background: rgba(255, 255, 255, 0.18); }
.dtss__timer span { display: block; height: 100%; background: var(--dtss-cur-accent, var(--dtss-accent)); transform: scaleX(0); transform-origin: left center; }
.dtss.has-autoplay .dtss__timer span { animation: dtss-progress var(--dtss-interval) linear forwards; }
@keyframes dtss-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- punkter, streck, siffror ---------- */
.dtss__bar {
	position: absolute;
	right: 0; bottom: 0; left: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0 var(--dtss-navgap, clamp(1.25rem, calc(6 * var(--dtss-vw, 1vw)), 4.5rem)) var(--dtss-navgap, clamp(0.9rem, calc(2 * var(--dtss-vw, 1vw)), 1.4rem));
	pointer-events: none;
}
.dtss__bar > * { pointer-events: auto; }
.dtss__dots { display: flex; flex: 1; gap: 6px; max-width: 28rem; }
.dtss__dot { position: relative; flex: 1 1 0; max-width: 4.5rem; height: 1.5rem; padding: 0; border: 0; background: none; cursor: pointer; color: #fff; }
.dtss__dot::before,
.dtss__fill { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 3px; margin-top: -1.5px; border-radius: 3px; }
.dtss__dot::before { background: rgba(255, 255, 255, 0.35); transition: background-color 0.2s ease; }
.dtss__dot:hover::before { background: rgba(255, 255, 255, 0.6); }
.dtss__fill { background: #fff; transform: scaleX(0); transform-origin: left center; }
.dtss__dot[aria-current="true"] .dtss__fill { transform: scaleX(1); }
.dtss.has-autoplay .dtss__dot[aria-current="true"] .dtss__fill { animation: dtss-progress var(--dtss-interval) linear forwards; }

.dtss--bullets-dots .dtss__dots { flex: 0 0 auto; gap: 10px; }
.dtss--bullets-dots .dtss__dot { flex: 0 0 auto; width: 12px; height: 12px; }
.dtss--bullets-dots .dtss__dot::before { top: 0; height: 12px; margin: 0; border-radius: 50%; }
.dtss--bullets-dots .dtss__fill { display: none; }
.dtss--bullets-dots .dtss__dot[aria-current="true"]::before { background: #fff; transform: scale(1.15); }

.dtss--bullets-numbers .dtss__dots { flex: 0 0 auto; gap: 4px; }
.dtss--bullets-numbers .dtss__dot { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; font-size: 13px; font-weight: 700; opacity: 0.65; }
.dtss--bullets-numbers .dtss__dot::before { display: none; }
.dtss--bullets-numbers .dtss__dot[aria-current="true"] { opacity: 1; background: rgba(255, 255, 255, 0.18); }

.dtss__play {
	display: grid; flex: none; place-items: center;
	width: 2rem; height: 2rem; padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%;
	background: rgba(6, 20, 32, 0.4); color: #fff; cursor: pointer;
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.dtss__play:hover { background: rgba(6, 20, 32, 0.7); }
/* Paus/spela syns bara när man pekar på bildspelet (eller tabbar dit) – och alltid när det är pausat, då pulserar spela-knappen
   sakta. På pekskärmar syns den alltid. */
.dtss__play { opacity: 0; pointer-events: none; transition: opacity 0.25s ease, background 0.15s ease; }
.dtss.is-hover .dtss__play, .dtss:has(:focus-visible) .dtss__play, .dtss__play[aria-pressed="true"] { opacity: 1; pointer-events: auto; }
.dtss__play[aria-pressed="true"] .dtss__icon-play { animation: dtss-play-pulse 2.6s ease-in-out infinite; } /* bara ikonen blinkar */
.dtss__play[aria-pressed="true"]:hover .dtss__icon-play { animation: none; }
@keyframes dtss-play-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (hover: none) { .dtss__play { opacity: 1; pointer-events: auto; } }
@media (prefers-reduced-motion: reduce) { .dtss__play[aria-pressed="true"] .dtss__icon-play { animation: none; } }
/* Paus/spela på en egen plats i bilden. Med största bildbredd räknas platsen från bildens kant (inte fönstrets). */
.dtss__play--float { position: absolute; z-index: 6; --pin: max(0px, calc(50% - var(--dtss-max, 100vw) / 2)); --gap: clamp(0.75rem, 2vw, 1.25rem); }
.dtss__play--top-left, .dtss__play--top, .dtss__play--top-right { top: var(--gap); }
.dtss__play--bottom-left, .dtss__play--bottom, .dtss__play--bottom-right { bottom: var(--gap); }
.dtss__play--left, .dtss__play--center, .dtss__play--right { top: 50%; transform: translateY(-50%); }
.dtss__play--top-left, .dtss__play--left, .dtss__play--bottom-left { left: calc(var(--pin) + var(--gap)); }
.dtss__play--top-right, .dtss__play--right, .dtss__play--bottom-right { right: calc(var(--pin) + var(--gap)); }
.dtss__play--top, .dtss__play--bottom { left: 50%; transform: translateX(-50%); }
.dtss__play--center { left: 50%; transform: translate(-50%, -50%); width: 3rem; height: 3rem; }
/* Med pilar på sidorna flyttas knappen förbi dem. */
.dtss:not(.dtss--arrows-none) .dtss__play--left { left: calc(var(--pin) + var(--gap) + 3.25rem); }
.dtss:not(.dtss--arrows-none) .dtss__play--right { right: calc(var(--pin) + var(--gap) + 3.25rem); }
.dtss__icon-play { display: none; }
.dtss__play[aria-pressed="true"] .dtss__icon-play { display: block; }
.dtss__play[aria-pressed="true"] .dtss__icon-pause { display: none; }

/* ---------- färg på punkter, streck och siffror ---------- */
.dtss--nav-dark .dtss__dot,
.dtss--nav-auto.is-onlight .dtss__dot { color: #141824; }
.dtss--nav-dark .dtss__dot::before,
.dtss--nav-auto.is-onlight .dtss__dot::before { background: rgba(20, 24, 36, 0.28); }
.dtss--nav-dark .dtss__dot:hover::before,
.dtss--nav-auto.is-onlight .dtss__dot:hover::before { background: rgba(20, 24, 36, 0.5); }
.dtss--nav-dark .dtss__fill,
.dtss--nav-auto.is-onlight .dtss__fill,
.dtss--nav-dark.dtss--bullets-dots .dtss__dot[aria-current="true"]::before,
.dtss--nav-auto.is-onlight.dtss--bullets-dots .dtss__dot[aria-current="true"]::before { background: #141824; }
.dtss--nav-dark.dtss--bullets-numbers .dtss__dot[aria-current="true"],
.dtss--nav-auto.is-onlight.dtss--bullets-numbers .dtss__dot[aria-current="true"] { background: rgba(20, 24, 36, 0.12); }
.dtss--nav-accent .dtss__dot { color: var(--dtss-cur-accent, var(--dtss-accent)); }
.dtss--nav-accent .dtss__dot::before { background: color-mix(in srgb, var(--dtss-cur-accent, var(--dtss-accent)) 40%, transparent); }
.dtss--nav-accent .dtss__fill,
.dtss--nav-accent.dtss--bullets-dots .dtss__dot[aria-current="true"]::before { background: var(--dtss-cur-accent, var(--dtss-accent)); }
.dtss--nav-accent.dtss--bullets-numbers .dtss__dot[aria-current="true"] { background: color-mix(in srgb, var(--dtss-cur-accent, var(--dtss-accent)) 22%, transparent); }
.dtss__dot::before, .dtss__fill { transition: background-color 0.4s ease; }

/* ---------- miniatyrer ---------- */
.dtss__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: thin; }
/* Miniatyrerna ligger i bildväljaren: i bilden (nere till vänster, i mitten eller till höger) eller under bilden. */
.dtss__bar .dtss__thumbs { min-width: 0; max-width: 100%; margin: 0; padding: 4px; border-radius: 12px; scrollbar-width: none; scroll-behavior: smooth; }
.dtss__bar .dtss__thumbs::-webkit-scrollbar { display: none; }
/* Listen med miniatyrer är högst 70 % av bredden; finns det fler visas pilar i kanterna. */
.dtss__thumbwrap { position: relative; display: flex; align-items: center; min-width: 0; max-width: 70%; }
.dtss__thumbwrap .dtss__thumbs { flex: 1 1 auto; }
.dtss__tharrow {
	position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -14px; padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; background: rgba(6, 20, 32, 0.7); color: #fff; cursor: pointer;
	transition: opacity 0.15s ease;
}
.dtss__tharrow--prev { left: -10px; }
.dtss__tharrow--next { right: -10px; }
.dtss__tharrow[hidden] { display: none; }
/* Pilarna syns bara när man pekar på miniatyrlisten (eller tabbar dit); de tonas in och ut. I början/slutet är pilen nedtonad
   men ligger kvar tills muspekaren lämnar listen. På pekskärmar (ingen hovring) syns de alltid. */
.dtss__tharrow { opacity: 0; pointer-events: none; transition: opacity 0.22s ease, background 0.15s ease, transform 0.15s ease; }
.dtss__thumbwrap:hover .dtss__tharrow, .dtss__thumbwrap:has(:focus-visible) .dtss__tharrow { opacity: 1; pointer-events: auto; }
/* En inaktiv pil (början/slutet) syns bara nedtonad så länge muspekaren är kvar på den, så att ett extra klick inte träffar en
   miniatyr; när pekaren lämnar den tonas den bort. Med tangentbordet syns den nedtonad. */
.dtss__thumbwrap:hover .dtss__tharrow.is-end { opacity: 0; pointer-events: none; }
.dtss__thumbwrap:hover .dtss__tharrow.is-end.is-held, .dtss__thumbwrap:has(:focus-visible) .dtss__tharrow.is-end { opacity: 0.3; pointer-events: auto; cursor: default; }
.dtss__tharrow.is-end:hover { transform: none; }
@media (hover: none) {
	.dtss__tharrow { opacity: 1; pointer-events: auto; }
	.dtss__tharrow.is-end { opacity: 0.3; }
}
.dtss__tharrow:hover { background: rgba(6, 20, 32, 0.9); }
.dtss__tharrow svg { width: 16px; height: 16px; }
.dtss--navpos-below .dtss__tharrow { border-color: rgba(20, 24, 36, 0.2); background: #fff; color: #141824; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
/* Utseende på pilarna i miniatyrlisten (Hela bildspelet → Navigering). Rund mörk är standard (ovan). */
.dtss--tharrow-glass .dtss__tharrow { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.22); color: #fff; -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); }
.dtss--tharrow-glass .dtss__tharrow:hover { background: rgba(255, 255, 255, 0.36); }
.dtss--tharrow-square .dtss__tharrow { width: 26px; height: 34px; margin-top: -17px; border-radius: 7px; }
.dtss--tharrow-accent .dtss__tharrow { border-color: transparent; background: var(--dtss-accent); color: var(--dtss-accent-ink, #fff); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
.dtss--tharrow-accent .dtss__tharrow:hover { filter: brightness(1.08); background: var(--dtss-accent); }
.dtss--tharrow-minimal .dtss__tharrow { border: 0; background: none; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); -webkit-backdrop-filter: none; backdrop-filter: none; }
.dtss--tharrow-minimal .dtss__tharrow svg { width: 20px; height: 20px; }
.dtss--tharrow-minimal .dtss__tharrow:hover { background: none; transform: scale(1.12); }
/* Kant: listen tonas ut mot kanten och pilen ligger i uttoningen (som på strömningstjänster). */
.dtss--tharrow-edge .dtss__tharrow { top: 0; bottom: 0; width: 34px; height: auto; margin-top: 0; border: 0; border-radius: 12px; color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.dtss--tharrow-edge .dtss__tharrow--prev { left: 0; background: linear-gradient(to right, rgba(6, 12, 20, 0.85), transparent); border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dtss--tharrow-edge .dtss__tharrow--next { right: 0; background: linear-gradient(to left, rgba(6, 12, 20, 0.85), transparent); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.dtss--tharrow-edge .dtss__tharrow:hover { background-color: transparent; }
.dtss--tharrow-edge .dtss__tharrow--prev:hover { background: linear-gradient(to right, rgba(6, 12, 20, 0.95), transparent); }
.dtss--tharrow-edge .dtss__tharrow--next:hover { background: linear-gradient(to left, rgba(6, 12, 20, 0.95), transparent); }
/* Under bilden (ljus bakgrund): mörka varianter. */
.dtss--navpos-below.dtss--tharrow-glass .dtss__tharrow { border-color: rgba(20, 24, 36, 0.2); background: rgba(255, 255, 255, 0.7); color: #141824; }
.dtss--navpos-below.dtss--tharrow-minimal .dtss__tharrow { color: #141824; filter: none; }
.dtss--navpos-below.dtss--tharrow-edge .dtss__tharrow--prev { background: linear-gradient(to right, var(--dtss-page-bg, #fff), transparent); color: #141824; }
.dtss--navpos-below.dtss--tharrow-edge .dtss__tharrow--next { background: linear-gradient(to left, var(--dtss-page-bg, #fff), transparent); color: #141824; }
.dtss:not(.dtss--navpos-below) .dtss__bar .dtss__thumbs { background: rgba(6, 12, 20, 0.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dtss:not(.dtss--navpos-below) .dtss__bar .dtss__thumb { width: 72px; height: 48px; border-color: rgba(255, 255, 255, 0.35); }
.dtss:not(.dtss--navpos-below) .dtss__bar .dtss__thumb[aria-current="true"] { border-color: #fff; }
/* Under bilden: ingen bakgrund bakom miniatyrerna, men lite luft runt dem (med lika mycket negativ marginal, så att de står kvar på samma
   plats) – annars skär listens kant av ramen på den första och den sista miniatyren, och ramen runt en platta syns bara på två sidor. */
.dtss--navpos-below .dtss__bar .dtss__thumbs { padding: 4px; margin: -4px 0; border-radius: 0; }
/* (I sidled ligger den negativa marginalen på behållaren – på listen själv gjorde den listen 8 px för smal, så att pilarna visades fast alla
   miniatyrer fick plats.) */
.dtss--navpos-below .dtss__thumbwrap { margin: 0 -4px; }
.dtss__thumb { position: relative; flex: 0 0 auto; width: 88px; height: 58px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; opacity: 0.6; transition: opacity 0.2s ease, border-color 0.2s ease; }
.dtss__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Den lilla bilden (t.ex. en logotyp) som miniatyr: hela bilden syns, med samma platta som bilden ovanför texten. */
.dtss__thumb--logo { background: transparent; }
.dtss__thumb--logo img { padding: 5px; object-fit: contain; }
.dtss__thumb--pad-s img { padding: 3px; }
.dtss__thumb--pad-l img { padding: 8px; }
.dtss__thumb--lp-solid, .dtss__thumb--lp-round { background: var(--lpc, #fff); }
/* Glas i miniatyrerna: inget frostat glas (det blir bara en mörk, ojämn ruta – kanten av oskärpan syns till höger och nedtill), utan
   samma ljusa respektive mörka ruta som när bilden ovanför texten ligger på en platta. */
/* (Färgen går via en variabel som inte är en färg i sig – annars gör tillägg för mörkt läge, t.ex. DT-Darkmode, om den ljusa plattan till mörk.) */
.dtss { --dtss-tg: 255, 255, 255; }
.dtss__thumb--lp-glass { background: linear-gradient(135deg, rgba(var(--dtss-tg), 0.95), rgba(var(--dtss-tg), 0.8)); }
.dtss__thumb--lp-glass-dark { background: rgba(8, 12, 18, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
/* Rund platta: miniatyren blir en cirkel. */
.dtss .dtss__thumb--lp-round { width: 48px !important; height: 48px !important; border-radius: 50%; }
.dtss--navpos-below .dtss__thumb--lp-round, .dtss-force-m .dtss__thumb--lp-round { width: 44px !important; height: 44px !important; }
.dtss__thumb:hover { opacity: 0.9; }
.dtss__thumb[aria-current="true"] { border-color: var(--dtss-cur-accent, var(--dtss-accent)); opacity: 1; }

/* Paus: både tidsstreck, fyllning och zoom stannar. */
.dtss.has-autoplay.is-paused .dtss__timer span,
.dtss.has-autoplay.is-paused .dtss__fill,
.dtss.has-autoplay.is-paused .dtss__img,
.dtss.has-autoplay.is-paused .dtss__media { animation-play-state: paused !important; }

/* Utan JavaScript visas bara första bilden. */
.dtss:not(.is-ready) .dtss__slide:not(.is-active) { visibility: hidden; }

/* ---------- fokus ---------- */
.dtss button:focus-visible,
.dtss a:focus-visible { outline: 3px solid var(--dtss-cur-accent, var(--dtss-accent)); outline-offset: 2px; }
.dtss__cover-link:focus-visible { outline-offset: -6px; }

/* ---------- mindre rörelse ---------- */
@media (prefers-reduced-motion: reduce) {
	.dtss__slide.is-entering,
	.dtss__slide.is-leaving { animation-name: dtss-fade-in !important; animation-duration: 0.2s !important; }
	.dtss__slide.is-leaving { animation-name: none !important; }
	.dtss .dtss__img,
	.dtss .dtss__media { animation: none !important; }
	.dtss__slide:is(.is-active, .is-leaving) .dtss__layer,
	.dtss__slide:is(.is-active, .is-leaving) .dtss__plate { animation: none !important; }
}

.dtss--placed { margin-block: clamp(1.5rem, calc(4 * var(--dtss-vw, 1vw)), 3rem); }

.dtss-name { margin: clamp(1.5rem, calc(4 * var(--dtss-vw, 1vw)), 2.5rem) 0 0.75rem; text-wrap: balance; }
.dtss-name--center { text-align: center; }
.dtss-name--right { text-align: right; }
/* Storlek på namnet: Som sidans rubriker (temat bestämmer) eller en egen storlek. */
.dtss-name--size-s { font-size: 1.15rem; }
.dtss-name--size-m { font-size: clamp(1.3rem, calc(2.2 * var(--dtss-vw, 1vw)), 1.6rem); }
.dtss-name--size-l { font-size: clamp(1.6rem, calc(3.2 * var(--dtss-vw, 1vw)), 2.3rem); }
.dtss-name--size-xl { font-size: clamp(2rem, calc(4.6 * var(--dtss-vw, 1vw)), 3.4rem); }
.dtss-name--w-full { padding-inline: clamp(1.25rem, calc(4 * var(--dtss-vw, 1vw)), 2.5rem); }
.dtss-name + .dtss { margin-top: 0; }
/* Med största bildbredd står namnet inom samma bredd som bilden (centrerat i fönstret). */
.dtss-name--maxw {
	box-sizing: border-box;
	width: min(calc(100vw - var(--dtss-sbw, 0px)), var(--dtss-name-max));
	max-width: none;
	margin-left: calc(50% - min(calc(50vw - var(--dtss-sbw, 0px) / 2), var(--dtss-name-max) / 2)) !important;
	margin-right: calc(50% - min(calc(50vw - var(--dtss-sbw, 0px) / 2), var(--dtss-name-max) / 2)) !important;
}

/* Bild utan skuggor (valet Skuggor av på bilden). */
/* Även skuggan i kanten när en bild glider in (parallax) – !important vinner över animationen. */
.dtss__slide--flat,
.dtss__slide--flat .dtss__frame,
.dtss__slide--flat .dtss__plate,
.dtss__slide--flat .dtss__button,
.dtss__slide--flat .dtss__logo { box-shadow: none !important; }
.dtss__slide--flat .dtss__title,
.dtss__slide--flat .dtss__text { text-shadow: none !important; }
.dtss__slide--flat .dtss__plate::before,
.dtss__slide--flat .dtss__plate::after { box-shadow: none !important; }

/* Eget avstånd: ingen extra luft från innehållet runt omkring (fungerar i teman som stöder :has). */
.entry-content:has(> .dtss--space-top:first-child),
.wp-block-post-content:has(> .dtss--space-top:first-child) { padding-top: 0 !important; }
.entry-content:has(> .dtss--space-bottom:last-child),
.wp-block-post-content:has(> .dtss--space-bottom:last-child) { padding-bottom: 0 !important; }

.dtss-empty { padding: 1rem 1.25rem; border: 2px dashed #c3c4c7; border-radius: 6px; color: #50575e; }

/* ==========================================================================
   Mobil (2.6.0): samma regler på telefoner (max 640 px) och i byggarens mobilvy (.dtss-force-m)
   ========================================================================== */
@media (max-width: 640px) {
	/* ---- text under bilden (Texten på mobilen: Under bilden) ---- */
	.dtss--m-below:not(.dtss--screen) .dtss__viewport { aspect-ratio: auto !important; height: auto !important; }
	.dtss--m-below .dtss__track { position: relative; inset: auto; display: grid; grid-template-columns: minmax(0, 1fr); }
	.dtss--m-below .dtss__slide, .dtss--m-below .dtss__caption, .dtss--m-below .dtss__plate { min-width: 0; }
	.dtss--m-below .dtss__slide { position: relative; inset: auto; grid-area: 1 / 1; }
	.dtss--m-below .dtss__frame { position: relative; inset: auto; left: auto; width: 100%; transform: none; display: flex; flex-direction: column; box-shadow: none; height: 100%; }
	.dtss--m-below .dtss__slide { display: flex; flex-direction: column; }
	.dtss--m-below .dtss__caption { flex: 1 1 auto; }
	.dtss--m-below .dtss__media { position: relative; inset: auto; aspect-ratio: var(--dtss-ratio-m, var(--dtss-ratio, 16 / 9)); }
	.dtss--m-below .dtss__shade, .dtss--m-below .dtss__side { display: none; }
	.dtss--m-below .dtss__caption { position: relative; inset: auto; align-items: flex-start; justify-content: flex-start; gap: 0.45rem; padding: 0.9rem 0.9rem 3.3rem; text-align: left; background: var(--dtss-bg); isolation: isolate; overflow: hidden; pointer-events: auto; }
	.dtss--m-below .dtss__caption::before { content: ""; position: absolute; inset: -12%; z-index: -1; background: var(--dtss-bgimg, none) center bottom / cover no-repeat; filter: blur(28px) saturate(1.15) brightness(0.55); transform: translateZ(0); }
	.dtss--m-below.dtss--single .dtss__caption, .dtss--m-below.dtss--bullets-none .dtss__caption { padding-bottom: 1.1rem; }
	.dtss--m-below .dtss__plate { align-items: flex-start; width: 100%; max-width: none; }
	.dtss--m-below .dtss__title { max-width: 100%; font-size: 1.35rem; text-shadow: none; }
	.dtss--m-below .dtss__title--s { font-size: 1.15rem; }
	.dtss--m-below .dtss__title--xl { font-size: 1.6rem; }
	.dtss--m-below .dtss__text { max-width: none; font-size: 0.95rem; }
	.dtss--m-below .dtss__logo { width: min(var(--w, 160px), 42cqw); }
	.dtss--m-below .dtss__button { min-height: 2.5rem; margin-top: 0.25rem; }
	/* ---- text på bilden: mindre platta, logga och knapp ---- */
	.dtss:not(.dtss--m-below) .dtss__caption { padding: 0.9rem 0.9rem 2.9rem; }
	.dtss:not(.dtss--m-below).dtss--single .dtss__caption { padding-bottom: 0.9rem; }
	.dtss:not(.dtss--m-below) .dtss__plate { gap: 0.35rem; max-width: 100%; padding: 0.75rem 0.9rem; }
	.dtss:not(.dtss--m-below) .dtss__title { font-size: 1.2rem; }
	.dtss:not(.dtss--m-below) .dtss__title--xl { font-size: 1.45rem; }
	.dtss:not(.dtss--m-below) .dtss__text { font-size: 0.88rem; line-height: 1.4; }
	.dtss:not(.dtss--m-below) .dtss__logo { width: min(var(--w, 160px), 34cqw); }
	.dtss:not(.dtss--m-below) .dtss__button { min-height: 2.2rem; margin-top: 0.2rem; padding-left: 0.9rem; padding-right: 0.9rem; font-size: 0.85rem; }
	/* ---- alltid på mobilen: svep i stället för pilar, bildväljaren får plats ---- */
	.dtss__arrow { display: none; }
	.dtss__bar { gap: 0.6rem; padding-left: 1rem; padding-right: 1rem; }
	.dtss__dots { gap: 4px; min-width: 0; }
	.dtss__dot { min-width: 6px; }
	.dtss--bullets-dots .dtss__dots { flex: 1 1 auto; flex-wrap: wrap; gap: 8px; }
	.dtss__thumbs .dtss__thumb { width: 64px; height: 44px; }
}
/* ---- text under bilden (Texten på mobilen: Under bilden) ---- */
.dtss-force-m .dtss--m-below:not(.dtss--screen) .dtss__viewport { aspect-ratio: auto !important; height: auto !important; }
.dtss-force-m .dtss--m-below .dtss__track { position: relative; inset: auto; display: grid; grid-template-columns: minmax(0, 1fr); }
.dtss-force-m .dtss--m-below .dtss__slide, .dtss-force-m .dtss--m-below .dtss__caption, .dtss-force-m .dtss--m-below .dtss__plate { min-width: 0; }
.dtss-force-m .dtss--m-below .dtss__slide { position: relative; inset: auto; grid-area: 1 / 1; }
.dtss-force-m .dtss--m-below .dtss__frame { position: relative; inset: auto; left: auto; width: 100%; transform: none; display: flex; flex-direction: column; box-shadow: none; height: 100%; }
.dtss-force-m .dtss--m-below .dtss__slide { display: flex; flex-direction: column; }
.dtss-force-m .dtss--m-below .dtss__caption { flex: 1 1 auto; }
.dtss-force-m .dtss--m-below .dtss__media { position: relative; inset: auto; aspect-ratio: var(--dtss-ratio-m, var(--dtss-ratio, 16 / 9)); }
.dtss-force-m .dtss--m-below .dtss__shade, .dtss-force-m .dtss--m-below .dtss__side { display: none; }
.dtss-force-m .dtss--m-below .dtss__caption { position: relative; inset: auto; align-items: flex-start; justify-content: flex-start; gap: 0.45rem; padding: 0.9rem 0.9rem 3.3rem; text-align: left; background: var(--dtss-bg); isolation: isolate; overflow: hidden; pointer-events: auto; }
.dtss-force-m .dtss--m-below .dtss__caption::before { content: ""; position: absolute; inset: -12%; z-index: -1; background: var(--dtss-bgimg, none) center bottom / cover no-repeat; filter: blur(28px) saturate(1.15) brightness(0.55); transform: translateZ(0); }
.dtss-force-m .dtss--m-below.dtss--single .dtss__caption, .dtss-force-m .dtss--m-below.dtss--bullets-none .dtss__caption { padding-bottom: 1.1rem; }
.dtss-force-m .dtss--m-below .dtss__plate { align-items: flex-start; width: 100%; max-width: none; }
.dtss-force-m .dtss--m-below .dtss__title { max-width: 100%; font-size: 1.35rem; text-shadow: none; }
.dtss-force-m .dtss--m-below .dtss__title--s { font-size: 1.15rem; }
.dtss-force-m .dtss--m-below .dtss__title--xl { font-size: 1.6rem; }
.dtss-force-m .dtss--m-below .dtss__text { max-width: none; font-size: 0.95rem; }
.dtss-force-m .dtss--m-below .dtss__logo { width: min(var(--w, 160px), 42cqw); }
.dtss-force-m .dtss--m-below .dtss__button { min-height: 2.5rem; margin-top: 0.25rem; }
/* ---- text på bilden: mindre platta, logga och knapp ---- */
.dtss-force-m .dtss:not(.dtss--m-below) .dtss__caption { padding: 0.9rem 0.9rem 2.9rem; }
.dtss-force-m .dtss:not(.dtss--m-below).dtss--single .dtss__caption { padding-bottom: 0.9rem; }
.dtss-force-m .dtss:not(.dtss--m-below) .dtss__plate { gap: 0.35rem; max-width: 100%; padding: 0.75rem 0.9rem; }
.dtss-force-m .dtss:not(.dtss--m-below) .dtss__title { font-size: 1.2rem; }
.dtss-force-m .dtss:not(.dtss--m-below) .dtss__title--xl { font-size: 1.45rem; }
.dtss-force-m .dtss:not(.dtss--m-below) .dtss__text { font-size: 0.88rem; line-height: 1.4; }
.dtss-force-m .dtss:not(.dtss--m-below) .dtss__logo { width: min(var(--w, 160px), 34cqw); }
.dtss-force-m .dtss:not(.dtss--m-below) .dtss__button { min-height: 2.2rem; margin-top: 0.2rem; padding-left: 0.9rem; padding-right: 0.9rem; font-size: 0.85rem; }
/* ---- alltid på mobilen: svep i stället för pilar, bildväljaren får plats ---- */
.dtss-force-m .dtss__arrow { display: none; }
.dtss-force-m .dtss__bar { gap: 0.6rem; padding-left: 1rem; padding-right: 1rem; }
.dtss-force-m .dtss__dots { gap: 4px; min-width: 0; }
.dtss-force-m .dtss__dot { min-width: 6px; }
.dtss-force-m .dtss--bullets-dots .dtss__dots { flex: 1 1 auto; flex-wrap: wrap; gap: 8px; }
.dtss-force-m .dtss__thumbs .dtss__thumb { width: 64px; height: 44px; }

/* Mobil (2.6.3): bildväljarens färg på textytan – telefoner och byggarens mobilvy */
@media (max-width: 640px) {
	/* ---- bildväljaren syns alltid på den mörka textytan (inte mörka streck på ljusa bilder) ---- */
	.dtss--m-below.dtss--nav-auto .dtss__dot, .dtss--m-below.dtss--nav-dark .dtss__dot { color: #fff; }
	.dtss--m-below.dtss--nav-auto .dtss__dot::before, .dtss--m-below.dtss--nav-dark .dtss__dot::before { background: rgba(255, 255, 255, 0.35); }
	.dtss--m-below.dtss--nav-auto .dtss__fill, .dtss--m-below.dtss--nav-dark .dtss__fill, .dtss--m-below.dtss--nav-auto.dtss--bullets-dots .dtss__dot[aria-current="true"]::before, .dtss--m-below.dtss--nav-dark.dtss--bullets-dots .dtss__dot[aria-current="true"]::before { background: #fff; }
	.dtss--m-below.dtss--nav-auto.dtss--bullets-numbers .dtss__dot[aria-current="true"], .dtss--m-below.dtss--nav-dark.dtss--bullets-numbers .dtss__dot[aria-current="true"] { background: rgba(255, 255, 255, 0.18); }
}
/* ---- bildväljaren syns alltid på den mörka textytan (inte mörka streck på ljusa bilder) ---- */
.dtss-force-m .dtss--m-below.dtss--nav-auto .dtss__dot, .dtss-force-m .dtss--m-below.dtss--nav-dark .dtss__dot { color: #fff; }
.dtss-force-m .dtss--m-below.dtss--nav-auto .dtss__dot::before, .dtss-force-m .dtss--m-below.dtss--nav-dark .dtss__dot::before { background: rgba(255, 255, 255, 0.35); }
.dtss-force-m .dtss--m-below.dtss--nav-auto .dtss__fill, .dtss-force-m .dtss--m-below.dtss--nav-dark .dtss__fill, .dtss-force-m .dtss--m-below.dtss--nav-auto.dtss--bullets-dots .dtss__dot[aria-current="true"]::before, .dtss-force-m .dtss--m-below.dtss--nav-dark.dtss--bullets-dots .dtss__dot[aria-current="true"]::before { background: #fff; }
.dtss-force-m .dtss--m-below.dtss--nav-auto.dtss--bullets-numbers .dtss__dot[aria-current="true"], .dtss-force-m .dtss--m-below.dtss--nav-dark.dtss--bullets-numbers .dtss__dot[aria-current="true"] { background: rgba(255, 255, 255, 0.18); }

/* Mobil (2.6.4): den lilla bilden till vänster om texten – telefoner och byggarens mobilvy */
@media (max-width: 640px) {
	/* ---- den lilla bilden till vänster om texten, mitt för den – under den om det inte får plats ---- */
	.dtss--m-below .dtss__caption.has-logo:not(.has-plate), .dtss--m-below .dtss__caption.has-logo .dtss__plate, .dtss .dtss__caption.has-logo .dtss__plate { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; column-gap: 0.75rem; row-gap: 0.6rem; }
	.dtss .dtss__caption.has-logo .dtss__logo { flex: 0 0 auto; }
	.dtss--m-below .dtss__caption.has-logo .dtss__logo { width: min(var(--w, 160px), 34cqw); }
	.dtss:not(.dtss--m-below) .dtss__caption.has-logo .dtss__plate { width: 100%; }
	.dtss:not(.dtss--m-below) .dtss__caption.has-logo .dtss__logo { width: min(var(--w, 160px), 30cqw); }
	.dtss--m-below .dtss__caption.has-logo .dtss__texts, .dtss .dtss__caption.has-logo .dtss__plate .dtss__texts { display: flex; flex: 1 1 9rem; flex-direction: column; align-items: flex-start; gap: 0.4rem; min-width: min(9rem, 100%); text-align: left; }
	.dtss .dtss__caption.has-logo .dtss__texts > * { margin: 0; }
}
/* ---- den lilla bilden till vänster om texten, mitt för den – under den om det inte får plats ---- */
.dtss-force-m .dtss--m-below .dtss__caption.has-logo:not(.has-plate), .dtss-force-m .dtss--m-below .dtss__caption.has-logo .dtss__plate, .dtss-force-m .dtss .dtss__caption.has-logo .dtss__plate { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; column-gap: 0.75rem; row-gap: 0.6rem; }
.dtss-force-m .dtss .dtss__caption.has-logo .dtss__logo { flex: 0 0 auto; }
.dtss-force-m .dtss--m-below .dtss__caption.has-logo .dtss__logo { width: min(var(--w, 160px), 34cqw); }
.dtss-force-m .dtss:not(.dtss--m-below) .dtss__caption.has-logo .dtss__plate { width: 100%; }
.dtss-force-m .dtss:not(.dtss--m-below) .dtss__caption.has-logo .dtss__logo { width: min(var(--w, 160px), 30cqw); }
.dtss-force-m .dtss--m-below .dtss__caption.has-logo .dtss__texts, .dtss-force-m .dtss .dtss__caption.has-logo .dtss__plate .dtss__texts { display: flex; flex: 1 1 9rem; flex-direction: column; align-items: flex-start; gap: 0.4rem; min-width: min(9rem, 100%); text-align: left; }
.dtss-force-m .dtss .dtss__caption.has-logo .dtss__texts > * { margin: 0; }

/* Rubriker som inte får plats ens i halva storleken får radbrytas (sätts av fitTitles). */
.dtss .dtss__title.is-wrap { white-space: normal; text-wrap-mode: wrap; text-wrap-style: balance; }

/* ==========================================================================
   Bildväljarens placering (2.14.0): nere till vänster (standard), i mitten, till höger eller under bilden
   ========================================================================== */
.dtss--navpos-center .dtss__bar { justify-content: center; }
.dtss--navpos-right .dtss__bar { justify-content: flex-end; }
.dtss--navpos-center .dtss__dots, .dtss--navpos-right .dtss__dots { flex: 0 1 28rem; }
.dtss--navpos-right .dtss__play { order: 2; }
/* Under bilden: på sidans bakgrund, med mörka streck och punkter. */
.dtss--navpos-below .dtss__bar { position: static; justify-content: center; padding: var(--dtss-navgap, 0.75rem) 1rem 0; color: #141824; }
.dtss--navpos-below.dtss--navpos-left .dtss__bar { justify-content: flex-start; }
.dtss--navpos-below.dtss--navpos-right .dtss__bar { justify-content: flex-end; }
.dtss--navpos-below .dtss__dots { flex: 0 1 28rem; }
.dtss--navpos-below .dtss__caption { padding-bottom: clamp(1.25rem, calc(5 * var(--dtss-vw, 1vw)), 3.5rem); }
.dtss.dtss--navpos-below:not(.dtss--nav-light):not(.dtss--nav-accent) .dtss__dot { color: #141824; }
.dtss.dtss--navpos-below:not(.dtss--nav-light):not(.dtss--nav-accent) .dtss__dot::before { background: rgba(20, 24, 36, 0.22); }
.dtss.dtss--navpos-below:not(.dtss--nav-light):not(.dtss--nav-accent) .dtss__dot:hover::before { background: rgba(20, 24, 36, 0.45); }
.dtss.dtss--navpos-below:not(.dtss--nav-light):not(.dtss--nav-accent) .dtss__fill,
.dtss.dtss--navpos-below.dtss--bullets-dots:not(.dtss--nav-light):not(.dtss--nav-accent) .dtss__dot[aria-current="true"]::before { background: #141824; }
.dtss.dtss--navpos-below:not(.dtss--nav-light):not(.dtss--nav-accent).dtss--bullets-numbers .dtss__dot[aria-current="true"] { background: rgba(20, 24, 36, 0.1); }
.dtss--navpos-below .dtss__play { border-color: rgba(20, 24, 36, 0.25); background: transparent; color: #141824; }
.dtss--navpos-below .dtss__play:hover { background: rgba(20, 24, 36, 0.08); }
@media (max-width: 640px) {
	.dtss--navpos-below.dtss--m-below .dtss__caption { padding-bottom: 0.9rem; }
}
.dtss-force-m .dtss--navpos-below.dtss--m-below .dtss__caption { padding-bottom: 0.9rem; }