/* Bingokarten-Generator — Kartendarstellung am Bildschirm.
   Alle Maße stehen in Millimetern, exakt wie im Druck. Angepasst wird nur über
   transform: scale(var(--bf-fit)) — nie über andere Schriftgrößen oder Umbrüche. */

.bf-card-frame {
    --bf-fit: 1;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.bf-card {
    position: relative;
    transform: scale(var(--bf-fit));
    transform-origin: top left;
    box-sizing: border-box;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    font-kerning: normal;
    color: #000;
}

.bf-block,
.bf-cell,
.bf-header {
    position: absolute;
    box-sizing: border-box;
    margin: 0;
}

.bf-block {
    display: flex;
    align-items: center;
    white-space: normal;
}

.bf-title {
    justify-content: center;
    font-weight: 700;
}

.bf-block[class*="bf-title"],
.bf-block[class*="bf-subtitle"],
.bf-block[class*="bf-footer"] {
    display: block;
}

.bf-footer {
    align-items: flex-end;
}

.bf-header {
    display: flex;
    align-items: stretch;
    text-align: center;
}

.bf-header__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.bf-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    hyphens: manual;
    word-break: normal;
    border-style: solid;
}

/* Die Renderer-Klassen liefern Farben und Maße; hier stehen nur die Strukturregeln. */
.bf-cell--separated {
    border-style: solid;
}

.bf-cell--lines {
    border-width: 0 0 var(--bf-line, 0.25mm) 0 !important;
    border-radius: 0 !important;
}

.bf-cell--none {
    border-style: none !important;
}

.bf-cell--empty {
    background-image: none;
}

.bf-cell--signature .bf-cell__text {
    align-self: flex-start;
}

.bf-cell__text {
    display: block;
    width: 100%;
    /* Die Zeilen kommen fertig aus der LayoutEngine (getrennt durch <br>). Der Browser darf
       nicht selbst umbrechen — sonst weicht die Vorschau vom Druck ab. */
    white-space: nowrap;
}

.bf-cell__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Online-Karte: Zellen sind Schaltflächen zum Abhaken. */
button.bf-cell {
    cursor: pointer;
    font: inherit;
    appearance: none;
}

button.bf-cell[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    inset: 8%;
    border: 0.8mm solid currentColor;
    border-radius: 50%;
    opacity: 0.85;
    pointer-events: none;
}

button.bf-cell:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 2px;
}

/* Mehrere Karten auf einer Seite (Vorschau der Druckseite) */
.bf-page-frame {
    --bf-fit: 1;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.bf-page {
    position: relative;
    transform: scale(var(--bf-fit));
    transform-origin: top left;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

.bf-page .bf-card-frame {
    position: absolute;
    overflow: visible;
}

/* Ladezustand ohne Layoutsprung: das Skelett hat exakt die Zielhöhe. */
.bf-skeleton {
    position: relative;
    border-radius: .5rem;
    background: linear-gradient(90deg, var(--bs-secondary-bg) 25%, var(--bs-tertiary-bg) 37%, var(--bs-secondary-bg) 63%);
    background-size: 400% 100%;
    animation: bf-shimmer 1.4s ease infinite;
}

@keyframes bf-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .bf-skeleton { animation: none; }
}

/* Hintergrundbild und Ornamente: Position und Größe kommen aus der LayoutEngine. */
.bf-card__background,
.bf-decor {
    position: absolute;
    display: block;
    pointer-events: none;
}

.bf-decor {
    transform-origin: center;
}