/*
Theme Name: Walserstrasse 40
Theme URI: https://w-40.com/
Description: Child-Theme zu „Total". Eigene Regeln gehören hierher, nie ins gekaufte Theme — sonst gehen sie beim nächsten Update verloren.
Author: Walserstrasse 40
Template: Total
Version: 1.0
Text Domain: w40-child
*/

/* Das Aussehen kommt aus dem Eltern-Theme. Es wird in functions.php unter dem
   Handle "parent-style" eingereiht, und zwar bei Priorität 5 — siehe dort.
   Eigene Regeln ab hier. */

/* ===============================================================
   Hero auf der Startseite
   ---------------------------------------------------------------
   Die Reihe trägt in WPBakery el_class="w40-hero" und
   full_width="stretch_row_content_no_spaces" -- nur damit geht auch
   der INHALT von Kante zu Kante; das bloße "stretch_row" streckt nur
   den Hintergrund und lässt die Spalte bei Containerbreite stehen.

   Die Reihe selbst hat Höhe 0 (ihre Kinder gleiten), deshalb hängen
   Abdunklung und Textebene NICHT an ihr, sondern am Slider bzw. an
   der Spalte.
   =============================================================== */

.w40-hero .vc_column-inner,
.w40-hero .wpb_wrapper {
	padding: 0 !important;
}

/* Bezugsrahmen der Textebene ist der wpb_wrapper, nicht die Spalte:
   die Spalte ist 40px hoeher als der Slider, der Text saesse sonst
   um 20px zu tief im Bild. */
.w40-hero .wpb_column {
	position: static;
}

.w40-hero .wpb_wrapper {
	position: relative;
}

/* Der Slider ist der Bezugsrahmen für die Abdunklung */
.w40-hero .vcex-image-slider {
	position: relative;
	margin-bottom: 0;
}

/* Abdunklung. Sieben Fotos wechseln hier durch; ohne sie ist weiße
   Schrift auf dem hellen Winterbild nicht lesbar. */
.w40-hero .vcex-image-slider::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	/* Zwei Ebenen: ein weicher dunkler Fleck hinter dem Text, damit er auf
	   dem hellen Winterbild lesbar bleibt, und eine leichte Abdunklung an
	   Ober- und Unterkante fuer Menue und Slider-Punkte. Ein gleichmaessiger
	   Schleier ueber das ganze Bild wuerde die Fotos totschlagen. */
	background:
		radial-gradient(
			ellipse 70% 55% at 50% 52%,
			rgba(0, 0, 0, 0.58) 0%,
			rgba(0, 0, 0, 0.38) 45%,
			rgba(0, 0, 0, 0.10) 78%,
			rgba(0, 0, 0, 0) 100%
		),
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.30) 0%,
			rgba(0, 0, 0, 0) 22%,
			rgba(0, 0, 0, 0) 72%,
			rgba(0, 0, 0, 0.45) 100%
		);
}

/* Die Textebene, bezogen auf die Spalte */
.w40-hero .w40-hero__inhalt {
	position: absolute;
	inset: 0;
	z-index: 3;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 24px;
	color: #fff;
	/* Der Slider darunter bleibt bedienbar; nur der Knopf fängt Klicks. */
	pointer-events: none;
}

.w40-hero .w40-hero__inhalt > .wpb_wrapper {
	max-width: 900px;
}

.w40-hero .w40-hero__inhalt a {
	pointer-events: auto;
}

.w40-hero__kicker {
	margin: 0 0 14px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
	/* 13px normal lag beim Kontrast an der Grenze (4,7 bei 4,5 gefordert);
	   halbfett macht die Zeile auf hellen Motiven verlaesslich lesbar. */
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

.w40-hero__titel {
	margin: 0;
	font-size: clamp(34px, 6vw, 68px);
	line-height: 1.05;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 4px 30px rgba(0, 0, 0, 0.35);
}

.w40-hero__sub {
	margin: 10px 0 0;
	text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
	font-size: clamp(16px, 2vw, 22px);
	color: rgba(255, 255, 255, 0.92);
}

.w40-hero__cta {
	margin: 30px 0 0;
}

.w40-hero__knopf {
	display: inline-block;
	padding: 14px 34px;
	border: 2px solid #fff;
	background: rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(2px);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.w40-hero__knopf:hover,
.w40-hero__knopf:focus {
	background: #fff;
	color: #262626;
}

/* Höhe. Slider Pro schreibt seine Höhen per JavaScript als inline-Stil,
   deshalb hier !important -- anders ist dagegen nicht anzukommen. */
.w40-hero .sp-slides-container,
.w40-hero .sp-mask,
.w40-hero .sp-slides,
.w40-hero .sp-slide,
.w40-hero .wpex-slider-media {
	height: min(78vh, 760px) !important;
}

/* Das Bild liegt in .wpex-slider-media, nicht in einem .sp-image --
   Slider Pro wird hier von Total mit eigenem Markup gefuellt. */
.w40-hero .wpex-slider-media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
	max-width: none !important;
	display: block;
}

/* Die Punkte des Sliders vom unteren Rand weg, sie kollidieren sonst
   mit dem Knopf */
.w40-hero .sp-buttons {
	position: absolute;
	inset: auto 0 20px 0;
	width: 100%;
	text-align: center;
	z-index: 4;
}

.w40-hero .sp-button {
	border-color: rgba(255, 255, 255, 0.85);
}

.w40-hero .sp-selected-button {
	background: #fff;
}

@media (max-width: 959px) {
	.w40-hero .sp-slides-container,
	.w40-hero .sp-mask,
	.w40-hero .sp-slides,
	.w40-hero .sp-slide,
	.w40-hero .wpex-slider-media {
		height: 60vh !important;
		min-height: 340px;
	}
}

/* ===============================================================
   Grundbreite der Seite
   ---------------------------------------------------------------
   Total setzt die Containerbreite über eine CSS-Variable. Unter
   classic_styles_enable steht sie auf 980px -- dem Stand aus 5.2:

       :root:where(.wpex-classic-style) { --wpex-container-width: 980px }

   Diese Regel hat die Spezifität von :root (:where zählt null), unsere
   steht später in der Kette und gewinnt damit. Belegt in Abschnitt 9
   des Änderungsprotokolls.
   =============================================================== */

:root {
	--wpex-container-width: 1280px;
}