/* 0. Google Font import (oben in der CSS oder im deiner HTML) */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"); /* 1. Farb- und Abstands-Variablen */ :root { --font-base: "Poppins", sans-serif; --color-bg: #eef2f7; --color-card-bg: #ffffff; --color-primary: #4f46e5; --color-primary-2: #6366f1; --color-text: #333333; --shadow-light: 0 6px 20px rgba(0, 0, 0, 0.05); --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.1); --radius: 12px; --spacing: 16px; --transition: all 0.3s ease; } /* 2. Gesamtes Layout */ body { margin: 0; padding: var(--spacing); display: flex; flex-direction: column; align-items: center; background: linear-gradient(135deg, #f0f4f8, #eef2f7); font-family: var(--font-base); color: var(--color-text); } /* 3. Karteikarten-Container */ #KarteikartenContainer { min-width: 300px; aspect-ratio: 1/1 /* quadratisch */; background: var(--color-card-bg); border-radius: var(--radius); box-shadow: var(--shadow-light); padding: var(--spacing); text-align: center; margin-bottom: 24px; transition: var(--transition); box-sizing: border-box; display: flex; flex-direction: column; } #KarteikartenContainer:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } #KarteikartenContainer:not(.only-text-mode) #flipButton img{ width: 100%; /* Bild füllt den Button aus */ flex: 1; /* Flex-Item, das sich anpasst */ object-fit: contain; /* Bild wird skaliert, um den Button auszufüllen */ min-height: 0; /* Verhindert, dass das Bild den Button überdeckt */ } /* 4. Flip-Button innerhalb der Karte */ #KarteikartenContainer button { all: unset; cursor: pointer; display: block; width: 100%; transition: var(--transition); box-sizing: border-box; } #KarteikartenContainer button:hover { transform: scale(1.02); } /* 5. Bild-Styling */ #KarteikartenContainer img { width: 100%; /* height: calc(100%-16px-1.15em); */ border-radius: calc(var(--radius) - 4px); margin-bottom: var(--spacing); object-fit: cover; transition: var(--transition); } #KarteikartenContainer img:hover { filter: brightness(1.05); } /* 7. Text in der Karte */ #KarteikartenContainer p { margin: 0; padding: 8px 0; font-size: 1.15em; font-weight: 600; } /* 8. Navigations- und Auswahl-Buttons */ button.nav, #ShowPreviousCard, #ShowNextCard, #Gruppe1auswahl, #Gruppe2auswahl { padding: 12px 24px; margin: 6px; font-size: 1em; background: linear-gradient( 135deg, var(--color-primary), var(--color-primary-2) ); color: #fff; border: none; border-radius: var(--radius); box-shadow: var(--shadow-light); cursor: pointer; transition: var(--transition); } button.nav:hover, #ShowPreviousCard:hover, #ShowNextCard:hover, #Gruppe1auswahl:hover, #Gruppe2auswahl:hover { transform: translateY(-2px); } /* 9. Only-Text-Mode Styling */ .only-text-mode { background: linear-gradient(135deg, #e8f0fe, #eef5ff); border: 2px solid var(--color-primary); } .only-text-mode p { margin: 0; padding: 80px 20px 20px; font-size: 1.3em; color: var(--color-primary-2); text-align: center; } /* 10. Flip-Button-Größe */ #flipButton { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0; box-sizing: border-box; flex-direction: column; } /* 11. Responsive Tweaks */ @media (max-width: 400px) { :root { --spacing: 12px; } #KarteikartenContainer { padding: 12px; } button.nav { padding: 10px 16px; } } /* Only-Text-Mode: Container zum Flex-Container machen */ #KarteikartenContainer.only-text-mode { display: flex; flex-direction: column; } /* Button im Only-Text-Mode auf volle Fläche, Text zentriert */ #KarteikartenContainer.only-text-mode #flipButton { flex: 1; /* füllt Container komplett aus */ display: flex; align-items: center; /* vertikale Mitte */ justify-content: center; /* horizontale Mitte */ } /* Inneren Text-P-Tag entschärfen (Padding oben entfernen) */ #KarteikartenContainer.only-text-mode p { padding: 0 20px; /* nur noch horizontaler Rand */ } /* 15. Audio und Text bleiben in nativer Höhe */ #KarteikartenContainer:not(.only-text-mode) #flipButton audio, #KarteikartenContainer:not(.only-text-mode) #flipButton p { flex: 0 0 auto; } /* 1) Flex-Kinder dürfen schrumpfen */ #KarteikartenContainer, #KarteikartenContainer #flipButton { min-height: 0; min-width: 0; } /* 2) Button im Everything-Mode füllt die Box komplett aus */ #KarteikartenContainer:not(.only-text-mode) #flipButton { flex: 1; /* gesamte Höhe des Containers */ display: flex; flex-direction: column; overflow: hidden; /* störende Überhänge abscheiden */ } /* 3) Bild nimmt den verbleibenden Platz, aber ragt nicht raus */ #KarteikartenContainer:not(.only-text-mode) #flipButton img { flex: 1; /* Bild bekommt den „freien“ Raum */ max-width: 100%; /* nie breiter als der Container */ height: 100%; /* volle Höhe des Bild-Flex-Items */ object-fit: contain;/* skaliert, ohne zuzuschneiden */ }