/**
 * paragraph__bk__bg_graphic.css
 *
 * Deko-Ebenen (bk__bg_graphic) und Flaeche an einem Wrapper: eine oder mehrere
 * freigestellte Grafiken hinter dem Inhalt, jede ueber ihre MITTE auf einen
 * Punkt der Flaeche gesetzt.
 *
 * Werte kommen als Custom Properties vom Element (kein Inline-<style>):
 *   --bk-deco-bg   Flaechenfarbe, Hex MIT '#' (Twig setzt es)
 *   --bk-deco-x    X der Mustermitte in % der Flaeche
 *   --bk-deco-y    Y der Mustermitte in %
 *   --bk-deco-w    Breite der Ebene als ZAHL OHNE EINHEIT (Twig gibt sie
 *                  einheitenlos aus). Die Einheit setzt die Regel unten:
 *                  Standard = % der Flaeche, mit .bk-deco__layer--px = Pixel
 *                  (dort zusaetzlich auf die Flaechenbreite gedeckelt).
 *   --bk-deco-o    Deckkraft 0-1
 *
 * Warum ueber die Mitte und nicht ueber background-position:
 * Die gestalterische Regel lautet "die Mustermitte sitzt in der Ecke, das
 * Motiv wird also angeschnitten". Mit background-position in Prozent laesst
 * sich das nicht ausdruecken - dort richtet ein Prozentwert die gleichnamige
 * Marke des Bildes an der des Containers aus, der Weg haengt also von der
 * Groessendifferenz ab. Ein Element, das per translate(-50%,-50%) auf einem
 * Punkt sitzt, trifft die Regel woertlich; Werte ausserhalb 0-100 % legen die
 * Mitte bewusst vor den Rand.
 *
 * Warum <img> und nicht background-image:
 * Das Seitenverhaeltnis kommt so aus der Datei selbst (bei SVG aus der
 * viewBox). Eine hochgeladene Grafik mit anderem Format wird dadurch nicht
 * verzerrt und braucht keine gepflegte aspect-ratio.
 */

/* Traegt der Wrapper Ebenen oder eine Flaeche, bekommt er den Bezugsrahmen. */
.bk-deco {
  position: relative;
  overflow: hidden;
  /* Ist keine Farbe gesetzt, ist die Variable leer - dann greift der
     Ausgangswert und die Flaeche bleibt durchsichtig. */
  background-color: var(--bk-deco-bg);
}

.bk-deco__layer {
  position: absolute;
  left: var(--bk-deco-x, 50%);
  top: var(--bk-deco-y, 50%);
  /* Standard: Breite in % der FLAECHE - das Bestandsverhalten. Die Ebene
     waechst und schrumpft mit dem Wrapper, auch auf dem Handy. */
  width: calc(var(--bk-deco-w, 40) * 1%);
  transform: translate(-50%, -50%);
  opacity: var(--bk-deco-o, 1);
  /* Rein dekorativ: keine Interaktion, keine Auswahl. */
  pointer-events: none;
  user-select: none;
}

/*
 * Feste Pixelbreite statt Prozent (Feld "Einheit" am bk__bg_graphic).
 *
 * Wofuer: In einem Band, das nur breiter wird und gleich hoch bleibt, ist die
 * Flaechenbreite die falsche Bezugsgroesse - die Grafik wuchs dort mit dem
 * Fenster mit, waehrend Bandhoehe und Text gleich blieben. Am 12.08.2026 im
 * Browser gemessen: 300 px bei 2507 px Fensterbreite, 176 px bei 1470 px.
 *
 * ⚠️ Eine Pixelebene schrumpft auf dem Handy NICHT mit. Das ist Absicht, aber
 * es will bedacht sein: 46 % sind bei 390 px Fensterbreite 179 px, 46 px
 * bleiben 46 px.
 *
 * max-width haelt den groebsten Fall auf: Die Ebene wird nie breiter als die
 * Flaeche, in der sie liegt. Am 12.08.2026 gemessen - eine 900-px-Ebene bleibt
 * bei 2507 px Fensterbreite 900 px breit und wird bei 390 px auf 390 px
 * gedeckelt, das Seitenverhaeltnis bleibt dabei erhalten (0.8444).
 *
 * ⚠️ Was max-width NICHT leistet: Eine 300-px-Ebene bleibt auch in einem
 * 390 px schmalen Fenster 300 px breit - sie passt ja hinein. Der Deckel ist
 * eine Sicherung gegen den groben Patzer, kein Ersatz fuer eine bewusste
 * mobile Groesse. Die gehoert in die seitenspezifische CSS:
 *   .paragraph--id--1234 .bk-deco__layer--px { width: min(300px, 40vw); }
 */
.bk-deco__layer--px {
  width: calc(var(--bk-deco-w, 40) * 1px);
  max-width: 100%;
}

/*
 * Die Grafik fuellt die vorgegebene Breite, die Hoehe kommt aus ihrem eigenen
 * Seitenverhaeltnis. Bei einer SVG liefert das die viewBox - eine Datei OHNE
 * width/height-Attribut funktioniert hier also genauso, weil die Breite von
 * aussen kommt und nur noch das Verhaeltnis offen ist. (Gemessen: viewBox
 * 1029.5 x 869.3 -> 300 x 253.3 px, Verhaeltnis 0.8443 = 869.3/1029.5.)
 */
.bk-deco__layer img {
  display: block;
  width: 100%;
  height: auto;
}

/* Der Inhalt liegt ueber den Ebenen. */
.bk-deco__content {
  position: relative;
  z-index: 1;
}

/*
 * Ohne Felder wird keine dieser Klassen ausgegeben und die Library gar nicht
 * erst angehaengt - der Wrapper bleibt das nackte <div> von vorher. Diese
 * Datei kann also auf jeder Seite mitliegen, ohne dort etwas zu veraendern.
 */