/* ══════════════════════════════════════════════════════════════════════
   BILDFLAECHEN
   Das Theme setzt auf der Haltung-Seite object-fit:contain, weil die
   Klasse .art-about-team__image urspruenglich fuer Team-Portraits
   gedacht war. Bei unseren Bildern laesst contain Raender frei, durch
   die der creme Untergrund scheint: gemessen y4728-5288, helle Balken
   links und rechts neben dem Tresorschloss.

   Deshalb: Flaechenbilder fuellen ihren Rahmen (cover).

   WICHTIG: Logos und Symbole bleiben ausdruecklich auf contain.
   Das Kamui-Signet darf nie beschnitten werden. Betroffen waeren
   .fr-header-alpha__logo, .art-footer__legal__logo, .artison-cta__icon
   und alles unter .brxe-image mit einer svg-Quelle.
   ════════════════════════════════════════════════════════════════════ */

/* ACHTUNG Ladereihenfolge: das Theme wiederholt diese Regel in einem
   <style>-Block, der NACH unseren Links steht (gemessen: Zeichen 396329,
   unser Link bei 380176). Spaeter geladen gewinnt bei gleicher
   Spezifitaet, deshalb reicht die Reihenfolge hier nicht aus und die
   Regeln brauchen !important. Gleiche Falle wie bei maus.css. */

.art-about-team__image.brxe-image:not(.tag),
.art-about-team__image.brxe-image img,
.art-about-team__image-main.brxe-image:not(.tag),
.art-about-team__image-main.brxe-image img {
  object-fit: cover !important;
  object-position: center !important;
  width: 100%;
  height: 100%;
}

/* Der Rahmen selbst darf kein helles Loch zeigen, falls ein Bild
   spaeter fehlt oder noch laedt. */
.art-about-team__image,
.art-about-team__image-main {
  background-color: #161b19;
  overflow: hidden;
}

/* ── Hero-Text lesbar halten ───────────────────────────────────────
   Auf der Haltung-Seite steht "warum es uns gibt" (.fr-hero-india__lede)
   genau ueber der hellen Lichttuer der Saeulenhalle. Creme auf Creme:
   das Wort "es" verschwand im Bild.

   Wir aendern nicht das Bild und nicht die Textfarbe, sondern legen
   einen weichen dunklen Verlauf unter den Textblock. Der Aufstieg im
   Bild bleibt sichtbar, die Schrift bekommt ihren Grund.
   Nur Tusche, keine dritte Farbe. */
.fr-hero-india__inner,
.fr-hero-india__lede {
  position: relative;
  z-index: 2;
}

.fr-hero-india__inner::before {
  content: "";
  position: absolute;
  inset: -8% -50vw;   /* volle Fensterbreite: ein Verlauf ohne
                         seitliche Kante kann nicht als Fleck gelesen
                         werden. Die Ellipse davor konnte es. */
  z-index: -1;
  pointer-events: none;

  /* FRUEHER eine Ellipse (0.72 Mitte, Auslauf 78%). Franky hat den
     sichtbaren Rand am 26.08. zweimal als "Verdunklung" gemeldet.
     Linear und randlos deckt das Textband ebenso ab, ohne Fleck. */
  background: linear-gradient(
    to bottom,
    rgba(22, 27, 25, 0) 0%,
    rgba(22, 27, 25, 0.28) 30%,
    rgba(22, 27, 25, 0.42) 50%,
    rgba(22, 27, 25, 0.28) 70%,
    rgba(22, 27, 25, 0) 100%
  );
}

/* Hinweis fuer spaeter: ein text-shadow an dieser Stelle wird vom
   Theme ueberschrieben (gemessen: rgba(0,0,0,0), also wirkungslos).
   Die Lesbarkeit kommt allein aus dem Verlauf oben. Gemessener
   Kontrast der Zeile "WARUM ES UNS GIBT": 12.08 zu 1. */

/* ── Karussell: gleiche Hoehe fuer alle Folien ─────────────────────
   Gemessen auf der Haltung-Seite: acht Bilder liegen alle auf y=1570,
   also ein Karussell. Ihre Hoehen schwankten aber zwischen 759 und
   1687 Pixeln, je nach Seitenverhaeltnis der Datei. Dadurch springt
   das Layout bei jedem Folienwechsel und der Text darunter rutscht.

   Loesung: fester Rahmen im Verhaeltnis 16:9, das Bild fuellt ihn
   (cover ist oben schon gesetzt). Damit ist die Hoehe konstant,
   egal ob quer, quadratisch oder hoch. */
.art-about-team__image,
.art-about-team__image-main {
  aspect-ratio: 16 / 9;
  height: auto !important;
  max-height: none;
}

.art-about-team__image img,
.art-about-team__image-main img {
  height: 100% !important;
  max-height: none !important;
}

/* Auffangregel: jedes Flaechenbild fuellt seinen Rahmen, egal welche
   Theme-Klasse daran haengt. Fing auf der Haltung-Seite ein Bild ab,
   das auf object-fit:fill stand und dadurch verzerrt war. */
img[src*="/flaechen/"],
img[data-src*="/flaechen/"] {
  object-fit: cover !important;
  object-position: center !important;
}

/* ── Ausnahme: Marke bleibt unbeschnitten ──────────────────────────── */
.fr-header-alpha__logo.brxe-image:not(.tag),
.fr-header-alpha__logo.brxe-image img,
.art-footer__legal__logo.brxe-image:not(.tag),
.art-footer__legal__logo.brxe-image img,
.artison-cta__icon.brxe-image:not(.tag),
.artison-cta__icon.brxe-image img {
  object-fit: contain !important;
  background-color: transparent;
}