/* ============================================================
   HMF-IT – QR-Code-Generator (Tool-CSS)
   Nutzt globale Tokens aus style.css; eigene Tokens für Hell/Dunkel.
   ============================================================ */
.tool-section { padding: 2.5rem 0 5rem; }
[data-bs-theme="light"] .tool-section { background: #F2F3F5; }

.qr-tool {
    --qr-panel: rgba(26, 26, 36, 0.6);
    --qr-border: var(--glass-border-dark);
    --qr-field: rgba(255, 255, 255, 0.04);
    --qr-muted: var(--text-dark-muted);
    --qr-accent: var(--hmf-green-light);
    --qr-on: #566320;
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 1.5rem;
    align-items: start;
}
[data-bs-theme="light"] .qr-tool {
    --qr-panel: #FFFFFF;
    --qr-border: rgba(28, 22, 8, 0.16);
    --qr-field: #FFFFFF;
    --qr-muted: #4a4f57;
    --qr-accent: #566320;
}

.qr-panel {
    background: var(--qr-panel);
    border: 1px solid var(--qr-border);
    border-radius: 16px;
    padding: 1.5rem;
}
[data-bs-theme="light"] .qr-panel { box-shadow: 0 2px 10px rgba(40, 35, 20, 0.08); }
.qr-panel + .qr-panel { margin-top: 1.5rem; }
.qr-panel-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 1rem;
    display: flex; align-items: center; gap: .6rem;
}
.qr-step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    background: var(--qr-on); color: #fff; font-size: .85rem;
}

/* Inhaltstyp-Tabs */
.qr-types { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.qr-types button {
    border: 1px solid var(--qr-border); background: transparent; color: inherit;
    padding: .5rem .85rem; border-radius: 999px; font-weight: 600; font-size: .9rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: .4rem;
}
.qr-types button svg { width: 16px; height: 16px; }
.qr-types button[aria-selected="true"] { background: var(--qr-on); border-color: var(--qr-on); color: #fff; }

/* Formularfelder */
.qr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
.qr-grid .qr-full { grid-column: 1 / -1; }
.qr-field label, .qr-label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.qr-field input[type="text"], .qr-field input[type="url"], .qr-field input[type="email"],
.qr-field input[type="tel"], .qr-field input[type="password"], .qr-field textarea, .qr-field select {
    width: 100%; padding: .65rem .8rem; border-radius: 10px;
    border: 1px solid var(--qr-border); background: var(--qr-field); color: inherit; font: inherit;
}
.qr-field textarea { min-height: 96px; resize: vertical; }
.qr-field input:focus-visible, .qr-field textarea:focus-visible, .qr-field select:focus-visible,
.qr-tool button:focus-visible, .qr-check-label input:focus-visible + span {
    outline: 3px solid var(--qr-accent); outline-offset: 2px;
}
.qr-hint { font-size: .82rem; color: var(--qr-muted); margin: .35rem 0 0; }
.qr-check-label { display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; cursor: pointer; }
.qr-check-label input { width: 1.05rem; height: 1.05rem; accent-color: #566320; }

/* UTM */
.qr-utm { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--qr-border); }

/* Design */
.qr-design-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.1rem; }
.qr-color { display: flex; align-items: center; gap: .5rem; }
.qr-color input[type="color"] {
    width: 44px; height: 38px; padding: 2px; border-radius: 8px;
    border: 1px solid var(--qr-border); background: var(--qr-field); cursor: pointer;
}
.qr-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.qr-presets button {
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
    border: 2px solid var(--qr-border); padding: 0;
}
.qr-seg { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.qr-seg button {
    border: 1px solid var(--qr-border); background: transparent; color: inherit;
    padding: .45rem .8rem; border-radius: 8px; font-size: .88rem; font-weight: 600; cursor: pointer;
}
.qr-seg button[aria-pressed="true"] { border-color: #566320; background: rgba(86, 99, 32, .14); box-shadow: inset 0 0 0 1px #566320; }
.qr-range { display: flex; align-items: center; gap: .75rem; }
.qr-range input { flex: 1; accent-color: #566320; }
.qr-range output { min-width: 3ch; font-weight: 700; text-align: right; }
.qr-file-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.qr-btn-link { background: none; border: 0; color: var(--qr-accent); text-decoration: underline; cursor: pointer; font-weight: 600; padding: .25rem; }

/* Vorschau (sticky) */
.qr-side { position: sticky; top: 150px; }
.qr-preview-wrap {
    background: #fff; border-radius: 14px; padding: 1.25rem;
    display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1;
}
.qr-preview { width: 100%; max-width: 340px; }
.qr-preview[hidden] { display: none; }
.qr-main, .qr-side { min-width: 0; }
.qr-file-row input[type="file"] { max-width: 100%; font-size: .85rem; }
.qr-preview svg { display: block; width: 100%; height: auto; }
.qr-preview--transparent {
    background-image: conic-gradient(#e6e6e6 25%, #fff 0 50%, #e6e6e6 0 75%, #fff 0);
    background-size: 16px 16px; border-radius: 6px;
}
.qr-empty { color: #4a4f57; text-align: center; font-size: .95rem; padding: 2rem 1rem; }
.qr-meta { font-size: .8rem; color: var(--qr-muted); text-align: center; margin: .75rem 0 0; min-height: 1.2em; }

.qr-export { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; margin-top: 1.25rem; }
.qr-export select { padding: .6rem .7rem; border-radius: 10px; border: 1px solid var(--qr-border); background: var(--qr-field); color: inherit; }
.qr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .75rem 1.1rem; border-radius: var(--radius-interactive, 10px);
    font-family: var(--font-display); font-weight: 600; cursor: pointer; border: 1px solid transparent;
}
.qr-btn svg { width: 18px; height: 18px; }
.qr-btn-primary { background: #566320; color: #fff; }
.qr-btn-primary:hover { background: #475219; }
.qr-btn-ghost { background: transparent; color: inherit; border-color: var(--qr-border); }
.qr-btn-ghost:hover { border-color: var(--qr-accent); }
.qr-btn[disabled], .qr-tool:not(.qr-has-code) .qr-btn { opacity: .45; pointer-events: none; }
.qr-export-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .5rem; }
.qr-status { font-size: .85rem; margin: .6rem 0 0; min-height: 1.2em; color: var(--qr-accent); }

/* Scan-Check */
.qr-check-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin: 1.25rem 0 .5rem; }
.qr-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; font-size: .88rem; line-height: 1.45; }
.qr-checklist li { padding: .5rem .7rem .5rem 2rem; border-radius: 8px; position: relative; background: var(--qr-field); border: 1px solid var(--qr-border); }
.qr-checklist li::before { position: absolute; left: .65rem; top: .45rem; font-weight: 700; }
.qr-checklist .qr-ok::before { content: "✓"; color: #3f8f3f; }
.qr-checklist .qr-warn::before { content: "!"; color: #b7791f; }
.qr-checklist .qr-bad::before { content: "✕"; color: #c0392b; }
.qr-checklist .qr-info::before { content: "i"; color: var(--qr-accent); font-style: italic; }
.qr-checklist .qr-bad { border-color: rgba(192, 57, 43, .5); }
.qr-checklist .qr-warn { border-color: rgba(183, 121, 31, .45); }

.qr-payload-box { margin-top: 1rem; font-size: .85rem; }
.qr-payload-box summary { cursor: pointer; font-weight: 600; }
.qr-payload { white-space: pre-wrap; word-break: break-all; font-family: var(--font-mono, monospace); font-size: .78rem; background: var(--qr-field); border: 1px solid var(--qr-border); border-radius: 8px; padding: .6rem; margin-top: .5rem; }

.qr-privacy { display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; color: var(--qr-muted); margin-top: 1rem; }
.qr-privacy svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--qr-accent); margin-top: .1rem; }

@media (max-width: 991.98px) {
    .qr-tool { grid-template-columns: minmax(0, 1fr); }
    .qr-side { position: static; order: -1; }
    .qr-preview { max-width: 260px; }
}
@media (max-width: 575.98px) {
    .qr-grid, .qr-design-row { grid-template-columns: 1fr; }
    .qr-panel { padding: 1.1rem; }
}
@media (prefers-reduced-motion: no-preference) {
    .qr-preview svg { transition: opacity .15s ease; }
}

/* Projekt speichern/laden – auch ohne fertigen Code bedienbar */
.qr-project { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--qr-border); }
.qr-project-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin: 0 0 .5rem; }
.qr-project .qr-btn { font-size: .92rem; padding: .65rem .8rem; }
.qr-tool:not(.qr-has-code) .qr-btn.qr-proj { opacity: 1; pointer-events: auto; }