html, body { margin:0; padding:0; width:100%; height:100%; }
body { background:#202020; color:white; font-family:Arial,Helvetica,sans-serif; }
.app { width:100%; height:100dvh; display:flex; flex-direction:column; align-items:center; box-sizing:border-box; padding:12px; }
h1 { margin:0 0 12px; font-size:1.6rem; font-weight:600; }
.board-container {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: auto;

    display: flex;
    flex-direction: column;
    align-items: safe center;
    justify-content: safe center;

    overscroll-behavior: contain;
    background: #202020;
}
.board-area {
    position: relative;
    width: max-content;
    height: max-content;
    margin: auto;
    flex-shrink: 0;
}
.board { display:block; width:100%; height:100%; max-width:none; max-height:none; object-fit:fill; cursor:crosshair; touch-action:none; user-select:none; }
.wiring-layer { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; }
.power-switch { position:absolute; left:7.13%; top:29.74%; width:4.87%; height:6.03%; cursor:pointer; z-index:10; }
.power-led { position:absolute; left:33.08%; top:28.97%; width:1.24%; height:2.05%; border-radius:50%; pointer-events:none; z-index:5; }
.power-led.on { background:#ff3030; box-shadow:0 0 6px 3px #ff2020,0 0 14px 6px rgba(255,0,0,.65); }
.coordinates { white-space:nowrap; }
.statusbar { flex-shrink:0; width:100%; box-sizing:border-box; display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:32px; padding:6px 10px; background:#111; color:#ddd; font-family:monospace; font-size:.9rem; }
.toolbar { flex-shrink:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; width:100%; padding:0 0 8px; box-sizing:border-box; }
.toolbar button { background:#333; color:white; border:1px solid #777; border-radius:5px; padding:6px 11px; cursor:pointer; touch-action:manipulation; }
.toolbar button:active { background:#555; }
.zoom-value { display:inline-block; min-width:58px; text-align:center; font:13px monospace; }
.board-container:fullscreen { background:#202020; width:100vw; height:100vh; overflow:auto; }
@media (max-width:600px) { .app { padding:5px; } h1 { font-size:1.1rem; margin-bottom:5px; } .statusbar { font-size:.7rem; padding:5px; } .toolbar { padding-bottom:5px; } }

/* iPhone: Pseudo-Vollbild, ohne Eingriff in die Board-Overlays */
.pseudo-fullscreen-exit { display:none; }
body.pseudo-fullscreen { overflow:hidden; }
body.pseudo-fullscreen .app { position:fixed; inset:0; width:100%; height:100dvh; padding:0; z-index:100; background:#202020; }
body.pseudo-fullscreen h1, body.pseudo-fullscreen .toolbar { display:none; }
body.pseudo-fullscreen .board-container { flex:1; min-height:0; width:100%; }
body.pseudo-fullscreen .pseudo-fullscreen-exit { display:block; position:fixed; top:calc(env(safe-area-inset-top, 0px) + 8px); right:calc(env(safe-area-inset-right, 0px) + 8px); z-index:200; padding:8px 12px; color:white; background:rgba(20,20,20,.85); border:1px solid #aaa; border-radius:6px; font:14px Arial,sans-serif; touch-action:manipulation; }
body.pseudo-fullscreen .statusbar { padding-bottom:max(5px, env(safe-area-inset-bottom, 0px)); }