/* Einstellung des Rasters Landing Page*/
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 2.5rem;
  align-items: stretch;
  justify-content: stretch;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

/* Einstellung der einzelnen Kacheln der Landing Page*/
.tile {
  aspect-ratio: 1/0.25;
  font-family: 'sans-serif';
  font-size: 2rem;
  word-wrap: break-word;
  hyphens: auto;
  overflow: hidden;
  font-weight: 800;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #80c40f;
  border: 1px solid #e5e7eb;
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(16, 8, 8, 0.08);
  text-decoration: none;
  color: #ffffff;
  padding: 10rem 2rem;
  position: relative;
}

.tiles .tile:nth-child(5) {
  grid-column: span 2;
  aspect-ratio: 2.323/0.25;
}

.tile-title {
  margin: 0;
  padding: 0;
  line-height: 1.1;
  width: 100%;
  text-align: center;
}

/* Einstellung der einzelnen Überschriften */
.tile h1 h2 h3 {
  color: #ffffff;
  text-align: center;
}

/* === Beschreibung standardmäßig ausblenden === */
.tile-desc{
  color: #f5f5f5;
  line-height: 1.35;
  margin: 0;

  /* visuell verstecken, aber im DOM lassen */
  opacity: 0;
  max-height: 0;
  overflow: hidden;

  /* smoother Reveal */
  transform: translateY(4px);
  transition: opacity .18s ease, max-height .18s ease, transform .18s ease;
}

/* Spezielle Formatierung für Kacheln mit Bild */
.tile-with-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: none; /* Optional: grünen Rahmen entfernen */
}

/* Sicherstellen, dass der Text über dem Bild lesbar ist */
.tile-with-image .tile-title,
.tile-with-image .tile-desc {
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
  z-index: 2;
}

/* Spezielle Kachel, die dem Muster widerspricht */
.special-logo-tile {
  background: #ffffff; /* Weißer Hintergrund, damit das Logo wirkt */
  display: flex;
  height: 100%;
  visibility: visible;
  box-shadow: none;
  padding: 1rem; /* Weniger Padding als die Standard-Kacheln */
  color: #000000; /* Dunkler Text für Lesbarkeit auf Weiß */
  border: none;
  justify-content: space-evenly;
  height: 100%;
  opacity: 1;
  position: relative;
  z-index: 2;
  grid-column: span 1;
  grid-row: auto;
  width: 100%;
  margin-top: auto;
}

/* Verkleinert die Schrift nur in der Logo-Kachel */
.special-logo-tile .text-wrapper h2 {
  font-size: 1.5rem; /* Statt 2rem */
  margin-top: auto;
}

.special-logo-tile .text-wrapper p {
  font-size: 1.1rem; /* Angenehme Lesegröße für den Begrüßungstext */
  font-weight: 400;  /* Etwas dünner, damit es nicht so erschlagend wirkt */
  align-items: flex-end;
  flex-grow: 1;
}

/* Spezielle Anpassung für das Logo in der ersten Kachel */
.special-logo-tile .logo-wrapper img {
  max-width: 100%;
  max-height: 120px; /* Begrenze die Höhe des Logos, damit Text sichtbar bleibt */
  object-fit: contain;
}

/* Das orange Oval */
.concert-stamp {
  position: absolute !important;
  bottom: 10px;
  right: 10px;

  /* Größe des Ovals - ggf. leicht vergrößern */
  width: 200px; 
  height: 200px;
  border-radius: 50%;
  border: 3px solid #ff8c00;
  background-color: rgba(255, 255, 255, 0.01); /* Fast weiß für beste Lesbarkeit */
  
  /* Flexbox zentriert alles */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 20;
  transform: rotate(-15deg);
  pointer-events: none;
  
  /* SCHRIFT-RESET: Hier wird die dicke Schrift der Kachel korrigiert */
  font-weight: normal !important; /* Hebt das dicke '800' der Kachel auf */
  font-size: 1rem;                /* Eigene Basisgröße */
  color: #ff8c00;
  line-height: 1.1;
  font-family: Arial, sans-serif; /* Klare Schrift */
  box-sizing: border-box;
  padding: 5px;
}

/* Der obere Text im Stempel */
.concert-stamp span {
  font-size: 0.65rem !important; /* Sehr klein */
  font-weight: 900 !important;   /* Nur das Label ist fett */
  text-transform: uppercase;
  margin-bottom: 2px;
  display: block;
}

/* Datum und Ort im Stempel */
.concert-stamp small {
  font-size: 0.75rem !important; /* Kompakte Größe, damit es ins Oval passt */
  font-weight: 600 !important;   /* Mittlere Dicke */
  display: block;
  width: 90%;                    /* Verhindert Anstoßen am Rand */
  white-space: nowrap;           /* Verhindert hässliche Zeilenumbrüche im Wort */
  overflow: hidden;
  text-overflow: ellipsis;       /* Falls Text doch zu lang ist */
}

.tile.tile-social {
    cursor: default;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Verteilt Titel oben und Icons unten */
    padding-bottom: 15px;
}

/* Container für die SVGs */
.social-icons  {
    display: flex;
    color: white;
    justify-content: space-evenly;
    gap: 20px;
    margin-top: 10px;
    margin: top;
    z-index: 10; /* Damit sie über dem Hintergrund liegen */
}

/* Styling für die Links in der Kachel */
.social-icons a {
    color: white;
    transition: transform 0.2s ease, color 0.2s ease;
    text-decoration: none;
}

.social-icons a:hover {
    transform: scale(1.2);
    color: #f0f0f0; /* Oder deine Akzentfarbe */
}


/* Tablet-Ansicht: 2 Spalten */
@media (max-width: 900px) {
  .tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Handy-Ansicht: 1 Spalte */
@media (max-width: 600px) {

  /* 1. Globales Box-Sizing für Safari erzwingen */
  *, *:before, *:after {
    box-sizing: border-box;
  }

  .tiles {
    grid-template-columns: 1fr !important;
    gap: 1.5rem; /* Etwas kleinerer Abstand auf Handys */
    width: 100%
  }
  .tiles .tile {
    grid-column: span 1 !important;
    overflow: visible;
  }
  .tile {
    aspect-ratio: auto !important;
    width: 100% !important; /* Alle Kacheln müssen gleich breit sein */
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
  }
  .tiles .tile:nth-child(5) {
    grid-column: span 1;
  }
}