/* ── Strecken- und Bahnhofsplaene Modul ──────────────────────────────────── */
:root {
    --stp-bg:     #0f172a;
    --stp-panel:  #1a2840;
    --stp-canvas: #0a1628;
    --stp-green:  #10b981;
    --stp-green2: #6ee7b7;
    --stp-border: rgba(16,185,129,.15);
    --stp-text:   #e2e8f0;
    --stp-muted:  #64748b;
}
#streckenplanScreen {
    display:flex;flex-direction:column;height:100vh;
    overflow:hidden;padding:0;box-sizing:border-box;
    background:var(--stp-bg);color:var(--stp-text);
    font-family:inherit;
}
/* ── Header ─────────────────────────────────────────────────────────────── */
.stp-header {
    display:flex;align-items:center;gap:12px;
    padding:12px 20px;
    background:linear-gradient(135deg,rgba(16,185,129,.12) 0%,rgba(10,22,40,0) 60%),var(--stp-panel);
    border-bottom:1px solid var(--stp-border);flex-shrink:0;
}
.stp-header h2{margin:0;font-size:1.1rem;color:var(--stp-green2);font-weight:700;}
.stp-back-btn{
    background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);
    color:var(--stp-green);padding:5px 12px;border-radius:7px;
    cursor:pointer;font-size:0.82rem;transition:all .12s;
}
.stp-back-btn:hover{background:rgba(16,185,129,.2);color:#fff;}
/* ── Overview ───────────────────────────────────────────────────────────── */
.stp-overview{flex:1;overflow-y:auto;padding:24px;}
.stp-plan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:16px;}
.stp-plan-card{
    background:var(--stp-panel);border:1px solid var(--stp-border);
    border-radius:12px;padding:18px;cursor:pointer;transition:all .18s;
}
.stp-plan-card:hover{
    border-color:rgba(16,185,129,.55);background:#1a3040;
    transform:translateY(-3px);box-shadow:0 8px 24px rgba(16,185,129,.12);
}
.stp-plan-card-icon{font-size:2rem;margin-bottom:8px;}
.stp-plan-card-name{font-weight:700;font-size:0.95rem;margin-bottom:4px;color:var(--stp-green2);}
.stp-plan-card-meta{font-size:0.74rem;color:var(--stp-muted);}
.stp-new-card{
    border:2px dashed rgba(16,185,129,.35);background:rgba(16,185,129,.04);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:130px;
}
.stp-new-card:hover{border-color:rgba(16,185,129,.65);background:rgba(16,185,129,.09);}
.stp-new-card span{color:var(--stp-green);font-size:2.2rem;}
.stp-new-card p{color:var(--stp-green);margin:0;font-size:0.85rem;font-weight:700;}
/* ── Editor ─────────────────────────────────────────────────────────────── */
.stp-editor{display:none;flex:1;flex-direction:column;overflow:hidden;}
.stp-editor.active{display:flex;}
.stp-toolbar{
    display:flex;align-items:center;gap:5px;padding:7px 14px;
    background:var(--stp-panel);
    border-bottom:1px solid var(--stp-border);flex-shrink:0;flex-wrap:wrap;
}
.stp-toolbar-btn{
    background:rgba(16,185,129,.06);border:1px solid rgba(16,185,129,.12);
    color:#94a3b8;padding:5px 10px;border-radius:7px;cursor:pointer;
    font-size:0.78rem;transition:all .12s;white-space:nowrap;
}
.stp-toolbar-btn:hover{background:rgba(16,185,129,.14);color:#e2e8f0;border-color:rgba(16,185,129,.3);}
.stp-toolbar-btn.active{
    background:rgba(16,185,129,.22);border-color:var(--stp-green);
    color:var(--stp-green);font-weight:600;
}
.stp-toolbar-sep{width:1px;height:20px;background:rgba(16,185,129,.15);margin:0 2px;}
.stp-plan-name-input{
    background:rgba(16,185,129,.07);border:none;
    border-bottom:2px solid rgba(16,185,129,.35);
    color:var(--stp-text);font-size:1rem;font-weight:700;
    padding:3px 8px;outline:none;min-width:180px;border-radius:4px 4px 0 0;
    transition:border-color .15s;
}
.stp-plan-name-input:focus{border-bottom-color:var(--stp-green);}
/* ── Page Tabs ───────────────────────────────────────────────────────────── */
.stp-pages{
    display:flex;gap:4px;padding:5px 14px;
    background:var(--stp-bg);border-bottom:1px solid var(--stp-border);
    flex-shrink:0;align-items:flex-end;
}
.stp-page-tab{
    padding:4px 16px;border-radius:7px 7px 0 0;
    background:rgba(16,185,129,.05);border:1px solid rgba(16,185,129,.12);
    border-bottom:none;color:var(--stp-muted);cursor:pointer;font-size:0.8rem;
    transition:all .12s;
}
.stp-page-tab.active{
    background:var(--stp-panel);color:var(--stp-green);
    border-color:rgba(16,185,129,.4);font-weight:600;
}
.stp-page-tab:hover:not(.active){background:rgba(16,185,129,.1);color:#94a3b8;}
.stp-add-page-btn{
    background:none;border:1px dashed rgba(16,185,129,.25);color:var(--stp-muted);
    padding:3px 10px;border-radius:6px;cursor:pointer;font-size:0.8rem;margin-left:4px;
}
.stp-add-page-btn:hover{color:var(--stp-green);border-color:rgba(16,185,129,.5);}
/* ── Editor body ─────────────────────────────────────────────────────────── */
.stp-editor-body{display:flex;flex:1;overflow:hidden;}
.stp-sidebar{
    width:178px;flex-shrink:0;background:var(--stp-panel);
    border-right:1px solid var(--stp-border);overflow-y:auto;padding:8px;
}
.stp-sidebar-cat{
    font-size:0.62rem;color:var(--stp-green);text-transform:uppercase;
    letter-spacing:.1em;padding:10px 4px 4px;font-weight:800;
    border-bottom:1px solid rgba(16,185,129,.1);margin-bottom:4px;
}
.stp-element-btn{
    display:flex;align-items:center;gap:7px;width:100%;padding:6px 8px;
    border-radius:7px;background:none;border:1px solid transparent;color:#94a3b8;
    cursor:pointer;font-size:0.78rem;margin-bottom:2px;text-align:left;
    transition:all .12s;user-select:none;
}
.stp-element-btn:hover{
    background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.2);
    color:var(--stp-text);
}
.stp-element-btn.active{
    background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.4);
    color:var(--stp-green);
}
/* ── Canvas ──────────────────────────────────────────────────────────────── */
.stp-canvas-wrap{flex:1;overflow:hidden;position:relative;background:#ffffff;}
#stpCanvas{display:block;}
/* ── Properties Panel ────────────────────────────────────────────────────── */
.stp-props{
    width:178px;flex-shrink:0;background:var(--stp-panel);
    border-left:1px solid var(--stp-border);padding:12px;overflow-y:auto;
}
.stp-props h4{
    margin:0 0 12px;font-size:0.78rem;color:var(--stp-green);
    text-transform:uppercase;letter-spacing:.08em;font-weight:800;
    border-bottom:1px solid rgba(16,185,129,.15);padding-bottom:8px;
}
.stp-prop-row{margin-bottom:10px;}
.stp-prop-label{font-size:0.7rem;color:var(--stp-muted);margin-bottom:3px;font-weight:600;}
.stp-prop-input{
    width:100%;background:rgba(16,185,129,.06);
    border:1px solid rgba(16,185,129,.15);border-radius:6px;
    color:var(--stp-text);padding:5px 8px;font-size:0.8rem;box-sizing:border-box;
}
.stp-prop-input:focus{outline:none;border-color:var(--stp-green);background:rgba(16,185,129,.1);}
.stp-rot-btns{display:flex;gap:4px;}
.stp-rot-btn{
    flex:1;padding:5px;background:rgba(16,185,129,.07);
    border:1px solid rgba(16,185,129,.18);color:#94a3b8;
    border-radius:6px;cursor:pointer;font-size:0.75rem;transition:all .12s;
}
.stp-rot-btn:hover,.stp-rot-btn.active{
    background:rgba(16,185,129,.2);border-color:var(--stp-green);color:var(--stp-green);
}
.stp-del-btn{
    width:100%;padding:7px;background:rgba(239,68,68,.08);
    border:1px solid rgba(239,68,68,.22);color:#fca5a5;
    border-radius:7px;cursor:pointer;font-size:0.8rem;margin-top:10px;transition:all .12s;
}
.stp-del-btn:hover{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.45);}
.stp-no-sel{color:var(--stp-muted);font-size:0.8rem;text-align:center;margin-top:30px;line-height:1.8;}
/* ── Legend ──────────────────────────────────────────────────────────────── */
#stpLegend{
    background:rgba(16,185,129,.05);
    border-left:1px solid var(--stp-border);
    border-top:1px solid var(--stp-border);
    padding:10px;overflow-y:auto;max-height:280px;
}

/* Color swatches in toolbar */
.stp-color-swatch {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.25);
    cursor: pointer; padding: 0; flex-shrink: 0;
    transition: transform .12s, outline .12s;
}
.stp-color-swatch:hover { transform: scale(1.15); border-color: rgba(255,255,255,.6); }