/* Basis-Styles für das DaZ-Programm */

/* Schriftart */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

body { 
    font-family: 'Inter', sans-serif; 
    background-color: #f7f9fb; 
    perspective: 1000px; 
}

/* =========================
   RTL / LTR
   ========================= */

/* Für Arabisch, Farsi etc. */
.rtl { 
    direction: rtl; 
    text-align: right; 
}

/* Erzwingt LTR (z. B. für Eingaben) */
.ltr {
    direction: ltr;
    text-align: left;
}

/* Eingabefelder IMMER LTR (sehr wichtig für Mobile & RTL) */
input,
textarea {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: plaintext;
}

/* =========================
   Tabs
   ========================= */

.tab-active { 
    border-color: #3b82f6 !important;
    color: #3b82f6 !important; 
}

.tab-inactive { 
    border-color: transparent; 
    color: #6b7280; 
}

/* =========================
   Flip Cards
   ========================= */

.flip-card {
    background-color: transparent;
    width: 100%;
    height: 100px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border-radius: 0.5rem;
}

.flip-card-inner.flipped {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flip-card-back {
    transform: rotateY(180deg);
    justify-content: center;
}

/* RTL nur für Text, nicht für Layout kaputtmachen */
.flip-card-back.rtl {
    direction: rtl;
    text-align: right;
}

/* =========================
   Memory Game
   ========================= */

.perspective {
    perspective: 1000px;
}

.preserve-3d {
    transform-style: preserve-3d;
}

.rotate-y-180 {
    transform: rotateY(180deg);
}

.backface-hidden {
    backface-visibility: hidden;
}