/* ══════════════════════════════════════════════════════════════════
   REFERENZEN - Geruest, noch ohne Inhalt
   ══════════════════════════════════════════════════════════════════

   Franky, 25.08.: "testamonials das hinzufuegen", danach die
   Entscheidung "nur das gestalterische Geruest bauen, mit sichtbarem
   Platzhaltertext 'Referenz folgt nach Freigabe'".

   WARUM HIER KEIN INHALT STEHT
   Kamui hat einen Erstkunden, und der ist oeffentlich anonym bis zur
   schriftlichen Freigabe: "Abrechnungsdienstleister im PKV- und
   Beihilfeumfeld". Kein Name, kein Zitat, kein Logo.
   Die Sektion ist deshalb bewusst als Platzhalter LESBAR - sie tut
   nicht so, als gaebe es Stimmen. Wer sie fuellt, ersetzt die
   Platzhaltertexte in referenzen.js und loescht dort `platzhalter:true`.

   HERKUNFT
   Vorbild war eine React-Vorlage (framer-motion, react-icons).
   Dieses Projekt ist ein statischer Bricks-Export ohne package.json,
   ohne node_modules, ohne Build. Nachgebaut in Vanilla, wie die
   uebrige Bewegung der Seite auch (bewegung.js, kopfzeile.js).
   Aus der Vorlage uebernommen: drei gestapelte Bilder, das mittlere
   vorn, die aeusseren kleiner und leicht gedreht.
   NICHT uebernommen: das Blau #00A6FB der Vorlage. Hier gilt das
   Tuschefeld, Kontrast kommt aus Flaeche und Groesse. */

#kamui-referenzen {
  /* Nicht var(--black): das ist im Theme reines #000. Kamui-Tusche ist
     #161B19 und hat den Gruenstich, den die uebrigen Flaechen auch haben. */
  background-color: #161B19;
  /* V2: war 140px und damit die luftigste Sektion der Seite. Jetzt
     derselbe Rhythmus wie alle anderen, siehe v2-baulig.css. */
  padding: clamp(3.25rem, 6.25vw, 5.625rem) 0;
  overflow: hidden;
}

#kamui-referenzen .kamui-ref-innen {
  max-width: 1350px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: 80px;
  align-items: center;
}

/* ── Bildstapel ────────────────────────────────────────────────────
   perspective am Elternteil, nicht an den Bildern: sonst bekommt
   jedes Bild seinen eigenen Fluchtpunkt und die Drehung der beiden
   aeusseren sieht aus wie zwei verschiedene Raeume. */
#kamui-referenzen .kamui-ref-bilder {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  perspective: 1000px;
}

#kamui-referenzen .kamui-ref-bild {
  position: absolute;
  /* NICHT inset:0. Die beiden aeusseren Bilder werden um bis zu 96px zur
     Seite geschoben; bei voller Spaltenbreite haengen sie dann links aus
     der Sektion heraus und der Stapel wirkt verrutscht statt gestapelt.
     78% mittig gesetzt laesst genau den Platz, den die Verschiebung
     braucht. */
  top: 0;
  left: 11%;
  width: 78%;
  height: 100%;
  object-fit: cover;
  /* Keine runden Ecken. Die Seite arbeitet durchgehend mit rechten
     Winkeln; die 1.5rem der Vorlage waeren ein Fremdkoerper. */
  transition: transform 0.8s cubic-bezier(0.4, 0.8, 0.3, 1),
              opacity 0.8s cubic-bezier(0.4, 0.8, 0.3, 1);
  will-change: transform, opacity;
}

/* Solange kein echter Inhalt da ist, sind die Bilder gedaempft.
   Das ist Absicht und soll auffallen. */
#kamui-referenzen[data-platzhalter="ja"] .kamui-ref-bild {
  filter: grayscale(1) brightness(0.55);
}

/* ── Textspalte ───────────────────────────────────────────────────── */
#kamui-referenzen .kamui-ref-text {
  display: flex;
  flex-direction: column;
}

/* Kopf der Sektion: Augenbraue und Ueberschrift, gleiche Bauart wie in
   den uebrigen Abschnitten des Onepagers. */
#kamui-referenzen .kamui-ref-kopf {
  max-width: 1280px;
  margin: 0 auto 64px;
  padding: 0 40px;
}

#kamui-referenzen .kamui-ref-auge {
  font-family: "Cinzel", serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream, #EDE1CA);
  opacity: 0.5;
  margin: 0 0 16px;
}

#kamui-referenzen .kamui-ref-ueber {
  font-family: "Cinzel", serif;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--cream, #EDE1CA);
  margin: 0;
}

#kamui-referenzen .kamui-ref-marke {
  font-family: "Cinzel", serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream, #EDE1CA);
  opacity: 0.5;
  /* War 28px, jetzt 8px: darunter steht neu der Umfang, der als Paar
     mit dem Namen gelesen werden soll. */
  margin: 0 0 8px;
}

/* Der Umfang (Eine Assistenz / Fuenf Assistenzen / Nach Ihrem Zuschnitt).
   Traegt die Rangfolge ueber Groesse, nicht ueber eine dritte Farbe.

   Gemessen am 25.08.: mit 15px/0.75 lag der Umfang fast gleichauf mit
   der Quellzeile (15px/0.6). Zwei Zeilen im selben Rang, dazwischen die
   Aussage - das Auge fand keinen Einstieg. Der Umfang ist die Antwort
   auf "wie gross ist das", er gehoert eine Stufe HOEHER als die
   Aufzaehlung darunter. Jetzt 20px bei voller Deckung: klar ueber der
   Quelle (15px/0.6), klar unter dem Zitat (26px). */
#kamui-referenzen .kamui-ref-umfang {
  font-family: "Lato", sans-serif;
  font-size: 20px;
  letter-spacing: 0.01em;
  color: var(--cream, #EDE1CA);
  opacity: 1;
  margin: 0 0 24px;
}

#kamui-referenzen .kamui-ref-zitat {
  font-family: "Lato", sans-serif;
  font-size: 26px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--cream, #EDE1CA);
  margin: 0 0 32px;
  min-height: 4.8em;   /* haelt die Hoehe, wenn Texte verschieden lang sind */
  /* <blockquote> bringt im Theme einen linken Balken und Einzug mit.
     Beides gehoert nicht hierher: die Sektion ist links buendig. */
  border: 0;
  padding: 0;
}

#kamui-referenzen .kamui-ref-quelle {
  font-family: "Lato", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--cream, #EDE1CA);
  opacity: 0.6;
  margin: 0;
}

/* Der Anfragen-Knopf. Kein Preis auf der Seite: der Zuschnitt wird im
   Gespraech festgelegt, deshalb fuehrt jede Karte ins Kontaktfenster. */
#kamui-referenzen .kamui-ref-knopf {
  align-self: flex-start;
  display: inline-block;
  margin-top: 32px;
  padding: 14px 32px;
  font-family: "Lato", sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kamui-tusche, #161B19);
  background: var(--cream, #EDE1CA);
  border: 1px solid var(--cream, #EDE1CA);
  transition: background 0.3s ease, color 0.3s ease;
}

#kamui-referenzen .kamui-ref-knopf:hover {
  background: transparent;
  color: var(--cream, #EDE1CA);
}

/* Der Hinweis, dass hier noch nichts steht. Bewusst sichtbar. */
#kamui-referenzen .kamui-ref-hinweis {
  /* align-self ist noetig: der Elternteil ist flex-column, dort dehnt
     `stretch` das Kaestchen sonst ueber die ganze Spaltenbreite und es
     sieht aus wie ein leeres Eingabefeld statt wie eine Marke. */
  align-self: flex-start;
  display: inline-block;
  font-family: "Lato", sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream, #EDE1CA);
  opacity: 0.45;
  border: 1px solid currentColor;
  padding: 7px 14px;
  margin-bottom: 28px;
}

/* ── Blaettern ─────────────────────────────────────────────────────
   Quadrate statt der Kreise aus der Vorlage, aus demselben Grund
   wie oben bei den Ecken. */
#kamui-referenzen .kamui-ref-pfeile {
  display: flex;
  gap: 14px;
  margin-top: 44px;
}

#kamui-referenzen .kamui-ref-pfeil {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--cream, #EDE1CA);
  color: var(--cream, #EDE1CA);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#kamui-referenzen .kamui-ref-pfeil:hover {
  background-color: var(--cream, #EDE1CA);
  color: var(--black, #161B19);
}

#kamui-referenzen .kamui-ref-pfeil svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

/* ── Schmale Geraete ───────────────────────────────────────────────
   Einspaltig ab 991px, dieselbe Grenze wie beim Rest der Seite. */
@media (max-width: 991px) {
  #kamui-referenzen {
    padding: 90px 0;
  }
  #kamui-referenzen .kamui-ref-innen {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding: 0 28px;
  }
  #kamui-referenzen .kamui-ref-zitat {
    font-size: 21px;
    min-height: 0;
  }
  #kamui-referenzen .kamui-ref-pfeile {
    margin-top: 32px;
  }
}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  #kamui-referenzen .kamui-ref-bild {
    transition: none;
  }
}