/* ===== FUNDAMENTALS & RESET ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ===== CORPORATE DESIGN VARIABLEN ===== */
:root {
    /* Farben */
    --ws-blau: #00599d;
    --ws-orange: #fd7e14;
    --ws-text-dunkel: #333333;
    --ws-text-hell: #666666;
    --ws-grau-hell: #f7f7f7;
    --ws-border: #e0e0e0;
    --ws-grau-mittel: #bbbbbb; 
    --ws-dunkelbeige: #F1E2CD; 
    --ws-font: sans-serif;

    /* Globale Abstände */
    --abstand-lg: 1em;
    --abstand-md: 0.75em;
    --abstand-sm: 0.5em;
    --abstand-xs: 0.25em;
}

/* ===== GRUNDLAGEN ===== */
body {
    font-family: var(--ws-font);
    color: var(--ws-text-hell);
    line-height: 1.3;
    background-color: #fff;
    font-size: 14px;
}

/* ===== CONTAINER & LAYOUT ===== */
.ws-produkt-container {
    max-width: 1200px;
    margin: var(--abstand-lg) auto;
    padding: var(--abstand-sm);
}

/* Die flexible Zeile als Basis für das Layout */
.ws-zeile {
    display: flex;
    flex-wrap: wrap; 
    gap: var(--abstand-lg);
    margin-bottom: var(--abstand-lg);
}
.ws-zeile:last-of-type {
    margin-bottom: 0;
}


/* Jede Box in einer Zeile ist flexibel. DIES IST DIE ALLGEMEINE REGEL */
.ws-zeile > .ws-box {
    flex: 1 1 300px; 
}


/* ===== ALLGEMEINE BOX-GESTALTUNG ===== */
.ws-box {
    background-color: #fff;
    border: 1px solid var(--ws-border);
    border-radius: 5px;
    padding: var(--abstand-md);
}

.ws-zeile > .ws-box {
    margin-bottom: 0; 
}

/* ===== HEADER & ÜBERSCHRIFTEN ===== */
.ws-produkt-header {
    margin-bottom: var(--abstand-lg);
}

h1 {
    font-size: 1.7em;
    line-height: 1.2;
    font-weight: 900;
    color: var(--ws-text-dunkel);
    margin: 0 0 var(--abstand-xs) 0; 
}
.slogan {
    margin: 0;
}
h2 {
    font-size: 1.6em;
    font-weight: 700;
    color: var(--ws-blau);
    border-bottom: 2px solid var(--ws-border);
    padding-bottom: var(--abstand-xs);
    margin-top: 0;
    margin-bottom: var(--abstand-sm);
}
h3 {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--ws-text-dunkel);
    margin-top: 0;
}

h4 {
    font-size: 1.1em;
    color: var(--ws-text-dunkel);
    margin: 0;
}

/* ===== MODIFIER-KLASSEN FÜR BOXEN ===== */
.ws-box--highlight {
    background-color: var(--ws-orange);
    color: #ffffff;
    border: none;
    padding: 0.4em var(--abstand-md);
}

.ws-box--highlight .slogan {
    color: #ffffff;
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.2;
}

.ws-box--has-banner {
    padding: 0;
    overflow: hidden; 
    display: flex;
    flex-direction: column;
}
.ws-box-header-banner {
    background-color: var(--ws-orange);
    color: #fff;
    padding: 0.4em var(--abstand-md);
    margin: 0;
    border-bottom: none;
    font-size: 1.2em;
    line-height: 1.2;
    font-weight: 700;
}
.ws-box-content {
    padding: var(--abstand-md);
}


/* ===== BLOCK-SPEZIFISCHES STYLING ===== */
.ws-zeile > .ws-bild-box {
    flex: 1; 
    background-color: transparent;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ws-bild-box img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.ws-zeile > .ws-kurztext-box {
    background-color: var(--ws-dunkelbeige);
    border: none;
    flex: 2;
}

/* Format-spezifische Layouts für die Bild/Text-Zeile */
.format-hochformat > .ws-bild-box { flex: 1; }
.format-hochformat > .ws-kurztext-box { flex: 2; }

.format-breitformat > .ws-bild-box { flex: 1; }
.format-breitformat > .ws-kurztext-box { flex: 1; }

.format-quadrat > .ws-bild-box { flex: 2; }
.format-quadrat > .ws-kurztext-box { flex: 3; }


.kurztext-banner {
    margin-bottom: var(--abstand-md);
}

.kurztext-banner img {
    max-width: 100%;
    height: auto;
    display: block;
}

.artikelnummer {
    font-size: 0.9em;
    color: var(--ws-text-hell);
    margin-bottom: var(--abstand-sm);
    display: block;
    font-weight: 900;
}

.kurztext {
    margin-top: 0;
    margin-bottom: var(--abstand-sm);
    line-height: 1.3;
}
.kurztext:last-of-type {
    margin-bottom: 0; 
}

strong {
    font-weight: 900;
    color: var(--ws-text-dunkel);
}

.kurztext-garantie-banner {
    margin: var(--abstand-md) 0 0 0;
}
.kurztext-garantie-banner img {
    max-width: 100%;
    height: auto;
    display: block;
}

.kurztext-garantie-banner figcaption {
    font-size: 0.7em;
    color: var(--ws-text-hell);
    margin-top: var(--abstand-xs);
    text-align: left;
}

.ws-box-content ul,
.ws-box-content p {
    margin-bottom: var(--abstand-sm);
}
.ws-box-content ul:last-child,
.ws-box-content p:last-child {
    margin-bottom: 0;
}

.ws-sub-header {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--ws-text-dunkel);
    margin-top: var(--abstand-lg);
    margin-bottom: var(--abstand-sm);
}
.technische-daten-tabelle {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    table-layout: fixed;
}
.technische-daten-tabelle th,
.technische-daten-tabelle td {
    padding: var(--abstand-xs) var(--abstand-sm);
    border: none;
    background-color: var(--ws-grau-mittel);
    border-radius: 3px;
    box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.6), 
                2px 2px 5px rgba(0, 0, 0, 0.15);
    width: 50%;
}
.technische-daten-tabelle td {
    font-weight: 700;
    text-align: right;
}
.technische-daten-tabelle th {
    font-weight: 400;
    color: var(--ws-text-dunkel);
    text-align: left;
}
#techdaten .ws-box-content {
    padding: 0;
}
.ws-fussnote {
    font-size: 0.8em;
    font-style: italic;
    margin-top: var(--abstand-md);
    padding: 0 var(--abstand-sm) var(--abstand-xs); 
}

/* Spezifisches Layout für die Daten/Download-Zeile */
#techdaten {
    flex: 7;
}
#downloads {
    flex: 3;
}

.versand-header {
    display: flex;
    align-items: center;
    gap: 1.5em;
    margin-bottom: var(--abstand-md);
}
.versand-header img {
    height: 120px;
    width: auto;
}

.versand-link-container {
    margin-top: var(--abstand-md);
}
.download-liste a,
.versand-link-container a {
    color: var(--ws-blau);
    text-decoration: none;
    font-weight: 700;
}
.download-liste a:hover,
.versand-link-container a:hover {
    text-decoration: underline;
}

.versand-kosten-container {
    margin-top: var(--abstand-md);
}


/* ===== FUSSBEREICH ===== */
/* Ist aktuell leer */

/* ===== ZUBEHÖR-GRID ===== */
.zubehoer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--abstand-lg);
}
.zubehoer-karte {
    background-color: var(--ws-dunkelbeige);
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ws-border);
}
.zubehoer-karte img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.zubehoer-karte-text {
    padding: var(--abstand-md);
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}
.zubehoer-artnr {
    font-size: 0.9em;
    color: var(--ws-text-hell);
}
.zubehoer-beschreibung {
    flex-grow: 1; 
    margin: var(--abstand-sm) 0;
}

/* Styling für Piktogramme */
.piktogramm-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-md);
    margin-bottom: var(--abstand-md);
}
.piktogramm {
    height: 80px;
    width: auto;
}
.piktogramm:first-child {
    height: 40px;
}

/* ===== VERGLEICHSTABELLE ===== */
.vergleichstabelle-container {
    overflow-x: auto; 
    padding-bottom: var(--abstand-sm);
}
.vergleichstabelle {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
    font-size: 0.8em;
    min-width: 800px;
    table-layout: fixed;
}

.vergleichstabelle + .vergleichstabelle {
    margin-top: var(--abstand-lg);
}
.vergleichstabelle th, 
.vergleichstabelle td {
    padding: var(--abstand-sm) var(--abstand-md);
    border: 1px solid var(--ws-border);
    text-align: center;
    white-space: nowrap;
}
.vergleichstabelle thead tr {
    background-color: var(--ws-orange);
    color: #fff;
    font-weight: 700;
}
.vergleichstabelle tbody tr:nth-of-type(even) {
    background-color: var(--ws-grau-hell);
}
/* KORRIGIERT: Einheitliche Spaltenbreiten für beide Tabellen */
.vergleichstabelle th:first-child,
.vergleichstabelle td:first-child {
    font-weight: 700;
    color: var(--ws-text-dunkel);
    white-space: normal;
    text-align: left;
    background-color: #fff;
    width: 22%; /* <<< GEÄNDERT */
}
.vergleichstabelle th:not(:first-child),
.vergleichstabelle td:not(:first-child) {
    width: 13%; /* <<< GEÄNDERT */
}

/* Responsive Anpassung für die Vergleichstabelle */
@media screen and (max-width: 760px) {
    .vergleichstabelle thead {
        display: none;
    }
    .vergleichstabelle, .vergleichstabelle tbody, .vergleichstabelle tr, .vergleichstabelle td {
        display: block;
        width: 100% !important;
    }
    .vergleichstabelle tr {
        margin-bottom: var(--abstand-lg);
        border: 1px solid var(--ws-border);
        border-radius: 5px;
        overflow: hidden;
    }
    .vergleichstabelle td {
        text-align: right;
        padding-left: 50%;
        position: relative;
        border: none;
        border-bottom: 1px solid var(--ws-border);
    }
    .vergleichstabelle td:last-child {
        border-bottom: 0;
    }
    .vergleichstabelle td::before {
        content: attr(data-label);
        position: absolute;
        left: var(--abstand-sm);
        width: calc(50% - var(--abstand-md));
        padding-right: var(--abstand-sm);
        white-space: nowrap;
        text-align: left;
        font-weight: 700;
        color: var(--ws-text-dunkel);
    }
}


/* ===== HILFSKLASSEN & RESPONSIVITÄT ===== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ===== Styling für Bilder in der Vergleichstabelle ===== */
.vergleichstabelle .produktbild-zelle {
    vertical-align: middle;
    padding: var(--abstand-xs);
}

.vergleichstabelle .produktbild-zelle img {
    width: 60%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 4px;
}

/* Hintergrundfarbe der Bildzeile anpassen, falls sie als "gerade" Zeile gilt */
.vergleichstabelle tbody tr.produktbild-zeile:nth-of-type(even) {
    background-color: #fff; 
}

/* Zeilenhöhe für die Datenzeilen in der Vergleichstabelle reduzieren */
.vergleichstabelle tbody tr:not(.produktbild-zeile) td {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

/* Ersetzt den alten Block in der artikel.css für absolute Symmetrie */
.ws-sub-header--banner {
    background-color: var(--ws-orange); /* #fd7e14 */
    color: #fff;
    padding: 0.4em var(--abstand-md); /* Exakter Wert aus .ws-box-header-banner */
    margin-bottom: 0;
    border-radius: 4px;
    font-size: 1.2em; /* Exakter Wert aus .ws-box-header-banner */
    line-height: 1.2; /* Exakter Wert aus .ws-box-header-banner */
    font-weight: 700;
    display: block;
}

/* Stil für den optionalen Slogan über der Vergleichstabelle */
.ws-info-slogan {
    text-align: center;
    font-size: 1.3em;
    font-style: italic;
    color: var(--ws-orange);
    font-weight: 700;
    padding: var(--abstand-md) 0;
    margin: var(--abstand-lg) 0;
    border-top: 1px solid var(--ws-border);
    border-bottom: 1px solid var(--ws-border);
}

/* Optionale Komponente: Merkmals-Liste */
.ws-feature-list {
    margin-bottom: var(--abstand-lg);
    padding-bottom: var(--abstand-lg);
    border-bottom: 1px solid var(--ws-border);
}

.ws-feature-list:last-child {
    margin-bottom: 0; /* Kein Abstand, wenn es das letzte Element in der Box ist */
}

.feature-list-title {
    font-weight: 600;
    font-size: 1.1em;
    color: var(--ws-orange);
    margin-top: 0;
    margin-bottom: var(--abstand-sm);
}

.ws-feature-list ul {
    list-style: none;
    padding-left: 2.5em;
    margin: 0;
}

.ws-feature-list li {
    padding-left: 1.5em; 
    position: relative;
    margin-bottom: 0.07em;
    line-height: 1.4;
}

.ws-feature-list li::before {
    content: '✔'; /* Checkmark-Icon */
    color: var(--ws-orange);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 1px;
}

/* Optionale Komponente: Galerie-Grid */
.ws-gallery-grid {
    display: grid;
    /* Spalten: ca. 19% | 62% | 19% */
    grid-template-columns: 1.075fr 3.55fr 1.075fr; 
    gap: var(--abstand-lg);
    margin-bottom: var(--abstand-lg);
}

.gallery-column {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-md);
}

.gallery-column img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid var(--ws-border);
}

/* Spezifische Seitenverhältnisse für die Bilder */
.gallery-column.left img,
.gallery-column.right img {
    aspect-ratio: 2 / 3;
}

.gallery-column.middle img {
    aspect-ratio: 1 / 1.21;
}

/* Styling für die mittlere Spalte mit Textfeld */
.gallery-column.middle {
    justify-content: space-between; 
}

.gallery-text {
    background-color: var(--ws-orange);
    color: #fff;
    border: 1px solid var(--ws-orange);
    padding: var(--abstand-xs) var(--abstand-md) var(--abstand-md) var(--abstand-md);
    border-radius: 4px;
    margin-bottom: var(--abstand-md);
    font-weight: 600;
    font-size: 1.3em;
    text-align: center;
}

.gallery-text p {
    margin: 0;
}

/* Responsive Anpassung für schmale Bildschirme */
@media screen and (max-width: 800px) {
    .ws-gallery-grid {
        grid-template-columns: 1fr; /* Alle Spalten untereinander */
    }
}

/* Stellt sicher, dass die seitlichen Spalten im Galerie-Grid die volle Höhe ausnutzen */
.gallery-column.left,
.gallery-column.right {
    justify-content: space-between;
}

/* Optionale Komponente: Streifen mit quadratischen Fotos */
.ws-photo-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--abstand-md);
    margin-bottom: var(--abstand-lg);
}

.ws-photo-strip img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--ws-border);
}

/* Responsive Anpassung für den Foto-Streifen */
@media screen and (max-width: 800px) {
    .ws-photo-strip {
        /* 3 Spalten auf Tablets */
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 500px) {
    .ws-photo-strip {
        /* 2 Spalten auf Smartphones */
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Stil für eine Hinweis-Box */
.ws-notice {
    background-color: var(--ws-dunkelbeige);
    border: 1px solid #e0caad;
    border-radius: 4px;
    padding: var(--abstand-md);
}

.ws-notice p {
    margin: 0;
    color: var(--ws-text-dunkel);
}

/* Stil für das Bild in der Download-Box */
.download-promo-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    margin-top: 4em;
}

/* Abstand und Styling für die Download-Liste */
.download-liste {
    margin-top: 2em;
    list-style: none;
    padding-left: 0;
}

.download-liste li:not(:last-child) {
    margin-bottom: var(--abstand-sm);
}

/* ============================================= */
/* ===== STILE FÜR "WIR ÜBER UNS"-SEITE ===== */
/* ============================================= */

/* --- FARB- & SCHRIFT-VARIABLEN --- */
:root {
    --color-primary-orange: #fd7e14; /* Ihr Standard-Orange */
    --color-text-dark: #333333;       /* Dunkles Grau für Text */
    --color-text-light: #555555;      /* Helleres Grau für Fließtext */
    --color-background-gray: #f4f4f4; /* Sehr helles Grau für Hintergründe */
    --color-border-gray: #dddddd;     /* Grau für Ränder */
    --font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- GRUNDLAYOUT-CONTAINER --- */
.about-container {
    font-family: var(--font-sans-serif);
    max-width: 900px; /* Maximale Breite für bessere Lesbarkeit */
    margin: 40px auto; /* Zentriert den Container */
    padding: 20px;
    color: var(--color-text-dark);
}

/* --- TYPOGRAFIE --- */
.about-container h1, 
.about-container h2 {
    color: var(--color-primary-orange); /* Orange für Überschriften */
    margin-bottom: 20px;
    font-weight: 700;
}

.about-container h1 {
    font-size: 2.5em; /* 40px */
    line-height: 1.2;
    border-bottom: 3px solid var(--color-background-gray);
    padding-bottom: 20px;
}

.about-container h2 {
    font-size: 1.8em; /* 28px */
    margin-top: 40px;
}

.about-container p {
    font-size: 1em; /* 16px */
    line-height: 1.7;
    color: var(--color-text-light);
    margin-bottom: 20px;
}

.about-container strong {
    color: var(--color-text-dark);
}

/* --- SPEZIALGEBIETE-LISTE --- */
.about-container ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 20px;
}

.about-container ul li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 10px;
    font-size: 1em;
}

.about-container ul li::before {
    content: '✓'; /* Haken-Symbol */
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary-orange);
    font-weight: bold;
}

/* --- FOTO-PLATZHALTER --- */
/* Allgemeiner Stil für alle Platzhalter */
.image-placeholder {
    background-color: var(--color-background-gray);
    border: 1px dashed var(--color-border-gray);
    position: relative;
    width: 100%;
    margin: 20px 0 30px 0;
    box-sizing: border-box; /* Wichtig für korrekte Breitenberechnung */
}

/* Erzwingt das 3:2 Seitenverhältnis */
.ratio-3-2 {
    padding-top: 66.66%; /* 2 geteilt durch 3 = 66.66% */
}

/* Zentriert den Text im Platzhalter */
.image-placeholder span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 1em;
    font-weight: bold;
}

/* --- RASTER FÜR ZWEI FOTOS NEBENEINANDER --- */
.image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei Spalten gleicher Breite */
    gap: 20px; /* Abstand zwischen den Bildern */
}

/* --- RESPONSIVE ANPASSUNG FÜR MOBILE GERÄTE --- */
@media (max-width: 600px) {
    .image-grid {
        grid-template-columns: 1fr; /* Bilder untereinander auf kleinen Bildschirmen */
    }

    .about-container h1 {
        font-size: 2em; /* Kleinere Schrift für H1 */
    }
    .about-container h2 {
        font-size: 1.5em; /* Kleinere Schrift für H2 */
    }
}
/* Anpassung für bündige Banner in der Kurztext-Box */
.ws-kurztext-box {
    padding: 0; /* Entfernt den Innenabstand von der Hauptbox */
}

.kurztext-content {
    padding: var(--abstand-md); /* Fügt den Innenabstand für den Textinhalt wieder hinzu */
}
/* Entfernt den Abstand unter dem letzten Textabschnitt in der Kurztext-Box */
.kurztext-content > .kurztext:last-child {
    margin-bottom: 0;
}
/* Styling für den "Zum Produkt"-Button auf Zubehörkarten */
.zubehoer-button {
    display: block;
    background-color: #666; /* Geändert auf Grau */
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    padding: var(--abstand-sm) var(--abstand-md);
    margin-top: auto; /* Schiebt den Button nach unten */
    border-bottom-left-radius: 5px; /* Passt die Ecken an die Karte an */
    border-bottom-right-radius: 5px;
    transition: all 0.2s ease-in-out;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2);
}

.zubehoer-button:hover {
    background-color: #555; /* Geändert auf dunkleres Grau */
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.zubehoer-button:active {
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}
/* Optionale Komponente: Allgemeiner Info-Block */
.ws-info-block {
    background-color: var(--ws-dunkelbeige);
    border: 1px solid #e0caad;
    border-radius: 4px;
    padding: var(--abstand-md);
    margin-top: auto;
}
.ws-info-block .info-block-title {
    margin-top: 0;
    margin-bottom: 0; /* Vorerst kein Abstand, da noch kein Inhalt da ist */
    font-size: 1.1em;
    font-weight: 700;
    color: var(--ws-text-dunkel);
}
/* Styling für das Grid im Info-Block */
.info-block-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1.5fr; /* Vier Spalten mit angepassten Breiten */
    gap: var(--abstand-md);
    align-items: center; /* Vertikale Zentrierung */
    margin-top: var(--abstand-md);
}

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

/* Styling für die Definitionsliste (Maße, Gewicht) */
.info-definitions {
    margin: 0;
    font-size: 0.9em;
}

.info-definitions div {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e0caad;
    padding: var(--abstand-xs) 0;
}

.info-definitions dt { /* Begriff, z.B. "Länge:" */
    font-weight: 600;
}

.info-definitions dd { /* Wert, z.B. "1000 mm" */
    margin: 0;
    font-weight: 700;
    color: var(--ws-text-dark);
}
#lieferumfang .ws-box-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
/* Layout für den Inhaltsbereich der Lieferumfang-Box */
#lieferumfang .ws-box-content {
    display: flex;
    flex-direction: column; /* Ordnet die Elemente (Liste, Info-Box) untereinander an */
    flex-grow: 1; /* Sorgt dafür, dass der Bereich den verfügbaren Platz ausfüllt */
}

/* Schiebt die Info-Box innerhalb des Lieferumfangs nach unten */
#lieferumfang .ws-info-block {
    margin-top: auto; /* Nutzt den gesamten freien Platz über sich und schiebt sich so nach unten */
}
/* Styling für den optionalen SEO-Textblock */
.ws-seo-text {
    padding-top: var(--abstand-lg);
    margin-top: var(--abstand-lg);
    border-top: 2px solid var(--ws-border);
}

.ws-seo-text p:not(:last-child) {
    margin-bottom: var(--abstand-md);
}
/* Styling für die Buttons in der Vergleichstabelle */
.ws-table-button {
    display: inline-block;
    padding: var(--abstand-xs) var(--abstand-sm);
    background-color: #666;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: 700;
    transition: background-color 0.2s;
    white-space: nowrap; 
}

.ws-table-button:hover {
    background-color: #555;
}

/* ============================================================ */
/* ===== MOBILE OPTIMIERUNG (FIX FÜR SMARTPHONES) ============ */
/* ============================================================ */

/* Greift ab Tablet-Größe und kleiner (900px) */
@media screen and (max-width: 900px) {
    
    /* 1. LAYOUT-FIX: Boxen untereinander zwingen */
    .ws-zeile {
        flex-direction: column; /* Stapelt die Elemente vertikal */
        gap: var(--abstand-md);
        margin-bottom: var(--abstand-md);
    }

    /* Damit die Boxen die volle Breite nutzen */
    .ws-zeile > .ws-box,
    .ws-zeile > .ws-bild-box,
    .ws-zeile > .ws-kurztext-box {
        width: 100%;
        flex: 1 1 auto;
        margin-right: 0;
    }

    /* Speziell für die Produkt-Header Bilder */
    .ws-bild-box img {
        max-height: 400px; /* Verhindert riesige Bilder auf dem Handy */
        object-fit: contain;
    }

    /* 2. TABELLEN-FIX: Die 800px Sperre aufheben */
    /* Das behebt das "Zerschießen" des Layouts */
    .vergleichstabelle {
        min-width: 0 !important; /* WICHTIG: Hebt die 800px Grenze auf */
        width: 100%;
        font-size: 0.9em; /* Schrift etwas kleiner für mehr Platz */
    }
    
    /* Container scrollbar machen, falls Inhalte trotzdem zu breit sind */
    .vergleichstabelle-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Weiches Scrollen auf iPhones */
    }
}

/* Greift speziell für Smartphones (600px und kleiner) */
@media screen and (max-width: 600px) {

    /* 3. GALERIE & GRID FIXES */
    /* Die Galerie-Spalten untereinander setzen */
    .ws-gallery-grid {
        display: flex;
        flex-direction: column;
        gap: var(--abstand-md);
    }
    
    .gallery-column.left, 
    .gallery-column.middle, 
    .gallery-column.right {
        width: 100%;
    }

    /* Die Info-Box (Palette/Gewicht) aufräumen */
    /* Vorher 4 Spalten, jetzt untereinander */
    .info-block-grid {
        display: flex;
        flex-direction: column;
        gap: var(--abstand-sm);
    }

    .info-grid-item {
        width: 100%;
        text-align: center;
    }
    
    .info-grid-item img {
        margin: 0 auto; /* Bilder zentrieren */
        max-width: 150px; /* Nicht zu riesig werden lassen */
    }

    /* Definitionslisten (Länge/Breite) schön gestalten */
    .info-definitions div {
        padding: 10px 0; /* Mehr Finger-Platz */
    }

    /* 4. VERGLEICHSTABELLE KARTEN-ANSICHT VERBESSERN */
    /* Eure bestehende Logik war gut, wurde aber von min-width blockiert */
    .vergleichstabelle td {
        padding-left: 10px !important; /* Text nicht so stark einrücken */
        text-align: left !important;   /* Linksbündig liest sich mobil besser */
        display: flex;                 /* Flexbox für Label und Wert */
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    /* Das Label (data-label) etwas hübscher machen */
    .vergleichstabelle td::before {
        position: static !important; /* Nicht absolut, damit es nicht überlappt */
        width: 100% !important;
        margin-bottom: 5px;
        color: var(--ws-orange); /* Dein Orangeton #fd7e14 */
        text-transform: uppercase;
        font-size: 0.8em;
    }
    
    /* Bilder in der Tabelle zentrieren */
    .vergleichstabelle .produktbild-zelle img {
        width: 100%;
        max-width: 200px;
    }
}

/* ============================================================ */
/* ===== TABELLE AUF SMARTPHONE AUSBLENDEN =================== */
/* ============================================================ */

/* Bei Bildschirmen kleiner als 768px (typische Handy/Tablet Grenze) */
@media screen and (max-width: 768px) {
    
    /* 1. Den Container mit den Tabellen ausblenden */
    .vergleichstabelle-container {
        display: none !important;
    }

    /* Die Regel für .ws-sub-header--banner wurde hier ENTFERNT, 
       damit FAQ und andere Überschriften sichtbar bleiben. */
}
    /* Optional: Falls du stattdessen einen Hinweis anzeigen willst */
    /* Du müsstest dazu im HTML ein <p class="mobile-hinweis">...Text...</p> einfügen */
    .mobile-hinweis {
        display: block;
        color: var(--ws-orange);
        font-weight: bold;
        text-align: center;
        padding: 1rem;
        border: 1px solid var(--ws-border);
    }
}

/* ============================================================ */
/* ===== FAQ / ACCORDION STYLING ============================== */
/* ============================================================ */

.ws-faq-section {
    margin-top: var(--abstand-lg);
    border-top: 1px solid var(--ws-border);
    padding-top: var(--abstand-lg);
}

.ws-faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-sm);
}

.ws-faq-item {
    background-color: #fff;
    border: 1px solid var(--ws-border);
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Hover-Effekt für die ganze Box */
.ws-faq-item:hover {
    border-color: var(--ws-orange);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Wenn aufgeklappt: Oranger Rahmen */
.ws-faq-item[open] {
    border-color: var(--ws-orange);
    box-shadow: 0 4px 10px rgba(253, 126, 20, 0.15);
}

/* Die klickbare Frage */
.ws-faq-question {
    list-style: none; /* Standard-Dreieck entfernen */
    padding: var(--abstand-md);
    font-weight: 700;
    color: var(--ws-text-dunkel);
    cursor: pointer;
    position: relative;
    padding-right: 3em; /* Platz für das Icon */
    background-color: var(--ws-grau-hell);
    display: flex;
    align-items: center;
}

/* Webkit-Fix um das Standard-Dreieck sicher zu entfernen */
.ws-faq-question::-webkit-details-marker {
    display: none;
}

/* Das Plus / Minus Icon */
.ws-faq-question::after {
    content: '+';
    position: absolute;
    right: var(--abstand-md);
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    color: var(--ws-orange);
    font-weight: 900;
    line-height: 1;
    transition: transform 0.2s ease;
}

/* Icon drehen/ändern wenn geöffnet */
.ws-faq-item[open] .ws-faq-question::after {
    content: '−'; /* Ein echtes Minus-Zeichen, kein Bindestrich */
    color: #fff;
}

/* Hintergrund der Frage ändern wenn geöffnet */
.ws-faq-item[open] .ws-faq-question {
    background-color: var(--ws-orange);
    color: #fff;
}

/* Der Antwort-Bereich */
.ws-faq-answer {
    padding: var(--abstand-md);
    background-color: #fff;
    color: var(--ws-text-light);
    line-height: 1.6;
    border-top: 1px solid rgba(0,0,0,0.05);
    animation: fadeIn 0.3s ease-in-out;
}

.ws-faq-answer p {
    margin: 0;
}

/* Kleine Animation beim Öffnen */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile Optimierung für FAQ */
@media screen and (max-width: 600px) {
    .ws-faq-question {
        padding: var(--abstand-sm);
        padding-right: 2.5em;
        font-size: 0.95em;
    }
}

/* ============================================================ */
/* ===== WARUM GEISLER SEKTION STYLING (V2 - Linear) ========== */
/* ============================================================ */

.ws-why-buy-section {
    margin-top: var(--abstand-lg);
    margin-bottom: var(--abstand-lg);
}

.ws-why-content {
    padding: var(--abstand-sm) 0;
    line-height: 1.5;
    color: var(--ws-text-dunkel);
}

/* Abstand zwischen den Textblöcken */
.ws-text-block {
    margin-top: var(--abstand-lg);
}

/* Die Feature-List Klasse hat normal einen Unterstrich, den entfernen wir hier */
.ws-feature-list.no-border {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Outro Text etwas hervorheben */
.outro-text {
    margin-top: var(--abstand-md);
    font-weight: 600;
    font-style: italic;
}

/* HINWEIS: 
   Die Klasse .feature-list-title (Orange Überschrift) und 
   .ws-feature-list (Liste mit Haken) sind bereits in deiner 
   Haupt-CSS definiert und werden hier automatisch übernommen. 
*/

/* Galerie-Komponente: 4 Spalten / 3 Zeilen / 9 Bilder */
.ws-gallery-grid-2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 gleich große Spalten */
    gap: var(--abstand-lg);
    margin-bottom: var(--abstand-lg);
}

.ws-gallery-grid-2 div {
    width: 100%;
    aspect-ratio: 1 / 1; /* Sorgt für quadratische Kacheln */
}

.ws-gallery-grid-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--ws-border);
    display: block;
}

/* Das große Fokus-Bild (Oben Links, 2x2 Slots) */
.ws-gallery-grid-2 .ws-gi-large {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto; /* Hebt das 1:1 Verhältnis auf, da es 2x2 Slots füllt */
}

/* Mobile Optimierung: 2-spaltig auf Tablets, 1-spaltig auf Handys */
@media screen and (max-width: 800px) {
    .ws-gallery-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 500px) {
    .ws-gallery-grid-2 {
        grid-template-columns: 1fr;
    }
    .ws-gallery-grid-2 .ws-gi-large {
        grid-column: span 1;
        grid-row: span 1;
    }
}