/* ===== Kompakter Planner (shared für Schließanlagen- & Einbruchschutz-Planer) ===== */

/* Container + Seitenabstände */
.plannerC-section,
.bs-planner-section{
  padding:24px var(--pad-desktop);
  background:#fff;
}
@media (max-width:768px){
  .plannerC-section,
  .bs-planner-section{
    padding-left:var(--pad-mobile);
    padding-right:var(--pad-mobile);
  }
}

/* Max-Breite 1200px */
.plannerC-inner,
.bs-planner-inner{
  max-width:1200px;
  width:100%;
  margin:0 auto;
}

/* Kopfbereich */
.plannerC-head h1,
.bs-head h1{
  margin:0 0 6px;
  font-size:clamp(1.6rem,1.2rem + 1.2vw,2rem);
}
.plannerC-head .muted,
.bs-head .muted{ color:#6a727c }

/* Karten, Typo-Helfer */
.card{
  border:1px solid var(--border);
  background:#fff;
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
  margin-bottom:16px;
}
.sub{ margin:0 0 10px; font-size:1.05rem }
.small{ font-size:.92rem }
.muted{ color:#6a727c }

/* Kontext-Wrapper */
.plannerC-context,
.bs-planner-section .ctx{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Chips (Radio-Pills) – beide Varianten vereinheitlicht */
.radio-chip,
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  cursor:pointer;
  background:#f7f9fc;
  font-weight:800;
}
.radio-chip input,
.chip input{ accent-color: var(--brand) }

/* Kopfzeilen-Zeile mit Chips etc. */
.ctx-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.chip-group{
  display:flex;
  gap:10px;
  flex:1 1 auto;
  min-width:0;
  flex-wrap:wrap;
}

/* Sicherheitsstufe (Range) unter der Überschrift, responsiv */
.sec-range{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.sec-title{ font-weight:700 }
.sec-range-input{ width:min(420px, 100%) }

/* (Falls einzelne ID-Breiten genutzt werden) */
#global_sec{ width:220px }

/* Hinweise-Listen */
.plannerC-notes,
.bs-planner-section .notes{
  margin:0;
  padding-left:18px;
}

/* Zwei-Spalten-Grids */
.plannerC-grid,
.grid-2{
  display:grid;
  gap:16px;
  grid-template-columns:1fr 1fr;
}
@media (max-width:900px){
  .plannerC-grid,
  .grid-2{ grid-template-columns:1fr; }
}

/* Panels in den Grids */
.panel .panel-title{ margin:0 0 8px; font-size:1.05rem }

/* Formular-Grundlayout – NUR innerhalb der Planner-Sektionen scopen */
.plannerC-section .row,
.bs-planner-section .row{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
}
.plannerC-section .row.two,
.bs-planner-section .row.two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width:640px){
  .plannerC-section .row.two,
  .bs-planner-section .row.two{ grid-template-columns:1fr; }
}

/* 6px Abstand unter Label-Text zu Controls – sauber und konsistent */
.plannerC-section .mini-form .row label,
.bs-planner-section .mini-form .row label,
.plannerC-section .row label,
.bs-planner-section .row label{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* Inputs/Selects in Planner-Bereichen */
.plannerC-section input[type="text"],
.plannerC-section input[type="number"],
.plannerC-section input[type="tel"],
.plannerC-section input[type="email"],
.plannerC-section textarea,
.plannerC-section select,
.bs-planner-section input[type="text"],
.bs-planner-section input[type="number"],
.bs-planner-section input[type="tel"],
.bs-planner-section input[type="email"],
.bs-planner-section textarea,
.bs-planner-section select{
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  font-size:1rem;
  width:100%;
}

/* Kleine Aktionsreihen */
.actions{ display:flex; gap:10px }

/* Buttons im HGS-Stil (passen zu restlicher Seite) */
.btn-primary,
.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:10px;
  text-decoration:none;
  font-weight:800;
  cursor:pointer;
}
.btn-primary{ background:var(--brand); color:#fff; border:none }
.btn-primary:hover{ filter:brightness(.95) }
.btn-secondary{ background:#f7f9fc; color:#111; border:1px solid #dfe6ef }
.btn-secondary:hover{ background:#fff }

/* Gleich breite CTA-Buttons in Anfragen */
.rq-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:8px;
}
.btn-wide{ flex:1 1 260px }

/* Listen für Türen/Schlüssel */
.list{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  background:#fff;
}
.item-main .title{ margin-bottom:4px }
.item-main .muted{ color:#6a727c }
.item-main .meta{
  display:flex;
  gap:12px;
  color:#445;
  font-size:.95rem;
  flex-wrap:wrap;
}
.item-actions{ display:flex; gap:6px }
.obj-mini{
  border:1px solid var(--border);
  background:#f6f8fb;
  color:#111;
  padding:8px 10px;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
}
.obj-mini:hover{
  background:#fff;
  color:var(--brand);
  border-color: rgba(0,183,255,.35);
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}
.obj-mini.danger{ border-color:#ffd9d9; color:#b70f0f; background:#fff5f5 }
.obj-mini.danger:hover{ border-color:#ffbcbc; color:#8f0b0b }

/* Empty-Placeholder */
.empty{
  border:1px dashed var(--border);
  border-radius:12px;
  padding:14px;
  text-align:center;
  color:#6a727c;
}

/* Matrix (Zuweisung) – mobil scrollbar, erste Spalte sticky */
.matrix-wrap{ margin-top:8px }
.matrix-scroller{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch }
.matrix{
  border-collapse:separate;
  border-spacing:0;
  width:max-content;
  min-width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
.matrix th, .matrix td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);
  background:#fff;
}
.matrix thead th{
  background:#fbfdff;
  font-weight:800;
  text-align:left;
  white-space:nowrap;
}
.matrix th.stub{
  position:sticky;
  left:0;
  z-index:2;
  min-width:240px;
}
.matrix tbody th.rowhead{
  position:sticky;
  left:0;
  background:#fff;
  z-index:1;
  min-width:240px;
}
.matrix tr:last-child th,
.matrix tr:last-child td{ border-bottom:none }
.matrix th:last-child,
.matrix td:last-child{ border-right:none }

/* Checkbox-Kacheln in Matrix */
.tick{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border:1px solid var(--border);
  border-radius:8px;
  cursor:pointer;
  background:#fff;
}
.tick input{ appearance:none; width:0; height:0; position:absolute }
.tick span{
  width:16px;
  height:16px;
  border-radius:4px;
  background:transparent;
  display:block;
}
.tick input:checked + span{ background:var(--brand) }

/* Mobile-Tweaks für Kopf/Kontext */
@media (max-width:640px){
  .plannerC-context,
  .bs-planner-section .ctx{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding-top:6px;
  }
  .ctx-row{ order:1; }
  .plannerC-notes,
  .bs-planner-section .notes{ order:4; }
}