/**
 * LORO-X Online-Konfigurator - Styles
 * VEREINHEITLICHT 2026-07-19: nutzt jetzt die zentralen Komponenten
 * (.oa-btn / .table / .alert-info / .alert-danger / .oa-badge, Markenblau #006aac)
 * aus templates/css/style.css. Hier verbleiben nur noch tool-spezifische
 * Layout-/Bild-Regeln (Filter-Buttons mit Produktbild, Lade-Spinner,
 * Mobile-Tabelle-als-Karten). Original-Backup: backups/tool_styles_2026-07-19/online-konfigurator/.
 * (Vorheriger Kommentar behauptete, table/input kaemen schon vom Template — stimmte fuer
 * .btn, aber die Ergebnistabelle nutzte noch kein .table und Formulare kein .form-control;
 * .hidden kam tatsaechlich schon vom Template.)
 */

/* ===========================================
   KONFIGURATOR WRAPPER
   =========================================== */
.konfig-wrapper {
    padding: 20px 0;
}

.konfig-wrapper h2 {
    font-size: 1.4rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #006aac;
}

.konfig-wrapper h3 {
    font-size: 1.2rem;
    margin: 25px 0 15px;
}

.konfig-wrapper h4 {
    font-size: 1rem;
    margin: 0 0 10px 0;
    font-weight: 600;
}

/* ===========================================
   WARNUNGEN (Box-Optik jetzt zentral: .alert-danger; hier nur noch die
   Sonderform als reiner Inline-Hinweistext, siehe .konfig-detail unten)
   =========================================== */

/* ===========================================
   INFO-BAR (zwischen Filter und Ergebnisse)
   =========================================== */
.konfig-info-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: #f5f9fc;
    border: 1px solid #006aac;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

/* Flaechenauswahl inline */
.konfig-flaeche-select-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.konfig-flaeche-select-inline label {
    font-weight: 500;
    color: #444;
    margin: 0;
    white-space: nowrap;
}

.konfig-flaeche-select-inline select {
    padding: 5px 10px;
    font-size: 0.9rem;
    border: 1px solid #006aac;
    border-radius: 4px;
    background: #fff;
    min-width: 100px;
}

.konfig-flaeche-select-inline select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 106, 172, 0.2);
}

/* Zaehler inline */
.konfig-counter-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #fff;
    border: 1px solid #006aac;
    border-radius: 4px;
}

.konfig-counter-inline .konfig-count-number {
    font-size: 1.3rem;
    font-weight: 700;
    color: #006aac;
    line-height: 1;
}

.konfig-counter-inline .konfig-count-text {
    font-size: 0.85rem;
    color: #444;
}

.konfig-counter-inline .konfig-status {
    font-size: 0.8rem;
    color: #666;
    margin-left: 8px;
}

.konfig-counter-inline .konfig-status:empty {
    display: none;
}

.konfig-counter-inline .konfig-status.loading::after {
    content: '...';
    animation: konfig-dots 1s infinite;
}

/* Hinweis wenn keine Berechnung */
.konfig-no-calculation-inline {
    padding: 5px 12px;
    background: #fff3cd;
    border: 1px solid #ffecb5;
    border-radius: 4px;
}

.konfig-no-calculation-inline a {
    color: #664d03;
    font-weight: 500;
    text-decoration: underline;
    font-size: 0.85rem;
}

.konfig-no-calculation-inline a:hover {
    color: #006aac;
}

/* Berechnungsergebnisse inline */
.konfig-calculation-inline {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
}

/* Optik komplett zentral: .oa-badge (inkl. Markenblau fuer <strong>) */

@keyframes konfig-dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* ===========================================
   AUFBAU-BLOECKE (NEU 2026-07-21, z.B. "Dachaufbau"): zugeklappter Bereich
   OBERHALB der Filter, Direkteinstieg per Bild-Kachel (setzt automatisch
   entwaesserung + flansch, siehe main.js/functions.php). Optik bewusst
   identisch zur bestehenden .konfig-filters-Box (gleicher Rahmen/Radius) und
   den bestehenden Bild-Buttons (.konfig-filter-btn/.konfig-img-btn) - keine
   neuen Farben, kein eigenes Designsystem. Natives <details>/<summary>, daher
   auch kein eigener Auf-/Zuklapp-Marker noetig (Browser-Standard reicht,
   kein Icon-Font).
   =========================================== */
.konfig-aufbau-block {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0 20px;
    margin-bottom: 20px;
}

.konfig-aufbau-block > summary {
    padding: 15px 0;
    color: #006aac;
    font-weight: 600;
    cursor: pointer;
}

.konfig-aufbau-block > summary:hover {
    color: #00568a;
}

.konfig-aufbau-inner {
    padding: 5px 0 20px;
    border-top: 1px solid #eee;
}

.konfig-aufbau-intro {
    color: #444;
    font-size: 0.9rem;
    margin: 15px 0;
}

/* Bewusst NICHT die Klasse .konfig-filter-options verwendet (nur das reine
   Flex-Layout hier nachgebaut) - sonst wuerde main.js' allgemeiner
   Filter-Klick-Handler (der ueber .closest('.konfig-filter-options') die
   Filtergruppe ermittelt) faelschlich auch fuer Kachel-Klicks feuern. */
.konfig-aufbau-kacheln {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Kachel: Bild oben, Text unten (wie die ersten drei Filtergruppen), damit sie
   optisch als klickbare "Kachel" statt als schmale Listenzeile wirkt. */
.konfig-aufbau-kachel.konfig-img-btn {
    flex: 0 1 200px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px;
}

.konfig-aufbau-kachel.konfig-img-btn img {
    width: 100px;
    height: 60px;
}

.konfig-aufbau-kachel.konfig-img-btn span {
    text-align: center;
    font-size: 0.85rem;
}

/* Dezenter Hinweistext (aktuell nur bei der Kachel "Kastenrinne") - gleiche
   gedaempfte Farbe wie der bestehende "keine Berechnung"-Hinweis, keine neue Farbe. */
.konfig-aufbau-hinweis {
    margin: 15px 0 0;
    font-size: 0.85rem;
    color: #664d03;
}

/* NEU (2026-07-21, "WU-Beton"-Kachel): Artikelliste im dedizierten "no_filter"-
   Hinweis-Block (siehe dachaufbau.php: konfig_render_artikel_links()) - nur die
   Browser-Default-Liste etwas kompakter, keine neue Farbe (Links erben die
   globale Template-Linkfarbe). */
.konfig-aufbau-artikelliste {
    margin: 8px 0 0;
    padding-left: 20px;
}

.konfig-aufbau-artikelliste li {
    margin: 2px 0;
}

/* Balkon-Block (NEU 2026-07-21): wiederverwendet bewusst .konfig-aufbau-kacheln/
   .konfig-aufbau-kachel/.konfig-img-btn/.konfig-aufbau-hinweis 1:1 (siehe oben) - hier
   nur der Abstand zwischen Grundaufbau-Ebene und der (je nach Grundaufbau umgeschalteten)
   Belag-Kachelgruppe darunter, keine neue Optik/Farbe. Das globale .hidden (Template-CSS,
   display:none !important) hebt display:flex von .konfig-aufbau-kacheln zuverlaessig auf,
   keine eigene Override-Regel noetig. */
.konfig-balkon-belag-wrapper {
    margin-top: 15px;
}

@media (max-width: 600px) {
    .konfig-aufbau-kachel.konfig-img-btn {
        flex: 1 1 100%;
    }
}

/* ===========================================
   FILTER-BEREICH
   =========================================== */
.konfig-filters {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 25px;
}

.konfig-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.konfig-filter-row:last-child {
    margin-bottom: 0;
}

.konfig-filter-group {
    flex: 1 1 300px;
    min-width: 250px;
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 4px;
}

/* 4-Spalten Layout fuer Filter 1-4 */
.konfig-filter-row-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.konfig-filter-row-4col .konfig-filter-compact {
    flex: none;
    min-width: auto;
}

/* Volle Breite fuer Flansch */
.konfig-filter-group-fullwidth {
    flex: 1 1 100%;
    width: 100%;
}

.konfig-filter-group.hidden,
.konfig-filter-row.hidden {
    display: none;
}

.konfig-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Buttons untereinander */
.konfig-filter-vertical {
    flex-direction: column;
}

.konfig-filter-vertical .konfig-filter-btn {
    width: 100%;
    text-align: left;
}

.konfig-filter-vertical .konfig-nennweite-btn {
    text-align: center;
}

/* ===========================================
   FILTER-BUTTONS
   =========================================== */
.konfig-filter-btn {
    display: inline-block;
    padding: 10px 15px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #006aac;
    background: #fff;
    border: 1px solid #006aac;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    /* Umbruch erlaubt (2026-07-21): Frueher stand hier white-space:nowrap, was bei
       langen Beschriftungen (z.B. "Einzelablauf (oberster Balkon, Endsieb)" oder
       lange Komposita in einzelnen der 20 Sprachen) die Zeile aufblies - auf dem
       Handy wurde dadurch die ganze Seite breiter als der Bildschirm. Lieber
       zweizeilig als horizontal scrollen. */
    white-space: normal;
    overflow-wrap: break-word;
}

/* Nennweite bleibt einzeilig ("DN 100" ist kurz und soll nicht umbrechen). */
.konfig-nennweite-btn {
    white-space: nowrap;
}

.konfig-filter-btn:hover:not(.disabled):not(.active) {
    background: #e8f2f9;
    border-color: #00568a;
}

.konfig-filter-btn.active {
    background: #006aac;
    color: #fff;
    border-color: #006aac;
}

.konfig-filter-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f5f5f5;
    border-color: #ccc;
    color: #999;
}

/* ===========================================
   BILD-BUTTONS (wie im Original)
   =========================================== */
.konfig-img-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
}

.konfig-img-btn img {
    width: 80px;
    height: 40px;
    object-fit: contain;
    border: 2px solid #ccc;
    border-radius: 3px;
    background: #fff;
    flex-shrink: 0;
}

.konfig-img-btn:hover:not(.disabled):not(.active) img {
    border-color: #006aac;
}

.konfig-img-btn.active img {
    border-color: #fff;
}

.konfig-img-btn.disabled img {
    opacity: 0.4;
}

.konfig-img-btn span {
    flex: 1;
    text-align: left;
}

/* Filter 1-3 (Entwaesserung, Entwaesserungsart, Stroemungsart): Bild oben, Text unten */
.konfig-filter-row-4col .konfig-filter-compact:nth-child(-n+3) .konfig-img-btn {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px;
}

.konfig-filter-row-4col .konfig-filter-compact:nth-child(-n+3) .konfig-img-btn img {
    width: 100px;
    height: 50px;
}

.konfig-filter-row-4col .konfig-filter-compact:nth-child(-n+3) .konfig-img-btn span {
    text-align: center;
    font-size: 0.8rem;
}

/* Nennweite Bild-Buttons: Bild quadratisch */
.konfig-nennweite-btn.konfig-img-btn img {
    width: 40px;
    height: 40px;
}

.konfig-nennweite-btn.konfig-img-btn {
    justify-content: center;
}

/* Flansch Bild-Buttons */
.konfig-filter-flansch .konfig-img-btn img {
    width: 80px;
    height: 40px;
}

/* Eingrifftiefe Bild-Buttons */
.konfig-filter-eingriff .konfig-img-btn img {
    width: 80px;
    height: 40px;
}

/* Ablauftyp/Befestigung/Siebeinheit Bild-Buttons (NACHTRAG 2026-07-21, Betreiber-
   Entscheidung: Bild-Buttons statt Text, je Gruppe einheitlicher Bildtyp). Ablauftyp
   nutzt zwei Strichzeichnungen (82x100/100x50 - Hochformat, deshalb eine hoehere Box),
   Befestigung und Siebeinheit nutzen einheitlich aufbereitete Produktfotos (alle
   210x210, weisser Hintergrund - eine quadratische Box). object-fit:contain (von
   .konfig-img-btn img geerbt) skaliert dabei jedes Bild verzerrungsfrei in die feste
   Box hinein, zentriert. */
.konfig-filter-ablauftyp .konfig-img-btn img {
    width: 60px;
    height: 72px;
}

.konfig-filter-befestigung .konfig-img-btn img,
.konfig-filter-siebeinheit .konfig-img-btn img {
    width: 72px;
    height: 72px;
}

/* Nennweite Buttons (kompakter) */
.konfig-nennweite-btn {
    min-width: 70px;
    text-align: center;
}

/* Flansch Buttons */
.konfig-filter-flansch .konfig-filter-btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 200px;
    white-space: normal;
    font-size: 0.85rem;
    padding: 8px 12px;
}

/* ===========================================
   RESET-BUTTONS (Farben jetzt zentral: .alert-danger; hier nur noch
   Kompaktgroesse, Cursor und der etwas dunklere Hover)
   =========================================== */
.konfig-filter-reset {
    padding: 8px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.konfig-filter-reset:hover {
    background: #f5c2c7;
}

.konfig-filter-reset.hidden {
    display: none;
}

.konfig-reset-all {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* ===========================================
   ERGEBNIS-BEREICH
   =========================================== */
.konfig-results-section {
    background: #fff;
    border: 1px solid #006aac;
    border-radius: 4px;
    padding: 20px;
}

.konfig-results-section h3 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #006aac;
}

.konfig-results {
    min-height: 100px;
}

.konfig-too-many,
.konfig-no-results {
    text-align: center;
    padding: 40px 20px;
    background: #f9f9f9;
    border-radius: 4px;
}

.konfig-too-many p,
.konfig-no-results p {
    color: #666;
    font-size: 1rem;
    margin: 0;
}

/* Box-Optik (Hintergrund/Rahmen/Farbe) jetzt zentral: .alert-info; hier nur
   noch die kompaktere Schrift im Absatz */
.konfig-info p {
    font-size: 0.9rem;
    margin: 0;
}

/* ===========================================
   ERGEBNIS-TABELLE (Grundgeruest jetzt zentral: .table; hier nur noch der
   blaue Header, die abweichende vertikale Ausrichtung und Spaltenmasse)
   =========================================== */
.konfig-results-table {
    margin: 0;
}

.konfig-results-table th,
.konfig-results-table td {
    vertical-align: top;
}

.konfig-results-table thead th {
    background: #006aac;
    color: #fff;
    font-weight: 600;
}

/* Bild-Spalte: Ablauf-Foto + Datenblatt-Vorschau nebeneinander */
.konfig-result-image {
    width: 210px;
    text-align: center;
    vertical-align: middle;
}

.konfig-result-bilder {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.konfig-ablauf-foto {
    max-width: 100px;
    max-height: 100px;
    border: 1px solid #eee;
    border-radius: 4px;
}

/* Datenblatt-Vorschau: signalisiert "es ist ein System" - blauer Rahmen (CI),
   Klick oeffnet das PDF. */
.konfig-datenblatt-vorschau {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
}

.konfig-datenblatt-vorschau img {
    width: 72px;
    height: auto;
    max-height: 100px;
    border: 1px solid #006aac;
    border-radius: 4px;
    background: #fff;
}

.konfig-datenblatt-vorschau-label {
    font-size: .7rem;
    font-weight: 600;
    color: #006aac;
    line-height: 1.2;
}

/* Info-Spalte */
.konfig-result-info {
    font-size: 0.9rem;
    line-height: 1.6;
}

.konfig-result-info strong {
    color: #006aac;
    font-size: 1rem;
}

/* Datenblatt-PDF Link */
.konfig-datenblatt-link:hover {
    text-decoration: underline;
}

.konfig-detail {
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #ccc;
    font-size: 0.85rem;
    color: #666;
}

.konfig-detail .konfig-warning {
    display: inline;
    background: none;
    padding: 0;
    color: #842029;
    font-weight: 600;
}

/* Aktions-Spalte */
.konfig-result-action {
    width: 200px;
    text-align: center;
    vertical-align: middle;
}

.konfig-anzahl-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.konfig-anzahl-wrapper label {
    font-size: 0.85rem;
    color: #444;
    margin: 0;
}

.konfig-anzahl-input {
    width: 60px !important;
    padding: 6px 8px !important;
    text-align: center;
    font-size: 1rem !important;
}

/* Beide Aktions-Buttons (Produktdatenbank/Ausschreibung) auf volle Spaltenbreite;
   Optik (Outline-Blau bzw. gefuelltes Gruen) kommt jetzt zentral aus
   .oa-btn-secondary / .oa-btn-success, Abstand untereinander aus dem
   flex gap von .konfig-result-buttons (kein zusaetzliches margin noetig). */
.konfig-result-buttons .oa-btn {
    width: 100%;
}

/* Zwei Aktionen (Produktdatenbank / Ausschreibung) untereinander */
.konfig-result-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* "In Ausschreibung uebernehmen"-Button waehrend der AJAX-Uebernahme gesperrt
   (Farbe/Hover kommt zentral aus .oa-btn-success) */
.konfig-btn-ausschreibung:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ===========================================
   LOADING-OVERLAY
   =========================================== */
.konfig-loading {
    position: relative;
}

.konfig-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 10;
}

.konfig-loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid #eee;
    border-top-color: #006aac;
    border-radius: 50%;
    animation: konfig-spin 0.8s linear infinite;
    z-index: 11;
}

@keyframes konfig-spin {
    to { transform: rotate(360deg); }
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 991px) {
    .konfig-filter-row {
        flex-direction: column;
    }

    /* 4-Spalten zu 2-Spalten auf Tablet */
    .konfig-filter-row-4col {
        grid-template-columns: repeat(2, 1fr);
    }

    .konfig-filter-group {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .konfig-filter-flansch .konfig-filter-btn {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

@media (max-width: 600px) {
    /* 4-Spalten zu 1-Spalte auf Mobile */
    .konfig-filter-row-4col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .konfig-wrapper {
        padding: 15px 0;
    }

    .konfig-filters {
        padding: 15px;
    }

    .konfig-filter-group {
        padding: 12px;
    }

    .konfig-filter-btn {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    /* Tabelle als Karten auf Mobile */
    .konfig-results-table,
    .konfig-results-table thead,
    .konfig-results-table tbody,
    .konfig-results-table th,
    .konfig-results-table td,
    .konfig-results-table tr {
        display: block;
    }

    .konfig-results-table thead {
        display: none;
    }

    .konfig-results-table tbody tr {
        margin-bottom: 15px;
        border: 1px solid #006aac;
        border-radius: 4px;
        overflow: hidden;
    }

    .konfig-results-table td {
        border: none;
        border-bottom: 1px solid #eee;
        padding: 12px 15px;
    }

    .konfig-results-table td:last-child {
        border-bottom: none;
    }

    .konfig-result-image {
        width: 100%;
        padding: 15px;
        background: #f9f9f9;
    }

    .konfig-ablauf-foto {
        max-width: 90px;
    }

    .konfig-datenblatt-vorschau img {
        width: 66px;
    }

    .konfig-result-action {
        width: 100%;
    }

    .konfig-anzahl-wrapper {
        width: auto;
    }

    .konfig-result-buttons .oa-btn {
        width: auto;
        flex: 1;
    }
}

@media (max-width: 768px) {
    /* Info-Bar responsive */
    .konfig-info-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .konfig-flaeche-select-inline {
        width: 100%;
    }

    .konfig-flaeche-select-inline select {
        flex: 1;
    }

    .konfig-calculation-inline {
        margin-left: 0;
        flex-wrap: wrap;
    }

    .konfig-q-value {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* Overflow-Fix (2026-07-19): Grid-Items in .konfig-filter-row-4col haben per
   Default min-width:auto (Grid-Ueberlauf-Falle) - die vorhandene Regel
   darueber setzte es faelschlich auf "auto" statt "0" zurueck. Die gestapelten
   Filter-Buttons (.konfig-filter-vertical) haben white-space:nowrap; bei
   langen Uebersetzungen (20 Sprachen, teils lange Komposita) kann der Text
   dadurch aus der schmalen Grid-Spalte ragen -> Umbruch erlauben. */
.konfig-filter-row-4col .konfig-filter-compact { min-width: 0; }
.konfig-filter-vertical .konfig-filter-btn { white-space: normal; overflow-wrap: anywhere; }
.konfig-img-btn span { min-width: 0; }

@media (max-width: 480px) {
    .konfig-count-number {
        font-size: 2rem;
    }

    .konfig-filter-btn {
        width: 100%;
        text-align: center;
    }

    .konfig-img-btn {
        text-align: left;
    }

    .konfig-img-btn img {
        width: 60px;
        height: 30px;
    }

    .konfig-nennweite-btn.konfig-img-btn img {
        width: 30px;
        height: 30px;
    }

    .konfig-nennweite-btn {
        width: calc(33.33% - 6px);
        min-width: auto;
    }

    .konfig-counter-inline {
        width: 100%;
        justify-content: center;
    }

    .konfig-no-calculation-inline {
        width: 100%;
        text-align: center;
    }
}

/* ===========================================
   MOBIL-SICHERUNG (2026-07-21, Betreiber-Meldung "Layout wird ueberdehnt")
   Kein horizontales Scrollen auf dem Handy: Der Konfigurator-Container darf nie
   breiter werden als der Viewport. Lange Button-Texte brechen um (siehe
   white-space:normal bei .konfig-filter-btn), Bilder skalieren mit, und Grid-/
   Flex-Kinder bekommen min-width:0 (sonst erzwingt ihr Inhalt die Mindestbreite
   und sprengt den Container - die klassische Overflow-Falle).
   =========================================== */
@media (max-width: 640px) {
    #konfig-container { max-width: 100%; overflow-x: hidden; }
    .konfig-filter-btn {
        width: 100%;
        min-width: 0;
        white-space: normal;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    /* Bild-Buttons: Bild darf den Text nicht aus der Zeile draengen */
    .konfig-img-btn { flex-wrap: wrap; }
    .konfig-img-btn img { max-width: 100%; }
    .konfig-img-btn span { min-width: 0; flex: 1 1 100%; }
    /* Flansch-Gruppe hat am Desktop feste Mindestbreite - auf dem Handy aufheben */
    .konfig-filter-flansch .konfig-filter-btn { min-width: 0; flex: 1 1 100%; }
    .konfig-filter-group, .konfig-filter-row, .konfig-aufbau-block { min-width: 0; }
    .konfig-aufbau-kacheln .konfig-filter-btn { flex: 1 1 100%; }
}

/* Nachtrag 2026-07-21: Die Beschriftungen der Aufbau-Kacheln (z.B. "Mit
   Abdichtungsbahn, ohne Wärmedämmung") standen auf schmalen Displays ueber den
   Kachelrand hinaus - gemessen mit Selenium bei 390px Viewport. Ursache: der
   span ist Flex-Kind und hat per Default min-width:auto, wodurch der laengste
   unteilbare Textteil die Breite erzwingt. Deshalb hier explizit Umbruch +
   min-width:0 + max-width:100% (gilt in ALLEN Breiten, nicht nur mobil, weil
   auch am Desktop einzelne der 20 Sprachen laenger ausfallen koennen). */
.konfig-aufbau-kachel.konfig-img-btn span,
.konfig-filter-btn span {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

/* Nachtrag 2 (2026-07-21, per Screenshot bei 390px verifiziert): Die Kacheln der
   Aufbau-Bloecke standen auf dem Handy als Bild LINKS + Text RECHTS - dadurch blieb
   fuer die Beschriftung so wenig Platz, dass sie abgeschnitten wurde
   ("Mit Abdichtungsbahn, ohne Wärmed…") statt umzubrechen. Auf schmalen Displays
   deshalb erzwungen: Bild OBEN, Text DARUNTER ueber die volle Kachelbreite. Die
   Regel steht bewusst am Dateiende, damit sie die frueheren Media-Queries (600px)
   sicher ueberschreibt. */
@media (max-width: 640px) {
    .konfig-aufbau-kacheln .konfig-aufbau-kachel.konfig-img-btn {
        flex: 1 1 100%;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .konfig-aufbau-kacheln .konfig-aufbau-kachel.konfig-img-btn span {
        flex: 1 1 auto;
        width: 100%;
        text-align: center;
        white-space: normal;
        overflow-wrap: break-word;
    }
}

/* Zur-Teilflaeche-Knopf: Erfolgszustand gruen (Farbe = Rueckmeldung, kein Icon) */
.konfig-btn-teilflaeche-ok, .konfig-btn-teilflaeche-ok:disabled {
    border-color: #28a745 !important; color: #28a745 !important; opacity: 1 !important;
}

/* Zwischenueberschrift ueber den Balkon-Belag-Kacheln (2026-08-02): poppt mit
   der Belag-Gruppe auf, damit der zweite Wahlschritt nicht uebersehen wird */
.konfig-balkon-belag-titel { font-weight: 700; margin: 16px 0 4px; }
.konfig-balkon-belag-titel.hidden { display: none; }