/* css/style.css */

/* 1. Globale Stile und CSS-Variablen (Custom Properties) */
:root {
    --primary-color: #c6a539;
    --background-color: #fdfdfd;
    --text-color: #333;
    --font-family: "Quicksand", sans-serif;
    --font-size: 120%;
    --font-weight: 400; /* Syntax-Fehler behoben (fehlendes Semikolon) */
    --card-shadow: 5px 5px 15px rgba(0, 0, 0, 0.15);
    --border-color: #e6e6e6;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family); /* Konsequente Nutzung der CSS-Variable */
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    color: var(--text-color);
    line-height: 1.6;
    display: grid;
    place-items: center;
    min-height: 100vh;

    /* DYNAMISCHER HINTERGRUND: Pfad wird aus dem Django-Template geladen */
    background-image: var(--app-bg-image);

    /* Sorgt dafür, dass das Bild den gesamten verfügbaren Bereich abdeckt, ohne verzerrt zu werden */
    background-size: cover;
    /* Zentriert das Bild im Hintergrund */
    background-position: center center;
    /* Verhindert, dass sich das Bild beim Scrollen bewegt */
    background-attachment: fixed;

    /* Sehr wichtig für die "leichte Transparenz":
       Wir verwenden hier keinen direkten opacity-Wert für das Bild selbst (das würde den gesamten Inhalt transparent machen).
       Stattdessen verwenden wir einen linearen Farbverlauf, der über das Bild gelegt wird, um es abzudunkeln und leicht transparent wirken zu lassen. */
    background-blend-mode: multiply; 
    background-color: rgba(255, 255, 255, 0.4); 
}

/* 2. Allgemeine Layout-Komponenten */
.main-header {
    text-align: center;
    padding: 1rem;
    width: 100%;
}

.main-header h1 {
    color: var(--primary-color);
    font-size: clamp(1.8rem, 7vw, 3.0rem); /* Responsive Schriftgröße */
    border-top: 3px double var(--border-color);
    border-bottom: 3px double var(--border-color);
    display: inline-block;
    padding: 0.5rem 1rem;
}

.main-header h2 {
    color: var(--primary-color);
    font-size: clamp(1.0rem, 3vw, 1.5rem); /* Responsive Schriftgröße */
    display: inline-block;
    padding: 0.5rem 1rem;
}

main {
    background-color: rgba(255, 255, 255, 0.6); /* Now 60% opaque */
    padding: 20px; 
    border-radius: 10px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    max-width: 960px; 
    margin: 20px auto; 
}


/* 3. Kartenauswahl-Ansicht (Mobile First) */
.card-selection {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.card-deck {
    position: relative;
    width: 350px;
    height: 350px;
    display: grid;
    place-items: center;
    animation: fadeIn 1s ease-in-out;
}

.card {
    position: absolute;
    width: 60px;
    
    /* height: auto; <--- Das entfernen! Das macht leere Divs 0px hoch */
    aspect-ratio: 2 / 3; /* <--- NEU: Zwingt das Div in eine Kartenform (60x90px) */
    
    border-radius: 5px;
    box-shadow: var(--card-shadow);
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
    /* Die Magie: Positionierung basierend auf der CSS-Variable --i */
    transform:
        translateX(calc((var(--i) - 23.5) * 4px))
        translateY(calc(cos(var(--i) / 7) * 20px))
        rotate(calc((var(--i) - 23.5) * 3deg));
}

.card:hover {
    transform: translateY(-20px) scale(1.1);
    z-index: 100; /* Karte im Vordergrund */
    filter: brightness(1.1);
}

/* Neue Klasse für die dynamische Kartenrückseite */
.card-back {
    background-image: var(--card-back-image);
    background-size: cover;
    background-position: center;
    border-radius: 5px;
}

.selection-prompt {
    font-size: 1.2rem;
    text-align: center;
    padding: 0.5rem 1rem;
    background-color: white;
    box-shadow: var(--card-shadow);
    border-radius: 8px;
}

/* 4. Karten-Detailansicht (Modal) */
.card-modal {
    width: 100%;
    animation: fadeIn 0.5s ease-in-out;
}

.card-modal__content {
    display: flex;
    flex-direction: column; /* Mobile: Bild über Text */
    gap: 1.5rem;
    padding: 1rem;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    position: relative;
}

.card-modal__close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #aaa;
    line-height: 1;
}

.card-modal__image {
    width: 100%;
    max-width: 250px; /* Kleinere Karte auf Mobilgeräten */
    height: auto;
    border-radius: 10px;
    box-shadow: var(--card-shadow);
    align-self: center; /* Bild zentrieren */
    cursor: pointer; 
    transition: transform 0.3s ease-in-out; 
}

.card-modal__title {
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 1rem;
}

.reshuffle-button {
    display: block;
    margin: 2rem auto 0;
    padding: 0.75rem 1.5rem;
    font-family: var(--font-family);
    font-size: 1.1rem;
    color: var(--primary-color);
    background-color: #fff;
    border: 2px solid var(--primary-color);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.reshuffle-button:hover {
    background-color: var(--primary-color);
    color: #fff;
}

/* 5. Tabs-Komponente */
.tabs__nav {
    display: flex;
    flex-wrap: wrap; /* Tabs umbrechen auf kleinen Screens */
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.tabs__nav button {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 0.9rem;
    color: #888;
    border-bottom: 3px solid transparent;
}

.tabs__nav button.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.tabs__content > div {
    display: none;
    background-color: rgba(205, 233, 223, 0.3); 
    padding: 20px; 
    border-radius: 10px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    max-width: 960px; 
    margin: 20px auto; 
}

.tabs__content > div.active {
    display: block;
    animation: fadeIn 0.5s;
}

/* 6. Media Query für größere Bildschirme (Desktop) */
@media (min-width: 768px) {
    .card-deck {
        width: 600px; /* Breiteres Deck */
    }

    .card {
        width: 80px; /* Größere Karten */
    }

    .card-modal__content {
        flex-direction: row; /* Bild neben Text */
        align-items: flex-start;
        padding: 2rem;
    }

    .card-modal__image {
        flex-shrink: 0; /* Verhindert, dass das Bild schrumpft */
        max-width: 300px;
    }

    .tabs__nav button {
        font-size: 1.2rem;
    }
}

/* 7. Animationen & Modal Zoom */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Modal Hintergrund beim Zoom */
#card-modal.image-is-zoomed {
    position: fixed;
    inset: 0; 
    background: rgba(0, 0, 0, 0.75); 
    z-index: 100; 
    border: none;
    padding: 0;
}

/* Bild-Zoom */
#card-modal.image-is-zoomed .card-modal__image {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.5); 
    max-width: 50%; 
    max-height: 50vh; 
    z-index: 101; 
    object-fit: contain;
}

/* Ausblenden des restlichen Inhalts beim Zoom */
#card-modal.image-is-zoomed .card-modal__close-btn,
#card-modal.image-is-zoomed .card-modal__text-content {
    visibility: hidden;
}

/* Navigation Button */
.btn-back-dashboard {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: rgba(255, 255, 255, 0.85);
    color: var(--primary-color);
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-family: var(--font-family);
    font-weight: bold;
    border: 2px solid var(--primary-color);
    box-shadow: var(--card-shadow);
    z-index: 1000;
    transition: all 0.3s ease;
}

.btn-back-dashboard:hover {
    background-color: var(--primary-color);
    color: white;
}