/*
 * ast-qr.css — Overlay für die QR-Übertragung. Eigener Namensraum
 * (astqr-*). Rotierender Farbring (Apple-Optik) um einen ruhigen,
 * kontraststarken QR / das Kamerabild.
 */
.astqr-overlay{
    position:fixed; inset:0; z-index:2147483000;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.72); padding:16px;
    -webkit-tap-highlight-color:transparent;
}

.astqr-card{
    background:#fff; color:#111; border-radius:16px;
    width:100%; max-width:520px; max-height:92vh;
    overflow-y:auto; overflow-x:hidden;
    box-shadow:0 12px 44px rgba(0,0,0,.45);
    display:flex; flex-direction:column; padding:16px;
}

.astqr-head{
    position:relative; display:flex; align-items:center; justify-content:center;
    min-height:40px; padding:0 48px; gap:12px; margin-bottom:14px;
}
.astqr-title{ font-size:18px; font-weight:700; }

/* quadratischer Schließen-Button */
.astqr-close{
    flex:0 0 auto; box-sizing:border-box;
    width:40px; height:40px; padding:0; margin:0;
    display:inline-flex; align-items:center; justify-content:center;
    border:0; border-radius:11px;
    background:#ececec; color:#111;
    font-size:19px; line-height:1; cursor:pointer;
    -webkit-appearance:none; appearance:none;
}
.astqr-close:active{ background:#dcdcdc; }

.astqr-body{ display:flex; flex-direction:column; align-items:center; gap:14px; }

/* ---- feste Kachel, in JEDEM Frame exakt gleich groß ---- */
.astqr-orb{
    position:relative; flex:0 0 auto;
    width:min(78vw, 340px); height:min(78vw, 340px);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
}

/* weiße Kachel mit Ruhezone, hält QR oder Kamerabild */
.astqr-tile{
    position:relative; flex:0 0 auto;
    width:100%; height:100%;
    background:#fff; border-radius:16px;
    box-shadow:0 2px 14px rgba(0,0,0,.14);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
}

/* QR-Frame (harter Wechsel, feste Struktur -> schimmert) */
.astqr-code{
    width:100%; height:100%; object-fit:contain;
    image-rendering:auto;
}

.astqr-video{
    width:100%; height:100%; object-fit:cover; background:#000;
}

/* Statusfeld: FESTE Höhe (2 Zeilen), bleibt auch leer erhalten */
.astqr-status{
    flex:0 0 auto; box-sizing:border-box;
    height:44px; margin-top:12px; padding:0 4px;
    display:flex; align-items:center; justify-content:center; text-align:center;
    font-size:15px; line-height:1.3; font-weight:600; color:#f00;-webkit-text-fill-color:#f00;
    overflow:hidden; visibility:hidden;
}

/* Rückfrage und Empfangsbestätigung verwenden dieselbe rote Hinweisfarbe. */
.astqr-question{
    display:none; flex:0 0 auto; box-sizing:border-box;
    margin:0 auto 8px; padding:0 8px; max-width:460px;
    color:#f00; -webkit-text-fill-color:#f00; text-align:center;
    font-size:15px; line-height:1.35; font-weight:500;
}

/* Aktionsfeld für Empfangs- und Abbruchaktionen. */
.astqr-actions{
    flex:0 0 auto; box-sizing:border-box;
    min-height:56px; margin-top:4px;
    display:flex; align-items:center; justify-content:center;
}
.astqr-actions-choice{gap:8px}
.astqr-actions-choice .astqr-btn{margin:0;min-height:44px}
.astqr-actions-three .astqr-btn{flex:1 1 0;min-width:0;padding-left:8px;padding-right:8px;font-size:14px}

/* Haken in der Kachel nach erfolgreichem Empfang */
.astqr-check{
    display:none; position:absolute; inset:0;
    align-items:center; justify-content:center;
    font-size:96px; line-height:1; color:#1b7f3b; font-weight:700;
}

.astqr-btn{
    display:inline-block; border:0; border-radius:11px;
    background:#ececec; color:#111;
    padding:12px 18px; font-size:15px; font-weight:600;
    cursor:pointer; margin:4px;
}
.astqr-btn:active{ background:#dcdcdc; }
.astqr-btn-primary{ background:#1976d2; color:#fff; }
.astqr-btn-primary:active{ background:#125aa6; }

@media (prefers-color-scheme: dark){
    .astqr-card{ background:#1c1c1e; color:#f2f2f7; }
    .astqr-close{ background:#333; color:#f2f2f7; }
    .astqr-btn{ background:#333; color:#f2f2f7; }
    .astqr-btn-primary{ background:#1976d2; color:#fff; }
    /* Kachel bleibt weiß: QR braucht hellen Untergrund zum Scannen */
}

/* Dialogtitel mit denselben lokalen Icons wie im schwebenden Menü. */
.astqr-head .astqr-title{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;line-height:1.3;width:100%}
.astqr-head .astqr-title svg{flex:0 0 auto;width:22px;height:22px}
.astqr-head .astqr-close{position:absolute;right:0;top:0}


/* QR-Menüs folgen der gewählten Darstellung; Medien bleiben unverändert. */
.astqr-overlay{box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}
.astqr-card{box-sizing:border-box}
.astqr-head{justify-content:flex-start;padding:0 48px 0 0}
.astqr-head .astqr-title{justify-content:flex-start;text-align:left;font-size:24px;min-width:0}
html .astqr-actions-choice .astqr-btn:last-child{background:#f00;color:#fff;-webkit-text-fill-color:#fff}
html .astqr-actions-choice .astqr-btn:last-child:active{background:#c00}
.astqr-tile:has(.astqr-code)::after{content:"";position:absolute;inset:0;border:2px solid #f00;border-radius:inherit;pointer-events:none}
@media(prefers-color-scheme:dark){html:not([data-ast-menu-theme="light"]) .astqr-tile:has(.astqr-code)::after{display:none}}
html[data-ast-menu-theme="light"] .astqr-card{background:#fff;color:#111;color-scheme:light}
html[data-ast-menu-theme="light"] .astqr-close,html[data-ast-menu-theme="light"] .astqr-btn{background:#ececec;color:#111}
html[data-ast-menu-theme="dark"] .astqr-card{background:#1c1c1e;color:#f2f2f7;color-scheme:dark}
html[data-ast-menu-theme="dark"] .astqr-close,html[data-ast-menu-theme="dark"] .astqr-btn{background:#333;color:#f2f2f7}
html[data-ast-menu-theme="dark"] .astqr-tile:has(.astqr-code)::after{display:none}
html[data-ast-menu-theme] .astqr-actions-choice .astqr-btn:last-child{background:#f00;color:#fff;-webkit-text-fill-color:#fff}
html[data-ast-menu-theme] .astqr-actions-choice .astqr-btn:last-child:active{background:#c00}
.astqr-close:focus-visible,.astqr-btn:focus-visible{outline:3px solid #1976d2;outline-offset:2px}