/* Cormens Brush Headline – v1.2.2 */
.cbh-headline {
	position: relative;
	display: inline-block;
	line-height: 1.1;
	isolation: isolate;
	overflow: visible; /* default: allow overflow */
	z-index: 0;
}

.cbh-headline .cbh-text {
	position: relative;
	z-index: 2; /* Text vor Brush */
	display: inline;
}

/* Variablen */
.cbh-headline {
	--cbh-height: var(--cbh-height, 1.0em);
	--cbh-bottom: var(--cbh-bottom, 0.08em);
	--cbh-left:   var(--cbh-left,   0em);
	--cbh-overscan: var(--cbh-overscan, 0%);
	--cbh-align-x: var(--cbh-align-x, center);
	--cbh-object-fit: var(--cbh-object-fit, fill);
	--cbh-bg-size: var(--cbh-bg-size, 100% 100%);
}

/* Objekt-Modus: Brush füllt Heading-Box (mit Overscan links/rechts) */
.cbh-headline .cbh-brush {
	position: absolute;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transform: translate(var(--cbh-cx,0), var(--cbh-cy,0)) scaleX(0.05);
	transform-origin: left center;
	left: var(--cbh-left);
	top: var(--cbh-top, auto);
	bottom: var(--cbh-bottom);
	width: var(--cbh-width, auto);
	height: var(--cbh-height);
}

.cbh-headline.cbh-full .cbh-brush {
	top: 0; bottom: 0;
	left: calc(var(--cbh-left, 0em) - (var(--cbh-overscan, 0%) / 2));
	right: calc(0px - (var(--cbh-overscan, 0%) / 2));
	width: auto; height: auto;
	object-fit: var(--cbh-object-fit);
	object-position: var(--cbh-align-x) calc(100% - var(--cbh-bottom));
}

/* CSS-Background-Modus: ::after füllt Heading-Box */
.cbh-headline.use-css-bg::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transform: translate(var(--cbh-cx,0), var(--cbh-cy,0)) scaleX(0.05);
	transform-origin: left center;
	left: var(--cbh-left);
	top: var(--cbh-top, auto);
	bottom: var(--cbh-bottom);
	width: var(--cbh-width, auto);
	height: var(--cbh-height);
	background-image: var(--cbh-brush-url);
	background-repeat: no-repeat;
	background-size: var(--cbh-bg-size);
	background-position: var(--cbh-align-x) calc(100% - var(--cbh-bottom));
}

.cbh-headline.use-css-bg.cbh-full::after {
	top: 0; bottom: 0;
	left: calc(var(--cbh-left, 0em) - (var(--cbh-overscan, 0%) / 2));
	right: calc(0px - (var(--cbh-overscan, 0%) / 2));
	height: auto; width: auto;
}

/* Sichtbar-Animation (Wipe) */
.cbh-headline .cbh-brush.is-visible,
.cbh-headline.use-css-bg.is-visible::after {
	animation: cbh-brush-wipe .8s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes cbh-brush-wipe {
	0%   { opacity: 0; transform: translate(var(--cbh-cx,0), var(--cbh-cy,0)) scaleX(0.05); }
	40%  { opacity: 1; }
	100% { opacity: 1; transform: translate(var(--cbh-cx,0), var(--cbh-cy,0)) scaleX(1); }
}

/* Motion-Preferences */
@media (prefers-reduced-motion: reduce) {
	.cbh-headline .cbh-brush,
	.cbh-headline.use-css-bg::after {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

.cbh-headline.cbh-clip { overflow: hidden; }

/* Preset: brush-01 → zentriert, 79% Breite, freie Höhe (darf überstehen) */
.cbh-headline[data-cbh-brush="brush-01.svg"] {
  --cbh-top: 50%;
  --cbh-left: 50%;
  --cbh-width: 79%;
  --cbh-height: auto;
  --cbh-bottom: auto;
  --cbh-cx: -50%;
  --cbh-cy: -50%;
  --cbh-bg-size: 79% auto;
}
/* Brush-01: zentriert, 79% Breite, Höhe automatisch (darf überstehen) */
.cbh-headline[data-cbh-brush="brush-01.svg"] {
  overflow: visible; /* Überstand erlaubt */
}
.cbh-headline[data-cbh-brush="brush-01.svg"] .cbh-brush{
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 79% !important;
  height: auto !important;                 /* Naturratio des SVGs */
  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;          /* Sicherheit, falls gesetzt */
}

.cbh-headline.cbh-full[data-cbh-brush="brush-01.svg"] .cbh-brush{
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 79% !important;
  height: auto !important;
  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
}
/* Brush-01 als Background – zentriert, 79% Breite, Höhe aus Aspect-Ratio */
.cbh-headline[data-cbh-brush="brush-01.svg"].use-css-bg { overflow: visible; }

.cbh-headline[data-cbh-brush="brush-01.svg"].use-css-bg::after{
  top: 50% !important;
  left: 50% !important;
  width: 79% !important;
  aspect-ratio: 600 / 120 !important;      /* an eurem SVG ausrichten */
  height: auto !important;                 /* wird aus Aspect-Ratio berechnet */
  transform: translate(-50%, -50%) !important;
  background-size: 100% 100% !important;   /* füllt die Pseudo-Box */
  background-position: center center !important;
}