/* --- GRUNDDESIGN & ATMOSPHÄRE --- */
        body {
            font-family: 'Quicksand', sans-serif;
            background-color: #0a0a12;
            color: #e0e0e0;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            background-image: 
                radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 3px),
                radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 2px),
                radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 3px);
            background-size: 550px 550px, 350px 350px, 250px 250px;
            background-position: 0 0, 40px 60px, 130px 270px;
            animation: stars 100s linear infinite;
        }

        @keyframes stars {
            from { background-position: 0 0, 40px 60px, 130px 270px; }
            to { background-position: -550px 550px, -310px 410px, -120px 820px; }
        }

        .main-container {
            max-width: 1200px;
            margin: auto;
            padding: 40px 20px;
            position: relative;
            z-index: 1;
        }

        h1, h2, h3, h4 {
            font-family: 'Cinzel', serif;
            font-weight: 700;
            color: #d4af37;
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
            text-align: center;
        }

        h1 { font-size: 3em; margin-bottom: 5px; letter-spacing: 2px; }
        p.subtitle { text-align: center; color: #a0a0a0; margin-bottom: 30px; font-weight: 300; font-size: 1.1em; }
        
        /* --- TABS (Reiter) --- */
        .tabs {
            display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; flex-wrap: wrap;
        }

        .tab-btn {
            background: rgba(22, 33, 62, 0.6); color: #d4af37; border: 1px solid #d4af37;
            padding: 12px 30px; font-family: 'Cinzel', serif; font-size: 1.1em;
            border-radius: 5px; cursor: pointer; transition: all 0.3s;
        }

        .tab-btn:hover { background: rgba(212, 175, 55, 0.2); }
        .tab-btn.active { background: #d4af37; color: #111; box-shadow: 0 0 15px rgba(212, 175, 55, 0.5); font-weight: bold; }

        .tab-content { display: none; animation: fadeInTab 0.5s ease-in-out; }
        .tab-content.active { display: block; }

        @keyframes fadeInTab {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* --- 1. LERN-MODUS: Flip-Cards --- */
        .search-container { text-align: center; margin-bottom: 30px; }
        .search-input {
            padding: 12px 20px; width: 300px; background: rgba(22, 33, 62, 0.8);
            border: 1px solid #d4af37; border-radius: 25px; color: #fff; font-size: 1em; outline: none;
        }
        .search-input::placeholder { color: #8a8a9e; }

        .card-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 25px; justify-items: center;
        }
        
        .flip-card { background-color: transparent; width: 250px; height: 360px; perspective: 1500px; cursor: pointer; }

        .flip-card-inner {
            position: relative; width: 100%; height: 100%; text-align: center;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-style: preserve-3d; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.7);
        }

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

        .flip-card-front, .flip-card-back {
            position: absolute; width: 100%; height: 100%; backface-visibility: hidden;
            border-radius: 15px; overflow: hidden; display: flex; flex-direction: column;
            box-sizing: border-box; border: 2px solid rgba(212, 175, 55, 0.3);
        }

        .flip-card-front {
            background: linear-gradient(135deg, #111424, #16213e); color: #d4af37;
            justify-content: center; align-items: center; padding: 20px;
        }
        
        .flip-card-front .card-back-pattern { font-size: 4em; opacity: 0.4; margin-bottom: 15px; text-shadow: 0 0 15px #d4af37; }
        .flip-card-front p.tap-hint { font-size: 0.8em; color: #8a8a9e; margin-top: 15px; letter-spacing: 1px; text-transform: uppercase; }
        
        .flip-card-back {
            background: #0f111a; transform: rotateY(180deg); padding: 20px;
            justify-content: flex-start; overflow-y: auto; text-align: left;
        }

        .suit-icon { font-size: 1.8em; margin-bottom: 5px; }
        .card-details h3 { margin: 0 0 15px 0; font-size: 1.3em; letter-spacing: 1px; }

        .meaning-section { text-align: left; font-size: 0.95em; line-height: 1.4; display: flex; flex-direction: column; gap: 12px; }
        .light-meaning { color: #a8e6cf; border-left: 3px solid #a8e6cf; padding-left: 10px; }
        .shadow-meaning { color: #ff8b94; border-left: 3px solid #ff8b94; padding-left: 10px; }

        /* --- 2. PRÜFUNGS-MODUS (QUIZ) --- */
        .quiz-container {
            max-width: 800px; margin: 0 auto; background: rgba(22, 33, 62, 0.8);
            border: 2px solid #d4af37; border-radius: 15px; padding: 40px; text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.8);
        }

        .quiz-question { font-size: 1.3em; margin-bottom: 30px; color: #fff; }
        .quiz-question span.highlight { font-family: 'Cinzel', serif; font-size: 1.8em; color: #d4af37; display: block; margin-top: 10px; text-shadow: 0 0 10px rgba(212, 175, 55, 0.5); }
        .quiz-options { display: flex; flex-direction: column; gap: 15px; }

        .quiz-btn {
            background: #0f111a; color: #e0e0e0; border: 1px solid #444; padding: 15px 20px;
            font-family: 'Quicksand', sans-serif; font-size: 1.1em; border-radius: 8px; cursor: pointer;
            transition: all 0.2s; text-align: left;
        }

        .quiz-btn:hover:not(:disabled) { background: #1a1a2e; border-color: #d4af37; transform: scale(1.02); }
        .quiz-btn.correct { background: rgba(76, 209, 55, 0.2); border-color: #4cd137; color: #4cd137; font-weight: bold; }
        .quiz-btn.wrong { background: rgba(232, 65, 24, 0.2); border-color: #e84118; color: #e84118; animation: shake 0.4s; }
        .quiz-btn:disabled { cursor: default; }
        #quiz-feedback { margin-top: 25px; font-size: 1.2em; font-weight: bold; min-height: 30px; }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25%, 75% { transform: translateX(-10px); }
            50% { transform: translateX(10px); }
        }

        /* --- 3. LESE-MODUS --- */
        button.action-btn {
            background: linear-gradient(135deg, #d4af37, #b08d2b); color: #111; border: none; padding: 18px 45px;
            font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.2em; border-radius: 50px; cursor: pointer;
            box-shadow: 0 5px 25px rgba(212, 175, 55, 0.4); transition: all 0.3s ease; margin-top: 20px; letter-spacing: 1px;
        }

        button.action-btn:hover { box-shadow: 0 8px 35px rgba(212, 175, 55, 0.7); transform: translateY(-3px); }
        .reading-slot { width: 250px; text-align: center; }
        .slot-title {
            font-family: 'Cinzel', serif; color: #d4af37; text-transform: uppercase; letter-spacing: 2px;
            font-size: 1em; margin-bottom: 20px; text-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
        }

        .flip-card.selected .flip-card-front { border: 4px solid #4cd137 !important; box-shadow: 0 0 20px #4cd137; }
        .picker-card .card-back-pattern { display: none !important; }
        .picker-card .tap-hint { display: none; }
        .picker-card { width: 100px !important; height: 140px !important; }

        .question-container {
            background: rgba(22, 33, 62, 0.5); border: 1px dashed #d4af37; border-radius: 12px;
            padding: 25px; margin-top: 25px; display: none; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.5);
        }
        
		.tarot-textarea {
			width: 100%; 
			max-width: 600px; 
			height: 100px; 
			background: rgba(15, 17, 26, 0.9);
			border: 1px solid #d4af37; 
			border-radius: 8px; 
			color: #fff; 
			padding: 12px;
			font-family: 'Quicksand', sans-serif; 
			font-size: 1.1em; 
			resize: vertical; 
			margin-top: 10px; 
			outline: none;
			box-sizing: border-box; 
}
        .tarot-textarea:focus { box-shadow: 0 0 10px rgba(212, 175, 55, 0.6); }

        .displayed-question {
            font-style: italic; color: #d4af37; background: rgba(214, 175, 55, 0.05); padding: 15px;
            border-left: 4px solid #d4af37; border-radius: 0 8px 8px 0; margin: 20px auto; max-width: 800px;
            text-align: center; font-size: 1.1em;
        }

        /* --- KI-KOPPIER-FENSTER DESIGN --- */
        .ai-box {
            background: rgba(26, 21, 44, 0.95);
            border: 2px solid #8a2be2;
            box-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
            border-radius: 12px;
            padding: 25px;
            margin: 30px auto;
            max-width: 800px;
            text-align: center;
        }
        .ai-box h3 { color: #bb86fc; font-family: 'Cinzel', serif; margin-top: 0; }
        .ai-btn {
            background: linear-gradient(135deg, #8a2be2, #4a00e0);
            color: #fff; border: none; padding: 12px 30px;
            font-family: 'Quicksand', sans-serif; font-weight: bold;
            border-radius: 25px; cursor: pointer; transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(138, 43, 226, 0.4);
            margin-top: 15px;
        }
        .ai-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(138, 43, 226, 0.7); }
        .ai-btn:disabled { background: #444; color: #888; cursor: not-allowed; box-shadow: none; border: 1px solid #666; }
		@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin {
  display: inline-block;
  animation: rotate 2s linear infinite;
}