/* Wildalpgatterl – Grundgerüst
   Farben und Schriften an einer Stelle. Sobald die Weblizenz für die
   Fette UNZ Fraktur vorliegt, genügt es, sie in --wag-font-display
   voranzustellen – der Rest bleibt unberührt. */

:root {
	--wag-red:        #C4110E;
	--wag-brown:      #907058;
	--wag-darkbrown:  #3D200C;
	--wag-black:      #111111;
	--wag-cream:      #F5F0EA;
	--wag-yellow:     #F0C419;
	--wag-green:      #3E7A3A;

	/* Für die Fette UNZ Fraktur besteht keine Weblizenz. Der Kunde hat sich
	   für Variante (a) des Entwurfs entschieden: alles in Voltaire, die
	   Überschriften mit rotem Anfangsbuchstaben. Käme die Lizenz später doch,
	   genügt es, die Fraktur hier voranzustellen. */
	--wag-font-display: "Voltaire", "Trebuchet MS", sans-serif;
	--wag-font-text:    "Voltaire", "Trebuchet MS", sans-serif;

	--wag-edge: 32px;
	--wag-box:  clamp(44px, 4vw, 58px);

	/* Aufteilung der zweispaltigen Abschnitte – gemessen am Entwurf, Seite 5:
	   Bildfläche 782 von 1920 px, also gut 40 % der Breite, über die volle
	   Höhe und bündig am rechten Bildschirmrand. */
	--wag-split-text: 59%;
	--wag-split-img:  41%;
}

/* --- Grundtypografie ---------------------------------------------------- */

body {
	font-family: var(--wag-font-text);
	color: var(--wag-darkbrown);
	background: #fff;
}

h1, h2, h3,
.elementor-heading-title,
.wag-display {
	font-family: var(--wag-font-display);
	/* Voltaire gibt es nur in einem Schnitt. Ein höherer Wert ließe den
	   Browser einen fetten Schnitt errechnen – das sieht immer schlecht aus. */
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: .005em;
}

/* Der rote Anfangsbuchstabe aus Variante (a) des Entwurfs. Bewusst nur für
   Überschriften, nicht für das Menü – dort wären sieben rote Initialen
   untereinander unruhig. */
h1::first-letter,
h2::first-letter,
.wag-display::first-letter {
	color: var(--wag-red);
}

/* Der Schriftzug auf dem Startbild steht groß über dem Haus. Er trägt die
   ganze Fläche allein, deshalb darf er deutlich größer ausfallen als die
   Überschriften der Abschnitte. Ein rotes Initial bekommt er nicht: weiße
   Schrift auf einem Foto verträgt keinen roten Buchstaben. */

#hero h1,
.wag-hero h1,
#hero .elementor-heading-title,
.wag-hero .elementor-heading-title {
	font-size: clamp(3.4rem, 8.4vw, 8rem);
	line-height: 1.05;
}

#hero h1::first-letter,
.wag-hero h1::first-letter {
	color: inherit;
}

/* Für Stellen, an denen der Buchstabe von Hand gesetzt wird. */
.wag-initial { color: var(--wag-red); }

/* Die Größen sind gegenüber der Fraktur um ein Fünftel angehoben. Grund: Bei
   gleicher Punktgröße baut Voltaire eine rund 25 % kürzere Zeile – die
   Überschrift füllte ihre Spalte nicht mehr und wirkte dadurch klein, obwohl
   ihre Buchstaben sogar höher sind. Ausgeglichen wird also die Zeilenbreite,
   nicht die Buchstabenhöhe. */

h1 { font-size: clamp(3.1rem, 7.2vw, 6.7rem); }
h2 { font-size: clamp(2.4rem, 5.3vw, 4.55rem); }
h3 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); }

/* Überschriften, die aus einem Elementor-Feld kommen, tragen die Klasse
   .elementor-heading-title – und Elementor setzt darüber eine eigene Größe.
   Gegen eine Klasse kommt eine Regel auf das nackte h2 nicht an, deshalb hier
   dieselben Werte noch einmal mit dem Klassennamen davor. Ohne das stünden
   alle Überschriften der Seite in 16 Pixeln. */

.elementor-widget-heading .elementor-heading-title:is(h1) { font-size: clamp(3.1rem, 7.2vw, 6.7rem); }
.elementor-widget-heading .elementor-heading-title:is(h2) { font-size: clamp(2.4rem, 5.3vw, 4.55rem); }
.elementor-widget-heading .elementor-heading-title:is(h3) { font-size: clamp(1.8rem, 3.6vw, 2.9rem); }

h4, h5, h6 {
	font-family: var(--wag-font-text);
	letter-spacing: .04em;
	text-transform: uppercase;
}

p, li { font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.65; }

/* --- Randnavigation ----------------------------------------------------- */

.wag-shell { position: relative; z-index: 900; }

.wag-logo {
	position: fixed;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 910;
	display: block;
	line-height: 0;
}
.wag-logo img { width: clamp(88px, 9vw, 132px); height: auto; }

.wag-burger,
.wag-lang,
.wag-social,
.wag-overlay__close {
	position: fixed;
	z-index: 910;
	background: var(--wag-black);
	border: 0;
	cursor: pointer;
}

.wag-burger {
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: var(--wag-box);
	height: var(--wag-box);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 0;
}
.wag-burger span {
	display: block;
	width: 40%;
	height: 1px;
	background: #fff;
	transition: transform .25s ease, opacity .25s ease;
}

.wag-lang {
	top: 0;
	right: 0;
	padding: 1.4em 1.8em;
	color: #fff;
	font-family: var(--wag-font-text);
	font-size: .78rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

.wag-social {
	right: 0;
	bottom: 6vh;
	display: flex;
	flex-direction: column;
	gap: 1.1em;
	padding: 1.1em .95em;
	transition: background .2s ease;
}
.wag-social a { line-height: 0; }
.wag-social svg { width: 19px; height: 19px; fill: #fff; transition: fill .2s ease; }

/* --- Statuszeile am rechten Rand ---------------------------------------- */

.wag-statusline {
	position: fixed;
	right: 10px;
	top: 50%;
	z-index: 905;
	transform: translateY(-50%) rotate(180deg);
	writing-mode: vertical-rl;
	display: flex;
	align-items: center;
	gap: .8em;
	font-family: var(--wag-font-text);
	font-size: .74rem;
	letter-spacing: .16em;
	color: var(--wag-darkbrown);
	white-space: nowrap;
}
.wag-statusline__text { font-weight: 400; }
.wag-statusline--open    .wag-statusline__text { color: var(--wag-green); }
.wag-statusline--closed  .wag-statusline__text { color: var(--wag-red); }
.wag-statusline--private .wag-statusline__text { color: var(--wag-brown); }
.wag-statusline__sep  { opacity: .45; }
.wag-statusline__tel  { color: inherit; text-decoration: none; }
.wag-statusline__tel:hover { color: var(--wag-red); }

/* --- Runder Status-Button ----------------------------------------------- */

.wag-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .35em;
	width: clamp(150px, 15vw, 210px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wag-black);
	padding: 1.2em;
	text-align: center;
}
.wag-badge__text {
	font-family: var(--wag-font-text);
	font-size: clamp(.85rem, 1.15vw, 1.05rem);
	line-height: 1.25;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--wag-yellow);
}
.wag-badge__note {
	font-size: .72rem;
	letter-spacing: .08em;
	color: #fff;
	opacity: .8;
}
.wag-badge--closed  .wag-badge__text { color: #FF8A85; }
.wag-badge--private .wag-badge__text { color: #F5D9A8; }

/* --- Scroll-Hinweis ----------------------------------------------------- */

.wag-scroll {
	display: inline-block;
	background: var(--wag-black);
	color: #fff;
	padding: 1.1em 1.9em;
	font-family: var(--wag-font-text);
	font-size: .75rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 5px;
}
.wag-scroll:hover { color: var(--wag-yellow); }

/* --- Overlay-Menü ------------------------------------------------------- */

.wag-overlay {
	position: fixed;
	inset: 0;
	z-index: 950;
	display: flex;
	align-items: stretch;
	background: #fff;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .3s ease, visibility 0s linear .3s;
}
.wag-overlay.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .3s ease, visibility 0s;
}

.wag-overlay__close {
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: var(--wag-box);
	height: var(--wag-box);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 960;
}
.wag-overlay__close svg { width: 22px; height: 22px; fill: #fff; }

.wag-overlay__inner {
	margin: auto;
	display: grid;
	grid-template-columns: minmax(280px, 30vw) minmax(240px, 26vw);
	gap: 6px;
	padding: 2rem;
}

.wag-overlay__main {
	background: var(--wag-black);
	padding: clamp(2rem, 4vw, 3.4rem);
	display: flex;
	align-items: center;
}
.wag-overlay__secondary {
	background: var(--wag-brown);
	padding: clamp(2rem, 4vw, 3.4rem);
	display: flex;
	align-items: center;
}

.wag-menu { list-style: none; margin: 0; padding: 0; width: 100%; }
.wag-menu a { text-decoration: none; display: block; transition: color .2s ease; }

.wag-menu--wag_main a {
	font-family: var(--wag-font-display);
	font-size: clamp(2.3rem, 4.3vw, 3.8rem);
	line-height: 1.2;
	color: #fff;
}
.wag-menu--wag_main a:hover { color: var(--wag-yellow); }

.wag-menu--wag_secondary { text-align: right; }
.wag-menu--wag_secondary a {
	font-family: var(--wag-font-text);
	font-size: clamp(1rem, 1.5vw, 1.35rem);
	line-height: 2;
	color: #fff;
}
.wag-menu--wag_secondary a:hover { color: var(--wag-darkbrown); }

body.wag-menu-open { overflow: hidden; }

/* --- Fußzeile ----------------------------------------------------------- */

.wag-footer {
	padding: clamp(3rem, 7vw, 6rem) var(--wag-edge) clamp(2rem, 4vw, 3.5rem);
	text-align: center;
}
.wag-footer__map { margin: 0 auto clamp(1.8rem, 3.5vw, 2.6rem); max-width: 520px; }
.wag-footer__map img { width: 100%; height: auto; }
.wag-footer__maplink {
	display: inline-block;
	margin-top: 1em;
	padding: .8em 1.6em;
	border: 1px solid rgba(61, 32, 12, .3);
	font-size: .92rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wag-darkbrown);
	transition: background .2s ease, color .2s ease;
}
.wag-footer__maplink:hover {
	background: var(--wag-darkbrown);
	border-color: var(--wag-darkbrown);
	color: #fff;
}
.wag-footer__address p { margin: 0 0 .15em; font-size: .95rem; }
.wag-footer__address a { color: inherit; text-decoration: none; }
.wag-footer__address a:hover { color: var(--wag-red); }

.wag-footer__legal { margin-top: 2.4rem; display: inline-block; background: var(--wag-black); }
.wag-menu--wag_footer { display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 3vw, 3rem); padding: 1.2em 2.2em; }
.wag-menu--wag_footer a {
	color: #fff;
	font-size: .76rem;
	letter-spacing: .2em;
	text-transform: uppercase;
}
.wag-menu--wag_footer a:hover { color: var(--wag-yellow); }

/* --- Hero --------------------------------------------------------------- */

.wag-hero, #hero { background-color: var(--wag-darkbrown); }

/* --- Zweispaltige Abschnitte (Text links, Bild rechts) ------------------- */

/* Aufteilung und Größen wie im Entwurf, Seite 5: Der Abschnitt füllt den
   Bildschirm, links steht der Text auf weißem Grund, rechts liegt das Bild
   randlos über die volle Höhe und schließt bündig am rechten Rand ab.
   Zwischen den Abschnitten steht kein Abstand – so folgt beim Scrollen eine
   ganze Bildschirmseite auf die nächste, genau wie im Entwurf. */

/* Die Abschnitte werden über ihre HTML-ID angesprochen. Elementor gibt für
   Container keine eigenen CSS-Klassen aus, die IDs dagegen zuverlässig – und
   sie gelten gleichermaßen auf der Startseite wie auf den Einzelseiten. */

#essen, #zimmer, #wildalm, #bergsteigen, #mountainbiken, #skifahren, #remise {
	margin-block: 0 !important;
	padding: 0 !important;
	min-height: 100vh;
	align-items: stretch !important;
}

#essen > .e-con-inner,
#zimmer > .e-con-inner,
#wildalm > .e-con-inner,
#bergsteigen > .e-con-inner,
#mountainbiken > .e-con-inner,
#skifahren > .e-con-inner,
#remise > .e-con-inner {
	max-width: none !important;
	padding: 0 !important;
	gap: 0 !important;
	align-items: stretch !important;
	min-height: 100vh;
}

/* Textspalte: knapp drei Fünftel, Inhalt mittig auf der Höhe.
   Links bleibt Platz für den Menü-Button, der am Bildschirmrand klebt. */
#essen > .e-con-inner > :first-child,
#zimmer > .e-con-inner > :first-child,
#wildalm > .e-con-inner > :first-child,
#bergsteigen > .e-con-inner > :first-child,
#mountainbiken > .e-con-inner > :first-child,
#skifahren > .e-con-inner > :first-child,
#remise > .e-con-inner > :first-child {
	width: var(--wag-split-text) !important;
	justify-content: center !important;
	padding: clamp(3rem, 6vw, 6rem) clamp(2.5rem, 5vw, 5.5rem)
	         clamp(3rem, 6vw, 6rem) max(4.5rem, 7vw) !important;
}

/* Bildspalte: gut zwei Fünftel, ohne jede Polsterung – das Bild reicht bis an
   den Bildschirmrand und trägt zugleich den Bildwechsler, ist also dessen
   Bezugsrahmen. */
#essen > .e-con-inner > :last-child,
#zimmer > .e-con-inner > :last-child,
#wildalm > .e-con-inner > :last-child,
#bergsteigen > .e-con-inner > :last-child,
#mountainbiken > .e-con-inner > :last-child,
#skifahren > .e-con-inner > :last-child,
#remise > .e-con-inner > :last-child,
.wag-slideshow-host {
	width: var(--wag-split-img) !important;
	padding: 0 !important;
	position: relative;
	overflow: hidden;
	display: block !important;
}

/* Abwechselnd Weiß und Creme – nach der Stellung des Abschnitts auf der Seite,
   nicht nach dem Abschnitt selbst. Nur so bleibt der Wechsel erhalten, wenn
   die Reihenfolge sich ändert: im Winter rücken die drei Sportbereiche in eine
   andere Folge, die Abfolge Weiß–Creme–Weiß–Creme darf davon nichts merken.

   Gezählt werden alle Abschnitte der Seite, das Startbild und der Auftakt
   eingeschlossen. Auf der Startseite trifft es damit den dritten Abschnitt
   (Essen) als ersten weißen. Auf einer Unterseite steht nur ein Abschnitt,
   der ist immer weiß. */

:is(#essen, #zimmer, #wildalm, #bergsteigen, #mountainbiken, #skifahren, #remise):nth-of-type(odd)
	> .e-con-inner > :first-child {
	background-color: #fff;
}

:is(#essen, #zimmer, #wildalm, #bergsteigen, #mountainbiken, #skifahren, #remise):nth-of-type(even)
	> .e-con-inner > :first-child {
	background-color: var(--wag-cream);
}

@media (max-width: 900px) {
	#essen, #zimmer, #wildalm, #bergsteigen, #mountainbiken, #skifahren, #remise {
		min-height: 0;
	}

	#essen > .e-con-inner,
	#zimmer > .e-con-inner,
	#wildalm > .e-con-inner,
	#bergsteigen > .e-con-inner,
	#mountainbiken > .e-con-inner,
	#skifahren > .e-con-inner,
	#remise > .e-con-inner {
		flex-direction: column !important;
		min-height: 0;
	}

	#essen > .e-con-inner > :first-child,
	#zimmer > .e-con-inner > :first-child,
	#wildalm > .e-con-inner > :first-child,
	#bergsteigen > .e-con-inner > :first-child,
	#mountainbiken > .e-con-inner > :first-child,
	#skifahren > .e-con-inner > :first-child,
	#remise > .e-con-inner > :first-child,
	#essen > .e-con-inner > :last-child,
	#zimmer > .e-con-inner > :last-child,
	#wildalm > .e-con-inner > :last-child,
	#bergsteigen > .e-con-inner > :last-child,
	#mountainbiken > .e-con-inner > :last-child,
	#skifahren > .e-con-inner > :last-child,
	#remise > .e-con-inner > :last-child,
	.wag-slideshow-host {
		width: 100% !important;
	}
}

/* --- Startbild: Status-Button nach rechts -------------------------------- */

#hero > .e-con-inner > .elementor-widget-shortcode,
.wag-hero > .e-con-inner > .elementor-widget-shortcode {
	align-self: flex-end;
	margin-right: clamp(0px, 5vw, 110px);
}

@media (max-width: 767px) {
	#hero > .e-con-inner > .elementor-widget-shortcode { align-self: center; margin-right: 0; }
}

/* --- Einzelseiten: etwas größere Schrift --------------------------------- */

/* Die Aufteilung selbst regeln die Abschnitts-IDs weiter oben – die tragen
   die Einzelseiten genauso wie die Startseite. Hier steht nur, was sich auf
   einer Seite mit einem einzigen Abschnitt zusätzlich ändert: Steht der Text
   allein auf der Seite, darf er etwas größer sein.

   Ausdrücklich nicht über einen Sammelselektor wie
   `.elementor > .e-con:not(#rechtstext)`: Der träfe auch Seiten ohne
   zweispaltigen Aufbau – etwa die Speisekarte – und presste deren Inhalt in
   eine 41 % breite Spalte. */

body:not(.home) :is(#essen, #zimmer, #wildalm, #bergsteigen, #mountainbiken, #skifahren, #remise)
	:is(h2, .elementor-heading-title) {
	font-size: clamp(2.9rem, 6vw, 5.3rem);
}

body:not(.home) #essen :is(p, li),
body:not(.home) #zimmer :is(p, li),
body:not(.home) #wildalm :is(p, li),
body:not(.home) #bergsteigen :is(p, li),
body:not(.home) #mountainbiken :is(p, li),
body:not(.home) #skifahren :is(p, li),
body:not(.home) #remise :is(p, li) {
	font-size: clamp(1.05rem, 1.35vw, 1.28rem);
	line-height: 1.7;
}

/* --- Rechtstexte (Impressum, Datenschutz, Jobs) -------------------------- */

#rechtstext { padding-block: clamp(4rem, 9vw, 8rem) !important; }
#rechtstext h1 { margin-bottom: .6em; }
#rechtstext h2 {
	font-family: var(--wag-font-text);
	font-size: 1.05rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wag-brown);
	margin: 2.6em 0 .7em;
	padding-bottom: .5em;
	border-bottom: 1px solid rgba(61, 32, 12, .16);
}
#rechtstext h3 {
	font-family: var(--wag-font-text);
	font-size: 1rem;
	letter-spacing: .04em;
	margin: 1.8em 0 .4em;
}
#rechtstext p, #rechtstext li { max-width: 68ch; }
#rechtstext .wag-platzhalter {
	background: rgba(240, 196, 25, .22);
	border-bottom: 1px dashed rgba(61, 32, 12, .45);
	padding: 0 .25em;
}
#rechtstext .wag-hinweis {
	border-left: 3px solid var(--wag-brown);
	background: var(--wag-cream);
	padding: 1.1em 1.4em;
	margin: 1.6em 0;
	font-size: .95rem;
}

/* --- Bildwechsler in den Abschnitten ------------------------------------ */

/* Elementor gibt jedem Widget `position: relative`. Dadurch wäre das Widget
   selbst der Bezugsrahmen – und da sein einziges Kind absolut positioniert ist,
   bliebe es 0 Pixel hoch. Deshalb nehmen wir dem Widget die Positionierung,
   damit sich die Slideshow an der Spalte ausrichtet. */
.elementor-widget:has(.wag-slideshow) {
	position: static;
	width: 100%;
}
.elementor-widget.wag-slideshow-widget { position: static; width: 100%; }

/* Elementor setzt die Spaltenabstände mit höherer Spezifität – deshalb hier
   noch einmal ausdrücklich: keine Polsterung, damit das Bild die Spalte
   vollständig ausfüllt und bündig am Bildschirmrand abschließt. */
.elementor-element.wag-slideshow-host {
	padding: 0 !important;
	position: relative;
	overflow: hidden;
}

/* Das Bildfeld liegt absolut in der Spalte. So füllt es sie ganz aus,
   unabhängig davon, welche Höhe die Widgets darin melden – und die Höhe des
   Abschnitts gibt allein die Textspalte vor.
   Kein eigener Hintergrund – der Abschnitt scheint durch. */
.wag-slideshow {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background: transparent;
}

.wag-slideshow__slides { position: absolute; inset: 0; }

/* Elementor setzt für alle Bilder `height: auto` und `max-width: 100%`.
   Das würde das Bild aus seinem Feld herauswachsen lassen – deshalb hier
   ausnahmsweise !important. */
.wag-slideshow__slide {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	/* Formatfüllend wie im Entwurf: Hoch- und Querformate decken die Fläche
	   vollständig ab, überstehende Ränder werden beschnitten. */
	object-fit: cover !important;
	object-position: center center !important;
	opacity: 0 !important;
	transition: opacity 1.1s ease;
}
.wag-slideshow__slide.is-active { opacity: 1 !important; }

/* Bedienelemente sitzen als kleine Leiste in der unteren rechten Bildecke. */
.wag-slideshow__controls {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .82);
	box-shadow: 0 2px 10px rgba(61, 32, 12, .16);
}

.wag-slideshow__nav {
	width: 26px;
	height: 26px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: transparent;
	transition: background .2s ease;
}
.wag-slideshow__nav svg { width: 18px; height: 18px; fill: var(--wag-darkbrown); }
.wag-slideshow__nav:hover { background: rgba(61, 32, 12, .14); }

.wag-slideshow__dots {
	display: flex;
	justify-content: center;
	gap: 7px;
}
.wag-slideshow__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: rgba(61, 32, 12, .28);
	transition: background .2s ease, transform .2s ease;
}
.wag-slideshow__dot.is-active { background: var(--wag-red); transform: scale(1.35); }

/* Gestapelt auf schmalen Bildschirmen: Die Slideshow liegt absolut, deshalb
   braucht die Spalte hier eine eigene Höhe. */
@media (max-width: 900px) {
	.wag-slideshow-host,
	.elementor-element.wag-slideshow-host { min-height: 62vh !important; }
	.wag-slideshow__nav { width: 32px; height: 32px; }
	.wag-slideshow__nav svg { width: 20px; height: 20px; }
}

/* --- Offene Stellen ------------------------------------------------------ */

.wag-jobs { width: 100%; }

.wag-jobs__liste { list-style: none; margin: 0 0 2.6rem; padding: 0; }

.wag-jobs__stelle {
	padding: 1.6rem 0;
	border-bottom: 1px solid rgba(61, 32, 12, .16);
}
.wag-jobs__stelle:first-child { border-top: 1px solid rgba(61, 32, 12, .16); }

.wag-jobs__stelle h2 {
	font-family: var(--wag-font-display);
	font-size: clamp(1.4rem, 2.2vw, 1.9rem);
	letter-spacing: 0;
	text-transform: none;
	margin: 0 0 .35em;
	padding: 0;
	border: 0;
	color: var(--wag-darkbrown);
}
.wag-jobs__stelle p { margin: 0; }

/* Steht keine Stelle offen, soll das nicht wie ein Fehler aussehen. */
.wag-jobs__leer {
	margin: 0 0 2.6rem;
	padding: 1.4em 1.6em;
	background: var(--wag-cream);
	border-left: 3px solid var(--wag-brown);
	font-size: 1.05rem;
}

.wag-jobs__aktionen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 1.6rem;
}

.wag-kopieren {
	background: none;
	border: 1px solid rgba(61, 32, 12, .32);
	color: var(--wag-darkbrown);
	font-family: var(--wag-font-text);
	font-size: .95rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 1em 1.8em;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.wag-kopieren:hover {
	background: var(--wag-darkbrown);
	border-color: var(--wag-darkbrown);
	color: #fff;
}
.wag-kopieren.is-fertig {
	background: var(--wag-green);
	border-color: var(--wag-green);
	color: #fff;
}

/* --- Speisekarte als aufgeschlagenes Heft -------------------------------- */

.wag-booklet {
	width: 100%;
	max-width: min(1320px, 94vw);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.6rem, 3.2vw, 2.8rem);
}

.wag-booklet__spread {
	position: relative;
	display: flex;
	width: 100%;
	background: #fff;
	box-shadow: 0 16px 44px rgba(61, 32, 12, .17);
}

.wag-booklet__spread figure { margin: 0; flex: 1 1 50%; min-width: 0; }
.wag-booklet__spread img { display: block; width: 100%; height: auto; }

/* Titelseite steht allein – wie der Umschlag eines Hefts. Etwas schmaler als
   die Doppelseiten, aber deutlich breiter als eine halbe Seite, damit sie
   nicht verloren wirkt. */
.wag-booklet__spread--cover { width: 64%; }

/* Angedeutete Falz in der Mitte. */
.wag-booklet__spread--double::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 28px;
	transform: translateX(-50%);
	pointer-events: none;
	background: linear-gradient(90deg,
		rgba(61, 32, 12, 0) 0%,
		rgba(61, 32, 12, .07) 42%,
		rgba(61, 32, 12, .14) 50%,
		rgba(61, 32, 12, .07) 58%,
		rgba(61, 32, 12, 0) 100%);
}

.wag-booklet__download { margin: 1rem 0 0; text-align: center; }

@media (max-width: 700px) {
	.wag-booklet__spread { flex-direction: column; }
	.wag-booklet__spread--cover { width: 100%; }
	.wag-booklet__spread--double::after { display: none; }
}

/* --- Speisekarte: PDF direkt auf der Seite ------------------------------- */

.wag-pdf { width: 100%; }
.wag-pdf__frame {
	width: 100%;
	height: min(1400px, 150vh);
	border: 1px solid rgba(61, 32, 12, .18);
	background: var(--wag-cream);
	display: block;
}
.wag-pdf__fallback {
	display: none;
	text-align: center;
	padding: 2rem 1rem;
	background: var(--wag-cream);
}
.wag-pdf__fallback img { width: 100%; max-width: 420px; height: auto; margin: 0 auto 1.4rem; display: block; }
.wag-pdf__button {
	display: inline-block;
	background: var(--wag-red);
	color: #fff;
	padding: 1em 2em;
	font-size: .95rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
}
.wag-pdf__button:hover { background: var(--wag-darkbrown); color: #fff; }
.wag-pdf__hint { margin-top: 1.2rem; text-align: center; font-size: .88rem; opacity: .75; }

/* Mobile Browser stellen eingebettete PDFs unzuverlässig dar –
   dort zeigen wir stattdessen die Titelseite mit einem klaren Button. */
@media (max-width: 900px) {
	.wag-pdf__frame, .wag-pdf__hint { display: none; }
	.wag-pdf__fallback { display: block; }
}

/* --- Hover-Farben (kein Elementor-Pink) --------------------------------- */

/* Alle drei schwarzen Felder am Bildrand verhalten sich gleich: Menü-Knopf
   links, Sprachumschalter oben rechts, Social unten rechts. Beim Überfahren
   färben sie sich braun ein, die Beschriftung wird gelb. */

.wag-burger:hover, .wag-burger:focus, .wag-burger:focus-visible,
.wag-overlay__close:hover, .wag-overlay__close:focus,
.wag-lang:hover, .wag-lang:focus-visible,
.wag-social:hover, .wag-social:focus-within {
	background: var(--wag-darkbrown) !important;
	outline: none;
}
.wag-burger:hover span, .wag-burger:focus span { background: var(--wag-yellow); }
.wag-overlay__close:hover svg { fill: var(--wag-yellow); }
.wag-lang:hover, .wag-lang:focus-visible { color: var(--wag-yellow); }
.wag-social:hover svg { fill: var(--wag-yellow); }

.elementor a:hover, .elementor a:focus { color: var(--wag-brown); }

/* --- Bereichsübersicht auf der Startseite -------------------------------- */

.wag-sections { width: 100%; }
.wag-sections ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 6px;
}
.wag-sections a {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wag-darkbrown);
	text-decoration: none;
}
.wag-sections__img { position: absolute; inset: 0; }
.wag-sections__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease, opacity .3s ease;
	opacity: .72;
}
.wag-sections a:hover .wag-sections__img img { transform: scale(1.05); opacity: .9; }
.wag-sections__label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	text-align: center;
	font-family: var(--wag-font-display);
	font-size: clamp(1.9rem, 2.9vw, 2.9rem);
	line-height: 1.1;
	color: #fff;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.wag-sections a:hover .wag-sections__label { color: var(--wag-yellow); }

/* --- Admin-Leiste ------------------------------------------------------- */

body.admin-bar .wag-logo { top: 50px; }
body.admin-bar .wag-lang { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .wag-logo { top: 64px; }
	body.admin-bar .wag-lang { top: 46px; }
}

/* --- Mobil -------------------------------------------------------------- */

@media (max-width: 767px) {
	.wag-statusline { display: none; }
	.wag-burger { top: auto; bottom: 0; transform: none; }
	.wag-social { bottom: 0; flex-direction: row; }
	.wag-overlay__inner { grid-template-columns: 1fr; }
	.wag-menu--wag_secondary { text-align: left; }
	.wag-overlay__close { top: 12px; left: 12px; transform: none; width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
	.wag-overlay, .wag-burger span { transition: none; }
}