/* ============================================
   News Teaser Startseite - Responsive Layout
   ============================================ */

/* Header mit Überschrift und Link */
.news-teaser-homepage .has-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.news-teaser-homepage .has-link .h2 {
    margin: 0;
}

.news-teaser-homepage .has-link .arrowed-right {
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
}

/* Text-Kachel mit blauem Hintergrund */
.news-teaser-homepage .square {
    padding: 2.4rem;
    display: grid;
    grid-template-rows: min-content auto min-content;
    gap: 1.5rem;
    min-height: 100%;
    height: 100%;
}

.news-teaser-homepage .background-blue {
    background: #8FA1B5;
    color: var(--leda-font);
}

/* Kategorie Badge */
.news-teaser-homepage .news-category {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* News Titel */
.news-teaser-homepage .square h3.h3 {
    margin: 0;
    color: var(--leda-font);
}

.news-teaser-homepage .square h3.h3 a {
    color: var(--leda-font);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.news-teaser-homepage .square h3.h3 a:hover {
    opacity: 0.8;
}

/* Teaser Text */
.news-teaser-homepage .square p {
    color: var(--leda-font);
    margin: 0.75rem 0 0 0;
    line-height: 1.6;
}

/* Link "zum Artikel" */
.news-teaser-homepage .square .link {
    display: block;
    align-self: end;
}

.news-teaser-homepage .square .link a {
    color: var(--leda-red);
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
/*    transition: transform 0.3s ease; */
}

.news-teaser-homepage .square .link a:hover {
/*    transform: translateX(5px); */
}

.news-teaser-homepage .square .link a.arrowed::after {
    content: " →";
    margin-left: 0.5rem;
}

/* Bild-Kachel */
.news-teaser-homepage .news-image-square {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.news-teaser-homepage .news-image-square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.news-teaser-homepage .news-image-square:hover img {
    transform: scale(1.05);
}

/* Platzhalter falls kein Bild */
.news-teaser-homepage .news-image-placeholder {
    background: #e0e0e0;
    min-height: 400px;
}

/* News Item Container */
.news-teaser-homepage .teaser {
    margin-bottom: 0;
}

/* Sicherstellen dass alle Grid-Kinder die volle Höhe einnehmen */
.news-teaser-homepage .teaser > div {
    display: flex;
    flex-direction: column;
}

.news-teaser-homepage .teaser > div > div {
    flex: 1;
}

/* ============================================
   Abstand bei mehreren Bildern innerhalb einer News
   ============================================ */
.news.news-single .article .news-img-wrap .outer {
    margin-bottom: 1rem;
}


/* ============================================
   DESKTOP: Ab 960px
   ============================================ */
@media (min-width: 960px) {
    /* Quadratische Kacheln auf Desktop */
    .news-teaser-homepage .teaser {
        margin-bottom: 1rem;
    }

    /* Padding für Abstände zwischen Kacheln */
    .news-teaser-homepage .teaser > div:first-child {
        padding-right: 0.5rem;
    }

    .news-teaser-homepage .teaser > div:last-child {
        padding-left: 0.5rem;
    }

    /* Beide Spalten gleich hoch (quadratisch) */
    .news-teaser-homepage .teaser > div {
        min-height: 500px;
    }

    .news-teaser-homepage .news-image-square {
        min-height: 500px;
        aspect-ratio: 1 / 1;
    }

    .news-teaser-homepage .square {
        min-height: 500px;
    }
}

/* ============================================
   MOBILE: Bis 959px
   ============================================ */
@media (max-width: 959px) {
    /* Header auf Mobile */
    .news-teaser-homepage .has-link {
        margin-bottom: 1.5rem !important;
    }

    .news-teaser-homepage .has-link .h2 {
        font-size: 1.5rem;
        width: 100%;
    }

    /* Text-Kachel kann sich in der Höhe anpassen */
    .news-teaser-homepage .square {
        padding: 1.5rem;
        min-height: auto;
    }

    /* Bild-Kachel: feste Höhe für bessere Darstellung */
    .news-teaser-homepage .news-image-square {
        min-height: 300px;
        aspect-ratio: 1 / 1;
    }

    /* Abstand zwischen News-Items auf Mobile */
    .news-teaser-homepage .teaser {
        margin-bottom: 2rem;
    }

    /* Letztes Item ohne Abstand nach unten */
    .news-teaser-homepage .teaser:last-of-type {
        margin-bottom: 0;
    }
}

/* ============================================
   MOBILE: Bis 767px
   ============================================ */
@media (max-width: 767px) {
    .news-teaser-homepage .has-link .h2 {
        padding-left: 0.5rem;
    }

    .news-single .article .news-img-wrap {
        width: 100% !important;
        margin: 0 0 20px 25px !important;
    }

    .news-single .article .news-img-wrap .outer {
        margin-bottom: 10px; !important;
    }

    .news-single .article .news-img-wrap img {
        width: 100% !important;
        height: auto !important;
    }
}


/* ============================================
   Button "Weitere Artikel anzeigen"
   ============================================ */
.news-teaser-homepage .teaser-links {
    clear: both;
}

/* Optional: Anpassung des UK-Button-Danger an LEDA Farbschema */
.news-teaser-homepage .uk-button-danger {
    text-transform: none;
    font-weight: 400;
/*    padding: 0 2rem; */
    margin-bottom: 1rem;
}

/* ============================================
   Arrow Icon für Links
   ============================================ */
.news-teaser-homepage .arrowed-right::after,
.news-teaser-homepage .arrowed::after {
    content: " →";
    display: inline-block;
    margin-left: 0.5rem;
    transition: margin-left 0.3s ease;
}

.news-teaser-homepage .arrowed-right:hover::after,
.news-teaser-homepage .arrowed:hover::after {
    margin-left: 0.75rem;
}



.fireitem img {
    max-width: unset;
    width: 90%;
    height: auto;
}

.fireitem .header h3 a {
    color: #000000;
}

.fireitem .teaser-text {
    text-align: right;
}

.fireitem .teaser-text div p {
    text-align: left;
}

.fireitem .teaser-text p {
    margin-bottom:0;
}

ul.firecategory  {
    padding-left: 0;
}

ul.firecategory li {
    list-style: none;
}

ul.firecategory li a {
    display: none;
}

ul.firecategory li a.allNews, ul.firecategory li ul.firecategory li a{
    display: initial;
}

.leftCol .frame-layout-3 {
    width: 90%;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

.leftCol .frame-layout-3 h2 {
    margin-bottom: 1rem;
}

.leftCol .frame-layout-3 a {
    color: #000000;
}



.news-single .article .header h1 {
    margin-top: 5px;
    margin-left: -4px;
}

.news-single .article .frame p {
    margin: 30px 0;
}

/* ========================================
   LEDA Produktgrid - List View
   ======================================== */

/* Grid Container - wird im List.html Template gesetzt */
.news-teaser-homepage .uk-grid {
    margin-left: -9px; /* Halber Gap für UIKit Grid */
}

.news-teaser-homepage .uk-grid > * {
    padding-left: 9px; /* Halber Gap */
}

/* Produktgrid: UIKit Grid mit 18px Gap */
.news-teaser-homepage .uk-grid-small {
    margin-left: -9px;
}

/* Produkt-Item Container */
.leda-product-item {
    background: #F2F1EC;
    display: flex;
    flex-direction: column;
    height: 100%; /* Wichtig für uk-grid-match */
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/*
.leda-product-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
*/
/* Link im Item - volle Höhe */
.leda-product-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    padding: 1.5rem;
}

.leda-product-link:hover {
    text-decoration: none;
}

/* Bild-Wrapper: Flexibel nach oben, Bild nach unten */
.leda-product-image-wrapper {
    flex: 1; /* Nimmt verfügbaren Platz */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Bild nach unten */
    align-items: center;
    margin-bottom: 1rem;
    position: relative;
    min-height: 200px; /* Mindesthöhe für kleine Bilder */
}

.leda-product-image {
    max-width: 100%;
    height: auto;
    object-fit: contain; /* Bild behält Proportionen */
}

/* KLIMA PLUS Badge (absolut positioniert) */
.leda-klimaplus-badge {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    padding: 0.5rem 0.75rem;
    border-radius: 0 0 8px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.leda-klimaplus-badge img {
    height: 24px;
    width: auto;
}

.leda-klimaplus-count {
    font-size: 0.875rem;
    font-weight: 600;
    color: #666;
}

/* Titel-Wrapper: Feste Höhe für 2 Zeilen, Text beginnt oben */
.leda-product-title-wrapper {
    height: 5.4em; /* 2 Zeilen bei font-size 2.25rem × line-height 1.2 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Text beginnt OBEN, nicht unten */
    text-align: center; /* Zentriert */
}

.leda-product-title {
    margin: 0;
    font-family: 'Quicksand', sans-serif;
    font-size: 2.25rem; /* 36px Desktop */
    font-weight: 400; /* Normal, nicht Bold */
    line-height: 1.2;
    color: #333;

    /* Text beginnt oben, maximal 2 Zeilen */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive Anpassungen */
@media (max-width: 959px) {
    .leda-product-title {
        font-size: 1.5rem; /* 24px Tablet */
    }

    .leda-product-title-wrapper {
        height: 3.6em; /* 2 Zeilen bei 1.5rem × 1.2 */
    }

    .leda-product-link {
        padding: 1rem;
    }

    .leda-data-table .leda-data-row .leda-data-label {
        border-bottom: 0;
        font-weight: 600;
        padding: 1rem 0 0 0;
    }
    .leda-data-table .leda-data-row .leda-data-value {
        padding: 0 0 1rem 0;
    }
}

@media (max-width: 639px) {
    .leda-product-title {
        font-size: 1.25rem; /* 20px Mobil */
    }

    .leda-product-title-wrapper {
        height: 5em;
    }

    .leda-product-image-wrapper {
        min-height: 180px;
    }

    .leda-product-link {
        padding: 1.25rem;
    }
}


/* ========================================
   LEDA Produkt-Detailseite
   ======================================== */

/* Block 1: Header-Bild */
.leda-product-header {
    width: 100%;
    margin: 0;
    padding: 0;
}

.leda-product-header-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Block 2+3: Hellblauer Bereich */
.leda-product-main {
    background: #DFE4DF;
    padding: 4rem 0;
}

/* Linke Spalte: Produktfoto */
.leda-product-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.leda-product-main-image {
    max-width: 100%;
    height: auto;
}

/* Rechte Spalte: Info-Container */
.leda-product-info {
    padding: 2rem 0;
}

.leda-product-info .leda-product-title {
    font-family: 'Quicksand', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.2;
    color: #333;
    margin: 0 0 1.5rem 0;
}

.leda-product-description {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #0D0D0D;
    margin-bottom: 2rem;
}

/* Farbvarianten */
.leda-product-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.leda-color-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.leda-color-icon img {
    display: block;
    height: 60px;
    width: auto;
}

/* Kilowatt-Anzeige */
.leda-product-spec-kilowatt {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.leda-spec-icon img {
    width: 32px;
    height: 32px;
}

.leda-spec-value {
    font-size: 1.25rem;
    color: #0D0D0D;
}

/* Icon-Reihe */
.leda-product-icons {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.leda-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.leda-icon img {
    width: 40px;
    height: 40px;
}

.leda-icon-label {
    font-size: 0.875rem;
    color: #666;
    text-align: center;
}

/* Farbvarianten */
.leda-product-colors {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.leda-color-swatch {
    width: 40px;
    height: 40px;
    border: 2px solid #ccc;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.leda-color-swatch:hover {
    transform: scale(1.1);
    border-color: #999;
}

/* Farbdefinitionen - anpassen nach deinen DB-Werten */
.leda-color-Weiß,
.leda-color-white { background: #FFFFFF; }

.leda-color-Grün,
.leda-color-green { background: #4A7C59; }

.leda-color-Rot,
.leda-color-red { background: #E3000E; }

.leda-color-Schwarz,
.leda-color-black { background: #333333; }

.leda-color-Blau,
.leda-color-blue { background: #2E5A88; }

.leda-neospace-icon {
    vertical-align: middle;
    margin-right: 0.4em;
}

/* Verwandte Produkte */
.leda-related-products {
    margin-bottom: 1.5rem;
}

.leda-related-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--leda-red, #E3000E);
    text-decoration: none;
    font-weight: 600;
    transition: gap 0.2s ease;
}

.leda-related-link:hover {
    gap: 0.75rem;
    text-decoration: none;
}

.leda-related-icon {
    font-size: 1.25rem;
}

/* Technische Details Anker-Link */
.leda-technical-link {
    margin-top: 2rem;
}

.leda-anchor-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--leda-red, #E3000E);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    transition: gap 0.2s ease;
}

.leda-anchor-link:hover {
    gap: 0.75rem;
    text-decoration: none;
}

.leda-arrow {
    font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 959px) {
    .leda-product-main {
        padding: 3rem 0;
    }

    .leda-product-title {
        font-size: 2.25rem;
    }

    .leda-product-info {
        padding: 1.5rem 0;
    }
}

@media (max-width: 639px) {
    .leda-product-main {
        padding: 2rem 0;
    }

    .leda-product-title {
        font-size: 1.75rem;
    }

    .leda-product-icons {
        gap: 1rem;
    }

    .leda-color-swatch {
        width: 35px;
        height: 35px;
    }
}

/* Kilowatt + Energieklasse nebeneinander */
.leda-product-spec-kilowatt {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.leda-energy-icon img {
    display: block;
    height: 20px;
    width: auto;
}


/* Icon-Reihe: Größe */
.leda-product-icons {
    margin-bottom: 1rem;
}

.leda-icon-label {
    font-size: 1rem;
    color: #333;
}

/* Kategorie-Icons */
.leda-category-icons {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.leda-category-icon-item {
    display: contents;
    align-items: center;
}

.leda-category-icon img {
    height: 40px;
    width: auto;
    display: block;
}

.leda-category-label {
    font-size: 1rem;
    color: #333;
    font-weight: 500;
}

/* Farbvarianten */
.leda-product-colors {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.leda-color-icon img {
    height: 60px;
    width: auto;
    display: block;
}


/* ========================================
   Accordion + Downloads Bereich
   ======================================== */

.leda-accordion-downloads {
    background: #C6CEDA;
    padding: 4rem 0;
}

/* Linke Spalte: Accordion */
.leda-accordion-title {
    font-family: 'Quicksand', sans-serif;
    font-size: 3.25rem;
    font-weight: 400;
    line-height: 1.2;
    color: #333;
    margin: 0 0 2rem 0;
}

.leda-accordion {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Accordion Abstände überschreiben (UIKit default: 20px → 8px) */
.leda-accordion > :nth-child(n+2) {
    margin-top: 0 !important;
}

.leda-accordion > li {
    border-top: 1px solid #000;
    padding: 1.5rem 0;
}

.leda-accordion > li:last-child {
    border-bottom: 1px solid #000;
}

.leda-accordion .uk-accordion-title {
    font-family: 'Roboto', sans-serif;
    font-size: 1.75rem;
    font-weight: 400;
    color: #333;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* UIKit Plus/Minus Icons links entfernen */
.leda-accordion .uk-accordion-title::before {
    display: none;
}

/* Eigene Icons rechts: Down Arrow (eingeklappt) */
.leda-accordion .uk-accordion-title::after {
    content: '';
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline fill='none' stroke='%23000' stroke-width='2' points='8 11 15 18 22 11'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
}

/* X Icon (ausgeklappt) */
.leda-accordion .uk-open > .uk-accordion-title::after {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cline fill='none' stroke='%23000' stroke-width='1.4' x1='1' y1='1' x2='19' y2='19'/%3E%3Cline fill='none' stroke='%23000' stroke-width='1.4' x1='19' y1='1' x2='1' y2='19'/%3E%3C/svg%3E");
}

.leda-accordion .uk-accordion-content {
    margin-top: 1rem;
    color: #000;
    line-height: 1.6;
}

.leda-drawings {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.leda-drawing-item img {
    max-width: 100%;
    height: auto;
    display: block;
}

.leda-drawing-title {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.2rem;
}


/* Rechte Spalte: Downloads */
.leda-downloads-title {
    font-family: 'Quicksand', sans-serif;
    font-size: 3.25rem;
    font-weight: 400;
    line-height: 1.2;
    color: #333;
    margin: 0 0 2rem 0;
}

.leda-downloads-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.leda-download-item {
    border-top: 1px solid #000;
    padding: 1.5rem 0;
}

.leda-download-item:last-child {
    border-bottom: 1px solid #000;
}

.leda-download-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: #333;
    transition: color 0.2s ease;
}

.leda-download-link:hover {
    color: var(--leda-red, #E3000E);
    text-decoration: none;
}

.leda-download-title {
    font-size: 1.75rem;
    font-weight: 400;
}

.leda-download-icon img {
    height: 40px; /* 40px statt 24px */
    width: auto;
    display: block;
}

/* Responsive */
@media (max-width: 959px) {
    .leda-accordion-downloads {
        padding: 3rem 0;
    }

    .leda-accordion-title {
        font-size: 1.75rem;
    }

    .leda-accordion .uk-accordion-title {
        font-size: 1.25rem;
    }

    .leda-download-title {
        font-size: 1.25rem;
    }
}

/* Technische Daten Tabelle im Accordion */
.leda-accordion-rte {
    margin-bottom: 1.5rem;
}

.leda-data-table {
    margin-top: 1rem;
}

.leda-data-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2%;
}

.leda-data-label,
.leda-data-value {
    padding: 1rem 0;
    border-bottom: 1px solid #000;
}

/* Letzte Zeile: keine Linie */
.leda-data-row:last-child .leda-data-label,
.leda-data-row:last-child .leda-data-value {
    border-bottom: none;
}

.leda-data-label {
    font-weight: 400;
    color: #333;
}

.leda-data-value {
    /*color: #666;*/
}

/* Mobil: Untereinander mit Abstand */
@media (max-width: 959px) {
    .leda-data-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .leda-data-value {
        margin-bottom: 0.5rem;
    }
}