/* ===========================================
   NORDSTERN – HOME (Startseite)
   Datei: css/pages/home.css
   Zweck: Nur Startseite (Hero, Startkacheln, kleine Abstände)
   =========================================== */

/* ===========================
   HERO
   =========================== */

/* Hero ohne Bild (falls du die Klasse nutzt) */
.hero-wrap--noimage{
  display: block;
}

/* Textblock zentriert & ruhig */
.hero-copy--center{
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.hero-copy--center h1{
  text-align: center;
  max-width: 18ch;       /* ruhige Zeilenlänge -> natürlicher Umbruch */
  margin-left: auto;
  margin-right: auto;
  line-height: 1.15;
}

/* ===========================
   THEMEN (Kacheln)
   =========================== */

.home-note{
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.home-note p{
  margin: 0;
}

.home-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

@media (max-width: 840px){
  .home-grid{
    grid-template-columns: 1fr;
  }
}

.tile-card{
  display: block;
  padding: 22px 22px 24px;
  border-radius: 20px;
  text-decoration: none;
  color: #f2f2f2;
  background: linear-gradient(
    160deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  );
  border: 1px solid rgba(255,255,255,0.14);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.tile-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,231,173,0.32);
  background: linear-gradient(
    160deg,
    rgba(255,231,173,0.10),
    rgba(255,255,255,0.03)
  );
}

.tile-title{
  margin: 0 0 8px 0;
  font-weight: 600;
}

.tile-sub{
  margin: 0;
  opacity: 0.85;
  font-size: 0.95rem;
}

/* WARUM NORDSTERN – gleiche Kartenhöhe */
.why-grid{
  align-items: stretch;
}

.why-photo,
.why-text{
  display: flex;
  flex-direction: column;
}

.why-text{
  max-width: 60ch;
}

.home-cta{
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

/* ===========================
   FOOTER
   =========================== */

.footer-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 38px 22px 48px;
  text-align: center;
  opacity: 0.92;
}

.footer-wrap p{
  margin: 10px 0;
  font-size: 14px;
  color: #cdd9d9;
}

.footer-wrap a{
  color: #ffe7ad;
}

/* ===========================
   FEINSCHLIFF – ABSTÄNDE
   =========================== */

.hero{
  padding-bottom: 120px;
}

#themen{
  padding-top: 90px;
}

/* Letzte Kachel (Mitgliederbereich) mittig über beide Spalten */
.home-grid > .tile-card:last-child{
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 420px;
}

/* WARUM NORDSTERN – beide Cards exakt gleich hoch */
.why-grid{
  align-items: stretch;
}

.why-grid > .card,
.why-photo,
.why-text{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Foto-Card: Bild soll die Card füllen */
.why-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px; /* nur falls es optisch passt – sonst weglassen */
}

/* WARUM NORDSTERN – Cards vertikal exakt ausrichten */
.why-grid{
  align-items: center;
}