/* ── IDF Digital Signage - Frontend ────────────────────────────── */
/* Farben, Fonts, Größen und Effekte kommen als CSS Custom Properties */

/* ── Referenzrahmen ───────────────────────────────────────────── */

/* Der Screen ist auf Full HD (1920 x 1080) gestaltet. Ein Designpixel ist
   der Platz, den ein Pixel dieses Rahmens auf dem tatsächlichen Display
   bekommt - so eingepasst, dass der ganze Rahmen sichtbar bleibt. Jedes
   feste Maß steht als Vielfaches davon; das Verhältnis der Elemente
   zueinander ist damit auf jedem Display dasselbe.

   Browser-Zoom und Windows-Skalierung ändern nur, wie viele CSS-Pixel der
   Viewport hat. 100vw bleibt die ganze Bildschirmbreite, das Designpixel
   wächst mit - beides wird dadurch bedeutungslos. Im Hochformat dreht sich
   der Rahmen mit (1080 x 1920), sonst wären alle Maße halb so groß. */
:root {
    --idf-ds-u: min(100vw / 1920, 100vh / 1080);
}

@media (orientation: portrait) {
    :root {
        --idf-ds-u: min(100vw / 1080, 100vh / 1920);
    }
}

/* ── Reset ────────────────────────────────────────────────────── */
html {
    /* rem hängt am Rahmen: 1rem sind 16 Designpixel. Damit skalieren auch
       Header- und Sidebar-Inhalte, die keine eigene Größe mitbringen. */
    font-size: calc(16 * var(--idf-ds-u));
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: var(--idf-ds-body-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif);
    background: var(--idf-ds-bg, #000);
    color: var(--idf-ds-text, #fff);
}

/* Der Inhalt wartet, bis die Schriften stehen. Eine Webschrift wird erst
   geladen, wenn ein Element sie braucht - bis dahin zeigt der Browser die
   Ersatzschrift aus dem Stack und tauscht sie danach sichtbar aus. Auf einem
   Display sieht das nach kaputtem Layout aus.

   Das Sicherheitsnetz ist die Animation: Ohne JavaScript, bei einem Ausfall
   des Schriftanbieters oder bei einer sehr langsamen Leitung erscheint der
   Screen trotzdem nach drei Sekunden. Nur der Hintergrund ist von
   Anfang an da, damit die Fläche nicht weiß blitzt. */
body {
    opacity: 0;
    animation: idf-ds-bereit 300ms ease-out 3000ms forwards;
}

body.idf-ds-bereit {
    opacity: 1;
    animation: none;
}

@keyframes idf-ds-bereit {
    to {
        opacity: 1;
    }
}

* {
    box-sizing: border-box;
}

/* ── Layouts ──────────────────────────────────────────────────── */

.idf-ds-layout-container {
    display: flex;
    margin: 0;
    padding: 0;
}

.idf-ds-layout-main {
    position: relative;
    flex: 6;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.idf-ds-layout-sidebar {
    flex: 4;
    overflow: auto;
    padding: calc(30 * var(--idf-ds-u));
    background: var(--idf-ds-bg, #000);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--idf-ds-text, #fff);
}

.idf-ds-layout-header {
    width: 100%;
    background: var(--idf-ds-bg, #000);
    padding: calc(20 * var(--idf-ds-u)) calc(30 * var(--idf-ds-u));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--idf-ds-text, #fff);
}

/* Fullscreen */
.idf-ds-layout-fullscreen .idf-ds-layout-container {
    height: 100vh;
    width: 100vw;
}

.idf-ds-layout-fullscreen .idf-ds-layout-main {
    flex: 1;
    width: 100vw;
}

/* Header + 2 Panels */
.idf-ds-layout-header-panels .idf-ds-layout-header {
    height: auto;
    min-height: 10vh;
}

.idf-ds-layout-header-panels .idf-ds-layout-container {
    height: calc(100vh - 10vh);
}

/* 2 Panels */
.idf-ds-layout-two-panels .idf-ds-layout-container {
    height: 100vh;
}

/* ── Kopfzeile: Logo, Uhrzeit, Wetter ─────────────────────────── */

/* Drei Plätze: links, mitte, rechts. Jeder Block ist nur so breit wie sein
   Inhalt; mehrere Elemente auf einem Platz stehen nebeneinander. */
.idf-ds-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: calc(40 * var(--idf-ds-u));
    padding: calc(40 * var(--idf-ds-u)) calc(50 * var(--idf-ds-u));
    pointer-events: none;
}

.idf-ds-topbar-slot {
    display: flex;
    align-items: flex-start;
    gap: calc(48 * var(--idf-ds-u));
    min-width: 0;
}

.idf-ds-topbar-slot > * {
    flex: 0 0 auto;
}

.idf-ds-topbar-slot--left {
    justify-self: start;
    text-align: left;
}

.idf-ds-topbar-slot--center {
    justify-self: center;
    text-align: center;
}

.idf-ds-topbar-slot--right {
    justify-self: end;
    text-align: right;
}

.idf-ds-logo {
    height: var(--idf-ds-logo-height, calc(90 * var(--idf-ds-u)));
    width: auto;
    max-width: 100%;
    opacity: var(--idf-ds-logo-opacity, 1);
    object-fit: contain;
}

/* ── Uhrzeit und Wetter ───────────────────────────────────────── */
/* Beide teilen sich dieselbe Typografie: eine grosse Hauptzeile,    */
/* darunter eine kleine Nebenzeile - gleiche Abstaende, gleiche      */
/* Zeilenhoehen, damit sie nebeneinander im Lot stehen.              */

.idf-ds-clock,
.idf-ds-weather {
    font-family: var(--idf-ds-topbar-font, inherit);
    font-size: var(--idf-ds-topbar-size, calc(40 * var(--idf-ds-u)));
    color: var(--idf-ds-text, #fff);
    font-variant-numeric: tabular-nums;
}

/* Hauptzeile - gleiche Höhe bei Uhrzeit und Wetter */
.idf-ds-clock-time,
.idf-ds-weather-main {
    display: flex;
    align-items: center;
    gap: 0.25em;
    height: 1.15em;
    font-weight: var(--idf-ds-topbar-weight, 700);
    line-height: 1.15;
}

/* Nebenzeile - gleicher Abstand und gleiche Größe bei beiden */
.idf-ds-clock-date,
.idf-ds-weather-meta {
    display: flex;
    gap: 0.9em;
    height: 1.35em;
    margin-top: 0.22em;
    font-size: 0.4em;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0.85;
}

.idf-ds-topbar-slot--right .idf-ds-clock-time,
.idf-ds-topbar-slot--right .idf-ds-clock-date,
.idf-ds-topbar-slot--right .idf-ds-weather-main,
.idf-ds-topbar-slot--right .idf-ds-weather-meta {
    justify-content: flex-end;
}

.idf-ds-topbar-slot--center .idf-ds-clock-time,
.idf-ds-topbar-slot--center .idf-ds-clock-date,
.idf-ds-topbar-slot--center .idf-ds-weather-main,
.idf-ds-topbar-slot--center .idf-ds-weather-meta {
    justify-content: center;
}

.idf-ds-weather-icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
}

/* ── Carousel ─────────────────────────────────────────────────── */

.idf-ds-carousel {
    width: 100%;
    height: 100%;
    position: relative;
}

/* ── Slides ───────────────────────────────────────────────────── */

.idf-ds-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    transition:
        opacity var(--idf-ds-transition, 800ms) ease-in-out,
        transform var(--idf-ds-transition, 800ms) ease-in-out;
    will-change: opacity, transform;
}

.idf-ds-slide.idf-ds-active {
    opacity: 1;
    z-index: 2;
}

.idf-ds-slide.idf-ds-leaving {
    z-index: 1;
}

/* Hintergrundbild */
.idf-ds-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: var(--idf-ds-image-position, center center);
    background-repeat: no-repeat;
    /* Der Ken-Burns-Zoom geht vom selben Punkt aus wie die Ausrichtung */
    transform-origin: var(--idf-ds-image-position, center center);
}

/* Farb-Overlay über dem gesamten Bild */
.idf-ds-slide-tint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: var(--idf-ds-color-overlay, transparent);
    mix-blend-mode: var(--idf-ds-overlay-blend, normal);
    pointer-events: none;
}

/* ── Text-Overlay ─────────────────────────────────────────────── */

/* Farbfläche hinter dem Text - eigenes Element, damit Höhe und Farbe
   unabhängig davon wirken, wie viel Text auf dem Slide steht. */
.idf-ds-slide-scrim {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: var(--idf-ds-text-bg-height, 60%);
    background: var(--idf-ds-text-bg, linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent));
    pointer-events: none;
}

.idf-ds-slide-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: calc(60 * var(--idf-ds-u)) calc(50 * var(--idf-ds-u)) calc(50 * var(--idf-ds-u));
}

/* Neben der QR-Leiste Platz freihalten, damit Überschrift und Teaser nicht
   darunter laufen. Die Breite ergibt sich aus Anzahl und Größe der Codes statt
   aus einem geratenen Wert: 50 Designpixel Randabstand der Leiste, je Code
   seine Größe plus 20 Innenabstand, 18 Abstand zwischen zweien, dazu 40 Luft.

   Nur auf Slides, die überhaupt Codes zeigen - sonst bliebe der Streifen ohne
   Grund leer. Und nur bei den beiden unteren Ecken: oben steht kein Text. */
.idf-ds-slide--has-qr .idf-ds-slide-overlay {
    --idf-ds-qr-strip: calc(
        90 * var(--idf-ds-u)
        + var(--idf-ds-qr-count, 1) * (var(--idf-ds-qr-size, calc(150 * var(--idf-ds-u))) + 20 * var(--idf-ds-u))
        + (var(--idf-ds-qr-count, 1) - 1) * 18 * var(--idf-ds-u)
    );
}

/* Rechts und links hält der Text so viel frei, wie das breitere der beiden
   Elemente braucht - teilen sie sich die Ecke, stehen sie übereinander, und
   der Streifen richtet sich nach dem breiteren. Die Rückfallwerte greifen,
   wenn nur eines der beiden auf dem Slide ist. */
.idf-ds-qr-bottom-right .idf-ds-slide--has-qr .idf-ds-slide-overlay,
.idf-ds-partner-bottom-right .idf-ds-slide--has-partner .idf-ds-slide-overlay {
    padding-right: max(var(--idf-ds-qr-strip, 0px), var(--idf-ds-partner-strip, 0px));
}

.idf-ds-qr-bottom-left .idf-ds-slide--has-qr .idf-ds-slide-overlay,
.idf-ds-partner-bottom-left .idf-ds-slide--has-partner .idf-ds-slide-overlay {
    padding-left: max(var(--idf-ds-qr-strip, 0px), var(--idf-ds-partner-strip, 0px));
}

/* Neben dem Partner-Logo denselben Platz freihalten wie neben der QR-Leiste.
   Die Breite eines Logos ist unbekannt, deshalb ist sie über max-width an
   die eingestellte Höhe gekoppelt: höchstens vierfache Höhe, und genau so
   breit ist der Streifen, plus Randabstand. */
.idf-ds-slide--has-partner .idf-ds-slide-overlay {
    --idf-ds-partner-strip: calc(
        90 * var(--idf-ds-u)
        + 4 * var(--idf-ds-partner-height, calc(90 * var(--idf-ds-u)))
    );
}

/* Slide OHNE Bild: Overlay füllt die ganze Fläche */
.idf-ds-slide--no-image .idf-ds-slide-overlay {
    position: relative;
    width: 100%;
    height: 100%;
    justify-content: center;
    padding: calc(60 * var(--idf-ds-u)) calc(80 * var(--idf-ds-u));
    background: var(--idf-ds-bg, #000);
}

/* ── Badges - Schlagwort und Feed-Herkunft ───────────────────── */

/* Beide sind dasselbe Bauteil und teilen sich deshalb alle Regeln. Was sie
   unterscheidet, steht ausschließlich in ihren Variablen. */
.idf-ds-slide-badge,
.idf-ds-feed-badge {
    display: inline-block;
    align-self: flex-start;
    transform-origin: left bottom;
    margin: 0 0 calc(18 * var(--idf-ds-u));
    padding: calc(6 * var(--idf-ds-u)) calc(22 * var(--idf-ds-u));
    line-height: 1.15;
}

.idf-ds-slide-badge {
    transform: rotate(var(--idf-ds-slide-badge-rotate, -4deg));
    background: var(--idf-ds-slide-badge-bg, #c8134b);
    color: var(--idf-ds-slide-badge-fg, #fff);
    font-family: var(--idf-ds-slide-badge-font, inherit);
    font-weight: var(--idf-ds-slide-badge-weight, 700);
    letter-spacing: var(--idf-ds-slide-badge-letter-spacing, 0.06em);
    font-size: var(--idf-ds-slide-badge-size, calc(34 * var(--idf-ds-u)));
    text-transform: var(--idf-ds-slide-badge-transform, uppercase);
    border-radius: var(--idf-ds-slide-badge-radius, calc(4 * var(--idf-ds-u)));
    box-shadow: var(--idf-ds-slide-badge-shadow, none);
}

.idf-ds-feed-badge {
    transform: rotate(var(--idf-ds-feed-badge-rotate, 0deg));
    background: var(--idf-ds-feed-badge-bg, rgba(255, 255, 255, 0.2));
    color: var(--idf-ds-feed-badge-fg, #fff);
    font-family: var(--idf-ds-feed-badge-font, inherit);
    font-weight: var(--idf-ds-feed-badge-weight, 700);
    letter-spacing: var(--idf-ds-feed-badge-letter-spacing, 0.06em);
    font-size: var(--idf-ds-feed-badge-size, calc(18 * var(--idf-ds-u)));
    text-transform: var(--idf-ds-feed-badge-transform, uppercase);
    border-radius: var(--idf-ds-feed-badge-radius, calc(4 * var(--idf-ds-u)));
    box-shadow: var(--idf-ds-feed-badge-shadow, none);
}

/* Rahmen statt Farbfläche - die Farbe wird zur Linie */
.idf-ds-slide-badge-outline .idf-ds-slide-badge {
    background: transparent;
    border: calc(3 * var(--idf-ds-u)) solid var(--idf-ds-slide-badge-bg, #c8134b);
}

.idf-ds-feed-badge-outline .idf-ds-feed-badge {
    background: transparent;
    border: calc(3 * var(--idf-ds-u)) solid var(--idf-ds-feed-badge-bg, rgba(255, 255, 255, 0.2));
}

/* Nur Text - ohne Fläche wird der Schlagschatten zum Textschatten */
.idf-ds-slide-badge-plain .idf-ds-slide-badge,
.idf-ds-feed-badge-plain .idf-ds-feed-badge {
    background: transparent;
    padding-left: 0;
    padding-right: 0;
    box-shadow: none;
}

.idf-ds-slide-badge-plain .idf-ds-slide-badge {
    text-shadow: var(--idf-ds-slide-badge-text-shadow, none);
}

.idf-ds-feed-badge-plain .idf-ds-feed-badge {
    text-shadow: var(--idf-ds-feed-badge-text-shadow, none);
}

.idf-ds-slide-badge-plain .idf-ds-slide--no-image .idf-ds-slide-badge,
.idf-ds-feed-badge-plain .idf-ds-slide--no-image .idf-ds-feed-badge {
    text-shadow: none;
}

/* ── Headline - groß und prägnant ───────────────────────────── */

.idf-ds-slide-title {
    margin: 0 0 calc(20 * var(--idf-ds-u));
    font-family: var(--idf-ds-headline-font, inherit);
    font-size: var(--idf-ds-headline-size, calc(77 * var(--idf-ds-u)));
    text-transform: var(--idf-ds-headline-transform, none);
    color: var(--idf-ds-headline-color, #fff);
    font-weight: var(--idf-ds-headline-weight, 700);
    line-height: var(--idf-ds-headline-line-height, 1.1);
    text-shadow: var(--idf-ds-headline-shadow, 0 calc(2 * var(--idf-ds-u)) calc(8 * var(--idf-ds-u)) rgba(0, 0, 0, 0.5));
    letter-spacing: var(--idf-ds-headline-letter-spacing, -0.02em);
    /* Ohne Ausgleich füllt der Browser jede Zeile bis zum Rand und lässt den
       Rest übrig - die letzte Zeile ist dann oft halb so lang wie die davor.
       Gilt auch neben der Zeilenbegrenzung darunter. */
    text-wrap: var(--idf-ds-headline-wrap, balance);
    /* Höchstens so viele Zeilen, der Rest endet mit drei Punkten - die Zahl
       kommt aus dem Design (Überschrift 3, Teaser 4). */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--idf-ds-headline-lines, 3);
    line-clamp: var(--idf-ds-headline-lines, 3);
    overflow: hidden;
}

.idf-ds-slide--no-image .idf-ds-slide-title {
    text-shadow: none;
}

/* ── Teaser-Text ──────────────────────────────────────────────── */

.idf-ds-slide-content {
    font-family: var(--idf-ds-body-font, inherit);
    font-size: var(--idf-ds-body-size, calc(29 * var(--idf-ds-u)));
    text-transform: var(--idf-ds-body-transform, none);
    color: var(--idf-ds-body-color, #fff);
    font-weight: var(--idf-ds-body-weight, 400);
    line-height: var(--idf-ds-body-line-height, 1.5);
    letter-spacing: var(--idf-ds-body-letter-spacing, 0);
    opacity: 0.9;
    max-width: 70ch;
    text-shadow: var(--idf-ds-body-shadow, 0 calc(1 * var(--idf-ds-u)) calc(4 * var(--idf-ds-u)) rgba(0, 0, 0, 0.4));
    text-wrap: var(--idf-ds-body-wrap, pretty);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--idf-ds-body-lines, 4);
    line-clamp: var(--idf-ds-body-lines, 4);
    overflow: hidden;
}

.idf-ds-slide--no-image .idf-ds-slide-content {
    text-shadow: none;
    opacity: 0.85;
}

/* ── Partner-Logo ─────────────────────────────────────────────── */

/* Gehört zum Beitrag, nicht zum Screen: das Bild kommt aus dem Slide, die
   Ecke aus dem Design (Body-Klasse). Ohne Position bleibt es unsichtbar. */
.idf-ds-partner {
    display: none;
    position: absolute;
    z-index: 4;
    height: var(--idf-ds-partner-height, calc(90 * var(--idf-ds-u)));
    width: auto;
    max-width: calc(4 * var(--idf-ds-partner-height, calc(90 * var(--idf-ds-u))));
    object-fit: contain;
    opacity: var(--idf-ds-partner-opacity, 1);
}

/* Im Textblock statt in einer Ecke: das Logo steht als erstes Element im
   Overlay und rückt Schlagwort und Überschrift nach unten. */
.idf-ds-partner-above .idf-ds-partner {
    display: block;
    position: static;
    align-self: flex-start;
    margin: 0 0 calc(18 * var(--idf-ds-u));
}

.idf-ds-partner-bottom-right .idf-ds-partner {
    display: block;
    bottom: calc(40 * var(--idf-ds-u));
    right: calc(50 * var(--idf-ds-u));
}

.idf-ds-partner-bottom-left .idf-ds-partner {
    display: block;
    bottom: calc(40 * var(--idf-ds-u));
    left: calc(50 * var(--idf-ds-u));
}

.idf-ds-partner-top-right .idf-ds-partner {
    display: block;
    top: calc(40 * var(--idf-ds-u));
    right: calc(50 * var(--idf-ds-u));
}

.idf-ds-partner-top-left .idf-ds-partner {
    display: block;
    top: calc(40 * var(--idf-ds-u));
    left: calc(50 * var(--idf-ds-u));
}

/* ── Ecke für Logo und QR-Codes zusammen ──────────────────────── */

/* Fallen beide auf dieselbe Ecke, stehen sie in einem gemeinsamen Behälter
   untereinander - das Logo oben. Der Behälter übernimmt die Ecke, beide
   stehen darin im Fluss; mehrere Codes bleiben nebeneinander. */
.idf-ds-corner {
    position: absolute;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: calc(18 * var(--idf-ds-u));
}

.idf-ds-corner .idf-ds-partner,
.idf-ds-corner .idf-ds-qrcodes {
    position: static;
    margin: 0;
}

.idf-ds-qr-bottom-right .idf-ds-corner,
.idf-ds-qr-top-right .idf-ds-corner {
    align-items: flex-end;
}

.idf-ds-qr-bottom-left .idf-ds-corner,
.idf-ds-qr-top-left .idf-ds-corner {
    align-items: flex-start;
}

/* ── QR-Codes ─────────────────────────────────────────────────── */

.idf-ds-qrcodes {
    position: absolute;
    z-index: 4;
    display: flex;
    gap: calc(18 * var(--idf-ds-u));
    align-items: flex-end;
}

.idf-ds-qr-bottom-right .idf-ds-qrcodes,
.idf-ds-qr-bottom-right .idf-ds-corner {
    bottom: calc(40 * var(--idf-ds-u));
    right: calc(50 * var(--idf-ds-u));
}

.idf-ds-qr-bottom-left .idf-ds-qrcodes,
.idf-ds-qr-bottom-left .idf-ds-corner {
    bottom: calc(40 * var(--idf-ds-u));
    left: calc(50 * var(--idf-ds-u));
}

.idf-ds-qr-top-right .idf-ds-qrcodes,
.idf-ds-qr-top-right .idf-ds-corner {
    top: calc(40 * var(--idf-ds-u));
    right: calc(50 * var(--idf-ds-u));
}

.idf-ds-qr-top-left .idf-ds-qrcodes,
.idf-ds-qr-top-left .idf-ds-corner {
    top: calc(40 * var(--idf-ds-u));
    left: calc(50 * var(--idf-ds-u));
}

.idf-ds-qrcode {
    margin: 0;
    width: var(--idf-ds-qr-size, calc(150 * var(--idf-ds-u)));
    padding: calc(10 * var(--idf-ds-u));
    background: var(--idf-ds-qr-bg, #fff);
    border-radius: var(--idf-ds-qr-radius, calc(8 * var(--idf-ds-u)));
    box-shadow: var(--idf-ds-qr-shadow, 0 calc(4 * var(--idf-ds-u)) calc(20 * var(--idf-ds-u)) rgba(0, 0, 0, 0.35));
}

.idf-ds-qrcode svg,
.idf-ds-qrcode img {
    display: block;
    width: 100%;
    height: auto;
}

.idf-ds-qrcode figcaption {
    margin-top: calc(8 * var(--idf-ds-u));
    font-family: var(--idf-ds-body-font, inherit);
    font-size: calc(14 * var(--idf-ds-u));
    line-height: 1.25;
    color: var(--idf-ds-qr-fg, #111);
    text-align: center;
}

/* ── Loading ──────────────────────────────────────────────────── */

/* Der Hinweis erscheint erst nach einer halben Sekunde und blendet weich ein:
   bei normalem Start ist die erste Antwort längst da, und niemand sieht ihn
   in der Schrift, die das Display gerade zur Hand hat. Bleibt der Abruf aus,
   steht er da. Schrift, Farbe und Größe kommen aus dem Design. */
#idf-ds-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--idf-ds-body-font, inherit);
    font-size: calc(32 * var(--idf-ds-u));
    color: var(--idf-ds-text, #fff);
    text-align: center;
    opacity: 0;
    animation: idf-ds-loading-fade 400ms ease-in 600ms forwards;
}

@keyframes idf-ds-loading-fade {
    to {
        opacity: 0.5;
    }
}

/* ── Slide-Effekte ────────────────────────────────────────────── */

/* Überblenden ist der Standard und braucht nur die Opacity oben. */

/* Schieben horizontal */
.idf-ds-effect-slide-left .idf-ds-slide {
    opacity: 1;
    transform: translateX(100%);
}

.idf-ds-effect-slide-left .idf-ds-slide.idf-ds-active {
    transform: translateX(0);
}

.idf-ds-effect-slide-left .idf-ds-slide.idf-ds-leaving {
    transform: translateX(-100%);
}

/* Schieben vertikal */
.idf-ds-effect-slide-up .idf-ds-slide {
    opacity: 1;
    transform: translateY(100%);
}

.idf-ds-effect-slide-up .idf-ds-slide.idf-ds-active {
    transform: translateY(0);
}

.idf-ds-effect-slide-up .idf-ds-slide.idf-ds-leaving {
    transform: translateY(-100%);
}

/* Zoom */
.idf-ds-effect-zoom .idf-ds-slide {
    transform: scale(1.12);
}

.idf-ds-effect-zoom .idf-ds-slide.idf-ds-active {
    transform: scale(1);
}

.idf-ds-effect-zoom .idf-ds-slide.idf-ds-leaving {
    transform: scale(0.9);
    opacity: 0;
}

/* Umklappen */
.idf-ds-effect-flip .idf-ds-carousel {
    perspective: calc(1800 * var(--idf-ds-u));
}

.idf-ds-effect-flip .idf-ds-slide {
    transform: rotateY(90deg);
    backface-visibility: hidden;
}

.idf-ds-effect-flip .idf-ds-slide.idf-ds-active {
    transform: rotateY(0);
}

.idf-ds-effect-flip .idf-ds-slide.idf-ds-leaving {
    transform: rotateY(-90deg);
    opacity: 0;
}

/* Hart schneiden */
.idf-ds-effect-none .idf-ds-slide {
    transition: none;
}

/* ── Ken-Burns-Effekt ─────────────────────────────────────────── */

/* Die Bewegung laeuft genau ueber die Standzeit des Slides und wird beim
   Verlassen eingefroren - sonst springt das Bild waehrend des Uebergangs
   sichtbar auf den Ausgangszustand zurueck. */
.idf-ds-kenburns .idf-ds-slide.idf-ds-active .idf-ds-slide-bg,
.idf-ds-kenburns .idf-ds-slide.idf-ds-leaving .idf-ds-slide-bg {
    animation: idf-ds-kenburns var(--idf-ds-kenburns-duration, 12s) linear both;
}

.idf-ds-kenburns .idf-ds-slide.idf-ds-leaving .idf-ds-slide-bg {
    animation-play-state: paused;
}

@keyframes idf-ds-kenburns {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .idf-ds-slide {
        transition-duration: 1ms;
    }

    .idf-ds-kenburns .idf-ds-slide.idf-ds-active .idf-ds-slide-bg {
        animation: none;
    }
}