/* ==========================================================================
   Servus Gelting — Über Servus Gelting (/ueber-uns)

   1:1 nach dem Canvas-Rendering. Quellen:
   canvas/roesterei/seite-ueber-uns-fusion.jsx — Aufbau, Abschnitte N4
   canvas/roesterei/seite-ueber-uns.jsx        — NParts (Copy, Bereiche, Werte)

   Maßgeblich ist die Fusion-Fassung (N4), nicht N1/N2/N3 — die drei
   sind ältere Stände und werden vom Canvas nicht mehr gezeigt.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Bänder
   -------------------------------------------------------------------------- */

.band--karte {
  background: var(--flaeche-karte);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

.band--dunkel {
  background: var(--espresso);
  color: var(--cream);
}


/* --------------------------------------------------------------------------
   1. Hero — N4 · Hero, Abschnitt 740px

   Foto randlos über die ganze Breite, Text im Container.
   -------------------------------------------------------------------------- */

.uu-hero {
  position: relative;
  height: 740px;
  overflow: hidden;
  background: var(--espresso);
}

.uu-hero__bild {
  position: absolute;
  inset: 0;
}

/* Verlauf leicht gekippt (6deg), damit die untere linke Ecke am
   dunkelsten ist — dort steht die Headline. */
.uu-hero__schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    6deg,
    rgba(20, 14, 8, .9) 0%,
    rgba(20, 14, 8, .5) 44%,
    rgba(20, 14, 8, .14) 74%,
    rgba(20, 14, 8, .34) 100%
  );
}

.uu-hero__inhalt {
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--maxw-page));
  pointer-events: none;
}

.uu-hero__text {
  position: absolute;
  left: clamp(20px, 6.667vw, 96px);
  right: clamp(20px, 6.667vw, 96px);
  bottom: 88px;
  color: var(--cream);
}

.uu-hero__ort {
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(246, 238, 223, .82);
}

.uu-hero__titel {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 92px;
  line-height: .97;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--cream);
}

.uu-hero__vorspann {
  max-width: 700px;
  margin-top: 24px;
  font-size: 19px;
  line-height: 1.65;
  color: rgba(246, 238, 223, .9);
}

/* Hinweis nach unten, mittig am Fuß des Heros */
.uu-hero__weiter {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(246, 238, 223, .75);
}

.uu-hero__weiter span {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.uu-hero__weiter svg { transform: rotate(90deg); }


/* --------------------------------------------------------------------------
   2. Unser Zuhause — Zitat-Band mit dreispaltiger Geschichte
   -------------------------------------------------------------------------- */

.zuhause { padding-block: 88px 92px; }

.zuhause__zitat {
  max-width: 1000px;
  margin: 0 auto 64px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 42px;
  line-height: 1.3;
  text-align: center;
  color: var(--espresso);
}

.zuhause__raster {
  display: grid;
  grid-template-columns: 340px 1fr 1fr;
  gap: 64px;
  align-items: start;
  padding-top: 44px;
  border-top: 1px solid var(--linie);
}

.zuhause .eyebrow { display: block; margin-bottom: 14px; }
.zuhause .h2 { font-size: 38px; }

.zuhause__raster p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted-brown);
}


/* --------------------------------------------------------------------------
   3. Drei Bereiche — Triptychon
   -------------------------------------------------------------------------- */

.bereiche { padding-block: 92px 100px; }

.bereiche__kopf {
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 80px;
  align-items: end;
  margin-bottom: 52px;
}

.bereiche__kopf .eyebrow { display: block; margin-bottom: 16px; }
.bereiche__kopf .h2 { font-size: 58px; }

.bereiche__kopf p {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--muted-brown);
}

.bereiche__raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.bereich {
  display: flex;
  flex-direction: column;
}

.bereich__bild {
  aspect-ratio: 4 / 5;
  border-radius: 6px;
}

/* Kräftige Linie über Nummer und Schlagwort */
.bereich__zeile {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 2px solid var(--espresso);
}

.bereich__nummer {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--amber);
}

.bereich__tag {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted-brown);
}

.bereich__titel {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.02;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--espresso);
}

.bereich__text {
  flex: 1;
  margin: 14px 0 22px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted-brown);
}

.bereich__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--tan);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--espresso);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.bereich__link:hover { border-bottom-color: var(--espresso); }


/* --------------------------------------------------------------------------
   4. Die Familie
   -------------------------------------------------------------------------- */

.familie {
  padding-block: 96px 104px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.familie .eyebrow { display: block; margin-bottom: 16px; }
.familie .h2 { font-size: 60px; }

.familie__text {
  max-width: 560px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--muted-brown);
}

.familie__text--erster { margin-top: 24px; }
.familie__text--zweiter { margin-top: 18px; }

.familie__zitat {
  max-width: 520px;
  margin-top: 28px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1.45;
  color: #C2540F;
}

.familie__bild {
  aspect-ratio: 4 / 5;
  border-radius: 6px;
}


/* --------------------------------------------------------------------------
   5. Werte — auf Espresso
   -------------------------------------------------------------------------- */

.werte { padding-block: 96px 104px; }

.werte__kopf {
  display: grid;
  grid-template-columns: 1fr 560px;
  gap: 80px;
  align-items: end;
  margin-bottom: 56px;
}

.werte__kopf .eyebrow { display: block; margin-bottom: 16px; color: var(--tan); }
.werte__kopf .h2 { font-size: 62px; color: var(--cream); }

.werte__kopf p {
  font-size: 17.5px;
  line-height: 1.65;
  color: rgba(246, 238, 223, .78);
}

.werte__raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}

.wert {
  padding-top: 20px;
  border-top: 2px solid var(--tan);
}

.wert__nummer {
  margin-bottom: 14px;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--tan);
}

.wert__titel {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.02;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--cream);
}

.wert__text {
  margin-top: 14px;
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(246, 238, 223, .72);
}


/* --------------------------------------------------------------------------
   6. Schmalere Fenster

   ACHTUNG: Das Mobil-Artboard „05 · Über Servus Gelting — Mobile 390"
   (SeiteUeberUnsFusionMobile) ist hier NICHT umgesetzt. Was folgt,
   bricht nur die Desktop-Fassung sauber um.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .zuhause__raster { grid-template-columns: 1fr; gap: 32px; }
  .bereiche__kopf,
  .familie,
  .werte__kopf { grid-template-columns: 1fr; gap: 44px; }
  .bereiche__raster { grid-template-columns: repeat(2, 1fr); }
  .werte__raster { grid-template-columns: 1fr; gap: 40px; }
  .familie__text { max-width: none; }
}

@media (max-width: 900px) {
  .uu-hero { height: auto; min-height: 560px; }
  .uu-hero__text { bottom: 72px; }
  .uu-hero__titel { font-size: clamp(40px, 10vw, 92px); }
  .zuhause__zitat { font-size: clamp(24px, 5.5vw, 42px); }
  .bereiche__kopf .h2 { font-size: clamp(32px, 7vw, 58px); }
  .bereiche__raster { grid-template-columns: 1fr; }
  .familie .h2 { font-size: clamp(34px, 7.5vw, 60px); }
  .werte__kopf .h2 { font-size: clamp(34px, 7.5vw, 62px); }
}


/* --------------------------------------------------------------------------
   Mobil — Artboard „05 · Über Servus Gelting — Mobile 390"
   Gemessen gegen die eigenständige Artboard-Ausgabe des Kunden
   (_referenz/ueber-uns-mobile.html), geprüft mit _abgleich.html.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  /* Die Vorlage setzt durchgehend 24px Seitenrand; die geteilte
     Grundregel käme bei 390px auf 26px. */
  .zuhause, .bereiche, .familie, .werte { padding-inline: 24px; }

  /* --- Hero ---------------------------------------------------------
     Feste Fläche wie im Artboard: Bild über die volle Höhe, Text 64px
     über der Unterkante, darunter mittig der Weiterverweis. */
  .uu-hero { height: 620px; min-height: 0; }

  .uu-hero__text { left: 24px; right: 24px; bottom: 64px; }
  .uu-hero__ort { font-size: 10.5px; line-height: 1.9; letter-spacing: .22em; }

  .uu-hero__titel {
    margin-top: 12px;
    font-size: 46px;
    line-height: .98;
    letter-spacing: .01em;
  }

  .uu-hero__vorspann { margin-top: 14px; font-size: 15px; line-height: 1.6; }

  .uu-hero__weiter { bottom: 20px; gap: 6px; }
  .uu-hero__weiter span { font-size: 9.5px; line-height: 1.9; }
  .uu-hero__weiter svg { width: 18px; height: 18px; }

  /* --- Unser Zuhause -------------------------------------------------
     Aus drei Spalten wird ein Fluss; die Trennlinie darüber bleibt. */
  .zuhause { padding-block: 44px 46px; }
  .zuhause__zitat { margin-bottom: 36px; font-size: 25px; line-height: 1.32; }

  .zuhause__raster {
    display: block;
    gap: 0;
    padding-top: 26px;
  }

  .zuhause .eyebrow {
    display: block;
    margin-bottom: 12px;
    font-size: 10.5px;
    letter-spacing: .26em;
  }
  .zuhause .h2 { font-size: 30px; line-height: 1.04; letter-spacing: .01em; }
  .zuhause__raster p { margin-top: 16px; font-size: 15px; line-height: 1.6; }
  .zuhause__raster p + p { margin-top: 14px; }

  /* --- Drei Bereiche -------------------------------------------------- */
  .bereiche { padding-block: 44px 48px; }

  .bereiche__kopf { display: block; margin-bottom: 32px; }
  .bereiche__kopf .eyebrow {
    display: block;
    margin-bottom: 12px;
    font-size: 10.5px;
    letter-spacing: .26em;
  }
  .bereiche__kopf .h2 { font-size: 32px; line-height: 1.04; letter-spacing: .01em; }
  .bereiche__kopf p { margin-top: 16px; font-size: 15px; line-height: 1.6; }

  .bereiche__raster { display: flex; flex-direction: column; gap: 36px; }

  /* Block statt Flex: Der Verweis am Fuss ist ein inline-flex und steht
     in der Vorlage in einem Zeilenkasten, der 5px hoeher ist als er
     selbst. Als Flex-Kind faellt dieser Kasten weg — dreimal 5px, die
     dem Abschnitt fehlten. */
  .bereich { display: block; }
  .bereich__bild { aspect-ratio: 4 / 3; }

  .bereich__zeile { gap: 12px; margin-top: 18px; padding-top: 14px; }
  .bereich__nummer { font-size: 19px; line-height: 1.55; }
  .bereich__tag { font-size: 10.5px; line-height: 1.9; letter-spacing: .18em; }

  .bereich__titel {
    margin-top: 10px;
    font-size: 27px;
    line-height: 1.04;
    letter-spacing: .01em;
  }

  .bereich__text { margin: 12px 0 18px; font-size: 15px; line-height: 1.6; }

  .bereich__link {
    gap: 8px;
    font-size: 11.5px;
    line-height: 1.55;
    letter-spacing: .12em;
  }

  /* --- Die Familie -----------------------------------------------------
     Zwei Spalten werden zum Fluss. display: block, nicht flex — die
     Desktop-Fassung steht auf align-items: center, was im Spaltenfluss
     den leeren Bildplatzhalter auf null zusammenfallen liesse. */
  .familie { display: block; padding-block: 44px 48px; }

  .familie .eyebrow {
    margin-bottom: 12px;
    font-size: 10.5px;
    letter-spacing: .26em;
  }
  .familie .h2 { font-size: 32px; line-height: 1.04; letter-spacing: .01em; }

  .familie__text { font-size: 15px; line-height: 1.6; }
  .familie__text--erster { margin-top: 16px; }
  .familie__text--zweiter { margin-top: 14px; }

  .familie__zitat { margin: 20px 0 26px; font-size: 22px; line-height: 1.45; }

  /* --- Werte ------------------------------------------------------------ */
  .werte { padding-block: 46px 50px; }

  .werte__kopf { display: block; margin-bottom: 30px; }
  .werte__kopf .eyebrow {
    display: block;
    margin-bottom: 12px;
    font-size: 10.5px;
    letter-spacing: .26em;
  }
  .werte__kopf .h2 { font-size: 32px; line-height: 1.04; letter-spacing: .01em; }
  .werte__kopf p { margin-top: 16px; font-size: 15px; line-height: 1.6; }

  .werte__raster { display: flex; flex-direction: column; gap: 28px; }

  .wert { padding-top: 16px; }
  .wert__nummer { margin-bottom: 10px; font-size: 10.5px; line-height: 1.9; }
  .wert__titel { font-size: 24px; line-height: 1.04; letter-spacing: .01em; }
  .wert__text { margin-top: 12px; font-size: 15px; line-height: 1.6; }
}