/* ==========================================================================
   Leistungsbereiche im Grossformat
   --------------------------------------------------------------------------
   Loest das Kartenraster ab. Aufbau je Bereich, von oben nach unten:
     Kopfzeile mit Nummer  ->  Riesentitel mit Materialtextur in den
     Buchstaben  ->  breites Bild  ->  Text  ->  Stichworte.

   Die Titel sollen die volle Inhaltsbreite einnehmen. Weil die Woerter
   zwischen neun und fuenfzehn Zeichen lang sind, geht das nicht mit einer
   festen Groesse - main.js rechnet sie je Wort aus. Die Angabe hier ist nur
   der Ausgangswert, falls das Skript nicht laeuft.

   Geladen nur auf der Startseite (siehe functions.php).
   ========================================================================== */

.bereiche {
  display: block;
}

/* --------------------------------------------------------------- Bereich */

.bereich {
  padding-block: clamp(40px, 6vw, 86px);
  border-top: 1px solid var(--line);
}
.bereich:first-child { border-top: 0; padding-top: clamp(24px, 3vw, 40px); }

.bereich__kopf {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: clamp(14px, 2vw, 22px);
}
.bereich__nr,
.bereich__art {
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.4;
}
.bereich__nr  { color: #9AA3AE; }
.bereich__art { color: var(--steel); }

/* ----- Der Riesentitel -----
   Die Buchstaben werden mit dem Material gefuellt, um das es im Block geht:
   Stoff beim Textildruck, Papier beim Druck, Folie bei den Bannern. Faellt
   background-clip aus, bleibt die Schrift dunkel stehen - deshalb steht die
   Farbe zuerst und wird erst danach durchsichtig geschaltet. */
.bereich__titel {
  /* Als Block waere die Box immer so breit wie der Abschnitt - gemessen
     wuerde dann nicht der Text, sondern der Container, und die
     Groessenrechnung im Skript liefe ins Leere. */
  display: inline-block;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 11vw, 9.4rem);
  line-height: .92;
  letter-spacing: -.045em;
  white-space: nowrap;
  color: var(--ink);

  /* Die Fuellung reicht nur so weit wie die Inhaltsbox. Bei dieser
     Zeilenhoehe ragt die Unterlaenge des g darunter hinaus und bliebe
     ungefaerbt - also abgeschnitten. Das Polster verlaengert die Box nach
     unten, der negative Aussenabstand nimmt den Platz optisch wieder weg. */
  padding-bottom: .16em;
  margin-bottom: -.13em;
}
.bereich__titel a { color: inherit; text-decoration: none; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .bereich__titel {
    background-image: var(--textur);
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* Die Textur steht still, die Schrift laeuft darueber hinweg.
     "fixed" heftet den Hintergrund ans Fenster statt an das Element - beim
     Scrollen bewegt sich nur der Titel, das Material bleibt liegen. Die
     Buchstaben wirken dadurch wie ein Fenster auf eine feste Flaeche.

     Zwei Folgen, die man kennen muss:
     - Bezugsflaeche ist jetzt das Fenster, nicht der Titel. Die Texturen
       sind deshalb auf Fenstermass (1680 x 1050) angelegt und tonal
       ausgeglichen; haette eine Textur grossflaechige Hell-Dunkel-
       Verlaeufe, stuende der Titel beim Scrollen mal fast schwarz, mal
       fast weiss da.
     - Unter 861 px bleibt es beim alten Verhalten. Dort ist der Titel nur
       rund 40 px hoch; eine fensterfuellende Textur zeigte darin einen so
       kleinen Ausschnitt, dass nur noch eine graue Flaeche uebrig bliebe.
       iOS-Safari setzt "fixed" ohnehin still auf "scroll" zurueck. */
  @media (min-width: 861px) {
    .bereich__titel {
      background-attachment: fixed;

      /* Die Textur wandert beim Scrollen langsam mit (main.js setzt
         --versatz am Abschnitt). Damit sie dabei nicht ueber ihren eigenen
         Rand hinauslaeuft und Buchstaben leer blieben, wird das Bild
         bewusst groesser angelegt als das Fenster: 200 px Ueberhang oben
         und unten, ebenso an den Seiten.

         Die Rechnung: Die Texturen sind 1680 x 1050, also 16:10. Die
         Breite ist der groessere der beiden Werte, damit in jedem
         Fensterformat beide Richtungen gedeckt sind - bei flachen Fenstern
         zaehlt die Breite, bei hohen die Hoehe (160vh = 100vh mal 1,6).
         Aus der Breite folgt die Hoehe von selbst (auto). */
      background-size: max(calc(100vw + 400px), calc(160vh + 640px)) auto;
      background-repeat: no-repeat;
      background-position: center calc(50% + var(--versatz, 0px));
    }
  }

  /* Wer keine Bewegung moechte, bekommt die Textur fest am Titel - dann
     wandert beim Scrollen nichts gegeneinander. */
  @media (prefers-reduced-motion: reduce) {
    .bereich__titel { background-attachment: scroll; }
  }
}

/* ----- Das breite Bild ----- */
.bereich__bild {
  position: relative;
  margin: clamp(18px, 2.6vw, 34px) 0 0;
  overflow: hidden;
  background: var(--paper-100, #EFF2F5);
}
.bereich__bild img {
  width: 100%;
  aspect-ratio: 17 / 5;
  object-fit: cover;
}
.bereich__quelle {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 1px 3px rgba(11, 13, 16, .5);
}

/* ----- Text und Stichworte -----
   Zwei Spalten: links die Einordnung, rechts der Text. Auf schmalen
   Schirmen untereinander. */
.bereich__fuss {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: clamp(18px, 3vw, 56px);
  margin-top: clamp(24px, 3.4vw, 44px);
}
.bereich__seite {
  margin: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.5;
  color: #9AA3AE;
}
.bereich__text {
  margin: 0;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.62;
  color: #39414C;
  max-width: 62ch;
}
.bereich__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(20px, 2.6vw, 30px) 0 0;
  padding: 0;
  list-style: none;
}
.bereich__liste li {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--line);
  padding: 8px 13px;
}
.bereich__wege {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: clamp(22px, 2.8vw, 32px);
}
.bereich__weg {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  transition: color var(--dauer-ui, 180ms) var(--ease-out),
              border-color var(--dauer-ui, 180ms) var(--ease-out);
}
.bereich__weg svg { transition: transform var(--dauer-ui, 180ms) var(--ease-out); }
.bereich__weg--leise {
  font-weight: 500;
  color: var(--text-muted);
  border-bottom-color: var(--line);
}
@media (hover: hover) and (pointer: fine) {
  .bereich__weg:hover { color: var(--cyan-deep); border-bottom-color: var(--cyan-deep); }
  .bereich__weg:hover svg { transform: translateX(4px); }
}
.bereich__weg:focus-visible { outline: 2px solid var(--cyan-deep); outline-offset: 4px; }

@media (max-width: 860px) {
  .bereich__fuss { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .bereich__bild img { aspect-ratio: 2 / 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bereich__weg, .bereich__weg svg { transition: none; }
}