/* Bingokarten-Generator — eigene Ergänzungen zu Bootstrap 5.3.
   Keine externen Schriften, keine CDN-Verweise (DSGVO). */

:root {
    --bf-cell-border: #adb5bd;

    /* WCAG 2.2 AA (PHASE-09 §9.4): Das Bootstrap-Blau #0d6efd erreicht auf den leicht getönten
       Flächen (Fußzeile, Hinweise, Wizard-Schritte) nur 3,4–4,4 : 1. Eine Stufe dunkler
       liegt es überall über 5 : 1. */
    --bs-link-color: #0a58ca;
    --bs-link-color-rgb: 10, 88, 202;
    --bs-link-hover-color: #084298;
    --bs-link-hover-color-rgb: 8, 66, 152;
}

.btn-outline-primary {
    --bs-btn-color: #0a58ca;
    --bs-btn-border-color: #0a58ca;
    --bs-btn-hover-bg: #0a58ca;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a58ca;
}

.btn-outline-secondary {
    --bs-btn-color: #565e64;
    --bs-btn-border-color: #565e64;
    --bs-btn-hover-bg: #565e64;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #565e64;
}

.skip-link {
    position: absolute;
    z-index: 1080;
    margin: .5rem;
    padding: .5rem .75rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
}

/* Dekorative Rastervorschau auf der Startseite (Phase 0 — ersetzt Phase 3 durch echte Karten) */
.bf-card-preview {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding: 12px;
    aspect-ratio: 1;
    background: var(--bs-body-bg);
    border: 2px solid var(--bs-border-color);
    border-radius: .5rem;
}

.bf-card-preview__cell {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bf-cell-border);
    border-radius: .25rem;
}

.bf-card-preview__cell--free {
    background: var(--bs-primary-bg-subtle);
}

@media print {
    header, footer, .skip-link {
        display: none !important;
    }
}

/* ---- Wizard ---- */

.bf-sticky {
    position: sticky;
    top: 1rem;
}

@media (max-width: 991.98px) {
    .bf-sticky {
        position: static;
    }
}

/* Touch-Ziele nach WCAG 2.2: mindestens 44 × 44 px. */
.bf-touch,
.btn-check + .btn,
.form-check-input {
    min-height: 44px;
    min-width: 44px;
}

.form-check-input {
    min-height: 1.5rem;
    min-width: 1.5rem;
}

.bf-items {
    min-height: 40vh;
    font-variant-ligatures: none;
}

.bf-theme-tile {
    display: block;
}

.bf-theme-tile__placeholder {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: .25rem;
    background: repeating-linear-gradient(45deg,
        var(--bs-tertiary-bg), var(--bs-tertiary-bg) 6px,
        var(--bs-secondary-bg) 6px, var(--bs-secondary-bg) 12px);
}

.bf-steps ol {
    margin: 0;
}

.bf-warnings:empty {
    display: none;
}

/* Nirgends horizontales Scrollen — auch nicht bei 360 px. */
html, body {
    overflow-x: hidden;
}

/* ---- Theme-Editor ---- */

.bf-swatch {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: .25rem;
    border: 1px solid rgba(0, 0, 0, .2);
}

#bf-panels .form-control-color {
    min-height: 44px;
}

/* Ladeanzeige der Editor-Vorschau: Die alte Karte bleibt stehen (keine Sprünge), wird aber
   sichtbar blasser, solange die neue unterwegs ist. */
#bf-editor-preview {
    transition: opacity .15s ease-in-out;
}

#bf-editor-preview[aria-busy="true"] {
    opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
    #bf-editor-preview {
        transition: none;
    }
}

/* ---- Konto und Bibliothek ---- */

.bf-narrow {
    max-width: 34rem;
}

/* ---- Teilen: QR-Code (die Ruhezone ist Teil des SVG) ---- */

.bf-qr-box {
    max-width: 14rem;
    background: #fff;
    border-radius: .25rem;
}

.bf-qr {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- Aufrufer-Ansicht ---- */

.bf-stage {
    position: relative;
    background: var(--bs-body-bg);
}

.bf-current {
    min-height: 1.1em;
    font-size: clamp(4rem, 16vw, 9rem);
    font-weight: 700;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.bf-current__empty {
    font-weight: 400;
}

.bf-current-image {
    display: block;
    max-width: 100%;
    max-height: 35vh;
    margin: 0 auto .5rem;
}

.bf-history {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0;
    list-style: none;
}

.bf-history li {
    padding: .2rem .65rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
}

.bf-history li:first-child {
    color: #fff;
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}

.bf-exit-present {
    display: none;
}

/* Präsentationsmodus: nur die Bühne, sehr groß — für Beamer und Fernseher. */
body.bf-presenting > header,
body.bf-presenting > footer,
body.bf-presenting .bf-hide-presenting {
    display: none !important;
}

body.bf-presenting #bf-stage {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 0 !important;
    border-radius: 0 !important;
}

body.bf-presenting .bf-current {
    font-size: min(45vh, 32vw);
}

body.bf-presenting .bf-current-image {
    max-height: 60vh;
}

body.bf-presenting .bf-count {
    font-size: 2rem;
}

body.bf-presenting .bf-exit-present {
    display: inline-block;
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* ---- Online-Karte ---- */

body.bf-play {
    background: var(--bs-tertiary-bg);
}

.bf-play-card {
    max-width: 40rem;
    margin: 0 auto;
}

.bf-play-last {
    min-height: 1.5em;
    font-size: 1.25rem;
    font-weight: 700;
}

.bf-bingo {
    min-height: 3.5rem;
    font-size: 1.5rem;
    font-weight: 700;
}