/*
// www.kreativekiste.de
// 09.04.2026
// Version 2.1
*/
body {
    margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; height: 100vh;
    /* Anpassung: Die mittlere Spalte ist jetzt mindestens so breit wie das A4-Blatt + Rand */
    display: grid; grid-template-columns: 250px minmax(1163px, 1fr) 250px; grid-template-rows: 60px 1fr;
    grid-template-areas: "history tools components" "history canvas components";
    background-color: #2c3e50; 
    /* overflow auf auto geändert, damit bei kleinen Bildschirmen horizontal gescrollt werden kann */
    overflow: auto; 
}

.area { background-color: #ffffff; padding: 15px; border: 2px solid #000; }
#area-1 { grid-area: history; border-right: 3px solid #000; border-top: none; border-bottom: none; border-left: none; overflow-y: auto; }
#area-2 { grid-area: tools; border-bottom: 3px solid #000; border-top: none; border-left: none; border-right: none; display: flex; align-items: center; gap: 15px; background-color: #ecf0f1; }
#area-3 { grid-area: components; border-left: 3px solid #000; border-top: none; border-bottom: none; border-right: none; overflow-y: auto; }

#area-4 { 
    grid-area: canvas; 
    position: relative; 
    border: 1px solid #7f8c8d; 
    background-color: white;
    background-image: radial-gradient(#bdc3c7 1px, transparent 1px); 
    background-size: 20px 20px; 
    width: 1123px; 
    height: 794px; 
    margin: 20px auto; 
    padding: 0; /* GANZ WICHTIG: Kein Padding, sonst verschiebt sich das Blatt! */
    box-shadow: 0 0 15px rgba(0,0,0,0.3); 
    overflow: hidden; 
}

/* NEU: Der gezeichnete SVG-Rahmen (1-17 / A-H) */
#drawing-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Blockiert keine Klicks */
    z-index: 0;
}

h2 { font-size: 1.2rem; margin-top: 0; margin-bottom: 15px; color: #34495e; border-bottom: 1px solid #ccc; padding-bottom: 5px; }
.tool-btn { padding: 8px 15px; background: #fff; border: 1px solid #bdc3c7; border-radius: 4px; cursor: pointer; font-weight: bold; }
.tool-btn:hover { background: #e0e0e0; }

.page-tab { padding: 5px 10px; background-color: #bdc3c7; cursor: pointer; border-radius: 4px; font-size: 14px; }
.page-tab.active { background-color: #3498db; color: white; font-weight: bold; }

/* ORDNER STRUKTUR */
.folder { border: 1px solid #bdc3c7; border-radius: 4px; margin-bottom: 10px; overflow: hidden; background: #fff; }
.folder-header { padding: 10px; background: #ecf0f1; cursor: pointer; font-weight: bold; display: flex; justify-content: space-between; user-select: none; color: #2c3e50; }
.folder-header:hover { background: #d0d3d4; }
.folder-content { padding: 10px; display: none; background: #fdfdfd; }
.folder.open .folder-content { display: block; }
.folder.open .folder-header::after { content: "▼"; color: #7f8c8d; }
.folder:not(.open) .folder-header::after { content: "◀"; color: #7f8c8d; }

.component-item { position: relative; padding: 10px; margin-bottom: 10px; background: #fff; border: 1px solid #bdc3c7; text-align: center; cursor: grab; border-radius: 4px; display: flex; justify-content: center; align-items: center; }
.component-item:active { cursor: grabbing; }

.edit-comp-btn { position: absolute; top: 5px; right: 5px; background: #ecf0f1; border: 1px solid #bdc3c7; border-radius: 3px; cursor: pointer; font-size: 12px; padding: 2px 5px; z-index: 10; }
.edit-comp-btn:hover { background: #3498db; color: white; }

.history-item { font-size: 0.9em; padding: 5px 0; color: #7f8c8d; border-bottom: 1px dashed #ecf0f1; }

/* HIER WAR DER FEHLER: pointer-events von none auf all geändert! */
.symbol { pointer-events: all; user-select: none; }

.port { pointer-events: all; cursor: crosshair; }
.port:hover { fill: #ff4d4d; r: 6; }
.dropped-component { position: absolute; cursor: move; background: transparent; border: none; user-select: none; z-index: 10; }

#wiring-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; }
#wiring-layer path { pointer-events: auto; cursor: pointer; transition: stroke 0.2s, stroke-width 0.2s; }
#wiring-layer .wire-handle { pointer-events: auto; }

.wire-handle { fill: #3498db; stroke: white; stroke-width: 1.5; r: 5; transition: r 0.2s ease-in-out; }
.wire-handle:hover { fill: #e74c3c; r: 7; }
.v-handle { cursor: ew-resize; } 
.h-handle { cursor: ns-resize; } 

.coil-rect { fill: white; }

.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(44, 62, 80, 0.8); display: flex; justify-content: center; align-items: center; z-index: 100000; }
.modal.hidden { display: none !important; }
.modal-content { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); width: 420px; }
.editor-toolbar { display: flex; gap: 5px; margin-bottom: 15px; flex-wrap: wrap; }
.editor-btn { padding: 5px 10px; border: 1px solid #bdc3c7; background: #ecf0f1; cursor: pointer; border-radius: 3px; }
.editor-btn.active { background: #3498db; color: white; border-color: #2980b9; }
.editor-canvas-container { display: flex; justify-content: center; background: #fdfdfd; background-image: radial-gradient(#bdc3c7 1px, transparent 1px); background-size: 10px 10px; border: 1px solid #bdc3c7; margin-bottom: 15px; height: 300px; }
.editor-footer { display: flex; justify-content: space-between; }
#editor-canvas { width: 300px; height: 300px; overflow: visible; }

#context-menu { position: absolute; background: #fff; border: 1px solid #bdc3c7; box-shadow: 2px 2px 10px rgba(0,0,0,0.2); border-radius: 4px; padding: 5px 0; z-index: 100000; min-width: 150px; }
.menu-item { padding: 8px 15px; cursor: pointer; font-size: 13px; color: #2c3e50; }
.menu-item:hover { background: #ecf0f1; }
.comp-label { position: absolute; font-size: 12px; font-weight: bold; font-family: Arial, sans-serif; color: #2c3e50; pointer-events: none; white-space: nowrap; }
.pos-left { right: 100%; margin-right: 5px; top: 50%; transform: translateY(-50%); }
.pos-bottom-left { right: 100%; margin-right: 5px; bottom: 0; }
.parent-selected { outline: 2px dashed #e74c3c; outline-offset: 4px; }
.assign-mode { cursor: crosshair !important; }
.terminal-label { position: absolute; font-size: 11px; font-family: Arial, sans-serif; color: #34495e; pointer-events: none; }
.pos-term-top { top: 8px; right: 10px; }
.pos-term-bottom { bottom: 8px; right: 10px; }

.hidden { display: none !important; }

/* Menü-Bereiche ausblenden */
.contact-only, .power-only, .assign-only, .motor-only, .terminal-only, .lamp-only, .arrow-only, .taster-only { display: none; }

/* --- INHALTSVERZEICHNIS (IHV) --- */
.ihv-header-row { display: flex; align-items: center; margin-bottom: 20px; border-bottom: 2px solid #bdc3c7; padding-bottom: 10px; }
.ihv-row { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; padding: 10px; background: #ecf0f1; border-radius: 4px; border: 1px solid #bdc3c7; }
.ihv-page-name { font-weight: bold; width: 90px; color: #2c3e50; font-size: 1.1em; }
.ihv-input { padding: 8px; border: 1px solid #bdc3c7; border-radius: 4px; font-family: Arial, sans-serif; }
.ihv-input:focus { outline: 2px solid #3498db; border-color: transparent; }
.ihv-large { flex-grow: 1; }
.ihv-small { width: 120px; text-align: center; }