/* ===========================================================================
   ueberuns.css — Benker WP-Theme
   HANDGESCHRIEBEN. Wird NACH components.css geladen.

   Bildplatz im Abschnitt "Wofuer wir stehen" (.ufeat), ergaenzt 22.07.2026.

   Die Buehne ist eine 1440x809-Flaeche, auf der die vier Karten ueber feste
   Prozentwerte sitzen (siehe components.css). Oben in der linken Spalte war
   Platz frei. Das Bild nimmt genau diese Flaeche ein: dieselbe Breite und
   dieselbe linke Kante wie die Karten darunter, damit die Spalte eine Linie
   behaelt.

   Rechnung: Karte 0 beginnt bei 35,723 % Hoehe. Das Bild endet bei 32 %,
   dazwischen bleiben rund 30px Luft.

   Seitenverhaeltnis 3:2 — dasselbe wie bei den Produktbildern im Slider, damit
   die Website ein Bildformat weniger hat.

   object-fit: cover ist hier RICHTIG (anders als bei Produktbildern): Es ist
   ein Stimmungsbild, kein Produkt. Ein angeschnittener Hallenhintergrund
   stoert nicht, ein angeschnittenes Tray schon.
   =========================================================================== */

/* 20.08.2026: Die Buehne ist jetzt ein Raster (components.css), keine Flaeche
   mit absoluten Prozentwerten mehr. Das Bild steht deshalb als Rasterzelle in
   Spalte 1 und laeuft ueber die ersten beiden Kartenzeilen. Es behaelt damit
   dieselbe Breite wie eine Karte, wird aber hoeher als 3:2 — deshalb hier
   aspect-ratio aus und Hoehe aus der Zelle. */
.ufeat__bild {
  margin: 0 0 var(--space-5);
}

.ufeat__bild-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-image);
}

/* 20.08.2026: Das Bild steht jetzt im normalen Fluss oben im linken
   Kartenstapel (.ufeat__spalte--a) — es braucht keine Sonderpositionierung
   mehr. Das 3:2-Format aus der Grundregel oben gilt damit auch auf dem
   Desktop, wie bei den Produktbildern im Slider. */

/* ---------------------------------------------------------------------------
   Firmengeschichte (.utl): Jahreszahl als Ersatz fuer ein fehlendes Foto

   Von dreizehn Jahren hat bisher nur 1885 ein historisches Bild. Ohne Ersatz
   spraenge das Layout beim Durchklicken zwischen zweispaltig und einspaltig hin
   und her. Die Zahl belegt deshalb exakt dieselbe Flaeche wie ein Bild:
   dasselbe Seitenverhaeltnis (350:188, siehe components.css), derselbe Radius,
   dieselbe Spaltenbreite. Kommt ein Foto dazu, ersetzt es sie ohne weiteres
   Zutun.
   --------------------------------------------------------------------------- */

.utl__panel-jahr {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 350 / 188;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-subtle);
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: clamp(40px, 8vw, 72px);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary-800);
  white-space: nowrap;
}

@media (min-width: 900px) {
  /* Gleiche feste Spaltenbreite wie .utl__panel-image (components.css). */
  .utl__panel-jahr {
    flex: 0 0 497px;
  }
}

/* ---------------------------------------------------------------------------
   Bildband zwischen Intro und "Wofuer wir stehen" (.ubild)

   Ein breites Bild als Atempause zwischen zwei Textabschnitten. Bewusst FLACHER
   als das Originalfoto: Ein Band wirkt ruhiger als ein grosses Einzelbild und
   schiebt die folgende Sektion nicht zu weit nach unten.

   Auf dem Handy weniger flach (4:3), sonst blieben von den Personen nur
   Streifen uebrig. object-position: center haelt die Bildmitte, wo bei
   Aufnahmen aus der Fertigung ueblicherweise die Menschen stehen.

   object-fit: cover ist hier richtig — Stimmungsbild, kein Produkt.
   --------------------------------------------------------------------------- */
.ubild {
  padding-block: var(--space-7);
}

.ubild__figure {
  margin: 0;
}

.ubild__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-image);
}

@media (min-width: 900px) {
  .ubild__img {
    aspect-ratio: 21 / 9;
  }
}