/* ─── Full-Bleed Sections (Hintergrundbild) ─────────────────────────────────
   Klassen-Kombination: overlay-* + vh-* + text-light/dark
   Hintergrundbild wird per setBgImage-Button (🖼) im Editor gesetzt.
─────────────────────────────────────────────────────────────────────────── */

/* Basis: Hintergrundbild-Layer immer als Cover */
[data-key="layer"][style*="background-image"],
[style*="background-image"] {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* ─── Hero-Hoehen-Modell (Single-Source-of-Truth via 1 Picker im Editor) ───
 *
 * Hero-Hoehe kommt ENTWEDER aus einer Mindesthoehe (vh-N: Viewport-driven)
 * ODER einer Aspect-Ratio (aspect-N: Format-driven). Nie beide gleichzeitig.
 *
 * Im Editor: ein "Hero-Hoehe"-Dropdown auf der .hero-root-Row schaltet
 * zwischen den zwei Modi. setHeroHeightDOM mutex'd vh-N- bzw. aspect-N-Klassen.
 *
 * Im Live-Layout: Flex-Row mit aspect-ratio rechnet Hoehe aus Container-
 * Breite × Aspekt; align-items:stretch dehnt die col-N-Kinder mit. Bilder
 * darin nutzen object-fit:cover wie bisher.
 */
.vh-50  { min-height: 50vh; }
.vh-60  { min-height: 60vh; }
.vh-70  { min-height: 70vh; }
.vh-80  { min-height: 80vh; }
.vh-full { min-height: 100vh; }

/* vh-N Sections tragen das Flex-Layout statt einem Color-Filter:
 * Wer eine vh-Hoehe setzt, will Content vertikal zentrieren — unabhaengig
 * davon ob ein glass-scrim aktiv ist oder nicht. Damit ist das Entfernen
 * eines Farbfilters keine Layout-Aenderung mehr.
 *
 * !important ist noetig weil render-struct.css `.mypage section[type='layer']
 * { display: inline-block }` mit Spezifitaet (0,2,1) den display ueberstuert.
 *
 * align-items/justify-content OHNE !important — damit kann ein glass-scrim
 * oder eine align-XX-Klasse (9-Punkt-Matrix mit !important) die Ausrichtung
 * gezielt ueberschreiben. */
.mypage .vh-50,
.mypage .vh-60,
.mypage .vh-70,
.mypage .vh-80,
.mypage .vh-full {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center;
  align-items: center;
}

/* aspect-ratio Container-Klassen sind in em-base.css definiert
 * (.mypage .aspect-N — gleiche Spezifitaet 0,2,0 fuer alle Varianten).
 * Hier nur min-height:auto-Reset als Defensive falls vh-* gleichzeitig
 * gesetzt waere (Picker-Handler ist eigentlich mutex; falls jemand das
 * JSON von Hand editiert, wuerde sonst vh-min-height die Aspect-Hoehe
 * ueberschreiben). */
.mypage .aspect-21-9,
.mypage .aspect-16-9,
.mypage .aspect-4-3,
.mypage .aspect-1-1 { min-height: auto; }

/* Mobile-Reset: aspect-driven image-cols werden auf Phones zu hoch
 * (4:3 auf 400px-Container = 300px ist grenzwertig). Im Stack-Modus
 * (col-6 → col-12 vertical) brauchen wir das aspect-Locking sowieso
 * nicht — Browser-aspect-ratio auto = Hoehe wieder Inhalt-driven.
 *
 * .mypage-Prefix damit die Spezifitaet die em-base-Defaults schlaegt. */
@media (max-width: 640px) {
  .mypage .aspect-21-9,
  .mypage .aspect-16-9,
  .mypage .aspect-4-3,
  .mypage .aspect-1-1 {
    aspect-ratio: auto;
  }
}

/* Section-Scrim-Klassen: full-bleed Tönungsschicht über einem Hintergrund-
   bild via ::before. Komplement zur .glass-*-Familie in em-base.css —
   selbe Opacity-Werte, gleicher Designer-Intent, aber als Section-Scrim
   statt als in-flow Box. Naming-Konvention: glass-*-scrim. */

/* Glass-Scrim-Klassen sind REIN VISUELL — sie liefern Hintergrund-Toenung
 * (background-color, ::before-Pseudo, Fade-Gradient). Layout (display:flex,
 * Centering) gehoert auf die vh-N-Klassen oder die 9-Punkt-Matrix
 * (align-XX), nicht auf einen Farbfilter. Damit kann der User den
 * Farbfilter umschalten ohne dass die Ausrichtung springt. */
.glass-dark-scrim,
.glass-light-scrim,
.glass-dark-fade-scrim,
.glass-light-fade-scrim,
.glass-dark-fade-side-scrim {
	position: relative;
}
/* Scrim-spezifische Alignment-Defaults (mit .mypage-Prefix damit Spezifitaet
 * 0,2,0 = gleich wie vh-N → Source-Order entscheidet, scrim ist spaeter
 * im File und gewinnt). Wer das nicht will, klickt 9-Punkt-Matrix
 * (align-XX !important → schlaegt alles). */
.mypage .glass-dark-scrim,
.mypage .glass-light-scrim {
	align-items: center;
	justify-content: center;
}
.mypage .glass-dark-fade-side-scrim {
	align-items: flex-start;
	justify-content: center;
}
.mypage .glass-dark-fade-scrim,
.mypage .glass-light-fade-scrim {
	align-items: center;
	justify-content: flex-end;
	padding-bottom: 2rem;
}

.glass-dark-scrim::before        { background: rgba(0,0,0,0.70); }
.glass-light-scrim::before       { background: rgba(255,255,255,0.85); }
.glass-dark-fade-scrim::before   { background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.30) 60%, transparent 100%); }
.glass-light-fade-scrim::before  { background: linear-gradient(to top, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.40) 60%, transparent 100%); }
.glass-dark-fade-side-scrim::before { background: linear-gradient(to right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.28) 55%, transparent 100%); }

.glass-dark-scrim::before,
.glass-light-scrim::before,
.glass-dark-fade-scrim::before,
.glass-light-fade-scrim::before,
.glass-dark-fade-side-scrim::before {
	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 0;
	pointer-events: none;
}
.glass-dark-scrim > *,
.glass-light-scrim > *,
.glass-dark-fade-scrim > *,
.glass-light-fade-scrim > *,
.glass-dark-fade-side-scrim > * {
	position: relative;
	z-index: 1;
}

/* Frosted-Modifier — orthogonal: kombinierbar mit jeder *-scrim-Klasse
   für backdrop-blur unterhalb des Scrims. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.glass-dark-scrim.glass-frosted::before,
	.glass-light-scrim.glass-frosted::before,
	.glass-dark-fade-scrim.glass-frosted::before,
	.glass-light-fade-scrim.glass-frosted::before,
	.glass-dark-fade-side-scrim.glass-frosted::before {
		-webkit-backdrop-filter: blur(10px);
		        backdrop-filter: blur(10px);
	}
}

/* Text-Farben auf Bildunterlagen — explizit ein-/ausgeschaltete
   Utility-Klassen, die alle Text-Elemente in einem Rutsch flippen.
   Tokenisiert (kein #fff/#1a1a2e mehr) damit ProjectSettings-Theming
   greift. Eyebrow ist hier mit drin: wer .text-light/.text-dark
   explizit setzt, will dass auch der Eyebrow mitgeht. */
.text-light h1,.text-light h2,.text-light h3,.text-light h4,.text-light h5,.text-light h6,
.text-light p,.text-light .eyebrow,.text-light .subline,
.text-light a:not(.btn),.text-light li { color: var(--text-light); }

.text-dark h1,.text-dark h2,.text-dark h3,.text-dark h4,.text-dark h5,.text-dark h6,
.text-dark p,.text-dark .eyebrow,.text-dark .subline,.text-dark li { color: var(--text-dark); }