@font-face { 
    font-family: 'druck';
    font-display: swap;
    src: url('../fonts/Druckschrift_BY_WOK.ttf') format('truetype'); 
}

@font-face { 
    font-family: 'fibel';
    font-display: swap;
    src: url('../fonts/Dr_hh_1.ttf') format('truetype'); 
}

.test {color:red}

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: var(--game-font, druck, "Times New Roman", serif);
}

#spiel {
    display:grid;   
    width:100%;
    height: calc(var(--vh, 1vh) * 100);
    margin: 0;
    gap: 16px;
    place-content: center;
    place-items: center;
    padding: 8% 8% 8% 8%;
    box-sizing: border-box;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.kartenplatz { 
    display:flex;
    justify-content: center;
    align-content: center;
    height: var(--card-size, 20vh);
    width: var(--card-size, 20vh);
    background-color: transparent;
}

.karte {
    display:block;
    align-self: center;
    justify-self: center;
    width:100%;   
    height:100%;
    text-align: center;
    border: 2px solid #ddd;
    border-radius: 8px;
    position:relative;
    background: #fff;
    background-image: url('../media/pics/papier.jpg');
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 8px rgba(0,0,0, 0.3);
    overflow: hidden;
    transform: rotateZ(var(--card-tilt, 0deg));
    transform-origin: center;
    box-shadow: 0 18px 26px rgba(0,0,0,0.45), inset 0 0 10px rgba(0,0,0, 0.35);
}

.karte .inhalt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
}

.kartenplatz.aktiv .karte {
    border-color: #00d28f;
    box-shadow: 0 0 0 4px rgba(0,210,143,0.85), 0 0 22px 6px rgba(0,210,143,0.7), 0 18px 26px rgba(0,0,0,0.45), inset 0 0 10px rgba(0,0,0, 0.35);
}

.kartenplatz.richtig .karte {
    border-color: #35f0b4;
    box-shadow: 0 0 0 6px rgba(53,240,180,0.95), 0 0 28px 10px rgba(53,240,180,0.85), 0 18px 26px rgba(0,0,0,0.45), inset 0 0 10px rgba(0,0,0, 0.35);
}

.kartenplatz.falsch .karte {
    border-color: #e03a3a;
    box-shadow: 0 0 0 4px rgba(224,58,58,0.85), 0 0 22px 6px rgba(224,58,58,0.7), 0 18px 26px rgba(0,0,0,0.45), inset 0 0 10px rgba(0,0,0, 0.35);
}

.bild {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    font-size: inherit;
    line-height: 1.05;
    overflow-wrap: normal;
    word-break: keep-all;
}

.karte .inhalt p.bild {
    display:block;
    width:100%;
    height:100%;
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    hyphens: none;
    text-align: center;
    font-size: 0.95em;
}

.karte img.bild {
    width:100%;
    height:100%;
    margin: 0;
    display:block;
    object-fit: contain;
    object-position: center;
}

.geldbild {
    background: transparent;
}

/* Geldanzeige aus Meta (einzelne Münzen/Scheine) */
.geld-render {
    width: 100%;
    height: 100%;
    display: grid;
    gap: 10px;
    place-items: center;
    align-content: center;
    justify-content: center;
    box-sizing: border-box;
}

.geldteil-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.geldteil-img {
    display: block;
    object-fit: contain;
}

.geld-rot {
    transform: rotate(90deg);
    transform-origin: center;
}

/* Geldrechnen: Rechenzeichen (+, -, =) bei Geldbildern immer gut lesbar halten */
#spiel .geldrechnen-zeichen > span {
    display:block;
    font-size:1.9rem;
    line-height:1;
    font-weight:700;
}