/* Grundlegende Stile für Karussell */
* { box-sizing: border-box; }
.alphabet-carousel-wrapper-instance { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 900px; margin: 40px auto; position: relative; user-select: none; }
.alphabet-carousel-container { flex-grow: 1; overflow: hidden; white-space: nowrap; padding: 20px 0; }
.alphabet-carousel { display: inline-flex; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; transform-style: preserve-3d; }
.carousel-item { display: inline-flex; justify-content: center; align-items: center; width: 80px; height: 80px; margin: 0 10px; background: #f0f0f0; border: 1px solid #ccc; border-radius: 15px; font-size: 2.5em; font-weight: bold; color: #555; cursor: pointer; transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: scale(0.8); opacity: 0.4; box-shadow: 0 4px 10px rgba(0,0,0,0.1); flex-shrink: 0; }
.carousel-item.active { transform: scale(1.2) translateY(-10px); opacity: 1; background: #0073aa; color: #fff; border-color: #005f8b; box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.carousel-item:not(.active):hover { transform: scale(0.9); opacity: 0.7; background: #e0e0e0; }
.carousel-nav { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: #333; color: #fff; border-radius: 50%; cursor: pointer; font-size: 2em; z-index: 10; transition: background 0.3s, transform 0.3s; margin: 0 10px; flex-shrink: 0; }
.carousel-nav:hover { background: #0073aa; transform: scale(1.05); }
.carousel-nav svg { fill: currentColor; }

/* Hauptcontainer für den Text-Bereich */
.letter-text-display-instance { 
	width: 100%; 
	max-width: 1100px; 
	margin: 30px auto; 
	padding: 25px 35px; 
	background: #ffffff; 
	border: 1px solid #eee; 
	border-radius: 8px; 
	box-shadow: 0 2px 8px rgba(0,0,0,0.08); 
	display: block; 
	text-align: left;
}
.ac-display-title { font-size: 2em; font-weight: bold; color: #0073aa; margin-top: 0; margin-bottom: 20px; text-align: center; border-bottom: 2px solid #f0f0f0; padding-bottom: 15px; }

/* Wrapper für Beschreibung und Tipps */
.ac-display-content-wrapper { display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 25px; }
.ac-display-column { flex: 1; min-width: 250px; }
.ac-display-description p { margin-top: 0; }

/* Titel für Tipps und Links */
.ac-display-list h4,
.ac-display-links h4 { margin-top: 0; margin-bottom: 15px; font-size: 1.2em; color: #444; font-weight: bold; padding-left: 1.5em; }

/* Listen-Stile */
.ac-display-list ul, .ac-display-links ul { list-style: none !important; padding: 0; margin: 0; }
.ac-display-list li, .ac-display-links li { padding-left: 1.5em; position: relative; margin-bottom: 8px; }
.ac-display-list li::before { content: '✓'; color: #0073aa; position: absolute; left: 0; font-weight: bold; }

/* Link-Bereich */
.ac-display-links { margin-top: 20px; padding-top: 20px; border-top: 1px solid #f0f0f0; }
.ac-display-links li::before { content: '→'; color: #333; position: absolute; left: 0; }
.ac-display-links a { text-decoration: none; color: #0073aa; font-weight: 500; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.ac-display-links a:hover { border-bottom-color: #0073aa; }

/* Allgemeine mobile Anpassungen */
@media (max-width: 768px) {
	.alphabet-carousel-wrapper-instance { max-width: 100%; margin: 20px auto; }
	.carousel-item { width: 60px; height: 60px; font-size: 2em; margin: 0 5px; }
	.carousel-item.active { transform: scale(1.1) translateY(-5px); }
	.carousel-nav { width: 40px; height: 40px; font-size: 1.5em; }
	.letter-text-display-instance { max-width: 95%; padding: 20px; }
	.ac-display-title { font-size: 1.6em; }
	.ac-display-content-wrapper { flex-direction: column; gap: 20px; }
}