.lichtkrant {
    --lichtkrant-transition: 0.5s;
    --lichtkrant-font: var(--gp-font--headline, 'Poppins', sans-serif);
    --lichtkrant-color-prefix: var(--contrast, #000046);
    --lichtkrant-color-word: var(--accent, #1a5fce);
    --lichtkrant-flap-bg: var(--contrast, #000046);
    --lichtkrant-flap-text: var(--base-2, #ffffff);
    --lichtkrant-flap-line: rgba(255, 255, 255, 0.18);
    --lichtkrant-flap-shadow: 0 4px 14px rgba(0, 0, 70, 0.18);
}

.lichtkrant__heading {
    margin: 0;
    font-family: var(--lichtkrant-font);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.125rem);
    line-height: 1.2;
    color: var(--lichtkrant-color-prefix);
    text-transform: capitalize;
}

.lichtkrant__prefix {
    color: var(--lichtkrant-color-prefix);
}

.lichtkrant__rotator {
    display: inline-block;
    position: relative;
    vertical-align: baseline;
}

.lichtkrant__word {
    display: inline-block;
    white-space: nowrap;
    color: var(--lichtkrant-color-word);
}

/* Letterbak (split-flap) */
.lichtkrant--flip .lichtkrant__rotator {
    margin-left: 0.05em;
    perspective: 700px;
}

.lichtkrant__flap-panel {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
    background: var(--lichtkrant-flap-bg);
    color: var(--lichtkrant-flap-text);
    border-radius: 4px;
    box-shadow: var(--lichtkrant-flap-shadow);
    line-height: 1.1;
    min-height: 1.1em;
    text-transform: none;
}

.lichtkrant__flap-upper,
.lichtkrant__flap-lower {
    overflow: hidden;
    padding: 0.12em 0.5em;
    white-space: nowrap;
}

.lichtkrant__flap-upper {
    border-bottom: 1px solid var(--lichtkrant-flap-line);
    padding-bottom: 0;
}

.lichtkrant__flap-lower {
    padding-top: 0;
    margin-top: -0.02em;
}

.lichtkrant__flap-text {
    display: block;
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.lichtkrant__flap-fold {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    overflow: hidden;
    transform-origin: bottom center;
    transform-style: preserve-3d;
    border-bottom: 1px solid var(--lichtkrant-flap-line);
    z-index: 2;
}

.lichtkrant__flap-text--front,
.lichtkrant__flap-back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200%;
    overflow: hidden;
    backface-visibility: hidden;
    padding: 0.12em 0.5em 0;
    box-sizing: border-box;
}

.lichtkrant__flap-text--front {
    transform: rotateX(0deg);
}

.lichtkrant__flap-back {
    transform: rotateX(180deg);
}

.lichtkrant__flap-text--front,
.lichtkrant__flap-back .lichtkrant__flap-text {
    display: block;
    position: absolute;
    left: 0.5em;
    right: 0.5em;
    bottom: 50%;
    white-space: nowrap;
}

.lichtkrant__flap.is-flipping .lichtkrant__flap-fold {
    animation: lichtkrant-flap-turn 0.55s ease-in forwards;
}

@keyframes lichtkrant-flap-turn {
    0% {
        transform: rotateX(0deg);
    }

    100% {
        transform: rotateX(-180deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lichtkrant__flap.is-flipping .lichtkrant__flap-fold {
        animation: none;
    }
}

/* Fade effect */
.lichtkrant--fade .lichtkrant__word {
    transition: opacity var(--lichtkrant-transition) ease;
}

.lichtkrant--fade .lichtkrant__word.is-exiting {
    opacity: 0;
}

.lichtkrant--fade .lichtkrant__word.is-entering {
    opacity: 0;
}

/* Slide effect */
.lichtkrant--slide .lichtkrant__rotator {
    overflow: hidden;
    min-height: 1.2em;
}

.lichtkrant--slide .lichtkrant__word {
    transition: transform var(--lichtkrant-transition) ease, opacity var(--lichtkrant-transition) ease;
}

.lichtkrant--slide .lichtkrant__word.is-exiting {
    transform: translateY(-100%);
    opacity: 0;
}

.lichtkrant--slide .lichtkrant__word.is-entering {
    transform: translateY(100%);
    opacity: 0;
}

/* Typewriter effect */
.lichtkrant--typewriter .lichtkrant__word::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 0.85em;
    margin-left: 3px;
    vertical-align: -0.08em;
    background-color: currentColor;
    animation: lichtkrant-cursor-blink 1s step-end infinite;
}

@keyframes lichtkrant-cursor-blink {
    50% {
        opacity: 0;
    }
}

/* Admin preview */
.lichtkrant--preview .lichtkrant__word {
    animation: none;
    border-right: none;
}

@media (max-width: 767px) {
    .lichtkrant__heading {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }

    .lichtkrant__flap-upper,
    .lichtkrant__flap-lower,
    .lichtkrant__flap-fold,
    .lichtkrant__flap-back {
        padding-left: 0.4em;
        padding-right: 0.4em;
    }

    .lichtkrant__flap-text--front,
    .lichtkrant__flap-back .lichtkrant__flap-text {
        left: 0.4em;
        right: 0.4em;
    }
}