/* mc4 PC-Konfigurator – Frontend (gescoped unter .mc4pck) */
.mc4pck {
  --mc4-red: #E30613;
  --mc4-orange: #e85d04;
  --mc4-dark: #1F1F1F;
  --mc4-grey: #6b6b6b;
  --mc4-light: #f5f5f5;
  --mc4-border: #e2e2e2;
  /* Markenakzente – werden per Inline-Style überschrieben (Backend-Farben) */
  --mc4-accent: #EF7D00;   /* Orange */
  --mc4-accent2: #5BC5F2;  /* Hellblau */
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--mc4-dark);
  line-height: 1.5;
  max-width: 920px;
  margin: 0 auto;
}
.mc4pck * { box-sizing: border-box; }
.mc4pck-title { font-size: 22px; margin: 0 0 18px; }

.mc4pck-step {
  background: #fff;
  border: 1px solid var(--mc4-border);
  border-radius: 12px;
  padding: 24px 26px;
  margin-bottom: 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.mc4pck-step h2 { font-size: 18px; margin: 0 0 4px; display: flex; align-items: center; gap: 12px; }
.mc4pck-num {
  background: var(--mc4-accent); color: #fff;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; flex-shrink: 0;
}
.mc4pck-hint { color: var(--mc4-grey); font-size: 13px; margin: 4px 0 18px 40px; }

.mc4pck-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 12px; }
.mc4pck-opt {
  border: 2px solid var(--mc4-border); border-radius: 10px; padding: 14px 16px;
  cursor: pointer; transition: all .15s ease; position: relative; user-select: none;
}
.mc4pck-opt:hover { border-color: var(--mc4-orange); }
.mc4pck-opt .t { font-weight: 600; font-size: 15px; color:var(--mc4-dark); display:block; text-align:left; }
.mc4pck-opt .d { color: var(--mc4-grey); font-size: 12px; margin-top: 3px; display:block; text-align:left; }
.mc4pck-opt.sel { border-color: var(--mc4-accent); background: rgba(239,125,0,.06); }
.mc4pck-opt.sel::after { content: "\2713"; position: absolute; top: 10px; right: 12px; color: var(--mc4-accent); font-weight: 800; }

.mc4pck-field { margin-bottom: 14px; }
.mc4pck-field label { display:block; font-size:13px; font-weight:600; margin-bottom:5px; }
.mc4pck-field input, .mc4pck-field textarea {
  width:100%; padding:10px 12px; border:1px solid var(--mc4-border);
  border-radius:8px; font-size:14px; font-family:inherit; background:#fff; color:var(--mc4-dark);
}
.mc4pck-field input:focus, .mc4pck-field textarea:focus { outline:none; border-color:var(--mc4-orange); }
.mc4pck-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.mc4pck-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:11px 4px; border-bottom:1px solid var(--mc4-border); }
.mc4pck-toggle-row:last-child { border-bottom:none; }
.mc4pck-toggle-row .mc4pck-tlabel { flex:1 1 auto; min-width:0; padding:0; margin:0; text-align:left; }
.mc4pck-toggle-row .mc4pck-tlabel .t { font-weight:600; font-size:14px; color:var(--mc4-dark); display:block; }
.mc4pck-toggle-row .mc4pck-tlabel .d { font-size:12px; color:var(--mc4-grey); display:block; margin-top:2px; }

.mc4pck-switch { position:relative; width:46px; height:26px; flex-shrink:0; display:inline-block; }
.mc4pck-switch input { display:none; }
.mc4pck-slider { position:absolute; inset:0; background:#ccc; border-radius:26px; cursor:pointer; transition:.2s; }
.mc4pck-slider::before { content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.mc4pck-switch input:checked + .mc4pck-slider { background:var(--mc4-accent); }
.mc4pck-switch input:checked + .mc4pck-slider::before { transform:translateX(20px); }

.mc4pck-domainbox { margin-top:14px; padding:14px; background:var(--mc4-light); border-radius:8px; display:none; }
.mc4pck-domainbox.show { display:block; }

.mc4pck-warn { display:none; margin-top:12px; background:#fff3f3; border:1px solid var(--mc4-red); color:var(--mc4-red); padding:10px 14px; border-radius:8px; font-size:13px; }
.mc4pck-warn.show { display:block; }

.mc4pck-center { text-align:center; }
.mc4pck-btnbar { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:14px; }
.mc4pck button { border:none; border-radius:9px; padding:13px 22px; font-size:15px; font-weight:600; cursor:pointer; font-family:inherit; }
.mc4pck-btn-primary { background:var(--mc4-accent); color:#fff; }
.mc4pck-btn-primary:hover { background:var(--mc4-accent); filter:brightness(0.9); }
.mc4pck-btn-primary:disabled { opacity:.6; cursor:not-allowed; }
.mc4pck-btn-ghost { background:#fff; color:var(--mc4-dark); border:1px solid var(--mc4-border); }
.mc4pck-btn-ghost:hover { border-color:var(--mc4-dark); }

.mc4pck-sumcard { background:#fff; border:1px solid var(--mc4-border); border-radius:12px; padding:26px; }
.mc4pck-sumcard h3 { color:var(--mc4-accent); font-size:16px; margin:18px 0 8px; border-bottom:2px solid var(--mc4-light); padding-bottom:5px; }
.mc4pck-sumcard h3:first-child { margin-top:0; }
.mc4pck-sumrow { display:flex; justify-content:space-between; padding:5px 0; font-size:14px; gap:16px; }
.mc4pck-sumrow .k { color:var(--mc4-grey); }
.mc4pck-sumrow .v { font-weight:600; text-align:right; }
.mc4pck-pill { display:inline-block; background:var(--mc4-light); border-radius:20px; padding:4px 12px; font-size:13px; margin:3px 4px 0 0; }

.mc4pck-result { text-align:center; margin-top:18px; font-size:15px; }
.mc4pck-result.ok { color:#1a7f37; font-weight:600; }
.mc4pck-result.err { color:var(--mc4-red); font-weight:600; }

@media (max-width:600px){ .mc4pck-grid2{grid-template-columns:1fr;} }

/* Schlichter Schritt-Titel ohne Nummernkreis */
.mc4pck-h2-plain { font-size:18px; margin:0 0 4px; }
.mc4pck-hint-plain { margin-left:0; }

/* Preset-Leiste */
.mc4pck-preset-bar {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--mc4-border); border-radius:12px;
  padding:14px 18px; margin-bottom:22px;
}
.mc4pck-preset-bar label { font-weight:600; font-size:14px; }
.mc4pck-preset-bar select {
  flex:1 1 240px; padding:9px 12px; border:1px solid var(--mc4-border);
  border-radius:8px; font-size:14px; font-family:inherit; background:#fff; color:var(--mc4-dark);
}

/* Speichern / Laden */
.mc4pck-io { display:flex; gap:24px; flex-wrap:wrap; }
.mc4pck-io-col { display:flex; flex-direction:column; gap:8px; min-width:200px; flex:1; }
.mc4pck-io-col strong { font-size:13px; color:var(--mc4-grey); text-transform:uppercase; letter-spacing:.03em; }
.mc4pck-file-label { display:inline-block; text-align:center; cursor:pointer; }
.mc4pck-code-area {
  width:100%; margin-top:14px; padding:10px 12px; border:1px solid var(--mc4-border);
  border-radius:8px; font-family:monospace; font-size:12px; resize:vertical;
  background:#fafafa; color:var(--mc4-dark); word-break:break-all;
}
.mc4pck-io-msg { margin-top:10px; font-size:13px; font-weight:600; min-height:18px; }

/* Zugänge */
.mc4pck-access { border:1px solid var(--mc4-border); border-radius:10px; padding:12px 16px; margin-bottom:12px; }
.mc4pck-access-head { display:flex; align-items:center; gap:10px; font-weight:600; font-size:14px; cursor:pointer; }
.mc4pck-access-head input { width:18px; height:18px; }
.mc4pck-access-fields { margin-top:12px; padding-top:12px; border-top:1px solid var(--mc4-border); }
.mc4pck-access-note {
  margin-top:6px; background:#fff8ed; border:1px solid var(--mc4-accent);
  color:#8a4b00; padding:10px 14px; border-radius:8px; font-size:13px;
}