@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: 10px;
    place-content: center;
    place-items: center;
    padding: 50px;
    box-sizing: border-box;
    background-image: url('../media/pics/memory/wiese.jpg');
    background-size: cover;
    background-position: center;
}

.kartenplatz { 
    display:flex;
    justify-content: center;
    align-content: center;
    height: var(--card-size, 20vh);
    width: var(--card-size, 20vh);
/*     border: 3px solid #f1f1f1; */
  
    background-color: transparent;
    /*border-radius: 10px;*/
    /*overflow: hidden;*/ 
    /*aspect-ratio:1;*/
}

.karte {
    display:block;
    align-self: center;
    justify-self: center;
    width: calc(var(--card-size, 20vh));
    height: calc(var(--card-size, 20vh));
    text-align: center;
    border-radius: 8px;
    position:relative;
    transform-style: preserve-3d;
    transform: rotate(var(--card-tilt, 0deg)) scale(1);
    transform-origin: center;
} 



.vorderseite, .rueckseite {
    height:100%;
    width:100%;
    transition: transform 0.5s ease;
    position:absolute;
    backface-visibility: hidden;
    box-shadow: inset 0 0 8px rgba(0,0,0, 0.5);
    font-size: inherit;
    border: 2px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
}

.rueckseite {
        /*background-color:red;*/
        backface-visibility: hidden;
        
   }

 .vorderseite {
         transform: rotateY(180deg);
     background: #fff;
     background-image: url('../media/pics/kunstoffweiss.jpg');
     background-size: cover;
     background-position: center;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 10px;
     }  
   
  
   
   .vorderseite img {
    width:100%;
    height:100%;
    object-fit: contain;
    object-position: center;
   }  

.geldbild {
    background: transparent;
}
.rueckseite {
    background-size: cover;
    background-position: center;
    background-color: #f5f5f5;
}

.kartenplatz.aktiv .vorderseite {
    transform: rotateY(0deg);
}
.kartenplatz.aktiv .rueckseite {
    transform: rotateY(180deg);
}

.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;
}

.vorderseite 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;
    
}

.vorderseite p.bild.vergleich {
    white-space: nowrap;
}

.platzhalter {
    display:inline-block;
    min-width:1.2em;
    height:1.2em;
    line-height:1.2em;
    margin:0 0.1em;
    border:3px solid #888;
    border-radius:3px;
    font-weight:normal;
}
   


.unsichtbar {
    visibility: hidden;
}

/* 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;
}
.silbe {
    color: green;
}