/* ========================================
   ImageTextBox Content Element
   Bild links + dunkle Text-Box rechts
   Adobe XD Design mit FlexForm Optionen
   ======================================== */

/* ========================================
   Outer Container & Layer Structure
   ======================================== */
.image-text-box__outer {
    position: relative;
    width: 100%;
}

@media (min-width: 992px) {
    .image-text-box__outer {
        display: flex;
        align-items: center;
        min-height: 500px;
    }
}

/* ========================================
   Background Colors
   ======================================== */
.image-text-box.bg-none {
    background: transparent;
}

.image-text-box.bg-light {
    background-color: #f8f9fa;
}

.image-text-box.bg-white {
    background-color: #ffffff;
}

.image-text-box.bg-gray {
    background-color: #e9ecef;
}

.image-text-box.bg-gradient {
    background: linear-gradient(135deg, var(--green, #28a745) 0%, #1e272e 100%);
}

.image-text-box.bg-gradient-green-black {
    background: linear-gradient(135deg, var(--green, #28a745) 0%, #000000 100%);
}

.image-text-box.bg-gradient-dark-black {
    background: linear-gradient(135deg, #2d3436 0%, #000000 100%);
}

.image-text-box.bg-gradient-green-light {
    background: linear-gradient(135deg, var(--green, #28a745) 0%, #f8f9fa 100%);
}

.image-text-box.bg-gradient-dark-green {
    background: linear-gradient(135deg, #1e272e 0%, var(--green, #28a745) 100%);
}

.image-text-box.bg-gradient-green-diagonal {
    background: linear-gradient(45deg, var(--green, #28a745) 0%, #20873a 50%, var(--green, #28a745) 100%);
}

/* ========================================
   Spacing Options
   ======================================== */
.image-text-box.spacing-top-0 {
    padding-top: 0 !important;
}

.image-text-box.spacing-top-xs {
    padding-top: 1rem;
}

.image-text-box.spacing-top-small {
    padding-top: 2rem;
}

.image-text-box.spacing-top-normal {
    padding-top: 3rem;
}

.image-text-box.spacing-top-medium {
    padding-top: 4rem;
}

.image-text-box.spacing-top-large {
    padding-top: 5rem;
}

.image-text-box.spacing-top-xl {
    padding-top: 7rem;
}

.image-text-box.spacing-top-xxl {
    padding-top: 10rem;
}

.image-text-box.spacing-bottom-0 {
    padding-bottom: 0 !important;
}

.image-text-box.spacing-bottom-xs {
    padding-bottom: 1rem;
}

.image-text-box.spacing-bottom-small {
    padding-bottom: 2rem;
}

.image-text-box.spacing-bottom-normal {
    padding-bottom: 3rem;
}

.image-text-box.spacing-bottom-medium {
    padding-bottom: 4rem;
}

.image-text-box.spacing-bottom-large {
    padding-bottom: 5rem;
}

.image-text-box.spacing-bottom-xl {
    padding-bottom: 7rem;
}

.image-text-box.spacing-bottom-xxl {
    padding-bottom: 10rem;
}

@media (min-width: 992px) {
    .image-text-box.spacing-top-normal {
        padding-top: 4rem;
    }

    .image-text-box.spacing-top-medium {
        padding-top: 5rem;
    }

    .image-text-box.spacing-top-large {
        padding-top: 6rem;
    }

    .image-text-box.spacing-top-xl {
        padding-top: 9rem;
    }

    .image-text-box.spacing-top-xxl {
        padding-top: 12rem;
    }

    .image-text-box.spacing-bottom-normal {
        padding-bottom: 4rem;
    }

    .image-text-box.spacing-bottom-medium {
        padding-bottom: 5rem;
    }

    .image-text-box.spacing-bottom-large {
        padding-bottom: 6rem;
    }

    .image-text-box.spacing-bottom-xl {
        padding-bottom: 9rem;
    }

    .image-text-box.spacing-bottom-xxl {
        padding-bottom: 12rem;
    }
}

/* ========================================
   Image Layer
   ======================================== */
.image-text-box__image-layer {
    width: 100%;
    position: relative;
}

@media (min-width: 992px) {
    .image-text-box__image-layer {
        position: absolute;
        height: 100%;
        top: 0;
    }

    /* Default & Fullwidth: Bild links */
    .image-text-box.layout-default .image-text-box__image-layer,
    .image-text-box.layout-fullwidth .image-text-box__image-layer {
        left: 0;
    }

    /* Reversed: Bild rechts */
    .image-text-box.layout-reversed .image-text-box__image-layer {
        right: 0;
    }

    /* Bildbreiten basierend auf imageSize */
    .image-text-box__image-layer.image-size-50 {
        width: 50%;
    }

    .image-text-box__image-layer.image-size-40 {
        width: 40%;
    }

    .image-text-box__image-layer.image-size-60 {
        width: 60%;
    }
}

.image-text-box__image {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 0;
    object-fit: cover;
    min-height: 500px; /* Mindesthöhe für bessere Optik */
}

.image-text-box__placeholder {
    width: 100%;
    min-height: 400px;
    border: 2px dashed #dee2e6;
}

/* ========================================
   Content Layer
   ======================================== */
.image-text-box__content-layer {
    width: 100%;
    padding: 0 1rem;
    margin-top: -170px; /* Mobile overlap */
}

@media (min-width: 992px) {
    .image-text-box__content-layer {
        position: relative;
        width: 100%;
        padding: 0;
        margin-top: 0;
        z-index: 10;
    }
}

/* Content Container - zentriert mit max-width 1370px */
.image-text-box__content-container {
    width: 100%;
    max-width: 100%;
}

@media (min-width: 992px) {
    .image-text-box__content-container {
        max-width: 1370px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        min-height: 500px;
    }

    /* Default & Fullwidth: Box rechtsbündig */
    .image-text-box.layout-default .image-text-box__content-container,
    .image-text-box.layout-fullwidth .image-text-box__content-container {
        justify-content: flex-end;
        padding-right: 2rem;
    }

    /* Reversed: Box linksbündig */
    .image-text-box.layout-reversed .image-text-box__content-container {
        justify-content: flex-start;
        padding-left: 2rem;
    }
}

@media (min-width: 1200px) {
    .image-text-box.layout-default .image-text-box__content-container,
    .image-text-box.layout-fullwidth .image-text-box__content-container {
        padding-right: 3rem;
    }

    .image-text-box.layout-reversed .image-text-box__content-container {
        padding-left: 3rem;
    }
}

.image-text-box__dark-box {
    padding: 2.5rem;
    color: #ffffff;
    position: relative;

    width: 100%;
    max-width: 600px; /* Maximale Breite der Box */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 10; /* Box liegt ÜBER dem Bild - höherer z-index */
}

/* Box Color Variants */
.image-text-box__dark-box.box-color-dark {
    background-color: #2d3436;
    background: linear-gradient(135deg, #2d3436 0%, #1e272e 100%);
}

.image-text-box__dark-box.box-color-black {
    background-color: #000000;
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
}

.image-text-box__dark-box.box-color-green {
    background-color: var(--green, #28a745);
    background: linear-gradient(135deg, var(--green, #28a745) 0%, #20873a 100%);
}

@media (min-width: 768px) {
    .image-text-box__dark-box {
        padding: 3rem;
    }
}

/* Desktop: Overlap Effect */
@media (min-width: 992px) {
    /* Default Layout: Box überlappt Bild links */
    .image-text-box.layout-default .image-text-box__dark-box {
        padding: 4rem;
        margin-left: -10rem; /* Stark nach links überlappen */
    }

    /* Fullwidth Layout: Box überlappt Bild noch stärker */
    .image-text-box.layout-fullwidth .image-text-box__dark-box {
        padding: 4rem;
        margin-left: -12rem; /* Sehr starker Overlap */
    }

    /* Reversed Layout: Box überlappt Bild rechts */
    .image-text-box.layout-reversed .image-text-box__dark-box {
        padding: 4rem;
        margin-right: -10rem;
    }
}

@media (min-width: 1200px) {
    /* Default Layout */
    .image-text-box.layout-default .image-text-box__dark-box {
        padding: 4.5rem;
        margin-left: -12rem; /* Noch stärkerer Overlap auf großen Screens */
    }

    /* Fullwidth Layout */
    .image-text-box.layout-fullwidth .image-text-box__dark-box {
        padding: 4.5rem;
        margin-left: -15rem;
    }

    /* Reversed Layout */
    .image-text-box.layout-reversed .image-text-box__dark-box {
        padding: 4.5rem;
        margin-right: -12rem;
    }
}

/* ========================================
   Typography
   ======================================== */
/* Grüner Titel */
.image-text-box__title {
    color: var(--green, #28a745);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    line-height: 1.3;
    margin-bottom: 1.5rem;
}

.text-green {
    color: var(--green, #28a745) !important;
}

/* Weißer Text */
.image-text-box__text {
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.image-text-box__text p {
    margin-bottom: 1rem;
}

.image-text-box__text p:last-child {
    margin-bottom: 0;
}

/* ========================================
   Button
   ======================================== */
.image-text-box__button-wrap {
    margin-top: 2rem;
}

.btn-green {
    background-color: var(--green, #28a745);
    border-color: var(--green, #28a745);
    color: #ffffff;
    padding: 0.875rem 2rem;
    font-size: 1.125rem;
    border-radius: 0.375rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.btn-green:hover,
.btn-green:focus {
    background-color: #218838;
    border-color: #1e7e34;
    color: #ffffff;
    transform: translateY(-2px);
}

.btn-green:active {
    background-color: #1e7e34;
    border-color: #1c7430;
    transform: translateY(0);
}

.image-text-box__button .ms-2 {
    margin-left: 0.5rem;
    font-size: 1.5rem;
    line-height: 1;
}

/* Bootstrap 5 btn-lg Override */
.btn-green.btn-lg {
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
}

/* ========================================
   Responsive: Mobile Stack
   ======================================== */
@media (max-width: 991px) {
    .image-text-box__image-layer {
        order: 1;
    }

    .image-text-box__content-layer {
        order: 2;
    }

    .image-text-box__dark-box {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ========================================
   Accessibility
   ======================================== */
.btn-green:focus-visible {
    outline: 3px solid rgba(40, 167, 69, 0.5);
    outline-offset: 4px;
}

/* ========================================
   Text Alignment Options
   ======================================== */
.image-text-box__dark-box.text-align-left {
    text-align: left;
}

.image-text-box__dark-box.text-align-center {
    text-align: center;
        
}

.image-text-box__dark-box.text-align-right {
    text-align: right;
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .image-text-box__dark-box {
        background-color: #2d3436 !important;
        border: 2px solid #000000;
    }

    .image-text-box__title {
        color: #000000 !important;
    }

    .btn-green {
        border: 2px solid var(--green, #28a745) !important;
        background-color: transparent !important;
        color: var(--green, #28a745) !important;
    }
}

/* ========================================
   Animation (Optional)
   ======================================== */
@media (prefers-reduced-motion: no-preference) {
    .image-text-box__dark-box {
        animation: fadeInUp 0.6s ease-out;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   Responsive Box Min-Width Options
   ======================================== */
@media (min-width: 992px) {
    .image-text-box.box-min-400 .image-text-box__dark-box {
        min-width: 400px;
    }

    .image-text-box.box-min-500 .image-text-box__dark-box {
        min-width: 500px;
    }

    .image-text-box.box-min-600 .image-text-box__dark-box {
        min-width: 600px;
    }

    .image-text-box.box-min-700 .image-text-box__dark-box {
        min-width: 700px;
    }

    .image-text-box.box-min-800 .image-text-box__dark-box {
        min-width: 800px;
    }
}

/* ========================================
   Responsive Box Max-Width Options
   ======================================== */
@media (min-width: 992px) {
    .image-text-box.box-max-600 .image-text-box__dark-box {
        max-width: 600px;
    }

    .image-text-box.box-max-700 .image-text-box__dark-box {
        max-width: 700px;
    }

    .image-text-box.box-max-800 .image-text-box__dark-box {
        max-width: 800px;
    }

    .image-text-box.box-max-900 .image-text-box__dark-box {
        max-width: 900px;
    }

    .image-text-box.box-max-1000 .image-text-box__dark-box {
        max-width: 1000px;
    }
}

/* ========================================
   Mobile Overlap Options
   ======================================== */
@media (max-width: 991px) {
    .image-text-box.mobile-overlap-0 .image-text-box__content-layer {
        margin-top: 0;
    }

    .image-text-box.mobile-overlap-80 .image-text-box__content-layer {
        margin-top: -80px;
    }

    .image-text-box.mobile-overlap-120 .image-text-box__content-layer {
        margin-top: -120px;
    }

    .image-text-box.mobile-overlap-170 .image-text-box__content-layer {
        margin-top: -170px;
    }

    .image-text-box.mobile-overlap-220 .image-text-box__content-layer {
        margin-top: -220px;
    }
}

/* ========================================
   Accent Line in Dark-Box
   Accent line now renders inside the textbox
   ======================================== */
.image-text-box__dark-box[class*="accent-line--"] {
    /* Ensure accent line pseudo-elements work properly */
    position: relative;
}

/* Top positions - accent line appears at top of box */
.image-text-box__dark-box.accent-line--top-left::before,
.image-text-box__dark-box.accent-line--top-center::before,
.image-text-box__dark-box.accent-line--top-right::before {
    content: '';
    display: block;
    height: var(--accent-line-height, 6px);
    background: var(--accent-line-color, var(--green, #28a745));
    border-radius: var(--accent-line-radius, 10px);
    margin-bottom: var(--accent-line-spacing, 1.75rem);
    width: var(--accent-line-width-mobile, 100px);
}

@media (min-width: 768px) {
    .image-text-box__dark-box.accent-line--top-left::before,
    .image-text-box__dark-box.accent-line--top-center::before,
    .image-text-box__dark-box.accent-line--top-right::before {
        width: var(--accent-line-width-tablet, 150px);
    }
}

@media (min-width: 1200px) {
    .image-text-box__dark-box.accent-line--top-left::before,
    .image-text-box__dark-box.accent-line--top-center::before,
    .image-text-box__dark-box.accent-line--top-right::before {
        width: var(--accent-line-width-desktop, 220px);
    }
}

/* Center and right alignment for top accent line */
.image-text-box__dark-box.accent-line--top-center::before {
    margin-left: auto;
    margin-right: auto;
}

.image-text-box__dark-box.accent-line--top-right::before {
    margin-left: auto;
}

/* Bottom positions - accent line appears at bottom of box */
.image-text-box__dark-box.accent-line--bottom-left::after,
.image-text-box__dark-box.accent-line--bottom-center::after,
.image-text-box__dark-box.accent-line--bottom-right::after {
    content: '';
    display: block;
    height: var(--accent-line-height, 6px);
    background: var(--accent-line-color, var(--green, #28a745));
    border-radius: var(--accent-line-radius, 10px);
    margin-top: var(--accent-line-spacing, 1.75rem);
    width: var(--accent-line-width-mobile, 100px);
}

@media (min-width: 768px) {
    .image-text-box__dark-box.accent-line--bottom-left::after,
    .image-text-box__dark-box.accent-line--bottom-center::after,
    .image-text-box__dark-box.accent-line--bottom-right::after {
        width: var(--accent-line-width-tablet, 150px);
    }
}

@media (min-width: 1200px) {
    .image-text-box__dark-box.accent-line--bottom-left::after,
    .image-text-box__dark-box.accent-line--bottom-center::after,
    .image-text-box__dark-box.accent-line--bottom-right::after {
        width: var(--accent-line-width-desktop, 220px);
    }
}

/* Center and right alignment for bottom accent line */
.image-text-box__dark-box.accent-line--bottom-center::after {
    margin-left: auto;
    margin-right: auto;
}

.image-text-box__dark-box.accent-line--bottom-right::after {
    margin-left: auto;
}

/* Accent Line Color Variants for Dark-Box */
.image-text-box__dark-box.accent-line--color-green::before,
.image-text-box__dark-box.accent-line--color-green::after {
    background: var(--green, #28a745);
}

.image-text-box__dark-box.accent-line--color-lightgreen::before,
.image-text-box__dark-box.accent-line--color-lightgreen::after {
    background: #A9E562;
}

.image-text-box__dark-box.accent-line--color-dark::before,
.image-text-box__dark-box.accent-line--color-dark::after {
    background: #2d3436;
}

.image-text-box__dark-box.accent-line--color-white::before,
.image-text-box__dark-box.accent-line--color-white::after {
    background: #ffffff;
}

.image-text-box__dark-box.accent-line--color-black::before,
.image-text-box__dark-box.accent-line--color-black::after {
    background: #000000;
}

.image-text-box__dark-box.accent-line--color-gray::before,
.image-text-box__dark-box.accent-line--color-gray::after {
    background: #6c757d;
}

.image-text-box__dark-box.accent-line--color-primary::before,
.image-text-box__dark-box.accent-line--color-primary::after {
    background: var(--bs-primary, #0d6efd);
}