.fdt-ds-wrap {
    --fdt-bg: #075f96;
    --fdt-text: #ffffff;
    --fdt-soft: rgba(255, 255, 255, 0.86);
    box-sizing: border-box;
    width: 100%;
    min-height: 70vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--fdt-text);
    background: var(--fdt-bg);
    font-family: var(--fdt-fact-font, Inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.fdt-ds-fullscreen {
    min-height: 100vh;
    min-height: 100svh;
}

.fdt-ds-stage {
    width: min(84vw, 1400px);
    min-height: min(82vh, 900px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(28px, 5vw, 88px) clamp(28px, 5vw, 88px) clamp(160px, 17vh, 245px);
    position: relative;
    isolation: isolate;
}

.fdt-ds-kicker {
    font-family: var(--fdt-title-font, "Playfair Display"), Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: var(--fdt-title-weight, 800);
    font-size: clamp(2.6rem, 7.4vw, 6.2rem);
    line-height: 1;
    letter-spacing: 0.01em;
    text-wrap: balance;
    opacity: 0;
    transform: translateY(22px);
    animation: fdtFadeUp 850ms cubic-bezier(.2,.8,.2,1) var(--fdt-animation-delay, 0ms) forwards;
    text-shadow: 0 6px 26px rgba(0,0,0,0.14);
}

.fdt-ds-line {
    width: min(72vw, 1180px);
    height: clamp(3px, 0.35vw, 6px);
    margin: clamp(36px, 7vh, 78px) 0 clamp(52px, 8vh, 100px);
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--fdt-soft) 12%, var(--fdt-soft) 88%, transparent);
    transform: scaleX(0);
    transform-origin: center;
    animation: fdtLineIn 900ms cubic-bezier(.2,.8,.2,1) calc(var(--fdt-animation-delay, 0ms) + 250ms) forwards;
}

.fdt-ds-fact {
    font-family: var(--fdt-fact-font, Inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    max-width: 1200px;
    margin: 0;
    font-size: clamp(2.8rem, 6.8vw, 7rem);
    line-height: 1.18;
    font-weight: var(--fdt-fact-weight, 700);
    letter-spacing: -0.045em;
    text-wrap: balance;
    opacity: 0;
    transform: translateY(34px) scale(0.985);
    animation: fdtFactIn 950ms cubic-bezier(.2,.8,.2,1) calc(var(--fdt-animation-delay, 0ms) + 430ms) forwards;
    text-shadow: 0 10px 42px rgba(0,0,0,0.16);
}

.fdt-ds-logo-slot {
    position: absolute;
    left: 50%;
    bottom: clamp(24px, 4.2vh, 52px);
    transform: translate(-50%, 22px);
    width: min(240px, 28vw);
    min-height: clamp(32px, 5.5vh, 74px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fdtLogoIn 850ms cubic-bezier(.2,.8,.2,1) calc(var(--fdt-animation-delay, 0ms) + 650ms) forwards;
}

.fdt-ds-logo-slot-empty {
    pointer-events: none;
}

.fdt-ds-logo {
    display: block;
    max-width: 100%;
    max-height: clamp(38px, 5.8vh, 82px);
    width: auto;
    height: auto;
    object-fit: contain;
}

@keyframes fdtFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fdtLineIn {
    to { transform: scaleX(1); }
}

@keyframes fdtLogoIn {
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes fdtFactIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
    .fdt-ds-stage {
        width: 94vw;
        min-height: 86vh;
        padding: 28px 28px 150px;
    }

    .fdt-ds-line {
        width: 86vw;
        margin-block: 34px 48px;
    }

    .fdt-ds-fact {
        letter-spacing: -0.035em;
    }

    .fdt-ds-logo-slot {
        width: min(190px, 38vw);
        bottom: 28px;
    }
}

@media (max-width: 560px) {
    .fdt-ds-kicker {
        font-size: clamp(2.2rem, 13vw, 4.2rem);
    }

    .fdt-ds-fact {
        font-size: clamp(2.1rem, 11vw, 4rem);
        line-height: 1.12;
    }

    .fdt-ds-logo-slot {
        width: min(160px, 50vw);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fdt-ds-kicker,
    .fdt-ds-line,
    .fdt-ds-fact,
    .fdt-ds-logo-slot {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .fdt-ds-logo-slot {
        transform: translate(-50%, 0);
    }
}

/* Design-Auswahl: Classic ist das bisherige Standarddesign. */
.fdt-ds-design-classic .fdt-ds-stage {
    align-items: center;
    text-align: center;
}

/* Design 2: Editorial – ruhig, linksbündig, mit vertikaler Akzentlinie. */
.fdt-ds-design-editorial .fdt-ds-stage {
    width: min(88vw, 1500px);
    align-items: flex-start;
    text-align: left;
    padding-left: clamp(44px, 8vw, 150px);
    padding-right: clamp(32px, 8vw, 130px);
}

.fdt-ds-design-editorial .fdt-ds-stage::before {
    content: "";
    position: absolute;
    left: clamp(10px, 2vw, 34px);
    top: clamp(72px, 13vh, 160px);
    bottom: clamp(170px, 20vh, 280px);
    width: clamp(4px, 0.45vw, 8px);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    transform: scaleY(0);
    transform-origin: top;
    animation: fdtEditorialLine 900ms cubic-bezier(.2,.8,.2,1) calc(var(--fdt-animation-delay, 0ms) + 180ms) forwards;
}

.fdt-ds-design-editorial .fdt-ds-kicker {
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: clamp(1rem, 1.5vw, 1.7rem);
    opacity: 0.9;
    text-shadow: none;
}

.fdt-ds-design-editorial .fdt-ds-line {
    width: min(34vw, 520px);
    margin: clamp(26px, 5vh, 58px) 0 clamp(54px, 8vh, 106px);
    transform-origin: left;
    background: rgba(255, 255, 255, 0.78);
}

.fdt-ds-design-editorial .fdt-ds-fact {
    max-width: 1280px;
    font-size: clamp(3.2rem, 7.2vw, 8rem);
    line-height: 1.04;
    letter-spacing: -0.06em;
}

/* Design 3: Spotlight – zentral, mit feiner Kontur und viel Bühne. */
.fdt-ds-design-spotlight .fdt-ds-stage {
    width: min(88vw, 1520px);
    min-height: min(84vh, 930px);
}

.fdt-ds-design-spotlight .fdt-ds-stage::before,
.fdt-ds-design-spotlight .fdt-ds-stage::after {
    content: "";
    position: absolute;
    inset: clamp(18px, 3vw, 54px);
    border: clamp(2px, 0.18vw, 4px) solid rgba(255, 255, 255, 0.32);
    border-radius: clamp(24px, 4vw, 70px);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.985);
    animation: fdtContourIn 900ms cubic-bezier(.2,.8,.2,1) calc(var(--fdt-animation-delay, 0ms) + 120ms) forwards;
}

.fdt-ds-design-spotlight .fdt-ds-stage::after {
    inset: clamp(38px, 5.5vw, 92px);
    border-color: rgba(255, 255, 255, 0.14);
    animation-delay: calc(var(--fdt-animation-delay, 0ms) + 260ms);
}

.fdt-ds-design-spotlight .fdt-ds-kicker {
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: clamp(1.1rem, 1.7vw, 2rem);
    text-shadow: none;
}

.fdt-ds-design-spotlight .fdt-ds-line {
    width: min(18vw, 300px);
    margin: clamp(30px, 5.2vh, 60px) 0 clamp(56px, 8vh, 104px);
    background: rgba(255, 255, 255, 0.88);
}

.fdt-ds-design-spotlight .fdt-ds-fact {
    max-width: 1180px;
    line-height: 1.08;
}

/* Design 4: Poster – plakativ, mit großem Label im Hintergrund. */
.fdt-ds-design-poster .fdt-ds-stage {
    width: min(90vw, 1580px);
    align-items: flex-start;
    text-align: left;
    justify-content: center;
}

.fdt-ds-design-poster .fdt-ds-stage::before {
    content: "FACT";
    position: absolute;
    left: clamp(18px, 4vw, 78px);
    top: clamp(16px, 3vh, 46px);
    font-family: var(--fdt-fact-font, Inter), ui-sans-serif, system-ui, sans-serif;
    font-weight: 900;
    font-size: clamp(5rem, 18vw, 18rem);
    line-height: 0.82;
    letter-spacing: -0.09em;
    color: rgba(255, 255, 255, 0.09);
    pointer-events: none;
    opacity: 0;
    transform: translateY(24px);
    animation: fdtPosterIn 1100ms cubic-bezier(.2,.8,.2,1) calc(var(--fdt-animation-delay, 0ms) + 80ms) forwards;
}

.fdt-ds-design-poster .fdt-ds-kicker {
    font-style: normal;
    font-size: clamp(1.3rem, 2.3vw, 2.8rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fdt-ds-design-poster .fdt-ds-line {
    width: min(50vw, 800px);
    margin: clamp(24px, 4vh, 44px) 0 clamp(44px, 7vh, 88px);
    transform-origin: left;
    background: rgba(255, 255, 255, 0.82);
}

.fdt-ds-design-poster .fdt-ds-fact {
    max-width: 1320px;
    font-size: clamp(3.4rem, 8.3vw, 9rem);
    line-height: 0.99;
    letter-spacing: -0.075em;
}

/* Design 5: Ticker – moderner Newsroom-Look mit klarer Abschlusslinie. */
.fdt-ds-design-ticker .fdt-ds-stage {
    width: min(91vw, 1600px);
    align-items: stretch;
    text-align: left;
    justify-content: center;
    padding-left: clamp(32px, 6vw, 110px);
    padding-right: clamp(32px, 6vw, 110px);
}

.fdt-ds-design-ticker .fdt-ds-kicker {
    align-self: flex-start;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: clamp(1rem, 1.5vw, 1.7rem);
    text-shadow: none;
}

.fdt-ds-design-ticker .fdt-ds-line {
    width: 100%;
    margin: clamp(28px, 5vh, 60px) 0 clamp(46px, 7vh, 94px);
    transform-origin: left;
    background: rgba(255, 255, 255, 0.76);
}

.fdt-ds-design-ticker .fdt-ds-fact {
    max-width: 1500px;
    font-size: clamp(3rem, 7.6vw, 8.4rem);
    line-height: 1.02;
    letter-spacing: -0.07em;
}

.fdt-ds-design-ticker .fdt-ds-stage::after {
    content: "";
    position: absolute;
    left: clamp(32px, 6vw, 110px);
    right: clamp(32px, 6vw, 110px);
    bottom: clamp(122px, 15vh, 205px);
    height: clamp(2px, 0.22vw, 4px);
    background: rgba(255, 255, 255, 0.34);
    transform: scaleX(0);
    transform-origin: left;
    animation: fdtLineIn 900ms cubic-bezier(.2,.8,.2,1) calc(var(--fdt-animation-delay, 0ms) + 520ms) forwards;
}

@keyframes fdtEditorialLine {
    to { transform: scaleY(1); }
}

@keyframes fdtContourIn {
    to { opacity: 1; transform: scale(1); }
}

@keyframes fdtPosterIn {
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
    .fdt-ds-design-editorial .fdt-ds-stage,
    .fdt-ds-design-poster .fdt-ds-stage,
    .fdt-ds-design-ticker .fdt-ds-stage {
        width: 94vw;
        padding-left: 30px;
        padding-right: 30px;
    }

    .fdt-ds-design-editorial .fdt-ds-stage::before {
        left: 10px;
    }

    .fdt-ds-design-ticker .fdt-ds-stage::after {
        left: 30px;
        right: 30px;
        bottom: 122px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fdt-ds-design-editorial .fdt-ds-stage::before,
    .fdt-ds-design-spotlight .fdt-ds-stage::before,
    .fdt-ds-design-spotlight .fdt-ds-stage::after,
    .fdt-ds-design-poster .fdt-ds-stage::before,
    .fdt-ds-design-ticker .fdt-ds-stage::after {
        animation: none;
        opacity: 1;
        transform: none;
    }
}