/* --------------------------------------------------------
 * FINALER CSS-CODE FÜR TYPO3 EXT:NEWS
 * -------------------------------------------------------- */

/* --------------------------------------------------------
 * TEIL 1: OVERLAY UND BILDER (Keine Änderung)
 * -------------------------------------------------------- */

#c174 .news-img-wrap {
    background: transparent !important;
    border-radius: 10px !important;
    overflow: hidden;
}

#c174 .news-img-wrap a::before,
#c174 .news-img-wrap a::after {
    content: '';
    opacity: 0 !important;
    background: transparent !important;
    transition: none !important;
}

#c174 .news-img-wrap a {
    position: relative;
    display: block;
    background-color: rgba(0, 123, 255, 0.7) !important;
    transition: none !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 10px !important;
}

#c174 .news-img-wrap a:hover {
    background-color: rgba(0, 123, 255, 0.7) !important;
}

#c174 .news-img-wrap a img,
#c174 .news-img-wrap picture {
    opacity: 1 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
}

/* --------------------------------------------------------
 * TEIL 2: ARTIKEL-KACHEL (Optimiert für Live-Umgebung)
 * -------------------------------------------------------- */
#c174 .article {
    width: 430px !important;
    height: 570px !important;
    max-width: 430px !important;
    max-height: 570px !important;
    overflow-y: hidden !important;
    background-color: transparent !important;
    border: none !important;
    transition: none !important;
    position: relative;
    z-index: 0;
    box-sizing: border-box !important;
    /* Margin hier reduziert, da der Abstand über den Holder (Teil 6) kommt */
    margin: 0 !important; 
}

#c174 .article:hover {
    background-color: transparent !important;
}

#c174 .article .container.newsItem {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 !important;
}

/* --------------------------------------------------------
 * TEIL 3: TEASERTEXT BEGRENZUNG (Keine Änderung)
 * -------------------------------------------------------- */

#c174 .article .teaser-text div[itemprop="description"] p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* --------------------------------------------------------
 * TEIL 4: SCHRIFTART (Keine Änderung)
 * -------------------------------------------------------- */

#c174,
#c174 .article * {
    font-family: 'Roboto', sans-serif !important;
}

/* --------------------------------------------------------
 * TEIL 5: INDIVIDUELLE FARBGESTALTUNG (Für Workaround beibehalten)
 * -------------------------------------------------------- */

#c174 .article h3 { color: #ffffff !important; }
#c174 .article .teaser-text p { color: #ffffff !important; }
#c174 .news-list-date time { color: #ffffff !important; }

/* Originaler Linktext wird auf transparent gesetzt */
#c174 .article .moreLink a { 
    color: transparent !important; 
    position: relative; 
    display: inline-block; 
}

/* Farbe für den neuen Text beim Hover */
#c174 .article:hover h3,
#c174 .article:hover .teaser-text p,
#c174 .article:hover .news-list-date time,
#c174 .article:hover .moreLink a {
    color: #ffffff !important;
}

/* Neuen Text "Mehr lesen" im Artikel über ::before einfügen */
#c174 .article .moreLink a::before {
    content: "Mehr lesen"; 
    color: #ffffff !important;
}

/* --------------------------------------------------------
 * TEIL 6: FLEX-CONTAINER & ABSTÄNDE (Der Live-Fix)
 * -------------------------------------------------------- */

/* Die Row, die im F12-Code 'g-0' hat, zwingen wir zu Flex-Abständen */
#c174 .news-list-view .row.g-0 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    /* Wir hebeln das g-0 aus, indem wir der Row etwas Luft geben */
    margin-left: 0 !important; 
    margin-right: 0 !important;
}

/* Der entscheidende Teil: Der news-item-holder bekommt den Abstand */
#c174 .news-item-holder {
    /* Rechts 30px Abstand zur nächsten News */
    padding-right: 30px !important; 
    /* Falls sie umbrechen, 30px Abstand nach unten */
    margin-bottom: 30px !important; 
    width: auto !important;
    flex: 0 0 auto !important;
}

/* Den letzten Holder in der Reihe vom Padding befreien, damit es bündig bleibt */
#c174 .news-item-holder:last-child {
    padding-right: 0 !important;
}

/* Falls dein Container #c174 die Kacheln umschließt */
#c174 {
    display: block !important; /* Von Flex auf Block, da die .row darin schon flex ist */
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* --------------------------------------------------------
 * TEIL 7: HEADER & TEASER VERSCHIEBEN (Keine Änderung)
 * -------------------------------------------------------- */

#c174 .article .newsContentDescription {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 60px !important;
}

#c174 .article .newsContentDescription h3,
#c174 .article .newsContentDescription .teaser-text {
    margin-top: 0 !important;
}

/* --------------------------------------------------------
 * TEIL 8: EIN STRICH + HERSTELLER NEWS IN EINER ZEILE
 * -------------------------------------------------------- */

/* Header-Container */
#c174 .news-list-view .newsHeadArea {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 20px;
    padding-bottom: 0;
    justify-content: flex-start !important; 
    width: 100%; 
    max-width: 1400px; 
    margin-left: 30px !important;
    margin-right: auto;
}

/* Container für den H2 */
#c174 .news-list-view .newsDescriptionHeadline {
    flex-grow: 0;
    flex-shrink: 0;
}

/* Grauer Strich ausblenden */
#c174 .news-list-view .bgLine {
    display: none !important;
}

/* Original-H2 verstecken */
#c174 .news-list-view .newsDescriptionHeadline h2 {
    color: transparent !important;
    position: absolute; 
    left: -9999px; 
    margin: 0 !important;
}

/* BASIS-STYLING */
#c174 .news-list-view .newsDescriptionHeadline::before {
    display: block; 
    color: #333;
    font-size: 1.6rem;
    font-weight: 700;
}

/* --------------------------------------------------------
 * STANDARD = DEUTSCH
 * -------------------------------------------------------- */

html[lang="de"] #c174 .news-list-view .newsDescriptionHeadline::before,
html[lang^="de"] #c174 .news-list-view .newsDescriptionHeadline::before {
    content: "Hersteller News";
}

html[lang="de"] #c174 .news-list-view .newsMoreSection .moreLink a::before,
html[lang^="de"] #c174 .news-list-view .newsMoreSection .moreLink a::before {
    content: "Alle News" !important;
    color: #333 !important;
}

/* --------------------------------------------------------
 * ENGLISCH
 * -------------------------------------------------------- */

html[lang="en"] #c174 .news-list-view .newsDescriptionHeadline::before,
html[lang^="en"] #c174 .news-list-view .newsDescriptionHeadline::before {
    content: "Manufacturer News";
}

html[lang="en"] #c174 .news-list-view .newsMoreSection .moreLink a::before,
html[lang^="en"] #c174 .news-list-view .newsMoreSection .moreLink a::before {
    content: "All News" !important;
    color: #333 !important;
}

/* --------------------------------------------------------
 * ORIGINALTEXT "ALLE EVENTS" KOMPLETT AUSBLENDEN
 * -------------------------------------------------------- */

#c174 .news-list-view .newsMoreSection .moreLink a {
    font-size: 0 !important;
    line-height: 0 !important;
    position: relative;
    text-decoration: none !important;
}

/* Pseudo-Text sichtbar machen */
#c174 .news-list-view .newsMoreSection .moreLink a::before {
    font-size: 16px; /* kannst du anpassen */
    line-height: normal;
}


/* --------------------------------------------------------
 * MOBILE ANPASSUNG: LINKSBÜNDIG & PADDING 175PX
 * -------------------------------------------------------- */
@media (max-width: 768px) {

    /* Container: Kacheln selbst zentrieren */
    #c174 {
        flex-direction: column !important;
        align-items: center !important;
        min-width: 0 !important;
        padding: 0 10px !important;
    }

    /* Kachel: Schmal & Flexibel in der Höhe */
    #c174 .article {
        width: 80% !important;
        max-width: 300px !important;
        height: auto !important; 
        max-height: none !important;
        overflow: visible !important;
        margin: 15px auto !important;
        display: block !important;
        position: relative;
    }

    /* Text-Bereich: Linksbündig ausrichten */
    #c174 .article .newsContentDescription {
        display: flex !important;
        flex-direction: column !important;
        /* HIER: Richtet alle Kinder (H3, p, etc.) linksbündig aus */
        align-items: flex-start !important; 
        text-align: left !important;
        
        height: auto !important;
        padding-top: 175px !important; 
        padding-bottom: 30px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        
        position: relative !important;
    }


        /* FIX: Bootstrap Grid komplett neutralisieren (NUR für Headline) */
#c174 .article .newsContentDescription .header {
    all: unset;              /* entfernt ALLE Bootstrap-Einflüsse */
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

    /* Header (H3): Sicherstellen, dass keine alten Margins stören */
    #c174 .article h3 {
        font-size: 0.85rem !important;
        line-height: 1.1rem !important;
        margin: 0 0 6px 0 !important;
        font-weight: bold;
        text-align: left !important;
        width: 100% !important; /* Nutzt volle Breite für Linksbündigkeit */
    }

    /* Teaser-Text: Linksbündig */
    #c174 .article .teaser-text {
        width: 100% !important;
        text-align: left !important;
    }

    #c174 .article .teaser-text p {
        font-size: 0.75rem !important;
        line-height: 1rem !important;
        margin: 0 0 10px 0 !important;
        text-align: left !important;
    }

    /* Datum und "Mehr lesen" Link */
    #c174 .news-list-date time {
        font-size: 0.65rem !important;
        display: block;
        margin-bottom: 4px;
        text-align: left !important;
    }

    #c174 .article .moreLink a {
        font-size: 0.7rem !important;
        text-transform: uppercase;
        font-weight: bold;
        display: inline-block; /* Verhindert Streckung auf volle Breite */
    }
}









/* --------------------------------------------------------
 BEEINFLUSSUNG API HIGHLIGHTS
 * -------------------------------------------------------- */

/* 1. Header-Container (Rahmenbedingungen) */
#c70 .sliderHeadArea {
    display: flex !important;
    align-items: center !important; 
    margin-bottom: 20px; 
    padding-bottom: 0;
    justify-content: flex-start !important; 
    width: 100%; 
    max-width: 1400px; 
    margin-left: 10px !important; 
    margin-right: auto;
    position: relative; 
    /* Gap auf 0 setzen, da der Abstand jetzt über das ::before kommt */
    gap: 0 !important; 
}

/* 2. Originaltext "api Highlights" ausblenden */
#c70 .sliderHeadArea .sliderHeadline {
    color: transparent !important; 
    position: relative; 
    display: block !important; 
    font-size: 0; 
    padding: 0 !important;
    
    /* Vertikale Korrektur */
    margin-top: -17px !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    
    /* Rechter Margin entfernt, da es nicht funktioniert hat */
    margin-right: 0 !important; 
}

/* 3. Neuen formatierten Text "api Highlights" per ::before einfügen */
#c70 .sliderHeadArea .sliderHeadline::before {
    /* 💥 KORREKTUR: Zwei geschützte Leerzeichen (\A0\A0) hinzugefügt 💥 */
    content: "api Highlights\A0\A0"; 
    
    display: block; 
    color: #333;
    font-size: 1.6rem;
    font-weight: 700; 
    font-family: 'Roboto', sans-serif !important; 
    position: relative; 
    padding-bottom: 0 !important;
    border-bottom: none !important;
    line-height: 1.2; 
}

/* 4. Pfeile rechts behalten und nach oben drücken */
#c70 .sliderHeadArea .sliderArrows {
    margin-left: auto !important;
    align-self: center !important;
    position: relative;
    
    /* Vertikale Korrektur */
    margin-top: -15px !important;
}

/* 5. Original-Strich (bgLine) definitiv ausblenden */
#c70 .sliderHeadArea .bgLine {
    display: none !important;
    height: 0 !important; 
    border: none !important; 
}





/* --------------------------------------------------------
 BEEINFLUSSUNG API INFORMIERT
 * -------------------------------------------------------- */

 /* --------------------------------------------------------
 * FINALER CSS-CODE FÜR TYPO3 EXT:NEWS (ID #c2193)
 * ANPASSUNGEN: Kachel-Breite 430px, Horizontaler Rand REDUZIERT (von 100px auf 30px),
 * NEU: Vertikaler Rand (Oben/Unten) reduziert.
 * -------------------------------------------------------- */

/* --------------------------------------------------------
 * TEIL 1: OVERLAY UND BILDER (Keine Änderung)
 * -------------------------------------------------------- */

#c1503 .news-img-wrap {
    background: transparent !important;
    border-radius: 10px !important;
    overflow: hidden;
}

#c1503 .news-img-wrap a::before,
#c1503 .news-img-wrap a::after {
    content: '';
    opacity: 0 !important;
    background: transparent !important;
    transition: none !important;
}

#c1503 .news-img-wrap a {
    position: relative;
    display: block;
    background-color: rgba(0, 123, 255, 0.7) !important;
    transition: none !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 10px !important;
}

#c1503 .news-img-wrap a:hover {
    background-color: rgba(0, 123, 255, 0.7) !important;
}

#c1503 .news-img-wrap a img,
#c1503 .news-img-wrap picture {
    opacity: 1 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
}

/* --------------------------------------------------------
 * TEIL 2: ARTIKEL-KACHEL (FESTE GRÖSSE & VERTIKALER ABSTAND REDUZIERT)
 * KORREKTUR: Horizontaler Margin von 100px auf 30px reduziert.
 * -------------------------------------------------------- */

#c1503 .article {
    width: 430px !important;
    height: 570px !important;
    max-width: 430px !important;
    max-height: 570px !important;
    overflow-y: hidden !important;
    background-color: transparent !important;
    border: none !important;
    transition: none !important;
    position: relative;
    z-index: 0;
    box-sizing: border-box !important;
    margin: 30px 30px !important; 
}

#c1503 .article:hover {
    background-color: transparent !important;
}

#c1503 .article .container.newsItem {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 !important;
}

/* --------------------------------------------------------
 * TEIL 3: TEASERTEXT BEGRENZUNG (2 Zeilen)
 * -------------------------------------------------------- */

#c1503 .article .teaser-text div[itemprop="description"] p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* --------------------------------------------------------
 * TEIL 4: SCHRIFTART
 * -------------------------------------------------------- */

#c1503,
#c1503 .article * {
    font-family: 'Roboto', sans-serif !important;
}

/* --------------------------------------------------------
 * TEIL 5: INDIVIDUELLE FARBGESTALTUNG (TEXT-Farben)
 * -------------------------------------------------------- */

#c1503 .article h3 { color: #ffffff !important; }
#c1503 .article .teaser-text p { color: #ffffff !important; }
#c1503 .news-list-date time { color: #ffffff !important; }
#c1503 .article .moreLink a { color: #ffffff !important; }

#c1503 .article:hover h3 { color: #ffffff !important; }
#c1503 .article:hover .teaser-text p { color: #ffffff !important; }
#c1503 .article:hover .news-list-date time { color: #ffffff !important; }
#c1503 .article:hover .moreLink a { color: #ffffff !important; }

/* --------------------------------------------------------
 * TEIL 6: FLEX / ZENTRIERUNG & BREITE DES CONTAINERS
 * -------------------------------------------------------- */

#c1503 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    min-width: 1400px !important; 
    width: 100% !important; 
    box-sizing: border-box;
    padding: 0 !important; 
}

/* --------------------------------------------------------
 * TEIL 7: HEADER UND TEASER NACH UNTEN VERSCHIEBEN
 * -------------------------------------------------------- */

#c1503 .article .newsContentDescription {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 60px !important; 
}

#c1503 .article .newsContentDescription h3,
#c1503 .article .newsContentDescription .teaser-text {
    Margon-top: 0 !important;
}



/* --------------------------------------------------------
 * MOBILE ANPASSUNG: LINKSBÜNDIG & PADDING 175PX
 * -------------------------------------------------------- */
@media (max-width: 768px) {

    /* Container: Kacheln selbst zentrieren */
    #c1503 {
        flex-direction: column !important;
        align-items: center !important;
        min-width: 0 !important;
        padding: 0 10px !important;
    }

    /* Kachel: Schmal & Flexibel in der Höhe */
    #c1503 .article {
        width: 80% !important;
        max-width: 300px !important;
        height: auto !important; 
        max-height: none !important;
        overflow: visible !important;
        margin: 15px auto !important;
        display: block !important;
        position: relative;
    }

    /* Text-Bereich: Linksbündig ausrichten */
    #c1503 .article .newsContentDescription {
        display: flex !important;
        flex-direction: column !important;
        /* HIER: Richtet alle Kinder (H3, p, etc.) linksbündig aus */
        align-items: flex-start !important; 
        text-align: left !important;
        
        height: auto !important;
        padding-top: 175px !important; 
        padding-bottom: 30px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        
        position: relative !important;
    }

    /* FIX: Bootstrap Grid komplett neutralisieren (NUR für Headline) */
#c1503 .article .newsContentDescription .header {
    all: unset;              /* entfernt ALLE Bootstrap-Einflüsse */
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

    /* Header (H3): Sicherstellen, dass keine alten Margins stören */
    #c1503 .article h3 {
        font-size: 0.85rem !important;
        line-height: 1.1rem !important;
        margin: 0 0 6px 0 !important;
        font-weight: bold;
        text-align: left !important;
        width: 100% !important; /* Nutzt volle Breite für Linksbündigkeit */
    }

    /* Teaser-Text: Linksbündig */
    #c1503 .article .teaser-text {
        width: 100% !important;
        text-align: left !important;
    }

    #c1503 .article .teaser-text p {
        font-size: 0.75rem !important;
        line-height: 1rem !important;
        margin: 0 0 10px 0 !important;
        text-align: left !important;
    }

    /* Datum und "Mehr lesen" Link */
    #c1503 .news-list-date time {
        font-size: 0.65rem !important;
        display: block;
        margin-bottom: 4px;
        text-align: left !important;
    }

    #c1503 .article .moreLink a {
        font-size: 0.7rem !important;
        text-transform: uppercase;
        font-weight: bold;
        display: inline-block; /* Verhindert Streckung auf volle Breite */
    }
}

/* --------------------------------------------------------
 * TEIL 11: BANNER FINALE (Gleiche Höhe & kein Zoom)
 * -------------------------------------------------------- */

/* =========================
   DE (bestehendes Verhalten)
   ========================= */

/* 1. Den TYPO3-Rahmen oben/unten komplett entfernen */
#c85.frame-default {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 100% !important;
}

/* 2. Hintergrund auf Schwarz setzen */
#c85 .tx-sf-banners {
    background-color: #000000 !important;
    height: 100% !important;
    display: flex;
    align-items: stretch;
    border-radius: 12px;
    overflow: hidden;
}

/* 3. Struktur */
#c85 .banner_holder,
#c85 .banner,
#c85 .banner a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100% !important;
    width: 100% !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
}

/* 4. Bild */
#c85 .tx-sf-banners .banner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background-color: #000000 !important;
    display: block;
}


/* =========================
   EN FIX (nur englische Seite)
   ========================= */

/* --------------------------------------------------------
 * TEIL 11: BANNER FINALE – EN HEIGHT REDUCTION
 * -------------------------------------------------------- */

/* Nur englische Seite: Container reduzieren, min. 50% Höhe */
html[lang="en"] .expandableBox04 #c85.frame-default {
    height: 100% !important;   /* Höhe auf 50% reduzieren */
    max-height: 100% !important;
    display: flex !important;
}

/* Banner-Container passt sich an die reduzierte Höhe an */
html[lang="en"] .expandableBox04 #c85 .tx-sf-banners {
    height: 100% !important;  /* nutzt die 50% des Parents */
    display: flex;
    align-items: stretch;
    border-radius: 12px;
    overflow: hidden;
}

/* Link und Bannerstruktur */
html[lang="en"] .expandableBox04 #c85 .banner_holder,
html[lang="en"] .expandableBox04 #c85 .banner,
html[lang="en"] .expandableBox04 #c85 .banner a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100% !important;
    width: 100% !important;
}

/* Bild proportional, füllt den Container */
html[lang="en"] .expandableBox04 #c85 .tx-sf-banners .banner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;  /* Bild wird komplett angezeigt */
    background-color: #000000 !important;
}
/* Entfernt den leeren Anker in EN */
html[lang="en"] .expandableBox04 #c85 > a[id^="c"] {
    display: none !important;
}




/* 1. Header Bereich */
.custom-news-header { 
    display: flex; 
    align-items: center; 
    width: 100%; 
    margin-bottom: 50px; 
    position: relative; 
}

.header-title { 
    font-size: 28px; 
    color: #212529; 
    white-space: nowrap; 
    margin-right: 20px; 
    /* Neu: Manrope + Mittlere Fettschrift */
    font-family: 'Manrope', sans-serif; 
    font-weight: 600; 
}

.header-line-container { 
    flex-grow: 1; 
    position: relative; 
    /* Höhe passend zur Strichdicke */
    height: 2px; 
}

/* Der schwarze Strich daneben - etwas dezenter */
.header-line-actual { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 80vw; 
    /* Auf 2px gesetzt für "weniger fett" */
    height: 2px; 
    background-color: #000000; 
    max-width: 1100px; 
}