/* Carport-Planer Zimmerei Stange – Farben hier an das Markenbuch anpassen */
#scp-planer{
  --bg:transparent; --surface:#ffffff; --surface-2:#eef2f6; --ink:#1b2433; --muted:#566170; --line:#d4dbe3;
  --accent:#1667ad; --accent-ink:#ffffff; --accent-soft:#dbe8f5;
  --rule:#f0c132; --rule-ink:#1b1b16; --sky-top:#dde8ef; --sky-bot:#f3f5f2;
  --ok:#2c7349; --ok-bg:#dcefe2; --warn:#8a5d0c; --warn-bg:#f6e8c8; --bad:#a3352a; --bad-bg:#f6dcd8;
  --f-display:inherit; --f-body:inherit; --f-mono:ui-monospace,Menlo,Consolas,monospace;
  color:var(--ink); font-size:15px; line-height:1.5; container-type:inline-size; color-scheme:light; position:relative;
}

#scp-planer, #scp-planer *{box-sizing:border-box}
#scp-planer [hidden]{display:none!important}
#scp-planer .app{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:22px;align-items:start}
#scp-planer .stage{position:sticky;top:12px;min-width:0}
#scp-planer #viewer{position:relative;height:min(74vh,700px);border-radius:10px;overflow:hidden;
  background:linear-gradient(var(--sky-top),var(--sky-bot));background-size:cover;background-position:center}
#scp-planer #viewer canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#scp-planer .dims{position:absolute;left:12px;top:12px;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 24px);pointer-events:none}
#scp-planer .rule{font-family:var(--f-mono);font-size:12.5px;font-weight:500;color:var(--rule-ink);background:var(--rule);
  padding:3px 8px 6px;border-radius:2px;font-variant-numeric:tabular-nums;
  background-image:repeating-linear-gradient(90deg,var(--rule-ink) 0 1px,transparent 1px 6px);
  background-size:100% 3px;background-repeat:no-repeat;background-position:bottom}
#scp-planer .vbtns{position:absolute;right:12px;bottom:12px;display:flex;gap:6px;flex-wrap:wrap;justify-content:end}
#scp-planer .vbtns button{border:1px solid var(--line);background:var(--surface);padding:6px 10px;border-radius:6px;cursor:pointer;font-size:13px}
#scp-planer .hint{font-size:13px;color:var(--muted);margin:8px 2px 0}
#scp-planer .panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding-block:6px 18px;padding-inline:18px;min-width:0}
#scp-planer .grp{padding-block:14px;border-bottom:1px solid var(--line);display:grid;gap:10px}
#scp-planer .grp:last-child{border-bottom:0}
#scp-planer .grp h3{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#scp-planer .lbl{font-size:13px;color:var(--muted);margin-bottom:-4px}
#scp-planer .seg{display:flex;flex-wrap:wrap;gap:6px}
#scp-planer .seg button{border:1px solid var(--line);background:var(--surface);padding:7px 11px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-size:14px;line-height:1.2;text-align:left}
#scp-planer .seg button:hover{border-color:var(--accent)}
#scp-planer .seg button:disabled{opacity:.45;cursor:not-allowed}
#scp-planer .seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
#scp-planer .dot{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgb(0 0 0/.25)}
#scp-planer .rng{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center}
#scp-planer .rng label{font-size:14px}
#scp-planer .rng output{font-family:var(--f-mono);font-size:13.5px;font-variant-numeric:tabular-nums}
#scp-planer .rng input{grid-column:1/-1;width:100%;accent-color:var(--accent)}
#scp-planer .chk{display:flex;gap:9px;align-items:flex-start;font-size:14px;cursor:pointer}
#scp-planer .chk input:disabled+span{opacity:.5}
#scp-planer .chk input{margin-top:3px;accent-color:var(--accent);width:16px;height:16px;flex:none}
#scp-planer .sub{font-size:13px;color:var(--muted);margin:0}
#scp-planer .adj{display:grid;gap:8px}
#scp-planer .file{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#scp-planer .btn{border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);padding:9px 14px;border-radius:7px;cursor:pointer;font-weight:500}
#scp-planer .btn.ghost{background:transparent;color:var(--accent)}
#scp-planer .card{background:var(--surface-2);border-radius:8px;padding:14px;display:grid;gap:10px;min-width:0}
#scp-planer .card h2{font-size:22px;font-weight:700}
#scp-planer .sum{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;font-size:14px}
#scp-planer .sum dt{color:var(--muted)}
#scp-planer .sum dd{margin:0}
#scp-planer textarea{width:100%;min-height:110px;border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:8px;font-family:var(--f-mono);font-size:12px;resize:vertical}
#scp-planer ol.steps{margin:0;padding-left:20px;font-size:14px;display:grid;gap:3px}
#scp-planer .checks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#scp-planer .checks li{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:13.5px;align-items:start}
#scp-planer .pill{font-family:var(--f-display);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:99px;white-space:nowrap;text-align:center;min-width:70px}
#scp-planer .pill.ok{background:var(--ok-bg);color:var(--ok)}
#scp-planer .pill.warn{background:var(--warn-bg);color:var(--warn)}
#scp-planer .pill.bad{background:var(--bad-bg);color:var(--bad)}
#scp-planer .pill.info{background:var(--accent-soft);color:var(--accent)}
#scp-planer .checks small{grid-column:2;color:var(--muted);font-size:12.5px}
#scp-planer .foot{font-size:12px;color:var(--muted);margin:0}
#scp-planer .tbl{overflow-x:auto}
#scp-planer table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
#scp-planer th{font-family:var(--f-display);font-weight:600;text-align:left;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 6px;border-bottom:1px solid var(--line)}
#scp-planer td{padding:6px;border-bottom:1px solid var(--line);vertical-align:top}
#scp-planer td.n, #scp-planer th.n{text-align:right;white-space:nowrap}
#scp-planer td small{display:block;color:var(--muted);font-size:12px}
#scp-planer tr.grp-h td{font-family:var(--f-display);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:12px;color:var(--accent);padding-top:12px}
#scp-planer .tot{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:14px;font-variant-numeric:tabular-nums}
#scp-planer .tot .big{font-family:var(--f-display);font-size:24px;font-weight:700}
#scp-planer .tot span:nth-child(even){text-align:right;font-family:var(--f-mono)}
#scp-planer .tot .muted{color:var(--muted)}
#scp-planer .warn{border-left:3px solid var(--warn);padding:4px 0 4px 10px;font-size:13px;display:grid;gap:4px}
#scp-planer .warn ul{margin:0;padding-left:18px}
#scp-planer details summary{cursor:pointer;font-weight:500}
#scp-planer .plist{display:grid;grid-template-columns:1fr 92px;gap:6px 10px;align-items:center;margin-top:10px;font-size:13px}
#scp-planer .plist input{width:100%;border:1px solid var(--line);border-radius:5px;background:var(--surface);padding:4px 6px;text-align:right;font-family:var(--f-mono);font-size:12.5px}
#scp-planer .plist span small{color:var(--muted)}
#scp-planer .status{font-size:13px;color:var(--ok);min-height:1em}
#scp-planer .status.err{color:var(--warn)}
@media (max-width:920px){#scp-planer .app{grid-template-columns:minmax(0,1fr)}#scp-planer .stage{position:relative;top:0}#scp-planer #viewer{height:54vh;min-height:300px}}
@media (prefers-reduced-motion:reduce){#scp-planer, #scp-planer *{transition:none!important}}
#scp-planer h2,#scp-planer h3{margin:0;font-family:var(--f-display);line-height:1.2;text-wrap:balance}
#scp-planer button,#scp-planer input,#scp-planer textarea,#scp-planer select{font:inherit;color:inherit}
#scp-planer :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#scp-planer .app{grid-template-columns:minmax(0,1fr)}
#scp-planer .stage{position:relative;top:auto}
@container (min-width: 900px){
  #scp-planer .app{grid-template-columns:minmax(0,1fr) 400px}
  #scp-planer .stage{position:sticky;top:var(--scp-sticky-top,24px)}
}
#scp-planer .fld{display:grid;gap:4px}
#scp-planer .fld label{font-size:14px;font-weight:500}
#scp-planer .fld input,#scp-planer .fld textarea{width:100%;border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:9px 10px;font-family:inherit;font-size:15px;min-height:auto}
#scp-planer .scp-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
#scp-planer a{color:var(--accent)}
#scp-planer .btn:disabled{opacity:.6;cursor:wait}
#scp-planer input[type=range]{-webkit-appearance:auto!important;appearance:auto!important;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;height:auto!important;min-height:0;margin:4px 0;accent-color:var(--accent)}
#scp-planer input[type=checkbox]{width:16px;height:16px;min-height:0;padding:0;margin:3px 0 0}