/* === Container === */
.kartenset-container {
    max-width: 350px;
}

/* === Aufforderungstext ueber dem Stapel === */
.stapel-aufforderung {
    font-size: 1.1rem;
    text-align: left;
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* === Kartenstapel === */
.kartenstapel {
    cursor: pointer;
    transition: transform 0.3s ease;
    display: inline-block;
}

.kartenstapel:hover {
    transform: scale(1.03);
}

.kartenstapel.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

.stapel-bild {
    max-width: 350px;
    width: 100%;
    border-radius: 14px;
    box-shadow:
        4px 4px 0 rgba(0,0,0,0.1),
        8px 8px 0 rgba(0,0,0,0.05);
}

.stapel-platzhalter {
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 14px;
    font-size: 1.3rem;
}

/* === Gezogene Karte === */
.gezogene-karte {
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
}

.karte-erscheint {
    animation: karteEinblenden 0.6s ease-out;
}

@keyframes karteEinblenden {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* === Titelbereich ueber der Karte === */
.karte-titel-bereich {
    text-align: left;
    margin-bottom: 1rem;
}

.karte-titel-label {
    font-size: 1rem;
    display: block;
    margin-bottom: 0.3rem;
}

.karte-titel {
    font-size: 2rem;
    margin: 0;
    text-align: left;
    line-height: 1.2;
}

/* === Klickbare Karte === */
.karte-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}

.karte-link:hover {
    transform: scale(1.02);
}

.karte-bild img {
    max-width: 350px;
    width: 100%;
    border-radius: 14px;
}

/* === Hinweistext === */
.karte-hinweis {
    font-size: 0.9rem;
    color: #888;
    font-style: italic;
    margin-top: 0.5rem;
    text-align: left;
}

/* === Unterer Bereich mit festem Platz === */
.kartenset-unten {
    min-height: 4rem;
    margin-top: 1.5rem;
}

/* === Neu-Ziehen-Button === */
.neu-ziehen-wrapper {
    margin: 0 !important;
}

.neu-ziehen-btn {
    cursor: pointer;
}