/* ======================================================================
   Kacheln und Sektionen (Startseite)
   ----------------------------------------------------------------------
   Eigener Nachbau, Werte aus der Messung des gerenderten Zustands.

   Der Aufbau ist bewusst schlank: eine Sektion ist ein Raster, eine
   Kachel ein Flex-Container. Dadurch braucht KEIN Textblock eine
   Breitenangabe — Kopfzeile, Unterzeile und Knopfreihe sind so breit
   wie ihr Inhalt und werden von der Kachel zentriert. Genau deshalb
   bricht die Schlagzeile auf jeder Breite an einer anderen, aber
   immer sinnvollen Stelle.

   Ebenen in der Kachel (von hinten nach vorn):
     Bild            ohne z-index, ganz hinten
     Text            z-index 2
     Link, Knöpfe    z-index 3   — der Link liegt als unsichtbare
                                   Fläche über allem, die Knöpfe
                                   müssen daher gleichauf liegen,
                                   sonst wären sie nicht klickbar
   ====================================================================== */

.section {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--pf-farbe-text);
  text-align: center;
}

/* --- Hero: eine Kachel über die volle Breite --- */
/* Die Startseite laesst die Navigation mitscrollen statt sie oben
   festzuhalten — sie liegt ueber dem Hero und braucht deshalb Platz,
   den der Hauptbereich als Innenabstand stellt. Beides gilt nur hier;
   die uebrigen Seiten schieben die Nav mit dem Inhalt weg. */
.page-home #pf-nav {
  position: fixed;
}
.page-home .main {
  padding-top: 44px;
}

.section-hero {
  grid-template-columns: 1fr;
}
.section-hero .pf-kachel-huelle {
  min-height: 692px;
  padding: 56px 0 63px;
}

/* --- Promo: zwei Spalten, auf dem Handy untereinander --- */
.section-promo {
  grid-template-columns: repeat(2, 1fr);
  padding: 0 12px;
  box-sizing: border-box;
}
.section-promo .pf-kachel-huelle {
  min-height: 580px;
  padding: 53px 0 60px;
  background: #f5f5f7;
}
/* Promo-Kacheln stehen zu zweit nebeneinander und bekommen daher eine
   Stufe kleinere Schrift als der Hero. */
.section-promo .pf-kachel-titel {
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: normal;
}
.section-promo .pf-kachel-unterzeile {
  font-size: 21px;
  line-height: 1.19048;
  letter-spacing: 0.011em;
  margin-top: 3px;
}
/* Die Knopfreihe steht in den Promo-Kacheln enger am Text und mit
   knapperem Zwischenraum als im Hero — kleinere Kachel, kleinere
   Abstaende. Auf dem Handy gleichen sich beide wieder an. */
.section-promo .pf-kachel-knoepfe {
  margin-top: 12px;
  column-gap: 14px;
}
/* Der Hero traegt den einzigen grossen Knopf der Seite. */
.section-hero .button {
  font-size: 17px;
  line-height: 1.17648;
  letter-spacing: -0.022em;
  padding: 11px 21px;
}

/* --- Die Kachel selbst --- */
.pf-kachel-huelle {
  display: flex;
  position: relative;
  justify-content: center;
  box-sizing: border-box;
  /* clip statt hidden: das Bild darf über den Rand hinausragen und
     wird abgeschnitten, ohne dass die Kachel scrollbar wird. */
  overflow: clip;
}
.theme-dark.pf-kachel-huelle {
  background: #000;
}

/* Die unsichtbare Klickfläche über der ganzen Kachel. */
.pf-kachel-verweis {
  position: absolute;
  inset: 0;
  z-index: 3;
  text-decoration: none;
}
/* Die Knoepfe muessen ueber der Klickflaeche liegen, sonst faengt sie
   jeden Klick ab und die einzelnen Ziele waeren nicht erreichbar. */
.button {
  z-index: 4;
}

.pf-kachel-inhalt {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
}
/* Text an den unteren Rand statt in die Mitte. */
.content-bottom {
  justify-content: flex-end;
}

.pf-kachel-texthuelle {
  position: relative;
  z-index: 2;
}
.theme-dark .pf-kachel-texthuelle {
  color: #f5f5f7;
}

.pf-kachel-unterzeile {
  margin-top: 6px;
}

/* Knopfreihe: als Raster, damit zwei Knöpfe nebeneinander stehen und
   ein einzelner keine leere Spalte erzeugt. */
.pf-kachel-knoepfe {
  display: grid;
  z-index: 3;
  justify-content: center;
  margin-top: 17px;
  /* Der Zwischenraum steht auch dann, wenn nur ein Knopf da ist —
     er kostet dort nichts, und die Regel bleibt eine statt zwei. Nur
     das Nebeneinander haengt an einem zweiten Kind. */
  column-gap: 17px;
}
.pf-kachel-knoepfe:has(:nth-child(2)) {
  grid-auto-flow: column;
}

/* --- Bild: liegt hinter allem und füllt die Kachel --- */
.pf-kachel-bildhuelle {
  position: absolute;
  inset: 0;
}
.pf-kachel-bildhuelle picture {
  position: absolute;
  inset: 0;
}
/* Mittig verankert statt linksbündig: beim Beschneiden bleibt so die
   Bildmitte stehen, egal wie schmal die Kachel wird. */
.pf-kachel-bildhuelle img {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
  object-fit: cover;
  overflow: clip;
}

/* ---------- Tablet ---------- */
@media only screen and (max-width: 1068px) {
  .section-hero .pf-kachel-huelle {
    min-height: 650px;
    padding: 61px 0 69px;
  }
  .section-promo .pf-kachel-huelle {
    min-height: 490px;
    padding: 44px 0 48px;
  }
  .section-promo .pf-kachel-titel {
    font-size: 32px;
    line-height: 1.125;
    letter-spacing: 0.002em;
  }
  .section-promo .pf-kachel-unterzeile {
    font-size: 19px;
    line-height: 1.21053;
    letter-spacing: 0.012em;
    margin-top: 4px;
  }
  .pf-kachel-unterzeile { margin-top: 4px; }
  .pf-kachel-knoepfe { margin-top: 16px; }
}

/* ---------- Handy ---------- */
@media only screen and (max-width: 734px) {
  .section-promo {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .section-hero .pf-kachel-huelle,
  .section-promo .pf-kachel-huelle {
    min-height: 500px;
    padding: 39px 0 43px;
  }
  /* Auf dem Handy steht auch im Hero der normale Knopf — ein grosser
     waere hier fast so breit wie die Kachel. */
  .section-hero .button {
    font-size: 14px;
    line-height: 1.28577;
    letter-spacing: -0.016em;
    padding: 8px 15px;
  }
  .pf-kachel-unterzeile { margin-top: 4px; }
  .pf-kachel-knoepfe,
  .section-promo .pf-kachel-knoepfe { margin-top: 11px; }
  .pf-kachel-knoepfe { column-gap: 14px; }
  /* Die Leiste ist auf dem Handy 48px hoch statt 44. */
  .page-home .main { padding-top: 48px; }
}