/*
 * 3D-Wunschmanufaktur – Werkbank
 *
 * Copyright © 2026 3D-Wunschmanufaktur
 * Alle Rechte vorbehalten.
 *
 * Die Vervielfältigung, Bearbeitung, Weitergabe oder Nutzung
 * dieses Codes außerhalb der dafür vorgesehenen Website ist
 * ohne ausdrückliche Zustimmung des Rechteinhabers nicht gestattet.
 */
/* ==========================================================
   DIGITALE WERKBANK
   3D-Wunschmanufaktur
========================================================== */

#werkbank{

    position:relative;

    overflow:hidden;

    padding-top:0;
    padding-bottom:0;
}
/* ===========================
   Hintergrund
=========================== */
/*
#werkbank::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:0;

    pointer-events:none;

    background-image:
        url("/assets/img/bg-next-top.png"),
        url("/assets/img/bg-next.png");

    background-repeat:
        no-repeat,
        repeat-y;

    background-position:
        center top,
        center 50px;

    background-size:
        100% 50px,
        100% auto;
}
*/
/* ===========================
   Inhalt
=========================== */

#werkbank > *{

    position:relative;

    z-index:2;
}
/* ===========================
   Container
=========================== */

#werkbank .max-w-6xl {
    max-width: 1500px;
    margin: auto;
    /* padding: 65px 40px 80px; Zurückgesetzt auf einen harmonischen Mittelwert (65px) */
}

#werkbank h2 {
    font-size: 2.6rem;
    font-weight: 800;
    color: #8ECF16;
    letter-spacing: -.03em;
    margin-bottom: 38px !important; /* Etwas mehr Luft nach unten für die perfekte Balance */
    text-shadow: 0 4px 18px rgba(0,0,0,.45);
}
#ablauf .max-w-6xl {
    max-width: 1500px;
    margin: auto;
    /* padding: 65px 40px 80px;  Zurückgesetzt auf einen harmonischen Mittelwert (65px) */
}

#ablauf h2 {
    font-size: 2.6rem;
    font-weight: 800;
    color: #8ECF16;
    letter-spacing: -.03em;
    margin-bottom: 38px !important; /* Etwas mehr Luft nach unten für die perfekte Balance */
    text-shadow: 0 4px 18px rgba(0,0,0,.45);
}
#material .max-w-6xl {
    max-width: 1500px;
    margin: auto;
    /* padding: 65px 40px 80px;  Zurückgesetzt auf einen harmonischen Mittelwert (65px) */
}

#material h2 {
    font-size: 2.6rem;
    font-weight: 800;
    color: #8ECF16;
    letter-spacing: -.03em;
    margin-bottom: 38px !important; /* Etwas mehr Luft nach unten für die perfekte Balance */
    text-shadow: 0 4px 18px rgba(0,0,0,.45);
}

#ideenschmiede .max-w-6xl {
    max-width: 1500px;
    margin: auto;
    /* padding: 65px 40px 80px;  Zurückgesetzt auf einen harmonischen Mittelwert (65px) */
}

#ideenschmiede h2 {
    font-size: 2.6rem;
    font-weight: 800;
    color: #8ECF16;
    letter-spacing: -.03em;
    margin-bottom: 38px !important; /* Etwas mehr Luft nach unten für die perfekte Balance */
    text-shadow: 0 4px 18px rgba(0,0,0,.45);
}

#kontakt .max-w-6xl {
    max-width: 1500px;
    margin: auto;
    /* padding: 65px 40px 80px;  Zurückgesetzt auf einen harmonischen Mittelwert (65px) */
}

#kontakt h2 {
    font-size: 2.6rem;
    font-weight: 800;
    color: #8ECF16;
    letter-spacing: -.03em;
    margin-bottom: 38px !important; /* Etwas mehr Luft nach unten für die perfekte Balance */
    text-shadow: 0 4px 18px rgba(0,0,0,.45);
}

#faq .max-w-6xl {
    max-width: 1500px;
    margin: auto;
    /* padding: 65px 40px 80px;  Zurückgesetzt auf einen harmonischen Mittelwert (65px) */
}

#faq h2 {
    font-size: 2.6rem;
    font-weight: 800;
    color: #8ECF16;
    letter-spacing: -.03em;
    margin-bottom: 38px !important; /* Etwas mehr Luft nach unten für die perfekte Balance */
    text-shadow: 0 4px 18px rgba(0,0,0,.45);
}

#galerie .max-w-6xl {
    max-width: 1500px;
    margin: auto;
    /* padding: 65px 40px 80px;  Zurückgesetzt auf einen harmonischen Mittelwert (65px) */
}

#galerie h2 {
    font-size: 2.6rem;
    font-weight: 800;
    color: #8ECF16;
    letter-spacing: -.03em;
    margin-bottom: 38px !important; /* Etwas mehr Luft nach unten für die perfekte Balance */
    text-shadow: 0 4px 18px rgba(0,0,0,.45);
}

#kundenmeinung .max-w-6xl {
    max-width: 1500px;
    margin: auto;
    /* padding: 65px 40px 80px;  Zurückgesetzt auf einen harmonischen Mittelwert (65px) */
}

#kundenmeinung h2 {
    font-size: 2.6rem;
    font-weight: 800;
    color: #8ECF16;
    letter-spacing: -.03em;
    margin-bottom: 38px !important; /* Etwas mehr Luft nach unten für die perfekte Balance */
    text-shadow: 0 4px 18px rgba(0,0,0,.45);
}
/* ===========================
   Layout
=========================== */

#werkbank .grid{

    gap:38px;

}
/* ===========================
   Panels
=========================== */

#werkbank .panel{

    background:

        rgba(13,18,25,.58);

    border:

        1px solid rgba(255,255,255,.08);

    border-radius:24px;

    backdrop-filter:

        blur(18px);

    -webkit-backdrop-filter:

        blur(18px);

    box-shadow:

        0 30px 70px rgba(0,0,0,.32),

        inset 0 1px 0 rgba(255,255,255,.08);
}
/* ===========================
   Hover
=========================== */

#werkbank .panel:hover{

    border-color:

        rgba(142,207,22,.28);

    transition:

        .35s;
}
/* ==========================================
   VIEWER TOOLBAR
========================================== */

/* Toolbar-Reste entfernen */
.viewer-toolbar {
    display: none !important;
}

/* Der Rotations-Button füllt jetzt im Formular die volle Breite aus */
.viewer-btn {
    width: 100% !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #F5F6F7 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    transition: .25s;
}

.viewer-btn:hover {
    background: #8ECF16 !important;
    color: #15283A !important;
    border-color: #8ECF16 !important;
    box-shadow: 0 4px 12px rgba(142,207,22,0.2) !important;
}
/* Der gemeinsame Rahmen für die linke Display-Zone */
.workbench-display-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: stretch;
    transition: gap 0.4s ease;
}

/* Die Ergebnisleiste ist standardmäßig absolut unsichtbar und eingeklappt */
.result-sidebar {
    width: 0;
    opacity: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Seidiges, dynamisches Einfahren */
}

/* Die Kacheln gestapelt, optisch passend zu deinen edlen dunklen Rahmen */
.result-card {
    background: rgba(18, 18, 18, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.card-title {
    font-size: 10px;
    color: #888;
    letter-spacing: 1px;
    font-weight: bold;
    margin-bottom: 4px;
}

.card-value {
    font-size: 16px;
    color: #00ff00; /* Knalliges Grün für deine Werte */
    font-weight: bold;
}

/* ============================================================
 * DIE TRIGGER-KLASSE: Tritt in Kraft, wenn eine Datei aktiv ist
 * ============================================================ */
.workbench-display-row.active-file .result-sidebar {
    width: 180px;      /* Die Breite der Sidebar am linken Rand */
    opacity: 1;
    margin-right: 15px; /* Abstand zum schmaler gewordenen Viewer */
}

/*======================================================
LAYOUT V2
======================================================*/

.werkbank-shell{

    display:grid;

    grid-template-columns:minmax(0,1.5fr) minmax(380px,1.0fr);

    gap:42px;

    padding:36px;

    border-radius:28px;

    background:rgba(18,24,34,.62);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    box-shadow:
        0 28px 70px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.viewer-column{

    min-width:0;
}

.form-column{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;
}

.werkbank-form{

    display:flex;

    flex-direction:column;

    gap:26px;
}
/*==================================================
KENNZAHLEN
==================================================*/

.viewer-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 24px !important; /* Auf positiven Wert gesetzt, da sie jetzt unter der Box starten */
}


.viewer-stats strong{

    color:#ffffff;

    font-size:.78rem;

    letter-spacing:.08em;

    text-transform:uppercase;

    display:block;

    margin-bottom:10px;
}

.viewer-stats span{

    color:#9be21b;

    font-size:1.35rem;

    font-weight:700;
}
/*========================================
STAT CARDS
========================================*/
/* ==========================================================
   AUSWAHL ZURÜCKSETZEN
   Optisch identisch zu den Eingabefeldern
   ========================================================== */

.form-column #werkbank-reset{
    width: 100%;
    color: rgb(245, 246, 247) !important;
    font-size: 11px !important;

    background: rgba(30, 41, 59, 0.45) !important;

    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    border-image: none !important;

    border-radius: 12px !important;

    padding: 14px 18px !important;

    outline: none !important;
    box-sizing: border-box !important;

    cursor: pointer;
    font-family: inherit;

    transition: all 0.3s ease !important;
}


.form-column #werkbank-reset:hover {
    border-color: rgba(142, 207, 22, 0.55) !important;
    color: #8edc18 !important;
}
/* ==========================================================
   PERFEKTE VERTIKALE AUSRICHTUNG DER KOMPAKTEN KARTEN
========================================================== */

.viewer-stats > div,
.stat-card {
    background: rgba(255, 255, 255, .07) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important; /* Etwas mehr Seitenabstand für edle Optik */
    
    /* DIE RETTUNG: Flexbox zwingt den Inhalt zur perfekten Verteilung */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Zentriert alles perfekt von oben nach unten */
    
    min-height: 64px !important; /* Ein klein wenig mehr Luft als gestern (optimaler Sweetspot) */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transition: .25s;
}

.stat-card:hover {
    border-color: rgba(142, 207, 22, .35) !important;
    transform: translateY(-2px) !important;
}

/* Titel-Kompaktierung */
.stat-title {
    color: #8f98a5 !important;
    font-size: .68rem !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    margin-bottom: 2px !important; /* Minimaler Abstand zum Wert */
    line-height: 1 !important;
}

/* Wert-Kompaktierung */
.stat-card [id^="model-"], 
.viewer-stats span,
.stat-card [id^="printbed-"],
.stat-card [id^="best-"] {
    color: #F6F7F8 !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/*==========================================
FORM PANEL
==========================================*/

.form-panel{

    display:flex;

    flex-direction:column;

    gap:26px;

    height:100%;

}
/* Upload */

.form-panel input[type=file]{

    width:100%;

    color:#F6F7F8;

}

/* Select */

.form-panel select{

    width:100%;

    height:52px;

    padding:0 18px;

    color:#F6F7F8;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.12);

    border-radius:12px;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    outline:none;

    box-shadow:none;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239BE21B' stroke-width='2'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 18px center;

}

/* Mail */

.form-panel input[type=email]{

    width:100%;

    height:44px;

    padding:0 16px;

    background:rgba(255,255,255,.08);

    color:#F6F7F8;

    border:1px solid rgba(255,255,255,.12);

    border-radius:12px;

}

/* Slider */

.form-panel input[type=range]{

    width:100%;

}

/* Button */

.form-panel button{

    width:100%;

    height:58px;

    margin-top:auto;

    border:none;

    border-radius:14px;

    background:linear-gradient(180deg,#97dd1d,#76b611);

    color:#14202d;

    font-size:1rem;

    font-weight:700;

    letter-spacing:.08em;

    cursor:pointer;

    transition:.25s;

}

.form-panel button:hover{

    transform:translateY(-2px);

    box-shadow:0 14px 28px rgba(142,207,22,.35);

}
/* Optionen im Select */

.form-panel select{

    color:#F6F7F8 !important;

}

.form-panel select option{

    background:#18222e;

    color:#F6F7F8;

}
/* ==========================================================
   PREMIUM BLUE-STEEL FORMULAR DESIGN
========================================================== */

/* 1. Dateiupload, Dropdown (Select) & E-Mail-Feld einfärben */
.form-column input[type="file"],
.form-column select,
.form-column .quantity-select, 
.form-column input[type="email"] {
    width: 100% !important;
    background: rgba(30, 41, 59, 0.45) !important; /* Edles, mattes Blass-Blau/Grau */
    color: #F5F6F7 !important; /* Weißer Text für perfekten Kontrast */
    border: 1px solid rgba(255, 255, 255, 0.12) !important; /* Dezente Glas-Kante */
    border-radius: 12px !important; /* Harmonisch abgerundete Ecken */
    padding: 14px 18px !important;
    font-size: 11px !important;
    outline: none !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease !important;
}

/* Fokus-Effekt: Wenn man in ein Feld klickt */
.form-column select:focus,
.form-column input[type="email"]:focus {
    border-color: rgba(142, 207, 22, 0.45) !important; /* Sanftes Aufleuchten in Marken-Grün */
    background: rgba(30, 41, 59, 0.6) !important;
}

/* Speziell für das Datei-Auswahl-Feld den grauen Standardtext bändigen */
.form-column input[type="file"] {
    padding: 8px 14px !important;
    color: #8f98a5 !important;
    font-family: monospace;
}

/* 2. Der blaue Schieberegler (Slider) wird Manufaktur-Grün */
.form-column input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: rgba(255, 255, 255, 0.1) !important;
    height: 6px !important;
    border-radius: 3px !important;
    outline: none !important;
}

/* Der ziehbare Knopf des Sliders */
.form-column input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #8ECF16 !important; /* Dein giftiges Marken-Grün */
    cursor: pointer !important;
    box-shadow: 0 0 8px rgba(142, 207, 22, 0.8) !important;
    transition: transform 0.1s !important;
}

.form-column input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2) !important; /* Wird beim Drüberfahren dezent größer */
}

/* 3. ABSENDE-BUTTON: Weg mit dem Braun & her mit dem Premium-Look */
.form-column button[type="submit"] {
    width: 100% !important;
    height: 54px !important;
    padding: 0 !important; /* Hebt das alte Padding auf */
    
    /* Edler Verlauf aus deinem Marken-Grün */
    background: linear-gradient(180deg, #9be21b 0%, #76b611 100%) !important; 
    color: #121822 !important; /* Dunkler, extrem scharfer Text auf grünem Grund */
    
    border: none !important;
    border-radius: 14px !important; /* Perfekt abgerundet, passend zur Box */
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(142, 207, 22, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Hover-Effekt für den Absende-Button */
.form-column button[type="submit"]:hover {
    transform: translateY(-2px) !important; /* Schwebe-Effekt */
    box-shadow: 0 12px 24px rgba(142, 207, 22, 0.4) !important; /* Edles grünes Glühen */
    filter: brightness(1.08) !important;
}
/* ==========================================================
   FINALE PERFEKTIONIERUNG DES COCKPITS (DESIGNER-FIMMEL-FIX)
========================================================== */

/* ZU PUNKT 1: Den inneren "Datei auswählen"-Button des Browsers bändigen */
.form-column input[type="file"]::-webkit-file-upload-button {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #F5F6F7 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important; /* Perfekt abgerundete Ecken für den inneren Button */
    padding: 6px 12px !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    margin-right: 12px !important;
    transition: all 0.2s ease !important;
}

.form-column input[type="file"]::-webkit-file-upload-button:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(142, 207, 22, 0.35) !important;
}

/* ZU PUNKT 2: Mehr Abstand zwischen dem Dateinamen-Text und dem Auswahlfeld */
.form-column input[type="file"] {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important; /* Erzwingt einen sauberen Abstand zum hochgeladenen Dateinamen */
    height: 44px !important; /* Bringt das Uploadfeld auf die gleiche Höhe wie das Dropdown */
    box-sizing: border-box !important;
}


/* ZU PUNKT 3: Der Rotations-Button bekommt seinen edlen, dezenten Glaseffekt zurück */
.form-column .viewer-btn,
#toggle-rotation {
    width: 100% !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* EXAKT DIE GLEICHEN WERTE WIE DEINE EINGABEFELDER: */
    background: rgba(30, 41, 59, 0.45) !important; 
    border: 1px solid rgba(255, 255, 255, 0.12) !important; 
    border-radius: 12px !important; 
    
    color: #F5F6F7 !important; /* Gleiche scharfe Textfarbe wie in den Feldern */
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease !important;
}

/* Edler Hover-Effekt für den Glas-Rotationsbutton */
.form-column .viewer-btn:hover,
#toggle-rotation:hover {
    background: rgba(142, 207, 22, 0.15) !important; /* Schimmert grünlich */
    color: #9be21b !important; /* Schrift wird giftgrün */
    border-color: rgba(142, 207, 22, 0.45) !important; /* Rahmen leuchtet auf */
    box-shadow: 0 0 15px rgba(142, 207, 22, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* =========================================================
   BEMERKUNG / BESONDERE WÜNSCHE
========================================================= */

.customer-note-field {
    width: 100%;
    margin-top: 10px;
}

.customer-note-field label {
    display: block;
    margin-bottom: 6px;

    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.8px;
    text-transform: uppercase;

    color: #8993a0;
}

.customer-note-field label .optional {
    color: #68727e;
    font-weight: 400;
}

.customer-note-field textarea {
    display: block;
    width: 100%;
    min-height: 58px;
    height: 58px;

    padding: 12px 14px;

    box-sizing: border-box;
    resize: vertical;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;

    background: rgba(18, 27, 38, 0.88);
    color: #f1f4f7;

    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;

    outline: none;
}

.customer-note-field textarea::placeholder {
    color: #68727e;
}

.customer-note-field textarea:focus {
    border-color: rgba(142, 230, 0, 0.55);
    box-shadow: 0 0 0 1px rgba(142, 230, 0, 0.12);
}
/* =========================================================
   WERKBANK INFO-BUTTON / INFO-POPUP
   ========================================================= */

.werkbank-info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid rgba(142,207,22,0.65);
    border-radius: 50%;
    background: transparent;
    color: #8ecf16;
    font: 700 11px/1 Arial, sans-serif;
    cursor: pointer;
    flex: 0 0 16px;
    transition: all .18s ease;
}

.werkbank-info-button:hover {
    background: #8ecf16;
    color: #111827;
}

#werkbank-info-popup {
    display: none;
    position: fixed;
    z-index: 10000;
    inset: 0;
    background: rgba(0,0,0,.72);
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(4px);
}

#werkbank-info-popup .werkbank-info-box {
    width: min(440px,100%);
    background: #101720;
    color: #f5f5f4;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    padding: 24px;
    box-sizing: border-box;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

#werkbank-info-popup h3 {
    margin: 0 0 12px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

#werkbank-info-popup p {
    margin: 0;
    color: #cbd5e1;
    font: 13px/1.6 sans-serif;
}

#werkbank-info-close {
    width: 100%;
    margin-top: 20px;
    padding: 10px;
    border: 0;
    border-radius: 6px;
    background: #8ecf16;
    color: #111827;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

#werkbank-reset:hover {
    border-color: rgba(142,207,22,.55) !important;
    color: #8ecf16 !important;
}


/* =========================================================
   SONDERFARB-POPUP – NOTAUSGANG
   ========================================================= */

.popup-cancel-btn {
    display: inline-block;
    margin-right: 14px;
    color: #8b949e;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease;
}

.popup-cancel-btn:hover {
    color: #ffffff;
}

/* ==========================================================
   WERKBANK – KOMPAKTE ERGEBNISZEILE
   ========================================================== */

.viewer-stats.werkbank-stats-6 {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
}


/* ==========================================================
   KARTEN
   ========================================================== */

.viewer-stats.werkbank-stats-6 .stat-card {
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;

    gap: 10px !important;

    padding: 10px 12px !important;

    box-sizing: border-box;

    min-height: 70px !important;
}


/* ==========================================================
   ICON
   ========================================================== */

.viewer-stats.werkbank-stats-6 .stat-icon {
    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: 0;

    color: #cbd2da;
}


/* SVG-Größe */

.viewer-stats.werkbank-stats-6 .stat-icon svg {
    width: 31px;
    height: 31px;

    display: block;
}


/* ==========================================================
   FARBIGE ICONS
   ========================================================== */

.viewer-stats.werkbank-stats-6 .stat-icon-dimensions {
    color: #b9c5d0;
}

.viewer-stats.werkbank-stats-6 .stat-icon-bed {
    color: #8edc18;
}

.viewer-stats.werkbank-stats-6 .stat-icon-rotation {
    color: #35a9ff;
}

.viewer-stats.werkbank-stats-6 .stat-icon-triangles {
    color: #c6a8ff;
}

.viewer-stats.werkbank-stats-6 .stat-icon-file {
    color: #d8dee5;
}

.viewer-stats.werkbank-stats-6 .stat-icon-volume {
    color: #b8c8d7;
}


/* ==========================================================
   TEXTBEREICH
   ========================================================== */

.viewer-stats.werkbank-stats-6 .stat-content {
    min-width: 0;
    flex: 1;
}


/* ==========================================================
   BEZEICHNUNG
   ========================================================== */

.viewer-stats.werkbank-stats-6 .stat-tiitle {
    font-size: 0,9rem !important;
    font-weight: bold;   /* Macht den Text fett (Alternative: 700) */
    color: #999c9e;      /* Optional: Ein kräftiger Farbton für bessere Lesbarkeit */
   
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-transform: uppercase;
}


/* ==========================================================
   WERT
   ========================================================== */

.viewer-stats.werkbank-stats-6 .stat-content > div:last-child {
    font-size: 15px !important;
    line-height: 1.1 !important;

    font-weight: 600;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ==========================================================
   DRUCKBETT – JS-INHALT NICHT ÜBERSCHREIBEN
   ========================================================== */

.viewer-stats.werkbank-stats-6 #printbed-check {
    color: inherit;
}
/* Hauptkarte: Stapelt obere und untere Zeile vertikal */
.stat-card {
    display: flex;
    flex-direction: column;
    gap: 6px; /* Abstand zwischen der oberen Zeile und dem Systemwert */
}

/* Obere Zeile: Bringt Icon und Titel in eine Reihe */
.stat-header {
    display: flex;
    align-items: center; /* Richtet Icon und Text vertikal mittig aus */
    gap: 8px; /* Abstand zwischen Icon und Titel */
}

/* Icon-Größe begrenzen */
.stat-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Optional: Styling für den Systemwert in der unteren Zeile */
.stat-value {
    font-size: 1.25rem;
    font-weight: bold;
    padding-left: 28px; /* Optional: Schiebt den Wert bündig unter den Titel (Icon-Breite + Gap) */
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1250px) {

    .viewer-stats.werkbank-stats-6 {
        gap: 7px !important;
    }

    .viewer-stats.werkbank-stats-6 .stat-card {
        padding: 8px 9px !important;
        gap: 7px !important;
    }

    .viewer-stats.werkbank-stats-6 .stat-icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }

    .viewer-stats.werkbank-stats-6 .stat-icon svg {
        width: 26px;
        height: 26px;
    }

    .viewer-stats.werkbank-stats-6 .stat-content > div:last-child {
        font-size: 13px !important;
    }
}
/* ==========================================================
   WERKBANK – DYNAMISCHER LAYOUT-STATUS
   ----------------------------------------------------------
   .has-results wird von viewer(6).js gesetzt, sobald das
   Modell erfolgreich analysiert wurde.

   Vorerst nur als sauberer Anker für den späteren Umbau.
   Noch KEINE sichtbare Layoutänderung.
   ========================================================== */

.werkbank-shell.has-results {
    /* später: Viewer einrücken + Ergebnisbereich freigeben */
}
/* ============================================================
 * ERGÄNZUNG FÜR DIE DYNAMISCHE ERGEBNIS-SIDEBAR (LINKS)
 * ============================================================ */

/* Der Hauptrahmen, den wir um den Viewer und die Sidebar gebaut haben */
.workbench-display-row {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    align-items: stretch !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Die Ergebnisleiste ist standardmäßig absolut unsichtbar und hat 0 Pixel Breite */
.result-sidebar {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-right: 0 !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Die einzelnen Kacheln (Optisch perfekt angepasst an dein edles Werkbank-Grau) */
.result-card {
    background: #ffffff !important;
    border: 1px solid #e7e5e4 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    white-space: nowrap !important;
}

.card-title {
    font-size: 9px !important;
    color: #78716c !important;
    letter-spacing: 0.05em !important;
    font-weight: bold !important;
    margin-bottom: 2px !important;
    font-family: monospace !important;
}

.card-value {
    font-size: 14px !important;
    color: #1c1917 !important;
    font-weight: bold !important;
}

/* ------------------------------------------------------------
 * DER ZAUBER-TRIGGER: Tritt in Kraft, wenn active-file gesetzt wird
 * ------------------------------------------------------------ */
.workbench-display-row.active-file .result-sidebar {
    width: 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;
    opacity: 1 !important;
    margin-right: 12px !important; /* Gibt dem kleiner werdenden Viewer sanft Abstand */
}

/* Zwingt den #config-viewer, flüssig mitzuschrumpfen */
.workbench-display-row #config-viewer {
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* ==========================================================
   WERKBANK – SCHRITT 1
   Testbereich + Viewer-Einrückung
   Bestehende Ergebnisfelder bleiben unangetastet.
========================================================== */

.werkbank-shell {
    position: relative;
}

/* Testbereich zunächst unsichtbar */
.werkbank-results-test {
    display: none;
}

/* Nach erfolgreicher Modellanalyse:
   Testbereich links einblenden */
.werkbank-shell.has-results .werkbank-results-test {
    display: flex;
    flex: 0 0 220px;
    width: 220px;
    align-items: stretch;
}

/* Sichtbare Testbox */
.werkbank-results-test-box {
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;

    padding: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #F5F6F7;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;

    background: rgba(18, 24, 34, 0.68);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.05);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/*
   SCHRITT 1:
   Sobald has-results gesetzt wird, bekommt die bestehende
   Shell einen zusätzlichen linken Bereich.

   Der Viewer selbst wird noch NICHT per transform bewegt.
   Wir testen zunächst ausschließlich die neue Spaltenstruktur.
*/
.werkbank-shell.has-results {
    grid-template-columns: 220px minmax(0, 1fr) 420px;
}
/* ==========================================================
   WERKBANK – SCHRITT 1a
   Testbereich tatsächlich links neben dem Viewer
========================================================== */

.werkbank-shell.has-results {
    grid-template-columns:
        220px
        minmax(0, 1.5fr)
        minmax(380px, 1fr);
}

/* Ergebnis-Test links */
.werkbank-shell.has-results .werkbank-results-test {
    grid-column: 1;
    grid-row: 1;
}

/* Viewer in die mittlere Spalte */
.werkbank-shell.has-results .viewer-column {
    grid-column: 2;
    grid-row: 1;
}

/* Formular bleibt rechts */
.werkbank-shell.has-results .form-column {
    grid-column: 3;
    grid-row: 1;
}
/* ==========================================================
   SCHRITT 1b – Positionierung bei vorhandenen Ergebnissen
========================================================== */

.werkbank-shell.has-results {
    grid-template-columns:
        220px
        minmax(0, 1.5fr)
        minmax(380px, 1fr) !important;
}

.werkbank-shell.has-results .werkbank-results-test {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.werkbank-shell.has-results .viewer-column {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.werkbank-shell.has-results .form-column {
    grid-column: 3 !important;
    grid-row: 1 !important;
}
/* ==========================================================
   SCHRITT 1c – VIEWER MUSS SICH AN DIE NEUE SPALTENBREITE
   HALTEN
========================================================== */

.werkbank-shell .viewer-column {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.werkbank-shell #config-viewer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.werkbank-shell #config-viewer canvas {
    display: block !important;
    max-width: 100% !important;
}

/* ==========================================================
   WERKBANK – SCHRITT 2b
   ECHTER „VORHANG“-EFFEKT

   Die drei Spalten existieren IMMER.
   Nur die Breite der Ergebnis-Spalte verändert sich.
   Dadurch kann der Browser den Vorgang kontinuierlich
   animieren.
========================================================== */


/* ----------------------------------------------------------
   1. IMMER drei Spalten
---------------------------------------------------------- */

.werkbank-shell {
    grid-template-columns:
        0px
        minmax(0, 1.5fr)
        minmax(380px, 1fr) !important;

    transition:
        grid-template-columns
        0.65s cubic-bezier(0.22, 0.8, 0.2, 1);
}


/* ----------------------------------------------------------
   2. Vor STL:
      Ergebnis-Spalte ist vorhanden,
      aber 0 Pixel breit.
---------------------------------------------------------- */

.werkbank-shell:not(.has-results) {
    grid-template-columns:
        0px
        minmax(0, 1.5fr)
        minmax(380px, 1fr) !important;
}


/* ----------------------------------------------------------
   3. Nach STL:
      Die erste Spalte wächst sichtbar auf 220px.
---------------------------------------------------------- */

.werkbank-shell.has-results {
    grid-template-columns:
        220px
        minmax(0, 1.5fr)
        minmax(380px, 1fr) !important;
}


/* ----------------------------------------------------------
   4. Feste Positionen
---------------------------------------------------------- */

.werkbank-shell .werkbank-results-test {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.werkbank-shell .viewer-column {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
}

.werkbank-shell .form-column {
    grid-column: 3 !important;
    grid-row: 1 !important;
}


/* ----------------------------------------------------------
   5. Ergebnis-Vorhang
---------------------------------------------------------- */

.werkbank-results-test {
    display: flex !important;

    opacity: 0;
    transform: translateX(-35px);

    overflow: hidden;
    pointer-events: none;

    transition:
        opacity 0.45s ease,
        transform 0.65s cubic-bezier(0.22, 0.8, 0.2, 1);
}


/* ----------------------------------------------------------
   6. Vorhang öffnet sich
---------------------------------------------------------- */

.werkbank-shell.has-results .werkbank-results-test {
    opacity: 1;
    transform: translateX(0);

    pointer-events: auto;
}


/* ----------------------------------------------------------
   7. Inhalt kommt minimal verzögert nach
      -> dadurch entsteht der Eindruck:
         „Vorhang geht auf“
---------------------------------------------------------- */

.werkbank-results-test-box {
    opacity: 0;
    transform: translateX(-20px);

    transition:
        opacity 0.35s ease 0.12s,
        transform 0.55s cubic-bezier(0.22, 0.8, 0.2, 1) 0.05s;
}


.werkbank-shell.has-results .werkbank-results-test-box {
    opacity: 1;
    transform: translateX(0);
}
/* ==========================================================
   WERKBANK – 5 KUNDENERGEBNISSE
   ========================================================== */

.werkbank-results-test {
    flex-direction: column !important;
    gap: 10px !important;

    justify-content: center !important;
    align-items: stretch !important;

    box-sizing: border-box;
}


/* ----------------------------------------------------------
   ERGEBNISKARTEN
   ---------------------------------------------------------- */

.werkbank-results-test .stat-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;

    flex: 1 1 0 !important;

    box-sizing: border-box;

    display: flex !important;
    flex-direction: column !important;

    justify-content: center !important;

    gap: 6px !important;

    padding: 12px 14px !important;

    background: rgba(18, 24, 34, 0.82);

    border: 1px solid rgba(255,255,255,.09);

    border-radius: 10px;

    box-shadow:
        0 8px 20px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.04);

    overflow: hidden;
}


/* ----------------------------------------------------------
   KOPF
   ---------------------------------------------------------- */

.werkbank-results-test .stat-header {
    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    margin: 0 !important;
}


/* ----------------------------------------------------------
   ICON
   ---------------------------------------------------------- */

.werkbank-results-test .stat-icon {
    flex: 0 0 28px;

    width: 28px;
    height: 28px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: transparent;
    border: 0;
}


.werkbank-results-test .stat-icon svg {
    width: 22px;
    height: 22px;

    display: block;
}


/* ----------------------------------------------------------
   ICON-FARBEN
   ---------------------------------------------------------- */

.werkbank-results-test .stat-icon-dimensions {
    color: #b9c5d0;
}

.werkbank-results-test .stat-icon-rotation {
    color: #35a9ff;
}

.werkbank-results-test .stat-icon-bed {
    color: #8edc18;
}

.werkbank-results-test .stat-icon-triangles {
    color: #c6a8ff;
}

.werkbank-results-test .stat-icon-volume {
    color: #b8c8d7;
}


/* ----------------------------------------------------------
   TITEL
   ---------------------------------------------------------- */

.werkbank-results-test .stat-tiitle {
    min-width: 0;

    font-size: 10px !important;

    line-height: 1.1;

    font-weight: 600;

    color: #999c9e;

    text-transform: uppercase;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ----------------------------------------------------------
   WERT
   ---------------------------------------------------------- */

.werkbank-results-test .stat-value {
    min-width: 0;

    font-size: 14px;

    line-height: 1.2;

    font-weight: 600;

    color: #ffffff;

    font-family: monospace;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ----------------------------------------------------------
   VORHANG-INHALT
   ---------------------------------------------------------- */

.werkbank-results-test .stat-card {
    opacity: 0;

    transform: translateX(-18px);

    transition:
        opacity 0.35s ease 0.12s,
        transform 0.55s cubic-bezier(0.22, 0.8, 0.2, 1) 0.05s;
}


.werkbank-shell.has-results .werkbank-results-test .stat-card {
    opacity: 1;

    transform: translateX(0);
}


/* kleine Staffelung – damit die fünf Karten nicht
   exakt gleichzeitig erscheinen */

.werkbank-shell.has-results
.werkbank-results-test .stat-card:nth-child(2) {
    transition-delay: 0.09s;
}

.werkbank-shell.has-results
.werkbank-results-test .stat-card:nth-child(3) {
    transition-delay: 0.13s;
}

.werkbank-shell.has-results
.werkbank-results-test .stat-card:nth-child(4) {
    transition-delay: 0.17s;
}

.werkbank-shell.has-results
.werkbank-results-test .stat-card:nth-child(5) {
    transition-delay: 0.21s;
}
/* ==========================================================
   WERKBANK MOBILE FIX: GRID ZU FLEX/STACK UMWANDELN
   Löst das Problem, dass der Viewer unter 901px verschwindet
========================================================== */
@media (max-width: 900px) {

    /* 1. Den Haupt-Container der Werkbank umstellen */
    .werkbank-shell,
    .werkbank-shell.has-results,
    .workbench-display-row {
        display: flex !important;
        flex-direction: column !important; /* Alles untereinander */
        width: 100% !important;
                
        /* Grid-Einstellungen explizit außer Kraft setzen */
        grid-template-columns: 1fr !important; 
        grid-template-rows: auto !important;
    }

    /* 2. Die Viewer-Spalte (die sich vorher 1+2 geteilt hat) */
    /* Wir sprechen hier alle möglichen Kandidaten an, die den Viewer halten */
    .viewer-column,
    #config-viewer,
    div[class*="viewer"],
    .werkbank-shell > div:nth-child(1), /* Fallback: Erstes Kind */
    .werkbank-shell > div:nth-child(2)  /* Fallback: Zweites Kind */
    {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important; /* Volle Breite einnehmen */
        
        /* WICHTIG: Mindesthöhe geben, damit Three.js malen kann */
        min-height: 400px !important; 
        height: 400px !important;
        
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        order: 1 !important; /* Immer an erster Stelle */
        
        /* Grid-Positionierung aufheben */
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }

    /* 3. Das Canvas im Viewer zwingen, den Container zu füllen */
    .viewer-column canvas,
    #config-viewer canvas {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        position: relative !important; /* Oder absolute, je nach Library */
        top: 0;
        left: 0;
    }

    /* 4. Die Eingabefelder (Spalte 3 auf Desktop) */
    /* Sollte nach dem Viewer kommen */
    .form-column,
    div[class*="form"],
    div[class*="input"],
    .werkbank-shell > div:last-child /* Fallback */
    {
        width: 100% !important;
        order: 2 !important; /* Nach dem Viewer */
        grid-column: 1 / -1 !important;
    }
}
/* ==========================================================
   MOBILE FIX: ERGEBNIS-BLOCK (werkbank-results-test) AUSBLENDEN
   Verhindert den 350x400px leeren Platzhalter über dem Viewer
========================================================== */
@media (max-width: 900px) {
    .werkbank-results-test {
        display: none !important;      /* Unsichtbar machen */
        visibility: hidden !important; /* Sicherstellen, dass er nicht interaktiv ist */
        height: 0 !important;          /* Keine Höhe einnehmen */
        width: 0 !important;           /* Keine Breite einnehmen */
        padding: 0 !important;         /* Kein Innenabstand */
        margin: 0 !important;          /* Kein Außenabstand */
        overflow: hidden !important;   /* Inhalt abschneiden */
        position: absolute !important; /* Aus dem Layoutfluss nehmen */
    }
}