/* leXpro Media — die Elementor-Brücke.
   ---------------------------------------------------------------------------
   Diese Datei enthält KEINE Gestaltung. Die kommt vollständig aus design.css.
   Hier steht nur, was nötig ist, damit Elementors Container- und Widget-Markup
   sich so verhält wie handgeschriebenes Markup.

   Die Klassenpräfixe `v2-` und `v3-` bleiben, obwohl die Plugins nicht mehr so
   heißen: sie stehen rund 300 Mal in design.css. Ein Umbenennen wäre reine
   Fläche ohne funktionalen Gewinn — und jede der dort mit „gemessen, nicht
   geraten" kommentierten Reparaturen müsste danach neu verifiziert werden.

   Drei Dinge stehen im Weg, alle dokumentiert im Skill:

   1. `.e-con` bringt eigene Vorgaben mit — `display: flex`, Innenabstände über
      Custom Properties, eine Maximalbreite.
   2. Eine Widget-Klasse landet auf der WRAPPER-Hülle, nicht am Zielelement.
      `.v2-h2` sitzt also auf dem Widget-Div, nicht auf dem <h2> darin.
   3. Zwischen einem Container und seinen Inhalten sitzt für jedes Widget eine
      zusätzliche Hülle — jedes Layout, das direkte Kinder erwartet, greift ins
      Leere.
   ========================================================================== */

/* ==========================================================================
   1 · Container zurücksetzen
   `.v3-raw` kommt auf jeden Container, dessen Layout allein aus v2.css kommt.
   Elementors Abstände und Breiten würden sich sonst addieren.
   ========================================================================== */

.e-con.v3-raw,
.e-con.v3-raw > .e-con-inner {
	--padding-block-start: 0;
	--padding-block-end: 0;
	--padding-inline-start: 0;
	--padding-inline-end: 0;
	--margin-block-start: 0;
	--margin-block-end: 0;
	--margin-inline-start: 0;
	--margin-inline-end: 0;
	--gap: 0px;
	--width: 100%;
	--content-width: 100%;
	--min-height: 0;
}

/* KEIN pauschales `max-width: none`. Das hatte ich hier stehen, und es hat die
   Maximalbreiten aus v2.css mit ausgehebelt — die FAQ lief dadurch über
   1265 statt 1180 px und wirkte in die Breite gezogen. Elementors eigenes
   `max-width: var(--width)` verliert ohnehin gegen v2.css, weil das spaeter
   laedt; es braucht hier also gar keine Regel. */

/* Elementor packt in „boxed"-Containern eine zweite Hülle dazwischen. Für unsere
   Zwecke muss sie verschwinden, sonst sitzt zwischen Sektion und Inhalt eine
   Ebene, die kein CSS von uns kennt. */
.e-con.v3-raw > .e-con-inner {
	display: contents;
}

/* ==========================================================================
   2 · Widget-Hüllen auflösen
   Überall dort, wo v2.css mit direkten Kindern rechnet — Grid-Spalten,
   Flex-Reihen, `> *`-Regeln —, muss die Widget-Hülle aus dem Weg.
   `display: contents` löst ein Element auf und hebt seine Kinder eine Ebene
   nach oben; das Elternteil sieht sie dann als eigene Kinder.
   ========================================================================== */

/* Die Hintergrund-Ebenen des Hero sind absolut positioniert und brauchen den
   Hero selbst als Bezug. Steckt eine Widget-Huelle dazwischen, positionieren
   sie sich gegen die — gemessen 219 px Ueberstand. */
.v2-hero > .elementor-element,
.v2-hero__inner > .elementor-element,
.v2-hero__foot > .elementor-element,
.v2-proof__head > .elementor-element,
.v2-fig > .elementor-element,
.v2-panel > .elementor-element,
.v2-stack__card > .elementor-element,
.v2-stack-sec__head > .elementor-element,
.v2-voices__head > .elementor-element,
.v2-faq__head > .elementor-element,
.v2-contact__head > .elementor-element,
.v2-contact__meta > .elementor-element,
.v2-paper__inner > .elementor-element {
	display: contents;
}

/* ==========================================================================
   3 · Klasse sitzt am Wrapper, gemeint ist das Element darin
   Statt jede Regel zu verdoppeln, erben die Zielelemente ihre Typografie vom
   Wrapper. Das Elementor-Kit malt sonst literale Werte direkt auf `h2` und
   überschreibt alles, was hier steht — genau der Fehler, der in V1 eine weiße
   Überschrift auf weißem Grund erzeugt hat.
   ========================================================================== */

/* WICHTIG: Elementor-Container stehen standardmässig auf `flex-direction: column`.
   v2.css setzt an diesen Stellen nur `display: flex` und rechnet mit einer Zeile.
   Gemessen: die sechs Panels der Bahn stapelten sich senkrecht, die Bahn war
   864 px statt 3584 px breit, und der Seitwärtsweg kam auf 0. */
.e-con.v2-track__inner,
.e-con.v2-hero__foot,
.e-con.v2-hero__cta {
	flex-direction: row;
}

/* NUR Groesse und Zeilenhoehe erben, NICHT die Schriftfamilie.
   `font: inherit` holt auch die Familie vom Wrapper — und weil dort keine
   Display-Schrift steht, wurden ALLE Ueberschriften duenn und schmal statt
   Dunbar Tall 900. Gesehen an „Nicht nur gut - sondern ausgezeichnet". */
.v2-h2 .elementor-heading-title,
.v2-map__adr .elementor-heading-title {
	font-size: inherit;
	line-height: inherit;
	font-family: var(--font-display);
	font-weight: var(--fw-ultra);
	letter-spacing: var(--ls-tight);
	text-wrap: balance;
	color: inherit;
	margin: 0;
}

/* Text-Widgets: Elementor legt einen Absatz mit eigener Typografie an. */
.v2-lead .elementor-widget-container,
.v2-lead p,
.v2-panel p,
.v2-stack__card p,
.v2-fig__note,
.v2-fig__note p {
	font: inherit;
	color: inherit;
	margin: 0;
}

/* Der Editorial-Block ist die Ausnahme: dort SOLLEN die Absätze ihre eigene
   Größe und ihren eigenen Abstand behalten, es ist Fließtext. */
.v2-paper__cols p {
	font: inherit;
	color: inherit;
	margin: 0;
}

/* ==========================================================================
   4 · Der Satz, der hell wird
   In V2 trägt der Absatz `data-v2-lit`. Über den Elementor-Editor lässt sich
   ein solches Attribut zwar setzen, aber genauso leicht versehentlich löschen.
   Deshalb hängt V3 die Auszeichnung an eine KLASSE — die sieht man im Editor
   und sie überlebt jede Bearbeitung des Textes.
   ========================================================================== */

.v2-lit__text .elementor-widget-container,
.v2-lit__text p {
	font: inherit;
	color: inherit;
	margin: 0;
}

/* ==========================================================================
   5 · Der Stapel braucht seinen Zähler
   In V2 setzt das Template `--i` pro Karte. Im Editor wäre das ein Wert, den
   man beim Umsortieren von Hand nachziehen müsste — und genau das vergisst
   man. `nth-child` rechnet ihn selbst aus, egal wie die Karten liegen.
   ========================================================================== */

.v2-stack > .elementor-element:nth-child(1) { --i: 0; }
.v2-stack > .elementor-element:nth-child(2) { --i: 1; }
.v2-stack > .elementor-element:nth-child(3) { --i: 2; }
.v2-stack > .elementor-element:nth-child(4) { --i: 3; }
.v2-stack > .elementor-element:nth-child(5) { --i: 4; }
.v2-stack > .elementor-element:nth-child(6) { --i: 5; }
.v2-stack > .elementor-element:nth-child(7) { --i: 6; }
.v2-stack > .elementor-element:nth-child(8) { --i: 7; }

/* Elementor-Container statt <li>: die Sticky-Eigenschaften müssen auf die
   Container selbst, nicht auf eine Listenhülle. */
.v2-stack > .elementor-element.v2-stack__slot {
	position: sticky;
	top: calc(var(--lx-header-h, 105px) + 1.5rem + var(--i, 0) * 0.85rem);
}

/* ==========================================================================
   6 · Die horizontale Bahn
   Drei ineinanderliegende Container: Schiene, Stufe, Bahn. Elementors
   Vorgaben müssen an allen dreien weg, sonst stimmt weder die Höhe der
   Schiene noch die Breite der Bahn.
   ========================================================================== */

@media (min-width: 900px) {
	.e-con.v2-track__stage {
		display: flex;
		/* `row` ist Pflicht, nicht Kosmetik: bei `column` streckt `stretch` in
		   die WAAGERECHTE, und die Hoehe kommt weiter vom Inhalt. Gemessen war
		   die Bahn dadurch 516 statt 720 px hoch und die Karten standen als
		   schmaler Streifen am oberen Rand. */
		flex-direction: row;
		align-items: stretch;
	}

	.e-con.v2-track__inner {
		display: flex;
		flex-wrap: nowrap;
		width: max-content;
		/* `max-width: none` ist hier die entscheidende Zeile. Elementors
		   `max-width: 100%` klemmt die Bahn sonst auf Fensterbreite — und dann
		   hebt sich die Verschiebung `calc(-100% + 100vw)` exakt auf, weil die
		   Prozentangabe sich auf die EIGENE Breite des Elements bezieht.
		   Gemessen stand dort `calc(-11,16% + 285,7px)` bei einer Breite von
		   2560 px: rechnerisch null. Die Bahn lief, bewegte sich aber nicht. */
		max-width: none;
		/* Gemessen: `flex-shrink` stand trotz der Regel in v2.css auf 1 — dort
		   ist sie einklassig und verliert gegen Elementors spezifischere. Mit
		   `.e-con.` davor gewinnt sie. Ohne das druckt die Stufe die Bahn auf
		   Fensterbreite zusammen und die Verschiebung hebt sich rechnerisch auf. */
		flex: 0 0 auto;
		/* Elementor-Container richten ihre Kinder oben aus. Ohne `stretch`
		   bleiben die Karten so hoch wie ihr Inhalt und stehen als schmaler
		   Streifen am oberen Rand einer bildschirmhohen Stufe. */
		align-items: stretch;
	}

	/* Die Panels dürfen nicht schrumpfen. Elementor gibt Containern
	   `flex-shrink: 1`, und damit quetschte die Bahn alle sechs Karten in die
	   Fensterbreite statt sie nebeneinander zu legen. */
	.e-con.v2-panel {
		flex: 0 0 auto;
	}
}

/* ==========================================================================
   7 · Kleinigkeiten, die aus dem Container-Markup folgen
   ========================================================================== */

/* Bild-Widgets sollen die Fläche FÜLLEN, nicht ihre Eigenhöhe behalten.
   `height: auto` stand hier vorher und hat den Zuschnitt aus v2.css wieder
   ausgehebelt — das Pokalfoto blieb quadratisch statt 4:3. v3.css lädt nach
   v2.css und gewinnt bei gleicher Spezifität, also muss die Angabe hier
   stimmen. */
.v2-proof__shot .elementor-widget-container {
	display: block;
	width: 100%;
	height: 100%;
}

.v2-proof__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}

/* Elementors Video-Widget bringt eine eigene Hülle mit Seitenverhältnis mit. */
.v2-film .elementor-widget-container,
.v2-film .e-hosted-video {
	display: block;
	line-height: 0;
}

/* Listen aus Text-Widgets (Auszeichnungen, Hero-Schlagworte) behalten ihre
   Aufzählung aus v2.css, nicht Elementors Standardliste. */
.v2-awards,
.v2-hero__tags,
.v2-figures,
.v2-quotes {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   8 · Editor-Sicherheit
   Im Elementor-Canvas sind Sticky und Scroll-Timelines nicht nur nutzlos,
   sondern hinderlich — Karten würden sich beim Bearbeiten überlagern und der
   Stapel wäre nicht mehr einzeln anklickbar.
   ========================================================================== */

body.elementor-editor-active .v2-stack > .elementor-element.v2-stack__slot,
body.elementor-editor-active .v2-track__stage {
	position: static;
}

body.elementor-editor-active .v2-track__rail { height: auto; }

body.elementor-editor-active .v2-track__inner {
	display: grid;
	width: auto;
	animation: none;
	translate: none;
}

body.elementor-editor-active .v2-panel { width: auto; }
body.elementor-editor-active .v2-w { color: var(--text-primary); }

body.elementor-editor-active [data-v2-lines] {
	animation: none;
	clip-path: none;
}

/* Die drei Stufen des Hero-Titels. In V2 ist das H1 selbst das Raster; in
   Elementor sitzt die Klasse am Wrapper und das H1 liegt darin. */
/* Beim Hero-Titel NICHT `font: inherit` — das holte die Schriftfamilie vom
   Widget-Wrapper und machte aus Dunbar Tall wieder Como. Die drei Stufen
   darin bringen ihre Grössen aus v2.css mit. */
.v2-hero__h1 .elementor-heading-title {
	display: grid;
	gap: 0.15em;
	font-family: var(--font-display);
	font-weight: var(--fw-ultra);
	letter-spacing: var(--ls-tight);
	color: var(--text-primary);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Buttons in aufgeloesten Huellen
   Wo `display: contents` die Widget-Huelle entfernt, wird das <a> selbst zum
   Grid-Element und zieht sich auf die volle Spaltenbreite. v2.css regelt das
   ueber `.lx-btn` — das Elementor-Markup heisst aber `elementor-button`.
   Gemessen: „Hier Klicken" war 497 px breit statt 203.
   -------------------------------------------------------------------------- */
.v2-panel .elementor-button,
.v2-proof__head .elementor-button,
.v2-paper__inner .elementor-button,
.v2-stack__card .elementor-button {
	justify-self: start;
	width: auto;
}

/* --------------------------------------------------------------------------
   Button-Flächen ausdrücklich setzen

   Gemessen, nicht vermutet: bei jedem Button, dessen Widget-Hülle auf
   `display: contents` steht, kam die Textfarbe aus `.lx-btn-primary
   .elementor-button` an, die Goldfläche aber nicht — vier Buttons hatten
   dunkle Schrift auf Elementor-Grau und wären damit kaum lesbar gewesen.

   Was geprüft wurde: die Variable löst korrekt auf (identischer Wert am
   funktionierenden und am kaputten Button), ein inline gesetzter Verlauf
   OHNE `!important` greift nicht, MIT greift er. Eine Suche über alle
   Stylesheets nach `background … !important` fand jedoch NICHTS.

   Die auslösende Regel konnte ich also nicht benennen. Deshalb hier keine
   Reparatur an der falschen Stelle, sondern die Fläche ausdrücklich an genau
   den Elementen, um die es geht — und der Hinweis, dass die Ursache offen ist.
   -------------------------------------------------------------------------- */

.v2 .lx-btn-primary .elementor-button {
	/* Literal statt `var(--grad-gold-surface)`. Gemessen: unter einer Hülle mit
	   `display: contents` blieb die Variante mit der Variablen wirkungslos, ein
	   literaler Verlauf griff sofort — bei identischem Selektor, identischer
	   Spezifität und identisch auslesbarer Variablen. Die Ursache konnte ich
	   nicht benennen; die Werte sind dieselben wie in --grad-gold-surface und
	   müssen mitgezogen werden, wenn dort etwas geändert wird. */
	background-image: linear-gradient(105deg,
		#9c7c1e 0%, #b8912e 14%, #d4af37 30%, #ecd582 38%, #f7ecc0 41%,
		#ecd582 45%, #d4af37 60%, #9c7c1e 74%, #d4af37 88%, #ecd582 100%) !important;
	/* Gold als FARBE, nicht nur als Verlaufsbild. Gemessen: das Verlaufsbild
	   kam an vier Buttons nicht an, die Hintergrundfarbe dagegen schon (dort
	   stand Elementor-Grau). Die Farbe ist damit der garantierte Boden — greift
	   der Verlauf, liegt er darüber; greift er nicht, ist der Button trotzdem
	   goldfarben und die dunkle Schrift lesbar. */
	background-color: #d4af37 !important;
	color: var(--ink-1000) !important;
	border: 0;
}

.v2 .lx-btn-primary .elementor-button:hover {
	box-shadow: var(--glow-gold-md);
	transform: translateY(-1px);
}

.v2 .lx-btn-ghost .elementor-button {
	background-image: none !important;
	background-color: transparent !important;
	color: var(--text-primary);
	border: 1px solid var(--ink-600);
}

.v2 .lx-btn-ghost .elementor-button:hover {
	background-color: rgb(255 255 255 / 0.06) !important;
	border-color: var(--au-mid);
}

/* --------------------------------------------------------------------------
   Der Beschnitt gehört NICHT auf den Body

   In V2 sitzt die Klasse `v2` am <main>, in V3 am <body> — sonst greifen die
   Nachfahren-Regeln aus v2.css nicht. Damit landete aber auch
   `overflow-x: clip` auf dem Body, und dort ist es etwas völlig anderes: die
   Überlaufeinstellung des Body wirkt auf das Ansichtsfenster und stört sowohl
   `position: sticky` als auch die Scroll-Timelines der horizontalen Bahn.

   Deshalb hier zurücknehmen und an die Stelle setzen, die dem <main> der V2
   entspricht. `clip` ist dort richtig und `hidden` waere falsch: `hidden`
   erzeugt einen Scroll-Container und toetet jedes `sticky` darin.
   -------------------------------------------------------------------------- */
body.v2 {
	overflow-x: visible;
}

body.v2 .elementor {
	overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Maximalbreiten durchreichen

   Elementor setzt `max-width: var(--width)` an `.e-con` mit einem Selektor, der
   gegen die Ein-Klassen-Regeln aus v2.css gewinnt — gemessen stand an der FAQ
   `max-width: 100%` statt der vorgesehenen 1180 px, die Sektion lief über
   1265 px und wirkte in die Breite gezogen.

   Die Werte sind dieselben wie in v2.css und müssen dort mitgezogen werden.
   -------------------------------------------------------------------------- */

.e-con.v2-faq,
.e-con.v2-paper__inner {
	max-width: 1180px;
	margin-inline: auto;
}

.e-con.v2-proof,
.e-con.v2-stack-sec,
.e-con.v2-voices,
.e-con.v2-contact,
.e-con.v2-hero__inner {
	max-width: var(--v2-max);
	margin-inline: auto;
}

/* ==========================================================================
   Elementors Akkordeon auf die V2-Optik

   Das Widget bringt Kaesten mit Rahmen, eigene Innenabstaende und ein
   Plus-Symbol mit. V2 dagegen ist eine Liste aus Haarlinien mit nummerierten
   Fragen. Die Spezifitaet ist bewusst hoch angesetzt — Elementors eigene
   Regeln fuer dieses Widget sind vierteilig, und knapp kalkulierte Selektoren
   haben in diesem Projekt schon zweimal still verloren.
   ========================================================================== */

.v2-faq__list .e-n-accordion {
	display: grid;
	gap: 0;
	counter-reset: v2faq;
}

/* Kein Kasten — nur die obere Haarlinie, wie in V2. */
.v2-faq__list .e-n-accordion > .e-n-accordion-item {
	border: 0;
	border-top: var(--hairline-ink);
	border-radius: 0;
	background: none;
	margin: 0;
	counter-increment: v2faq;
}

.v2-faq__list .e-n-accordion > .e-n-accordion-item:last-child {
	border-bottom: var(--hairline-ink);
}

.v2-faq__list .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr) 2rem;
	align-items: center;
	gap: 1rem;
	padding: clamp(1.25rem, 2.5vw, 1.85rem) 0;
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

/* Die Ziffer zaehlt sich selbst — beim Umsortieren im Editor stimmt sie
   dadurch immer, ohne dass jemand daran denken muss. */
.v2-faq__list .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title::before {
	content: counter(v2faq, decimal-leading-zero);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: var(--ls-overline);
	color: var(--au-mid);
	font-variant-numeric: tabular-nums;
}

.v2-faq__list .e-n-accordion-item-title-header,
.v2-faq__list .e-n-accordion-item-title-header > * {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: clamp(1.125rem, 2.6vw, 2rem);
	line-height: 1.1;
	letter-spacing: var(--ls-tight);
	color: var(--text-primary);
	margin: 0;
	transition: color var(--dur-fast) var(--ease-out);
}

.v2-faq__list .e-n-accordion-item-title:hover .e-n-accordion-item-title-header,
.v2-faq__list .e-n-accordion-item-title:hover .e-n-accordion-item-title-header > * {
	color: var(--au-light);
}

/* AUSDRÜCKLICHE Platzierung statt automatischer.
   Elementor gibt dem Symbol eine eigene `order`, dadurch rutschte die Frage in
   die 32-px-Spalte und brach über vier Zeilen um, während das Symbol die
   900-px-Spalte belegte. Mit `grid-column` sitzt jede Zelle da, wo sie
   hingehört — unabhängig von Quelltextreihenfolge und `order`. */
.v2-faq__list .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title::before {
	grid-column: 1;
	grid-row: 1;
}

.v2-faq__list .e-n-accordion-item-title-header {
	grid-column: 2;
	grid-row: 1;
}

.v2-faq__list .e-n-accordion-item-title-icon {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	color: var(--au-mid);
	fill: var(--au-mid);
}

.v2-faq__list .e-n-accordion-item-title-icon svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: var(--au-mid);
}

/* Der Antwort-Container traegt bereits `v2-faq__a` aus dem Aufbau und damit
   Einzug und Textmass aus v2.css. Hier muss nur Elementors Rahmen weg. */
.v2-faq__list .e-n-accordion-item > .e-con {
	border: 0;
	background: none;
}


/* ==========================================================================
   Opt-in-Klassen fuer neue Seitentypen
   ==========================================================================
   Die Listen weiter oben zaehlen jede Sektionsklasse der Startseite einzeln auf.
   Das waechst mit jedem neuen Abschnitt, und wer einen Eintrag vergisst, bekommt
   ein still kaputtes Layout ohne Meldung — der teuerste Fehlertyp in diesem
   Projekt. Fuer neue Seiten gibt es deshalb zwei Klassen statt zwei Listen.

   Die 13 bestehenden Eintraege der Startseite bleiben unangetastet. Sie
   funktionieren, und `v3-flat` ist BREITER als sie: es loest ALLE direkten
   Widget-Huellen auf, nicht nur die aufgefuehrten. Diese Verhaltensaenderung auf
   die laufende Startseite zu ziehen waere Risiko ohne Gegenwert. Zwei
   Mechanismen nebeneinander sind hier der guenstigere Preis.
   ========================================================================== */

.e-con.v3-flat > .elementor-element,
.e-con.v3-flat > .e-con-inner > .elementor-element {
	display: contents;
}

/* Muss mitkommen: ohne Huelle wird das <a> selbst zum Rasterkind und zieht auf
   die volle Spaltenbreite. Gemessen an der Startseite: 497 px statt 203 px. */
.v3-flat .elementor-button {
	justify-self: start;
	width: auto;
}

/* ACHTUNG, gilt beim Bauen: `v3-flat` gehoert NICHT auf `.lx-row`. Dort sitzen
   `lx-row__num`, `__title`, `__desc`, `__arrow` bereits als Widget-Klassen auf
   den Huellen — die Huelle IST das Rasterkind. components.css:470 loest nur den
   Zwischencontainer auf. Wer hier flach macht, zerlegt das Vier-Spalten-Register. */

.e-con.v3-shell {
	max-width: var(--v2-max);
	margin-inline: auto;
}

.e-con.v3-shell--text {
	max-width: 1180px;
	margin-inline: auto;
}