/* ==========================================================================
   LIEPS COMPONENT – CLICK SWITCH
   Aus der bisherigen custom.css unverändert ausgelagert.
   ========================================================================== */

/* ==========================================================================
   CLICK SWITCH – TEXT FLIP + HORIZONTAL ACTION SWITCH
   ========================================================================== */

.click-switch {
	position: relative;
	perspective: 1000px;
}
.click-switch .frame {	
	cursor: pointer;
}

.click-switch [hidden] {
	display: none !important;
}

.click-switch h1,
.click-switch h2,
.click-switch h3,
.click-switch h4,
.click-switch p {
	backface-visibility: hidden;
	will-change: transform, opacity;
}

.click-switch__action-text {
	display: inline-block;
	transform-origin: center;
	will-change: transform;
}

/* ==========================================================================
   CLICK SWITCH – Initialzustand vor JavaScript
   Nur die erste Variante darf beim Laden sichtbar sein.
   ========================================================================== */

/* Variante 1: .click-switch > .frame */
.click-switch:not([data-matrix-switch-initialized="true"])
> .frame:not(:first-child),

/* Variante 2: .click-switch > .container > .frame */
.click-switch:not([data-matrix-switch-initialized="true"])
> .container > .frame:not(:first-child),
.click-switch:not([data-matrix-switch-initialized="true"])
> .container-fluid > .frame:not(:first-child),

/* Variante 3: .click-switch > .container > .section */
.click-switch:not([data-matrix-switch-initialized="true"])
> .container > .section:not(:first-child),
.click-switch:not([data-matrix-switch-initialized="true"])
> .container-fluid > .section:not(:first-child),

/* Variante 4a: .click-switch > .click-target > .section */
.click-switch:not([data-matrix-switch-initialized="true"])
> .click-target > .section:not(:first-child),

/* Variante 4b: mehrere .click-target direkt als Varianten */
.click-switch:not([data-matrix-switch-initialized="true"])
> .click-target:not(:first-child) {
	display: none !important;
}

/* Parallax-Frame im Header ist keine Click-Switch-Variante */
section.header
.click-switch:not([data-matrix-switch-initialized="true"])
> .frame.frame-type-parallax_gallery.frame-layout-1 {
	display: block !important;
}

.click-switch .authorBox {
	perspective: 1200px;
}

.click-switch .authorBoxImage {
	position: relative;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	will-change: transform, opacity;
}

/* ==========================================================================
   CLICK SWITCH – Sticky Heading Transform-Trennung
   ========================================================================== */

/*
 * Chromium darf einen Variantenwechsel nicht als Anlass verwenden,
 * den Scrollstand anhand eines Elements innerhalb des Switches zu korrigieren.
 */
.click-switch,
.click-switch > .click-target,
.click-switch > .container > .click-target,
.click-switch > .container-fluid > .click-target {
	overflow-anchor: none;
}

/*
 * Wichtig:
 * Das H1-H4 selbst besitzt weiterhin ausschließlich:
 * - position: sticky
 * - den horizontalen translateX aus sticky-heading.js
 *
 * Der Click-Switch flippt nur diesen inneren Text-Wrapper.
 * Dadurch können rotationX/y/clearProps die Sticky-Geometrie nicht mehr
 * vertikal verschieben.
 */
.click-switch__sticky-heading-motion {
	display: inline-block;
	transform-origin: 50% 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	will-change: transform, opacity;
}

/* ==========================================================================
   CLICK SWITCH – Margin-Containment für weiche Höhenanimation
   ========================================================================== */

/*
 * getBoundingClientRect() enthält niemals äußere Margins.
 *
 * Ohne eigenen Block Formatting Context können insbesondere margin-top und
 * margin-bottom des ersten/letzten sichtbaren Inhalts aus .click-switch
 * heraus kollabieren. Dann animiert JavaScript nur die Border-Box-Höhe,
 * während der kollabierte Abstand beim Variantenwechsel sofort umspringt.
 *
 * flow-root zieht diese Child-Margins in die natürliche Panel-Geometrie.
 * Damit messen currentPanelHeight / nextPanelHeight denselben Bereich, der
 * nach dem Tween bei height:auto bestehen bleibt.
 *
 * Absichtlich KEIN overflow:hidden/clip:
 * position:sticky behält dadurch seinen bisherigen Scroll-Kontext.
 */
.click-switch--height-contained {
	display: flow-root;
}