/* =============================================================
   SSG Fiwa – Bild-Modul  v2.0
   Layout-Referenz: Unbenannt-1.jpg
   ============================================================= */

/* ---------- Wrapper ---------- */
.ssg-fiwa-wrap {
    display: block;
    width: 100%;
    /* Platz nach unten + rechts für die herausragenden Zahlen */
    padding-bottom: 56px;
    padding-right:  48px;
}

/* ---------- Bild-Container ---------- */
.ssg-fiwa-img-wrap {
    position: relative;
    display:  inline-block;
    width:    100%;
    line-height: 0;
}

/* ---------- Bild ---------- */
.ssg-fiwa-img {
    display:       block;
    width:         100%;
    height:        auto;
    border-radius: 3px;
    position:      relative;
    z-index:       1;
}

/* ---------- Grüner Rand links + unten – nur 50 % der Höhe (Punkt 1) ----------
   Trick: position absolute, bottom: 0, height 50 %.
   Nur left-border und bottom-border werden gezeichnet.
   Der Rand verschiebt sich 10px nach links/unten, damit er sichtbar
   neben/unter dem Bild hervorsteht.
*/
.ssg-fiwa-border {
    position:      absolute;
    bottom:        -10px;
    left:          -10px;
    width:         calc( 100% + 10px );
    height:        50%;
    border-left:   8px solid #004016;
    border-bottom: 8px solid #004016;
    border-radius: 0 0 0 3px;
    z-index:       0;   /* hinter dem Bild */
    pointer-events: none;
}

/* ---------- Dekorative Zahlen (orange) ---------- */
.ssg-fiwa-num {
    position:    absolute;
    font-family: "Arial Black", Arial, sans-serif;
    font-weight: 900;
    font-size:   clamp( 32px, 5vw, 56px );
    color:       #e87722;
    line-height: 1;
    z-index:     4;
    pointer-events: none;
}

/* Zahl 1: linke untere Ecke, unterhalb des Randes */
.ssg-fiwa-n1 {
    bottom: -52px;
    left:   -8px;
}

/* Zahl 2: rechts vom Kategorie-Badge */
.ssg-fiwa-n2 {
    /* wird per JS oder CSS relativ zum Badge positioniert –
       hier als fester Offset vom rechten Bildrand */
    top:   38%;
    right: -38px;
    transform: translateY(-50%);
}

/* Zahl 3: rechts vom Titelblock */
.ssg-fiwa-n3 {
    bottom: 6%;
    right:  -38px;
}

/* ---------- Kategorie-Badge – Punkt 2 ---------- */
.ssg-fiwa-badge {
    position:  absolute;
    top:       38%;
    left:      50%;
    transform: translate(-50%, -50%);
    z-index:   3;
}

.ssg-fiwa-badge__text {
    display:       inline-block;
    background:    #004016;
    color:         #ffffff;
    font-family:   Arial, sans-serif;
    font-size:     clamp( 13px, 1.5vw, 18px );
    font-style:    italic;
    font-weight:   700;
    padding:       8px 20px;
    border-radius: 3px;
    white-space:   nowrap;
    line-height:   1.3;
}

/* ---------- Titelblock – Punkt 3 (2. Ebene) ---------- */
.ssg-fiwa-title {
    position:      absolute;
    bottom:        8%;
    left:          50%;
    transform:     translateX(-10%);   /* leicht nach rechts wie im Original */
    background:    rgba( 255, 255, 255, 0.93 );
    padding:       14px 20px 14px 20px;
    border-radius: 3px;
    z-index:       3;
    max-width:     60%;
}

.ssg-fiwa-title__text {
    margin:      0;
    padding:     0;
    font-family: "Arial Black", Arial, sans-serif;
    font-size:   clamp( 15px, 2vw, 24px );
    font-weight: 900;
    color:       #004016;
    line-height: 1.25;
}

/* ---------- Responsive ---------- */
@media ( max-width: 767px ) {

    .ssg-fiwa-wrap {
        padding-bottom: 44px;
        padding-right:  40px;
    }

    .ssg-fiwa-border {
        bottom: -8px;
        left:   -8px;
        border-left-width:   6px;
        border-bottom-width: 6px;
    }

    .ssg-fiwa-n1 { bottom: -42px; left: -6px; }
    .ssg-fiwa-n2 { right: -34px; }
    .ssg-fiwa-n3 { right: -34px; }

    .ssg-fiwa-title {
        max-width: 80%;
        bottom:    5%;
        transform: translateX(-5%);
    }

    .ssg-fiwa-badge {
        top: 36%;
    }
}