/* ============================================================
   Startseite — Page-spezifische Styles
   Komponenten kommen aus css/components/* — hier nur was nur auf
   dieser Seite vorkommt: Hero, Geschichte-Teaser, Z-Ladder.
   ============================================================ */

/* ============================================================
   1. HERO
   ============================================================ */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  position: relative;
}
.hero-text {
  background: var(--color-sand);
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--space-2xl) + 60px);
}
.hero h1 {
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  font-weight: 400;
  margin-bottom: var(--space-lg);
  max-width: 14ch;
  color: var(--color-anthrazit);
}
.hero h1 em { font-style: italic; color: var(--color-gruen); font-weight: 400; }
.hero-sub {
  font-size: 1.1rem; line-height: 1.6;
  max-width: 42ch; margin-bottom: var(--space-lg);
  color: rgba(28, 44, 44, 0.85);
}
.hero-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-xl); }
.hero-stats {
  display: flex; gap: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(28, 44, 44, 0.2);
  max-width: 480px;
}
.hero-stats .num {
  font-family: var(--font-headline);
  font-size: 2.4rem; font-weight: 400;
  color: var(--color-rot); line-height: 1; font-style: italic;
}
.hero-stats .label {
  font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase; margin-top: 0.4em; opacity: 0.75;
}

.hero-image-wrap { position: relative; overflow: visible; }
.hero-image-clip {
  position: absolute; inset: 0; overflow: hidden;
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 0% 100%);
  animation: image-reveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
.hero-image-clip img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  animation: ken-burns 18s ease-out forwards;
}
@keyframes image-reveal {
  from { clip-path: polygon(8% 0, 8% 0, 8% 100%, 0% 100%); }
  to   { clip-path: polygon(8% 0, 100% 0, 100% 100%, 0% 100%); }
}

/* ============================================================
   3. GESCHICHTE-TEASER
   ============================================================ */
.history {
  --bg: var(--color-sand);
  --next-bg: var(--color-rot);
  background: var(--bg);
}
.history-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.history-image {
  aspect-ratio: 4/5;
  overflow: hidden;
  position: relative;
  clip-path: polygon(0 0, 100% 4%, 96% 100%, 4% 96%);
}
.history-image img { width: 100%; height: 100%; object-fit: cover; }
.history-image-caption {
  position: absolute;
  bottom: var(--space-md); left: var(--space-md);
  background: var(--color-anthrazit);
  color: var(--color-sand);
  padding: 0.6em 1em;
  font-family: var(--font-classic-tech);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.history-text h2 { margin-bottom: var(--space-md); }
.history-text > p {
  font-size: 1.1rem; line-height: 1.65;
  margin-bottom: var(--space-md);
  color: rgba(28,44,44,0.85);
}
/* Pullquote in der Geschichte-Section nutzt .pullquote aus
   components/typography.css — keine weiteren Styles noetig. */

/* ============================================================
   Z-Ladder fuer Section-Divider — Reihenfolge der Sections auf
   dieser Seite. Upper.z muss > direkter Lower.z sein, damit die
   Wave-Mask zuverlaessig ueber die naechste Section malt.
   ============================================================ */
.events.section-divider     { z-index: 6; }
.history.section-divider    { z-index: 5; }
.heroes.section-divider     { z-index: 4; }
.bento.section-divider      { z-index: 3; }
.cta-banner.section-divider { z-index: 3; }

/* ============================================================
   Responsive — nur fuer page-spezifische Komponenten
   (Komponenten-Responsive liegt jeweils in der Komponenten-CSS).
   ============================================================ */
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; }
  .hero-image-wrap { min-height: 60vh; }
  .hero-image-clip { clip-path: none; position: relative; inset: auto; min-height: 60vh; }
  .history-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .history-image { aspect-ratio: 4/3; max-width: 480px; }
}

@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-text {
    padding: 70px var(--space-md) var(--space-md);
    min-height: auto;
  }
  .hero h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); margin-bottom: var(--space-sm); }
  .hero-sub { font-size: 0.92rem; margin-bottom: var(--space-md); }
  .hero-stats { gap: var(--space-md); padding-top: var(--space-sm); }
  .hero-stats .num { font-size: 1.6rem; }
  .hero-stats .label { font-size: 0.62rem; letter-spacing: 0.08em; }
  .hero-image-wrap { min-height: 240px; }
  .hero-image-clip { min-height: 240px; }
  .history-text h2 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
}