/* =============================================================
   dsx.css – deine eigenen Style-Overrides
   Wird NACH dem Vendor-CSS (Mockup) geladen und gewinnt dadurch
   bei gleicher Spezifität die Kaskade. Vendor-Dateien nie direkt ändern.
   ============================================================= */

/* --- Galerien: einheitlich quadratische Kacheln --------------------------- */
/* Das Theme setzt in style.css bereits
     .news-block-two .inner-box .image-box .image img { height: 200px; object-fit: cover; }
   Wir ueberschreiben nur die Hoehe, damit die Kachel quadratisch wird.
   object-fit: cover schneidet Hoch- und Querformate mittig zu, statt sie zu verzerren.
   Bewusst per CSS geloest (serverseitige Bildbearbeitung ist auf dem Server eingeschraenkt). */
.blog-details-content .content-two .news-block .news-block-two .inner-box .image-box .image img,
.project-gallery-section .news-block .news-block-two .inner-box .image-box .image img,
.content-six .news-block .news-block-two .inner-box .image-box .image img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: center;
    display: block;
}
.blog-details-content .content-two .news-block .image-box .image,
.project-gallery-section .news-block .image-box .image,
.content-six .news-block .image-box .image {
    margin: 0;
    overflow: hidden;
}
/* Abstand zwischen den Kacheln */
.blog-details-content .content-two .news-block,
.project-gallery-section .news-block,
.content-six .news-block {
    margin-bottom: 30px;
}

/* --- News-Detail: Kopfleiste mit Beitragsbild ----------------------------- */
/* Redaktionsfotos sind oft hell, deshalb ein dunkles Overlay und weisse
   Schrift, damit der Titel immer lesbar bleibt. */
.page-title.page-title-news .bg-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20,22,25,.85) 0%, rgba(20,22,25,.55) 55%, rgba(20,22,25,.35) 100%);
}
.page-title.page-title-news .bg-layer {
    position: absolute;
    inset: 0;
}
.page-title.page-title-news .content-box h1 {
    color: #fff;
    font-size: 40px;
    line-height: 1.25;
    max-width: 800px;
}
.page-title.page-title-news .bread-crumb li,
.page-title.page-title-news .bread-crumb li a,
.page-title.page-title-news .bread-crumb li span,
.page-title.page-title-news .bread-crumb li i {
    color: #fff;
}
@media (max-width: 767px) {
    .page-title.page-title-news .content-box h1 { font-size: 28px; }
}

/* --- News-Detail: Initialbuchstabe wie im Mockup -------------------------- */
/* Im Mockup ist der erste Buchstabe von Hand in ein <span> gesetzt. Aus dem
   RTE kommt kein span, deshalb per ::first-letter nachgebaut. */
.blog-details-content .content-one .text-box > p:first-child::first-letter {
    float: left;
    margin: 6px 15px 0 0;
    padding: 4px 12px;
    background-color: var(--theme-color);
    color: #fff;
    font-family: var(--title-font);
    font-size: 30px;
    line-height: 32px;
    font-weight: 600;
}
/* Der Theme-Einzug von 60px wird nicht mehr gebraucht */
.blog-details-content .content-one .text-box p:first-child {
    padding-left: 0;
}

/* --- News-Detail: Kopfbild mittig ausrichten ------------------------------ */
.page-title.page-title-news .bg-layer {
    background-position: center center;
    background-size: cover;
}

/* --- Footer: Zertifikat statt Newsletter-Anmeldung ------------------------ */
.main-footer .footer-bottom .middle-column .footer-cert {
    margin: 0;
    text-align: center;
}
.main-footer .footer-bottom .middle-column .footer-cert img {
    /* deutlich kleiner – ca. ein Drittel der urspruenglichen Groesse */
    max-height: 220px;
    width: auto;
    max-width: 100%;
    display: inline-block;
}

/* --- Produkte/Leistungen (Startseite): gleiche Kartenhoehe ---------------- */
/* Die Karten sind unterschiedlich lang, je nach Textmenge. Flexbox zieht sie
   auf die Hoehe der laengsten Karte; das Icon bleibt unten buendig. */
.products-section .row {
    display: flex;
    flex-wrap: wrap;
}
.products-section .product-column {
    display: flex;
}
.products-section .product-column .product-block-one,
.products-section .product-column .product-block-one .inner-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
/* Icon-Kreis und Pfeil-Button ans untere Ende schieben */
.products-section .product-block-one .inner-box .icon-box {
    margin-top: auto;
}