/* neonp QR-Creator — in neonp eingebettet.
   ALLE Regeln sind unter .qr-scope gescopt, damit die eigenen Klassennamen
   (.btn, .hero, .feature, .field, .grid, .label …) NICHT mit dem globalen
   Design-System kollidieren. Farben sind bereits die neonp-Palette; Schriften
   nutzen die self-hosted neonp-Stacks (Lexend / Hanken Grotesk / Space Mono). */

.qr-scope{
  --bg:        #0a0a0a;
  --panel:     #131313;
  --panel-2:   #181818;
  --ink:       #f2f2f2;
  --muted:     #8a8a8a;
  --line:      #2a2a2a;
  --cyan:      #00f0ff;
  --magenta:   #bd00ff;
  --red:       #ff005c;
  --mono: "Space Mono", ui-monospace, Consolas, monospace;
  --sans: "Hanken Grotesk", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --head: "Lexend", var(--sans);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.5;
}
.qr-scope *{ box-sizing:border-box; }

.qr-scope .wrap{ max-width:1160px; margin:0 auto; padding:24px 0 40px; }

/* ---------- Hero ---------- */
.qr-scope .hero{ margin-bottom:44px; }
.qr-scope .hero__title{
  font-family:var(--head);
  font-weight:900; letter-spacing:-.02em; line-height:.92;
  font-size:clamp(2.6rem, 7vw, 5rem);
  margin:0 0 18px; text-transform:uppercase;
}
.qr-scope .hero__accent{ color:var(--cyan); text-shadow:0 0 22px rgba(0,240,255,.45); }
.qr-scope .hero__sub{ max-width:560px; color:var(--muted); font-size:1rem; margin:0; }

/* ---------- Layout ---------- */
.qr-scope .grid{
  display:grid; grid-template-columns:1fr 380px; gap:28px; align-items:start;
}
@media (max-width:900px){ .qr-scope .grid{ grid-template-columns:1fr; } }

.qr-scope .controls{ display:flex; flex-direction:column; gap:26px; }

.qr-scope .label{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}

/* ---------- Felder ---------- */
.qr-scope .field{
  width:100%; background:var(--panel); color:var(--ink);
  border:2px solid var(--line); border-radius:0;
  padding:16px 18px; font-size:1.05rem; font-family:var(--sans);
  outline:none; transition:border-color .12s, box-shadow .12s;
}
.qr-scope .field::placeholder{ color:#5a5a5a; }
.qr-scope .field:focus{ border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,240,255,.15); }
.qr-scope .field--area{ resize:vertical; font-family:var(--mono); font-size:.95rem; }
.qr-scope .field--select{ padding:12px 14px; font-size:.95rem; cursor:pointer; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) center, calc(100% - 13px) center;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.qr-scope .row{ display:grid; grid-template-columns:1fr 140px; gap:10px; margin-top:10px; }

/* Tabs */
.qr-scope .tabs{ display:flex; gap:8px; margin-bottom:14px; }
.qr-scope .tab{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.08em;
  background:var(--panel); color:var(--muted);
  border:2px solid var(--line); padding:9px 14px; cursor:pointer;
  text-transform:uppercase; transition:.12s;
}
.qr-scope .tab:hover{ color:var(--ink); border-color:#3a3a3a; }
.qr-scope .tab.is-active{ color:#000; background:var(--cyan); border-color:var(--cyan);
  box-shadow:4px 4px 0 rgba(0,240,255,.25); }

.qr-scope .data-panel{ display:flex; flex-direction:column; gap:0; }
.qr-scope .data-panel .field + .row{ margin-top:10px; }
.qr-scope .is-hidden{ display:none !important; }

/* ---------- Presets ---------- */
.qr-scope .presets{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
@media (max-width:560px){ .qr-scope .presets{ grid-template-columns:repeat(3,1fr); } }
.qr-scope .preset{
  background:var(--panel); border:2px solid var(--line); padding:10px 8px 9px;
  cursor:pointer; text-align:center; transition:.12s; display:flex;
  flex-direction:column; align-items:center; gap:7px;
}
.qr-scope .preset:hover{ border-color:#3a3a3a; transform:translateY(-2px); }
.qr-scope .preset.is-active{ border-color:var(--cyan); box-shadow:4px 4px 0 rgba(0,240,255,.25); }
.qr-scope .preset__chip{
  width:100%; height:34px; border:1px solid rgba(255,255,255,.08);
}
.qr-scope .preset__name{ font-size:.72rem; font-weight:700; line-height:1.15; }
.qr-scope .preset__tag{ font-family:var(--mono); font-size:.58rem; letter-spacing:.04em; color:var(--muted); }

/* ---------- Farben / Slider ---------- */
.qr-scope .color-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.qr-scope .color{ display:flex; flex-direction:column; gap:6px; font-size:.72rem; color:var(--muted); }
.qr-scope .color span{ font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.qr-scope .color input[type=color]{
  width:100%; height:44px; padding:0; border:2px solid var(--line);
  background:var(--panel); cursor:pointer;
}
.qr-scope .color--select{ justify-content:flex-start; }

.qr-scope .check{ display:flex; align-items:center; gap:9px; font-size:.86rem; color:var(--muted); cursor:pointer; margin-top:12px; }
.qr-scope .check input{ width:16px; height:16px; accent-color:var(--cyan); }
.qr-scope .check--lead{ margin-top:16px; }

.qr-scope .grad{ margin-top:14px; padding:14px; border:2px dashed var(--line); }

.qr-scope .slider{ display:block; margin-top:14px; }
.qr-scope .slider span{ display:block; font-family:var(--mono); font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.qr-scope .slider b{ color:var(--cyan); font-weight:700; }
.qr-scope .slider input[type=range]{ width:100%; accent-color:var(--magenta); }
.qr-scope .slider .hint{ display:block; margin-top:6px; font-size:.72rem; color:#666; letter-spacing:0; text-transform:none; font-family:var(--sans); }

/* ---------- Logo ---------- */
.qr-scope .logo-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.qr-scope .logo-name{ font-family:var(--mono); font-size:.78rem; color:var(--muted); }

/* ---------- Buttons (nur im Tool) ---------- */
.qr-scope .btn{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  border:2px solid var(--line); background:var(--panel); color:var(--ink);
  padding:12px 18px; cursor:pointer; transition:.12s; display:inline-flex;
  align-items:center; justify-content:center; gap:8px;
}
.qr-scope .btn:hover{ border-color:#3a3a3a; }
.qr-scope .btn:disabled{ opacity:.4; cursor:not-allowed; }
.qr-scope .btn--ghost{ padding:10px 14px; font-size:.76rem; }
.qr-scope .btn--png{ background:#fff; color:#000; border-color:#fff; flex:1; box-shadow:4px 4px 0 rgba(0,240,255,.35); }
.qr-scope .btn--png:hover{ box-shadow:6px 6px 0 rgba(0,240,255,.5); }
.qr-scope .btn--svg{ flex:1; }
.qr-scope .btn--svg:hover{ border-color:var(--magenta); box-shadow:4px 4px 0 rgba(189,0,255,.35); }

/* ---------- Preview ---------- */
.qr-scope .preview-col{ position:sticky; top:24px; display:flex; flex-direction:column; gap:14px; }
@media (max-width:900px){ .qr-scope .preview-col{ position:static; } }
.qr-scope .preview{
  border:2px solid #fff; background:linear-gradient(180deg,#101014,#0b0b0d);
  padding:20px; box-shadow:10px 10px 0 var(--magenta);
}
.qr-scope .preview__bar{ display:flex; justify-content:space-between; font-family:var(--mono);
  font-size:.64rem; letter-spacing:.12em; color:var(--muted); margin-bottom:16px; }
.qr-scope .preview__stage{
  background:
    radial-gradient(circle at 50% 40%, rgba(0,240,255,.08), transparent 60%),
    #0d0d10;
  border:1px solid var(--line); padding:22px; display:flex; justify-content:center; align-items:center;
  min-height:280px;
}
.qr-scope .qr-holder{ line-height:0; filter:drop-shadow(0 0 14px rgba(0,240,255,.28)); }
.qr-scope .qr-holder canvas, .qr-scope .qr-holder svg{ display:block; max-width:100%; height:auto; }

.qr-scope .dl{ display:flex; gap:10px; margin-top:18px; }
.qr-scope .preview__foot{ margin-top:16px; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.06em; color:#666; line-height:1.7; text-align:center; }

.qr-scope .stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.qr-scope .stat{ border:2px solid var(--line); background:var(--panel); padding:12px 12px; }
.qr-scope .stat span{ display:block; font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; color:var(--muted); margin-bottom:5px; }
.qr-scope .stat b{ font-size:1.1rem; }
.qr-scope .stat__select{ width:100%; background:transparent; color:var(--ink); border:none; font-size:1rem; font-weight:700;
  font-family:var(--sans); padding:0; cursor:pointer; }

/* ---------- Features ---------- */
.qr-scope .features{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:56px;
  padding-top:40px; border-top:1px solid var(--line); }
@media (max-width:760px){ .qr-scope .features{ grid-template-columns:1fr; } }
.qr-scope .feature{ border:2px solid var(--line); padding:26px 22px; background:var(--panel); }
.qr-scope .feature__icon{ font-size:1.5rem; margin-bottom:14px; }
.qr-scope .feature h3{ margin:0 0 10px; font-size:1.25rem; font-weight:800; }
.qr-scope .feature p{ margin:0; color:var(--muted); font-size:.9rem; }