/* --- Hauptstruktur --- */

        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        .content {
            flex: 1;
            margin-top: 80px;  /* Anpassung an die Höhe Ihrer Menüleiste */
            margin-bottom: 60px;  /* Anpassung an die Höhe Ihres Footers */
        }
        footer {
            flex-shrink: 0;
        }
        .scroll-padding {
    padding-top: 80px;  /* Anpassung an die Höhe Ihrer Menüleiste */
    margin-top: -80px;  /* Anpassung an die Höhe Ihrer Menüleiste */
}

p {
    text-align: justify;
}

/* --- Überschriften --- */
h1, h2, h3, h4, h5, h6 {
    color: #333; /* Dunkelgrau für Text */
}

h2 {
    color: #40a8c4; /* Akzentfarbe (z.B. ein helleres Blau) für wichtige Überschriften */
}


/* --- Bildgrößen --- */
/* Standardgröße für Desktop */
img.responsive-img {
    width: 25%;
}

/* Größe für Tablets */
@media (max-width: 992px) {
    img.responsive-img {
        width: 50%;
    }
}

/* Größe für Mobilgeräte */
@media (max-width: 576px) {
    img.responsive-img {
        width: 80%;
    }
}


/* --- Klangmemory --- */
.board {
  width: 100%;
  max-width: 400px; /* Sie können die Maximalgröße anpassen */
  margin: auto;
  
}

.card {
  width: calc(25% - 4px);  /* 25% minus 2px links und 2px rechts */
  padding-bottom: calc(25% - 4px); /* Passt das Seitenverhältnis entsprechend an */
  margin: 2px;  /* 2px Ränder rundherum */
  background-color: #ccc;
  position: relative;
  float: left;
}

.card.flipped {
  background-color: green;
}

.card.matched {
  background-color: blue;
} 

/* --- Collapse --- */

.collapse-indicator {
  color: #6c757d; /* Farbe des Icons */
  font-size: 1em; /* Größe des Icons */
  transition: transform 0.3s ease; /* Sanfter Übergang */
}

.collapse-indicator.rotate {
  transform: rotate(90deg); /* Dreht den Pfeil um 90 Grad */
}



/* --- Maslow-Pyramide --- */
.maslow-pyramid {
    position: relative;
    padding-bottom: 60%; /* Verhältnis von 1:1 für die Höhe */
    margin-bottom: 20px;
}

.pyramid-level {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    padding: 5% 0; /* Prozentuale Polsterung für bessere Skalierung */
}

.level-1 {
    bottom: 0; width: 80%;
    background-color: #b0bec5;
}

.level-2 {
    bottom: 20%; width: 70%;
    background-color: #90a4ae;
}

.level-3 {
    bottom: 40%; width: 60%;
    background-color: #78909c;
}

.level-4 {
    bottom: 60%; width: 50%;
    background-color: #607d8b;
}

.level-5 {
    bottom: 80%; width: 40%;
    background-color: #546e7a;
}

@media (max-width: 768px) {
    .pyramid-level {
        padding: 3% 0; /* Kleinere Polsterung auf kleineren Bildschirmen */
        font-size: 80%; /* Kleinere Schriftgröße für bessere Lesbarkeit */
    }
}