:root {
    /* Theme Colors */
    --kss-color-white: #fff;
    --kss-color-black: #212529; 

    /* Theme Fonts */
    --kss-font-family: 'Barlow Condensed', sans-serif;

}

@media screen {
    html {
        margin-top: 0x !important;
    }
}

@media screen and (max-width: 782px) {
    html {
        margin-top: 46px !important;
    }
}

/* KSS Media Text Custom Border Radius */
.kss-media-text--custom-radius .wp-block-media-text__media img {
    border-radius: var(--kss-media-radius, 0%);
}

/* Global Styles */
body {
    background-color: var(--kss-body-background-color, #fff);
    color: var(--kss-copy-text-color-primary, #333);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body:not(.wp-admin) {
    font-family: var(--kss-font-family);
}

.is-style-kss-short-paragraph-I:not(#fakeID) {
    max-width: calc(var(--kss-page-width) * 0.75);
}

/* KSS Focal Point Picker Styles */
.kss-focalpointpicker {
    margin-bottom: 1rem;
}

/* WordPress Core Overrides */
:where(figure):not(#fakeID) {
    margin: 0;
}

/* Global Spacing Rules */
h1+p,
h2+p,
h3+p,
h4+p {
    margin-top: 0.5rem !important;
}

p+p {
    margin-top: 1rem !important;
}

p+ul,
p+ol {
    margin-top: 1rem !important;
}

ul+p,
ol+p {
    margin-top: 1rem !important;
}

p+button,
p+.wp-block-buttons,
p+a {
    margin-top: 1rem !important;
}

/* AOS Global Overflow Fix - Verhindert horizontale Scrollbalken */
html {
    overflow-x: hidden;
}

/* Globaler Container-Schutz für AOS Animationen */
[data-aos^="slide-"],
[data-aos^="fade-"] {
    will-change: transform, opacity;
    /* Verbessert Performance und reduziert Layout-Shifts */
}

/* Fix für vertikale Scrollbar bei fade-up/slide-up Animationen */
body {
    overflow-x: hidden;
    /* Verhindert horizontale Scrollbar bei allen AOS Animationen */
}

/* Stabilisiert AOS-Elemente vor Animation */
[data-aos]:not(.aos-animate) {
    visibility: visible;
    /* Stellt sicher, dass Elemente sichtbar bleiben */
}

/* Verhindert Page-Expansion durch AOS-Animationen */
[data-aos^="fade-up"]:not(.aos-animate),
[data-aos^="slide-up"]:not(.aos-animate) {
    position: relative;
    transform: translateY(0) !important;
    /* Verhindert das "von unten kommen" vor Animation */
}


/* Zentrale Container-Logik für das Theme */
html body .container,
html body :is(.is-layout-constrained,
    .is-layout-flow,
    .wp-block-post-content,
    .wp-site-blocks,
    .wp-block-group__inner-container)> :where(:not(.wp-block-post-content):not(.is-layout-constrained):not(.is-layout-flow):not(.alignleft):not(.alignright):not(.alignfull):not(footer):not(header):not(.wp-block-group__inner-container):not(.wp-block-group):not(.entry-content)),
.editor-styles-wrapper :is(.is-layout-constrained,
    .is-layout-flow,
    .wp-block-post-content)> :where(:not(.wp-block-post-content):not(.is-layout-constrained):not(.is-layout-flow):not(.alignleft):not(.alignright):not(.alignfull):not(footer.glass_effect):not(header):not(.wp-block-group):not(.entry-content)) {
    --kss-page-width: calc(100% - var(--kss-layout-system-container-padding-left) - var(--kss-layout-system-container-padding-right));
    max-width: min(var(--kss-container-max-width), var(--kss-page-width));
    margin: 0 auto;
}

/* Basisbreite für Haupt-Content-Container */
.wp-site-blocks,
.wp-block-post-content,
.editor-styles-wrapper .wp-block-post-content {
    max-width: min(var(--kss-container-max-width), var(--kss-page-width));
    margin-inline: auto;
}

/* Spalten-Utility: Entfernt Container-Eigenschaften innerhalb von Spalten */
.wp-block-columns .wp-block-column>* {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Bilder in .alignwide/.alignfull sollen sich strecken */
.alignwide img,
.alignfull img,
.alignwide .wp-block-image img,
.alignfull .wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Editor-Block-Styles Utility */
.block-editor-block-styles__variants {
    justify-content: flex-start !important;
}

.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item {
    width: auto !important;
}

.components-panel__body .block-editor-block-styles__variants button+button {
    margin-left: unset !important;
}

/* Typewriter-Headline im Backend-Editor immer sichtbar */
body.wp-admin .kss-typewriter,
.block-editor .kss-typewriter {
    opacity: 1 !important;
    transition: none !important;
}

/* Typewriter: Content erst nach Animation anzeigen */
.is-style-kss-show-content-after-typewriter-animation,
.kss-typewriter-show-content-after-fin {
    opacity: 0;
    transition: opacity 0.5s;
}

.is-style-kss-show-content-after-typewriter-animation.-show,
.kss-typewriter-show-content-after-fin.-show {
    opacity: 1;
}

/* Typewriter: Headline erst sichtbar, wenn Animation startet */
.kss-typewriter {
    opacity: 0;
    transition: opacity 0.5s;
}

.kss-typewriter.-show {
    opacity: 1;
}

/* === Typewriter Animation (global) === */
.typewriter-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;
}

.typewriter,
.kss-typewriter {
    white-space: pre-wrap;
    overflow: hidden;
    display: inline-block;
    max-width: 100%;
    word-break: break-word;
}

.kss-typewriter-highlight {
    color: var(--kss-primary-color, #FFD700);
}

body .wp-admin .is-style-kss-show-content-after-typewriter-animation body.wp-admin .kss-typewriter-show-content-after-fin,
.block-editor .kss-typewriter-show-content-after-fin,
.block-editor .is-style-kss-show-content-after-typewriter-animation {
    opacity: 1 !important;
    transition: none !important;
}

/* Vertikaler Text-Slider (generisch) */
.kss-vertical-text-slider {
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    min-width: 2em;
    position: relative;
}

.kss-vertical-slider-inner {
    display: flex;
    justify-content: flex-start;
    transition: transform 10s cubic-bezier(0.77, 0, 0.18, 1);
    will-change: transform;
}

.kss-vertical-slider-word {
    display: flex;
    align-items: center;
    height: 2.2em;
    line-height: 1.1;
    box-sizing: border-box;
    margin: 0;
    padding: 0 0.5em;
    width: 100%;
}

.kss-vertical-text-slider--colorful {
    display: flex;
    align-items: center;
    min-width: 120px;
    background: none;
    padding: 0.2em 0.2em;
}

.has-text-align-center .kss-vertical-slider-word,
.kss-vertical-text-slider--colorful {
    justify-content: center;
}

.has-text-align-center .kss-vertical-slider-word {
    text-align: center;
}


.kss-vertical-slider-word.kss-vertical-slider-word--active {
    width: 100%;
    padding: 0.55em 0;
    display: flex;
    line-height: 1;
    height: auto;
    margin: 0 auto;
}

.kss-vertical-slider-word {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    transition: opacity 0.4s;
}

.kss-vertical-slider-word.kss-vertical-slider-word--active {
    opacity: 1;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

.kss-vertical-text-slider--colorful {
    overflow: hidden;
}

.kss-vertical-text-slider {
    display: inline-flex;
    overflow: hidden;
    vertical-align: middle;
    min-width: 2em;
    position: relative;
}

.kss-vertical-slider-word {
    display: block;
    height: 1.2em;
    line-height: 1.2em;
    text-align: left;
    box-sizing: border-box;
}

.kss-vertical-text-slider--colorful .kss-vertical-slider-word {
    padding: 0.2em 0.7em;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* KSS Block Styles Registration */
.is-style-kss-core-group-is-slider-block {
    background-color: unset;
}

.is-style-kss-core-group-is-slider-block .slick-list {
    max-width: 100% !important;
    width: 100% !important;
}

.is-style-kss-core-group-is-slider-block button.slick-arrow {
    background: var(--kss-primary-color, #000);
    color: var(--kss-color-black);
}

.is-style-kss-core-group-is-slider-block .slick-dots {
    position: relative;
    top: 0;
}

.is-style-kss-core-group-is-slider-block .slick-dots li button:before {
    color: var(--kss-primary-hover-color, #007cba);
}

.is-style-kss-core-group-is-slider-block .slick-dots li.slick-active button:before {
    color: var(--kss-primary-color, #007cba);
}

.is-style-kss-core-group-is-slider-block .slick-dots li button:before {
    font-size: calc(var(--kss-page-layout-gap, 32px) * 1.5);
}

.wp-block-kss-zitat-block.kss-zitat-block.slick-slide {
    margin-bottom: 0 !important;
}


@media screen and (max-width: 1440px) {
    .is-style-kss-core-group-is-slider-block button.slick-arrow.slick-prev {
        left: 0;
    }

    .is-style-kss-core-group-is-slider-block button.slick-arrow.slick-next {
        right: 0;
    }
}

/* Tabsystem Optionpage (globale Einbindung) */
.kss-option-page-hinweise {
    margin-top: 2rem;
}

.kss-option-tabs {
    display: flex;
    gap: 0.5em;
    margin-bottom: 1em;
    flex-wrap: wrap;
    border-bottom: 1px solid #ccc;
    background: #f9f9f9;
    padding: 0.5em 0 0 0;
}

.kss-option-tab {

    background: #eee;
    border: 1px solid #ccc;
    border-bottom: none;
    padding: 0.5em 1.2em;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    font-weight: 500;
    color: #222;
    transition: background 0.2s;
    margin-bottom: -1px;
}

.kss-option-tab.active {
    background: #fff;
    border-bottom: 1px solid #fff;
    color: #000;
    z-index: 2;
}

.kss-option-tab-content {
    display: none;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0 0 6px 6px;
    padding: 1em;
    margin-bottom: 2em;
    z-index: 1;
}

.kss-option-tab-content.active {
    display: block;
}