body { font-family: Arial, sans-serif; text-align: center; padding: 20px; }
	button { padding: 10px 20px; font-size: 16px; margin: 10px; cursor: pointer; }
	
	
/* Game */
	.game-container { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 20px; flex-wrap: wrap; }
	.card-back { width: 150px; height: 200px; background: url('/graphic/spawn_back.png') no-repeat center center / cover; }

	/* 🆕 Grid für Mehrfachziehungen */
	.card-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 20px;
		justify-content: center;
		margin-top: 20px;
	}

	.card-table {
		border-collapse: collapse;
		width: 300px;
		text-align: center;
		table-layout: fixed;
	}

	.card-table th, .card-table td {
		padding: 8px;
		border: 1px solid #000;
		font-size: 16px;
	}

	.active { font-weight: bold; color: white; }
	.blue { background-color: #66B2FF; color: black; }
	.yellow { background-color: #FFDC00; color: black; }
	.orange { background-color: #FF851B; }
	.red { background-color: #FF4136; }
	.inactive { background-color: #ddd; }
	
	.radio-group {
		display: flex;
		justify-content: center;
		gap: 15px;
		margin-top: 20px;
	}

	.button-container {
		display: flex;
		justify-content: center;
		gap: 10px;
		margin-top: 20px;
		flex-wrap: wrap;
	}

	/* 🖼️ Monsterbild */
	.monster-img {
		width: 24px;
		height: 24px;
		margin-left: 5px; /* 🔥 Bild nun rechts vom Namen */
		vertical-align: middle;
	}
	
	/* 🎨 Tooltip-Styling */
	.tooltip {
		position: absolute;
		background: rgba(0, 0, 0, 0.8);
		color: white;
		padding: 8px;
		border-radius: 5px;
		font-size: 12px;
		max-width: 200px;
		text-align: left;
		display: none; /* Standardmäßig ausgeblendet */
		z-index: 100;
	}

	.tooltip.visible {
		display: block;
	}
		
	.dragon-container {
        margin-top: 20px;
        text-align: center;
    }
    .dragon-card {
        padding: 15px;
        border-radius: 10px;
        font-size: 12px;
        max-width: 400px;
        margin: auto;
        text-align: center;
        color: white;
    }
    .necromantic-dragon {
        background-color: #4B0082;
        color: white;
    }
    .feral-dragon {
        background-color: #013220;
        color: white;
    }
    .dragon-card-placeholder {
        padding: 20px;
        border: 2px dashed #aaa;
        text-align: center;
        max-width: 400px;
        margin: auto;
    }
    .necromantic-dragon-card {
        background-color: #4B0082;
        border: 3px solid #3A0066;
    }
    .feral-dragon-card {
        background-color: #013220;
        border: 3px solid #012010;
    }
	
	.dragon-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		margin-top: 20px;
		justify-content: center;
		align-items: start;
	}
	
	.plus-one {
		display: inline-block;
		background-color: #90EE90; /* Hellgrün */
		border: 2px solid #006400; /* Dunkelgrüner Rahmen */
		color: #006400; /* Dunkelgrüne Schrift */
		font-weight: bold;
		padding: 2px 6px;
		border-radius: 5px;
		margin-left: 5px;
		font-size: 0.9em;
	}

	
/* Setup */	
	
	.container { max-width: 900px; margin: auto; text-align: left; }
	
	.filter-container {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		justify-content: center;
	}

	.grid-container {
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
		justify-content: center;
	}

	/* Einheitlicher grauer Kasten für Dropdowns & Checkboxen */
	.element-box { 
		border: 1px solid #ccc; 
		padding: 10px; 
		margin: 10px 0; 
		background-color: #f9f9f9; 
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: 350px;
	}

	/* Flexbox für Checkboxen */
	.checkbox-group { 
		display: flex; 
		flex-direction: column; 
	}

	/* Monsterkarten-Layout */
	.monster-card { 
		border: 1px solid #ccc; 
		padding: 10px; 
		margin: 5px 0; 
		background-color: #fff; 
		display: flex; 
		align-items: center; 
		border-radius: 5px;
	}

	.monster-card img { 
		max-width: 60px; 
		height: auto; 
		margin-right: 10px; 
	}
		
	.grid-3-columns {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
		margin-bottom: 20px;
	}
	
	.grid-2-columns {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
		width: 100%;
	}
	
	.grid-6-columns {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 15px;
		width: 100%;
	}
	
	.radio-box, .checkbox-box {
		background: #f9f9f9;
		padding: 10px;
		border-radius: 5px;
		text-align: left;
		border: 1px solid #ccc;
	}
	
		/* 🖼️ Allgemeines Styling für Filter-Boxen & Monsterkarten */
	.filter-box, .monster-card {
		padding: 10px;
		border-radius: 5px;
		text-align: left; /* 🔹 Text linksbündig */
		border: 2px solid #ccc;
		color: black; /* Standard-Schriftfarbe */
		padding-left: 15px;
		font-weight: normal; /* 🔥 Kein fettgedruckter Text */
	}

	/* 🎨 Farbliche Hinterlegung für verschiedene Typen mit optimierter Schriftfarbe */
	.dragon { background-color: #800000; border-color: #660000; color: white; } /* Bordeauxrot */
	.water { background-color: #87CEFA; border-color: #5A9ED8; color: black; } /* Hellblau */
	.giant { background-color: #FFD700; border-color: #E6B800; color: black; } /* Gelb */
	.wolf { background-color: #808080; border-color: #666666; color: white; } /* Grau */
	.siege { background-color: #8B4513; border-color: #6A2E0C; color: white; } /* Braun */
	.horde { background-color: #FFC0CB; border-color: #FF99AA; color: black; } /* Rosa */

	/* 🧙‍♂️ Nekromanten-Typen jetzt farbig */
	.ratz { background-color: #556B2F; border-color: #405023; color: white; } /* Olivgrün */

	/* 🖼️ Checkboxen visuell optimieren */
	.filter-box input[type="checkbox"] {
		margin-right: 8px;
		transform: scale(1.2);
		vertical-align: middle;
	}

	/* 💀 Breitere Monsterkarten mit kleineren Schriften */
	.monster-card {
		max-width: 400px; /* 🔹 Etwas größere Karten für bessere Darstellung */
		font-size: 11px;
	}
	
	label {
		font-size: 11px;
	}
	
/*Index*/
	
	h1 {
		margin-bottom: 20px;
	}
	.language-container {
		display: flex;
		justify-content: center;
		gap: 20px;
		flex-wrap: wrap;
	}
	.language-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		cursor: pointer;
		background: white;
		padding: 15px;
		border-radius: 10px;
		box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
		transition: transform 0.2s ease-in-out;
	}
	.language-card:hover {
		transform: scale(1.1);
	}
	.flag {
		width: 80px;
		height: 50px;
		border-radius: 5px;
		margin-bottom: 10px;
	}