/* SECTION STYLES */
.themenbereiche {
  padding: 4em 1.5em;
  background: #f0f8ff;
}

/* Überschrift im Themenbereich immer mittig */
.themenbereiche h1,
.themenbereiche h2,
.themenbereiche h3,
#themenbereiche-heading {
  text-align: center !important;
  margin-inline: auto;
  margin-bottom: 2em;
  font-size: 2.1em;
  color: #002d56;
  font-weight: 700;
}

/* explizit auch für Mobile */
@media (max-width: 768px) {
  .themenbereiche h1,
  .themenbereiche h2,
  .themenbereiche h3,
  #themenbereiche-heading {
    text-align: center !important;
  }
}



/* GRID */
.themen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2em;
  max-width: 1200px;
  margin: 0 auto;
}

/* KACHELN Basis */
.kachel {
  background: #ffffff;
  border-radius: 12px;
  padding: 2em 1em;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  color: #002d56;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  touch-action: manipulation;
}

/* Hover nur auf Desktop */
@media (min-width: 769px) {
  .kachel:hover {
    border-color: #c8006b;
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(209, 0, 96, 0.2);
  }
}

/* Sichtbarkeitseffekt nur auf Mobile */
@media (max-width: 768px) {
  .themen-grid {
    grid-template-columns: 1fr;
  }

  .kachel.kachel-visible {
    border-color: #c8006b;
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(209, 0, 96, 0.2);
  }
}

/* ICONS */
.kachel i.fas,
.kachel i.fa-solid,
.kachel i[class^="fa-"] {
  font-size: 2.2rem;
  margin-bottom: 0.8em;
  display: block;
  color: #c8006b;
}

/* TITEL */
.kachel-haupt {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.4em;
  color: #002d56;
}

/* SUBTEXT */
.kachel-sub {
  display: block;
  font-size: 1rem;
  color: #444;
}