/* --- Hinweis zu :hover ---
   Alle :hover-Regeln in dieser Datei stehen in
   @media (hover: hover) and (pointer: fine). Ohne diese Abfrage bleibt auf
   Touch der Hover-Zustand nach dem ersten Tippen kleben. */

/* ============================================
   QR-CODE-GENERATOR
   Nur das Eigene — Karte, Stufen, Knöpfe, Toasts und
   Fortschritt kommen aus ../converter/converter.css.
   ============================================ */

/* Marken-Symbol (QR-Feld) in der Kopfzeile — gleiche Machart wie
   .yk-brand-icon (Yoink): Emoji mit blauem Schein, Bewegung nur über
   transform. `color` faerbt ein Emoji nicht und faellt deshalb weg. */
.qr-brand-icon {
    font-size: 1.1rem;
    line-height: 1;
    display: inline-block;
    filter: drop-shadow(0 0 10px rgba(41, 151, 255, 0.5));
    animation: qrScan 3.4s ease-in-out infinite;
}
@keyframes qrScan {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
    .qr-brand-icon { animation: none; }
}

/* --- Auswahl der Inhaltsart --- */
.qr-kinds {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 1.5rem;
}
.qr-kind {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    min-height: 40px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1);
    -webkit-tap-highlight-color: transparent;
}
[data-theme="light"] .qr-kind { background: rgba(0, 0, 0, 0.03); }
.qr-kind.active {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(41, 151, 255, 0.35);
}
@media (hover: hover) and (pointer: fine) {
    .qr-kind:not(.active):hover {
        color: var(--text);
        border-color: rgba(41, 151, 255, 0.35);
        transform: translateY(-1px);
    }
}

/* --- Zweispaltig: Eingabe links, Vorschau rechts --- */
.qr-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    align-items: start;
}
/* Die Aktionen laufen unter beiden Spalten. */
.qr-grid > .cv-actions { grid-column: 1 / -1; }
/* Linke Spalte: Eingabe oben, „Aussehen anpassen" darunter. */
.qr-links { min-width: 0; }
.qr-links .qr-style { margin-top: 0.4rem; }
@media (max-width: 760px) {
    .qr-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    /* Auf dem Handy zuerst die Vorschau — aber erst, wenn es etwas zu sehen
       gibt. Vorher standen eine leere Box, ein Hinweis („Gib LINKS etwas
       ein", wo es kein Links gibt) und ein ausgegrauter Knopf über dem
       Eingabefeld: der erste Bildschirm war komplett leer und ausgegraut. */
    .qr-grid.hat-code .qr-out { order: -1; }
}

.qr-field {
    display: block;
    margin-bottom: 1rem;
}
.qr-field > span {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}
.qr-input,
.qr-textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.98rem;
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
    transition: border-color 0.3s ease, background 0.3s ease;
}
[data-theme="light"] .qr-input,
[data-theme="light"] .qr-textarea { background: rgba(0, 0, 0, 0.03); }
.qr-input:focus,
.qr-textarea:focus { border-color: var(--primary); outline: none; }
.qr-textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.qr-row { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.qr-row > .qr-field { flex: 1 1 160px; }
.qr-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    cursor: pointer;
}
.qr-check input { width: 18px; height: 18px; accent-color: var(--primary); }
.qr-note {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: -0.4rem;
    margin-bottom: 1rem;
}

/* --- Vorschau --- */
.qr-preview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    min-height: 320px;
}
[data-theme="light"] .qr-preview { background: rgba(0, 0, 0, 0.02); }

/* Leerzustand: das Canvas wird per clearRect geleert und ist dann
   durchsichtig — sichtbar blieb nur ein leeres Rechteck. */
.qr-leer {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.qr-leer p {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin: 0;
}
.qr-leer-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: var(--primary);
    background: linear-gradient(135deg, rgba(41, 151, 255, 0.16), rgba(191, 90, 242, 0.16));
    border: 1px solid rgba(41, 151, 255, 0.28);
}
.qr-leer-icon svg { width: 30px; height: 30px; }
.qr-preview.hat-code .qr-leer { opacity: 0; }
#qrCanvas {
    width: 288px;
    height: 288px;
    max-width: 100%;
    border-radius: 10px;
    /* Ein QR-Code ist eine harte Pixelgrafik. Ohne das glättet der Browser
       beim Skalieren die Kanten und manche Leser tun sich schwer. */
    image-rendering: pixelated;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
#qrCanvas.empty { opacity: 0.12; }
#qrCanvas.neu { animation: qrPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes qrPop {
    from { transform: scale(0.94); }
    to   { transform: scale(1); }
}
.qr-hint {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0.8rem 0 1.2rem;
    min-height: 2.4em;
    line-height: 1.4;
}
.qr-hint.warn { color: #ff9f0a; }

/* --- Aussehen anpassen --- */
.qr-style { margin-bottom: 1.2rem; }
.qr-style > summary {
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--primary);
    padding: 0.5rem 0;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}
.qr-style > summary::-webkit-details-marker { display: none; }
/* Der Abstand muss aus dem Rand kommen: ein Leerzeichen im content wird
   am Zeilenanfang zusammengefaltet. */
.qr-style > summary::before { content: '▸'; display: inline-block; margin-right: 0.4em; }
.qr-style[open] > summary::before { content: '▾'; }
.qr-style-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.8rem;
    padding-top: 0.6rem;
}
.qr-field-wide { grid-column: 1 / -1; }
.qr-style-grid .qr-field { margin-bottom: 0.4rem; }
/* Farbwahl: der native Swatch ist ein hartes Rechteck mit eigenem Innenrand
   und saß als zweiter, eckiger Rahmen in einem runden. Jetzt füllt die Farbe
   die ganze Fläche, daneben steht der Hex-Wert — im hellen Design ist das
   weiße Feld dadurch überhaupt erst zu erkennen. */
.qr-swatch {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.qr-swatch input[type="color"] {
    flex: none;
    width: 44px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
}
/* Ohne diese beiden Regeln lässt Chromium einen eigenen Innenrand stehen. */
.qr-swatch input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.qr-swatch input[type="color"]::-webkit-color-swatch { border: none; border-radius: 11px; }
.qr-swatch input[type="color"]::-moz-color-swatch { border: none; border-radius: 11px; }
.qr-swatch-wert {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    text-transform: none;
    letter-spacing: 0;
}
@media (pointer: coarse) {
    .qr-swatch input[type="color"] { height: 44px; }
}

/* Logo-Auswahl: das Eingabefeld bleibt bedienbar, ist aber unsichtbar —
   sichtbar ist ein Knopf im Stil der Seite statt „Choose File". */
.qr-datei {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}
.qr-field > .qr-datei-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
[data-theme="light"] .qr-field > .qr-datei-knopf { background: rgba(0, 0, 0, 0.03); }
@media (hover: hover) and (pointer: fine) {
    .qr-field > .qr-datei-knopf:hover {
        border-color: rgba(41, 151, 255, 0.45);
        transform: translateY(-1px);
    }
}
.qr-datei:focus-visible + .qr-datei-knopf {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.qr-field > .qr-datei-name {
    display: inline-block;
    margin-left: 0.6rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    vertical-align: middle;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (pointer: coarse) {
    .qr-field > .qr-datei-knopf { min-height: 44px; }
}
.qr-logo-warn {
    grid-column: 1 / -1;
    font-size: 0.8rem;
    color: #ff9f0a;
    margin-top: 0.5rem;
    line-height: 1.4;
}

.qr-cat-text {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}
.qr-scan-link {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.95rem;
}
.qr-scan-link a { color: var(--primary); font-weight: 600; }

/* --- Scan-Seite --- */
.qr-scan-box {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 4 / 3;
    display: none;
}
.qr-scan-box.on { display: block; }
.qr-scan-box video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-scan-frame {
    position: absolute;
    inset: 12%;
    border: 3px solid rgba(255, 255, 255, 0.85);
    border-radius: 18px;
    pointer-events: none;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
}
.qr-result {
    margin-top: 1.5rem;
    padding: 1.2rem;
    border-radius: 16px;
    background: rgba(48, 209, 88, 0.1);
    border: 1px solid rgba(48, 209, 88, 0.28);
    word-break: break-all;
    line-height: 1.6;
}
.qr-result a { color: var(--primary); font-weight: 600; }
.qr-result-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #30d158;
    margin-bottom: 0.5rem;
}

@media (max-width: 640px) {
    .qr-style-grid { grid-template-columns: 1fr; }
    .qr-kind { font-size: 0.82rem; padding: 0.45rem 0.75rem; }
}