/* ==========================================================================
   envitron 2026 - decor.css
   Dekorative Background-Elemente, die ueber den Content-Rand hinausragen.
   Aktuell:
     - .section--leaves + .section-leaves: zwei Leaf-WebPs (Logo-Blatt) links
       und rechts ueber den Container-Rand, sehr transparent, gespiegelt.
   Alle Elemente sind aria-hidden, pointer-events:none, fuer Screenreader inert.
   ========================================================================== */

/* ----------------------------------------------------------------------------
 * Section-Leaves: Logo-Blatt als sehr dezenter Hintergrund einer Section.
 *
 * Verwendung im PHP-Template:
 *   <section class="section section--leaves">
 *     <?php \Envitron\Theme\render_leaves_decor(); ?>
 *     <div class="container"> ... </div>
 *   </section>
 *
 * Optionen ueber `render_leaves_decor($position)`:
 *   - 'both'  (default): beide Seiten
 *   - 'left'           : nur links
 *   - 'right'          : nur rechts
 * ----------------------------------------------------------------------------- */

.section--leaves {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Container und alle Direkt-Geschwister der Decor-Div MUESSEN ueber dem
 * Decor liegen. Sonst verdeckt ein opaker Section-Background (z. B. white)
 * das Leaf-Element. */
.section--leaves > .container,
.section--leaves > *:not(.section-leaves) {
	position: relative;
	z-index: 1;
}

.section-leaves {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.section-leaves__img {
	position: absolute;
	max-width: none;
	opacity: 0.11;
	filter: saturate(0.9);
	user-select: none;
	-webkit-user-drag: none;
	/* Fixe Groesse, kein "%": Prozent-Heights brauchen einen Container mit
	 * explizit definierter Hoehe — bei `position: absolute; inset: 0` ohne
	 * `min-height` ist das nicht gegeben, was zu Stretch-Effekten fuehrt. */
	width: 520px;
	height: auto;
}

.section-leaves__img--left {
	top: -60px;
	left: -120px;
	transform: rotate(-6deg);
}

.section-leaves__img--right {
	bottom: -60px;
	right: -120px;
	/* Spiegeln, damit das Blatt von der anderen Seite "reinguckt". */
	transform: scaleX(-1) rotate(-6deg);
}

/* Tablet: etwas kleiner, weiter draussen */
@media (max-width: 1024px) {
	.section-leaves__img {
		width: 380px;
	}
	.section-leaves__img--left  { left: -130px; top: -40px; }
	.section-leaves__img--right { right: -130px; bottom: -40px; }
}

/* Mobile: noch dezenter und nur eine Seite sichtbar (rechts), spart Raum.
 * Wir blenden links komplett aus, damit die Optik nicht ueberladen wirkt. */
@media (max-width: 720px) {
	.section-leaves__img {
		opacity: 0.08;
		width: 280px;
	}
	.section-leaves__img--left {
		display: none;
	}
	.section-leaves__img--right {
		right: -100px;
		bottom: -20px;
	}
}

/* Bei Dark/inverted Sections (z. B. .awards mit ink-900 Hintergrund) sind die
 * Blaetter im hellen Original schlecht sichtbar. Mit Token-Klasse "dark"
 * koennen wir invertieren und etwas heller einfaerben. */
.section--leaves.section--leaves--dark .section-leaves__img {
	opacity: 0.09;
	filter: brightness(2.2) saturate(0.4);
}