/*
Theme Name: Zahnarztpraxis Renner
Description: WP Theme Zahnarztpraxis Dr. Renner
Author: Simon Markhof
Author URI: http://www.feuerpfeil.de
Template: Avada
Version: 1.2.1
Text Domain:  Avada
*/

/* ==================== Hero-Buehne (RevSlider-Prinzip) ====================
   Alle Koordinaten stammen 1:1 aus der Revolution-Slider-DB (Slider 4
   "STARTSEITE", Slide 8, Desktop-Grid 1240 px, Top-Ursprung = Oberkante
   Ulrich-Portrait). Die Buehne skaliert als Ganzes ueber Container-Query-
   Einheiten: 1 Grid-Pixel = --u. Personen und Balken bleiben dadurch auf
   jeder Bildschirmbreite in exakt demselben Verhaeltnis zueinander.
   Kappung bei 992 px (= Faktor 0.8): so sind die Portraits maximal 430 px
   breit, wie auf der alten Live-Seite bei 1440 gemessen. */

.renner-hero__stage {
	position: relative;
	width: min(992px, 100%);
	margin-inline: auto;
	aspect-ratio: 1240 / 719;
	container-type: inline-size;
}

.renner-hero__stage > * {
	position: absolute;
	margin: 0;
	--u: calc(100cqw / 1240);
}

/* Personen liegen ueber den Balken: sie stehen im DOM hinter den Balken,
   alle Elemente sind positioniert ohne z-index -> spaetere malen oben. */
.renner-hero__person {
	height: auto;
}
.renner-hero__person--ulrich { left: calc(221 * var(--u)); top: 0; width: calc(537 * var(--u)); }
.renner-hero__person--patty  { left: calc(554 * var(--u)); top: calc(30 * var(--u)); width: calc(517 * var(--u)); }

.renner-hero__bar {
	display: block;
	border-radius: 2px;
	color: #FFFFFF;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.2;
}
.renner-hero__bar--dark { background: #00618B; }
.renner-hero__bar--blue { background: #0094DA; }
.renner-hero__bar-text { position: absolute; white-space: nowrap; }

/* ------- STELLSCHRAUBEN: alle Werte in Grid-Pixeln (1240er-Raster) -------
   start = aeussere Kante, end = innere Kante (zur Bildmitte). Ein Grid-Pixel
   entspricht bei voller Buehnenbreite 0,8 CSS-px. Hier drehen, nirgendwo sonst.
   Referenz-Koerperkanten (gemessen): Ulrich links 298(y388)..271(y468),
   Patty rechts 896(y359)..1011(y511). */
.renner-hero__stage {
	--u-title-start: 23;  --u-title-end: 420;  --u-title-top: 319;
	--u-name-start: -5;   --u-name-end: 315;   --u-name-top: 388;
	--u-sub-start: 21;    --u-sub-end: 418;    --u-sub-top: 468;
	--p-title-start: 828; --p-title-end: 1205; --p-title-top: 359;
	--p-name-start: 931;  --p-name-end: 1265;  --p-name-top: 428;
}

.renner-hero__bar--u-title { left: calc(var(--u-title-start) * var(--u)); top: calc(var(--u-title-top) * var(--u)); width: calc((var(--u-title-end) - var(--u-title-start)) * var(--u)); height: calc(69 * var(--u)); }
.renner-hero__bar--u-title .renner-hero__bar-text { left: calc(26 * var(--u)); top: calc(16 * var(--u)); font-size: calc(26 * var(--u)); }

.renner-hero__bar--u-name { left: calc(var(--u-name-start) * var(--u)); top: calc(var(--u-name-top) * var(--u)); width: calc((var(--u-name-end) - var(--u-name-start)) * var(--u)); height: calc(80 * var(--u)); }
.renner-hero__bar--u-name .renner-hero__bar-text { left: calc(15 * var(--u)); top: calc(26 * var(--u)); font-size: calc(33 * var(--u)); }

.renner-hero__bar--u-sub { left: calc(var(--u-sub-start) * var(--u)); top: calc(var(--u-sub-top) * var(--u)); width: calc((var(--u-sub-end) - var(--u-sub-start)) * var(--u)); height: calc(99 * var(--u)); }
.renner-hero__bar--u-sub .renner-hero__bar-text { left: calc(13 * var(--u)); top: calc(33 * var(--u)); font-size: calc(26 * var(--u)); width: calc(248 * var(--u)); white-space: normal; line-height: 1.25; }

.renner-hero__bar--p-title { left: calc(var(--p-title-start) * var(--u)); top: calc(var(--p-title-top) * var(--u)); width: calc((var(--p-title-end) - var(--p-title-start)) * var(--u)); height: calc(69 * var(--u)); }
.renner-hero__bar--p-title .renner-hero__bar-text { left: calc(154 * var(--u)); top: calc(16 * var(--u)); font-size: calc(26 * var(--u)); }

.renner-hero__bar--p-name { left: calc(var(--p-name-start) * var(--u)); top: calc(var(--p-name-top) * var(--u)); width: calc((var(--p-name-end) - var(--p-name-start)) * var(--u)); height: calc(83 * var(--u)); }
.renner-hero__bar--p-name .renner-hero__bar-text { left: calc(78 * var(--u)); top: calc(28 * var(--u)); font-size: calc(33 * var(--u)); }

/* Einblendung wie am Original gemessen: reine Ueberblendung, Portraits
   zuerst, Balken +0,4 s. Reines CSS, laeuft ohne JS. */
@keyframes renner-hero-fade {
	from { opacity: 0; }
}
.renner-hero__person { animation: renner-hero-fade 0.3s ease 0s backwards; }
.renner-hero__bar { animation: renner-hero-fade 0.3s ease 0.4s backwards; }

@media (prefers-reduced-motion: reduce) {
	.renner-hero__person,
	.renner-hero__bar {
		animation: none;
	}
}
/* ==================== Cookie-Dialog (Borlabs) ====================
   Das Logo kommt mit fixen 251x50 px aus den Borlabs-Einstellungen und
   schrumpft nie; der Header ist flex/nowrap. Bei schmalen Viewports drueckt
   das den Titel ueber den rechten Rand. Kein Shadow DOM -> normales CSS. */
#BorlabsCookieBox .brlbs-dialog-logo {
	max-height: 32px;
	width: auto;
}

#BorlabsCookieBox .brlbs-cmpnt-dialog-box-header {
	flex-wrap: wrap;
	gap: 8px;
}

#BorlabsCookieBox .brlbs-cmpnt-dialog-entrance-headline {
	min-width: 0;
	overflow-wrap: break-word;
}