body { font-family: sans-serif; display: flex; flex-direction: column; height: 100vh; margin: 0; }
header { background: #2c3e50; color: #ecf0f1; padding: 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid #1abc9c; }
#main { display: flex; flex: 1; overflow: hidden; }
#blocklyDiv { flex: 2; border-right: 2px solid #ccc; transition: all 0.3s ease; }
#codeExport { flex: 1; background: #1e1e1e; color: #d4d4d4; padding: 20px; overflow-y: auto; white-space: pre-wrap; font-family: 'Consolas', monospace; font-size: 14px; display: block; transition: all 0.3s ease; }
.title { font-weight: bold; font-size: 1.3em; }

/* Styles für die Buttons */
.header-controls { display: flex; gap: 10px; align-items: center; }
.btn { 
    background: #1abc9c; color: white; border: none; padding: 8px 15px; 
    border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 14px; transition: background 0.2s;
}
.btn:hover { background: #16a085; }
.btn-load { background: #e67e22; display: inline-block; }
.btn-load:hover { background: #d35400; }
.btn-upload { background: #8e44ad; min-width: 110px; }
.btn-upload:hover { background: #6c3483; }
.btn-upload:disabled { background: #555; cursor: wait; }

/* UI Toggles & Action Buttons */
.btn-ui { background: #34495e; }
.btn-ui:hover { background: #2c3e50; border: 1px solid #1abc9c; margin: -1px; }
.btn-action { background: #3498db; }
.btn-action:hover { background: #2980b9; }

/* Unsichtbares Raster (Toggle-Klasse) */
.hide-grid .blocklyMainBackground { fill: #f4f7f6 !important; }
.hide-grid .blocklyGrid { display: none !important; }


/* --- WEB DASHBOARD VORSCHAU --- */
#webPreview {
    width: 350px;
    background: #ecf0f1;
    border-left: 2px solid #ccc;
    border-right: 2px solid #ccc;
    padding: 20px 10px;
    overflow-y: auto;
    transition: all 0.3s ease;
}

.preview-card {
    background: white;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.preview-header { margin-bottom: 10px; font-size: 16px; }
.preview-var { font-size: 12px; color: #95a5a6; float: right; }
.preview-value { font-size: 24px; font-weight: bold; text-align: center; color: #3498db; }
.preview-range-labels { display: flex; justify-content: space-between; font-size: 12px; color: #7f8c8d; margin-top: 5px; }

/* Schicker Toggle-Switch für die Vorschau */
.switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; }
input:checked + .slider { background-color: #2ecc71; }
input:checked + .slider:before { transform: translateX(22px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }
/* Block-Suche oben in der Toolbox */
.lk-search { padding: 8px 6px 6px; }
.lk-search input {
    width: 100%; box-sizing: border-box; min-width: 150px;
    padding: 6px 8px; border: 1px solid #b0b8bf; border-radius: 4px;
    font-size: 14px; background: #fff; color: #2c3e50;
}
.lk-search input:focus { outline: none; border-color: #1abc9c; box-shadow: 0 0 0 2px rgba(26,188,156,0.25); }