/* ============================================================
   EGH Gebaeudeservice / 05 - SEKTIONEN
   Hero, Zahlenband, Werterhalt, Ablauf, Einsatzgebiet.
   ============================================================ */

/* ------------------------------------------------------------
   HERO

   Geteilt, aber nicht symmetrisch: Text auf 55 Prozent, Bild
   auf 45 und am rechten Rand aus dem Satzspiegel heraus bis an
   die Fensterkante. Das gibt der Flaeche eine Richtung und
   verhindert den Eindruck zweier gleich grosser Kaesten.

   Vier Textelemente, mehr nicht: Ortszeile, Schlagzeile, zwei
   Saetze, zwei Knoepfe. Zahlen und Google-Stimmen stehen
   darunter. Der erste Bildschirm hat eine Aufgabe, nicht fuenf.
   ------------------------------------------------------------ */
.hero {
  /* Eng an der Kopfzeile. Sechs Zentimeter Luft zwischen Leiste
     und Schlagzeile sehen auf einem grossen Bildschirm ruhig
     aus und auf einem Laptop wie ein Ladefehler: Man sieht die
     Leiste, darunter nichts, und muss scrollen, um zu erfahren,
     worum es geht. */
  padding-top: clamp(1.25rem, 2.4vw, 2.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  overflow: hidden;
}
.hero__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
  gap: clamp(2rem, 4.5vw, 4.5rem);
}

.hero__ort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  font-family: var(--font-kopf);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--auf-grund-2);
  margin-bottom: var(--stack-3);
}
.hero__ort b { color: var(--gold); font-weight: 500; }
.hero__ort i { font-style: normal; width: 12px; height: 1px; background: var(--regel-satt); }

.hero__titel { margin-bottom: var(--stack-3); max-width: 16ch; }
.hero__lede { margin-bottom: var(--stack-4); max-width: 46ch; }
.hero__tasten { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero__bild {
  /* Feste Hoehe statt Seitenverhaeltnis.

     Mit aspect-ratio rechnete die Hoehe aus der Breite INKLUSIVE
     des Ueberhangs nach rechts, und die wird auf einem breiten
     Bildschirm sehr gross: 945 Pixel Breite ergaben 709 Pixel
     Hoehe. Weil die beiden Spalten mittig ausgerichtet sind,
     rutschte die Schlagzeile daneben entsprechend weit nach
     unten, und unter der Kopfzeile stand nichts als Luft.

     Ein max-height darueber half nicht: Bei gesetztem
     aspect-ratio leitet der Browser dann die BREITE aus der
     gedeckelten Hoehe ab, und der Ueberhang war weg. Also gar
     kein Verhaeltnis mehr. Die Breite kommt aus dem Raster, die
     Hoehe steht hier, und object-fit: cover schneidet an. */
  height: clamp(17rem, 52vh, 30rem);
  /* Aus dem Satzspiegel heraus bis an die Fensterkante. Der
     Wert ist der Abstand vom Rasterrand zum Fenster: halbe
     Differenz zwischen Fensterbreite und Satzspiegel, plus
     Aussenabstand. Bleibt das Fenster schmaler als der
     Satzspiegel, wird der Wert null. */
  margin-right: calc((100vw - min(100vw - var(--gutter) * 2, var(--maxw))) / -2 - var(--gutter));
  border-radius: var(--r-2) 0 0 var(--r-2);
}

@media (max-width: 1000px) {
  .hero__raster { grid-template-columns: minmax(0, 1fr); gap: var(--stack-4); }
  .hero__bild { margin-right: 0; border-radius: var(--r-2); height: auto; aspect-ratio: 16 / 10; order: -1; }
  .hero__titel { max-width: none; }
}

/* ------------------------------------------------------------
   ZAHLENBAND

   Steht unter dem Hero, nicht darin. Vier Behauptungen, jede
   nachpruefbar, jede mit einer Zahl davor. Keine Kaesten:
   drei Haarlinien reichen, um vier Spalten zu trennen.
   ------------------------------------------------------------ */
.zahlen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--hair) solid var(--regel);
  border-bottom: var(--hair) solid var(--regel);
}
.zahlen__feld {
  padding: clamp(1.5rem, 2.8vw, 2.4rem) clamp(1rem, 2vw, 2rem);
  border-left: var(--hair) solid var(--regel);
}
.zahlen__feld:first-child { border-left: 0; padding-left: 0; }
.zahlen__wert {
  display: block;
  font-family: var(--font-kopf);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.65rem;
}
.zahlen__wert small { font-size: 0.48em; letter-spacing: 0; color: var(--gold); }
.zahlen__text { font-size: var(--t-sm); line-height: 1.5; color: var(--auf-grund-2); max-width: 26ch; }

@media (max-width: 860px) {
  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zahlen__feld:nth-child(3) { border-left: 0; padding-left: 0; }
  .zahlen__feld:nth-child(n+3) { border-top: var(--hair) solid var(--regel); }
}
@media (max-width: 480px) {
  .zahlen { grid-template-columns: minmax(0, 1fr); }
  .zahlen__feld { border-left: 0; padding-inline: 0; }
  .zahlen__feld:nth-child(n+2) { border-top: var(--hair) solid var(--regel); }
}

/* ------------------------------------------------------------
   WERTERHALT
   Bild links, Text rechts, darunter drei Zusagen an einer
   Linie. Diese Form kommt auf der Seite genau einmal vor.
   ------------------------------------------------------------ */
.wert__raster {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.wert__bild { aspect-ratio: 4 / 5; }

.wert__zusagen { margin-top: var(--stack-4); border-top: var(--hair) solid var(--regel); }
.wert__zusage {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--stack-2);
  padding: var(--stack-3) 0;
  border-bottom: var(--hair) solid var(--regel);
}
.wert__zusage > i {
  font-style: normal;
  font-family: var(--font-kopf);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--gold);
  padding-top: 0.45rem;
}
.wert__zusage b { display: block; font-family: var(--font-kopf); font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--auf-grund); }
.wert__zusage p { font-size: var(--t-sm); color: var(--auf-grund-2); line-height: 1.6; max-width: 56ch; }

@media (max-width: 900px) {
  .wert__raster { grid-template-columns: minmax(0, 1fr); }
  .wert__bild { aspect-ratio: 16 / 10; }
}

/* ------------------------------------------------------------
   ABLAUF

   Vier Schritte an einer durchgehenden Linie. Die Schritte
   heissen nach dem, was passiert, nicht "Schritt 1".
   ------------------------------------------------------------ */
.ablauf {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  margin-top: var(--stack-4);
}
/* Die Linie liegt hinter den Punkten und laeuft ueber die
   ganze Reihe. Sie endet nicht am letzten Punkt, sondern
   verlaeuft aus: Die Betreuung hoert nicht auf. */
.ablauf::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: var(--hair);
  background: linear-gradient(to right, var(--regel-satt) 0%, var(--regel-satt) 82%, transparent 100%);
}
.ablauf__schritt { position: relative; padding-top: 2.4rem; }
.ablauf__schritt::before {
  content: "";
  position: absolute;
  top: 4px; left: 0;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--grund);
  border: 2px solid var(--gold);
}
.ablauf__schritt em {
  display: block;
  font-style: normal;
  font-family: var(--font-kopf);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.55rem;
}
.ablauf__schritt b { display: block; font-family: var(--font-kopf); font-size: clamp(1.15rem, 1.7vw, 1.35rem); font-weight: 600; margin-bottom: 0.45rem; color: var(--auf-grund); }
.ablauf__schritt p { font-size: var(--t-sm); color: var(--auf-grund-2); line-height: 1.6; }

@media (max-width: 820px) {
  .ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--stack-3); }
  .ablauf::before { display: none; }
  .ablauf__schritt { padding-top: 2.1rem; }
}
@media (max-width: 460px) { .ablauf { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------
   EINSATZGEBIET

   Ein breites Bild, darauf eine weisse Tafel, die zur Haelfte
   darueber liegt. Das ist die einzige Ueberlappung der Seite
   und deshalb eine Geste, kein Muster.
   ------------------------------------------------------------ */
.gebiet { position: relative; }
.gebiet__bild { aspect-ratio: 21 / 9; border-radius: var(--r-2); }
.gebiet__tafel {
  position: relative;
  margin: -6rem 0 0 0;
  width: min(100%, 38rem);
  background: var(--flaeche);
  border: var(--hair) solid var(--regel);
  border-radius: var(--r-2);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  box-shadow: var(--schatten-hoch);
}
.gebiet__tafel p { color: var(--auf-grund-2); margin-top: var(--stack-2); }
.gebiet__tafel .knopf { margin-top: var(--stack-3); }

.gebiet__gruppen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--stack-3) clamp(1.5rem, 3vw, 3rem);
  margin-top: var(--stack-4);
}
.gebiet__gruppe { border-top: 2px solid var(--gold); padding-top: var(--stack-2); }
.gebiet__gruppe h3 {
  font-family: var(--font-kopf);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}
.gebiet__orte li { font-size: var(--t-sm); color: var(--auf-grund-2); line-height: 1.75; }

@media (max-width: 720px) {
  .gebiet__bild { aspect-ratio: 16 / 10; }
  .gebiet__tafel { margin-top: -2.5rem; width: 100%; }
}

/* Die Orte sind Verweise auf ihre eigene Seite. Sie sollen sich
   wie Text lesen und beim Ueberfahren als Link zu erkennen
   geben, nicht umgekehrt: Eine Liste aus 32 blauen Links waere
   eine Tapete. */
.gebiet__orte a,
.seite .gebiet__orte a { color: inherit; border-bottom: var(--hair) solid transparent; transition: color var(--d-schnell) var(--e-weich), border-color var(--d-schnell) var(--e-weich); }
@media (hover: hover) and (pointer: fine) {
  .gebiet__orte a:hover,
  .seite .gebiet__orte a:hover { color: var(--gold); border-bottom-color: var(--gold); }
}