/*
Theme Name: LatEXtravaganza
Template: hello-elementor
Description: Kind-Theme fuer den WordPress-Nachbau von latextravaganza.com. Schriften, Farben, Ueberschriften, Links, Formulare und Abstaende stehen in den Elementor-Website-Einstellungen und Widget-Einstellungen. Hier steht nur, was Elementor und die Plugins nicht als Einstellung anbieten; jede Regel nennt den Grund.
Author: Coding-Claudette (KI Denkfabrik) fuer MOS-Computer GbR
Version: 1.1.0
Text Domain: latextravaganza
*/

/*
 * Grundsatz (Michael, 02.11.2026): zuerst die Moeglichkeiten von WordPress, Elementor Pro und den
 * gekauften Plugins nutzen; eigenes CSS nur, wo es keine Einstellung gibt.
 */

/* Ueberschriften-Abstand wie Contao (25 px unten): Elementor regelt Ueberschriften im Kit nur in Schrift und Farbe, nicht im Abstand. */
body .elementor-widget-text-editor h1, body .elementor-widget-text-editor h2, body .elementor-widget-text-editor h3,
body .elementor-widget-text-editor h4, body .elementor-widget-text-editor h5, body .elementor-widget-text-editor h6 { margin: 0 0 25px; }
@media (max-width: 767px) {
	body .elementor-widget-text-editor h1 { margin-bottom: 15px; }
	body .elementor-widget-text-editor h2, body .elementor-widget-text-editor h3,
	body .elementor-widget-text-editor h5, body .elementor-widget-text-editor h6 { margin-bottom: 10px; }
	body .elementor-widget-text-editor h4 { margin: 25px 0 10px; }
}
/* Listen in den uebernommenen Contao-Texten: Einzug wie im Original (Text-Editor hat dafuer keine Einstellung). */
body .elementor-widget-text-editor ul, body .elementor-widget-text-editor ol { margin: 0 0 15px 1.2em; padding: 0; }

/* ---------- Kopfleiste ----------
 * Anheften: Elementor Pro "Sticky" mit "Effekte ab 50 px". Elementor hat aber keine Einstellung,
 * um die Leiste ueber dem Titelbild schweben zu lassen (Contao: 50 px vom oberen Rand) und
 * um sie beim Anheften zu verkleinern (Contao "#top-wrapper.fixed": 60 px hoch, Logo 200 px). */
body .e-con.lx-kopf { position: absolute; top: 50px; left: 0; right: 0; z-index: 1000; }
body.admin-bar .e-con.lx-kopf { top: 82px; }
body.admin-bar .e-con.lx-kopf.elementor-sticky--effects { top: 32px; }
.lx-kopf .lx-kopf-leiste, .lx-kopf .lx-kopf-leiste img, .lx-kopf .elementor-nav-menu--main .elementor-item { transition: all 0.3s ease; }
.lx-kopf.elementor-sticky--effects .lx-kopf-leiste { --min-height: 60px; min-height: 60px; }
.lx-kopf.elementor-sticky--effects .lx-kopf-leiste .elementor-widget-image img { width: 200px; }
.lx-kopf.elementor-sticky--effects .elementor-nav-menu--main .elementor-item { padding-top: 21px !important; padding-bottom: 21px !important; }
.lx-kopf .lx-kopf-leiste > .elementor-widget-image { flex-shrink: 0; }
@media (max-width: 767px) { body .e-con.lx-kopf { top: 0; } }

/* Teilen-Knopf (Contao .mod_socials): Symbole klappen beim Klick auf das Teilen-Zeichen heraus.
 * Elementors Social-Icons-Widget kann nicht auf- und zuklappen. */
.lx-teilen { position: relative; }
.lx-teilen .lx-teilen-knopf { color: #fff; cursor: pointer; display: inline-block; padding: 0 0 0 40px; font-size: 15px; }
.lx-teilen .lx-teilen-symbole { position: absolute; top: 50%; transform: translateY(-50%); right: 30px; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.8s ease; margin-right: 30px; }
.lx-teilen.offen .lx-teilen-symbole { opacity: 1; visibility: visible; margin-right: 0; }
.lx-teilen .lx-teilen-symbole a { display: inline-block; width: 33px; padding: 10px 5px; margin: 0 1px; text-align: center; background: rgba(255, 255, 255, 0.2); color: #fff; line-height: 1; }
.lx-teilen svg { width: 15px; height: 15px; fill: currentColor; vertical-align: middle; }

/* ---------- Startseite: Video-Slider ----------
 * Weder Elementor Pro (Slides: nur Bilder) noch Happy Addons Pro (Slider ohne Videos) noch Premium Addons Pro
 * koennen Vollbild-Videos als Folien mit Wechsel am Videoende. Deshalb eigener Slider (HTML-Widget auf der Startseite),
 * nach den Einstellungen des alten Revolution Sliders: Vollbild, Uebergang "fade", Pfeile "preview3". */
.lx-buehne { position: relative; height: 100vh; min-height: 500px; overflow: hidden; background: #000; }
.lx-buehne .lx-folie { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; }
.lx-buehne .lx-folie.aktiv { opacity: 1; visibility: visible; }
.lx-buehne video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Text: im Original bei rund 71 % der Fensterhoehe gemessen */
.lx-buehne .lx-buehne-text { position: absolute; left: 0; right: 0; top: 71%; transform: translateY(-50%); text-align: center; color: #fff;
	font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 45px; line-height: 1.2; text-transform: none; z-index: 3; }
/* Pfeile: erst sichtbar, wenn die Maus ueber dem Slider ist (Contao hideThumbs) */
.lx-buehne .lx-pfeil { position: absolute; top: 50%; transform: translateY(-50%); width: 70px; height: 70px; z-index: 6; display: block; opacity: 0; transition: opacity 0.3s; }
.lx-buehne:hover .lx-pfeil { opacity: 1; }
.lx-buehne .lx-pfeil-links { left: 0; }
.lx-buehne .lx-pfeil-rechts { right: 0; }
.lx-buehne .lx-pfeil::after { content: ''; position: absolute; inset: 0; z-index: 2; background: #fff; }
/* Pfeilzeichen: Form aus der alten Slider-Symbolschrift (revicons left/right-open-big), grau, beim Darueberfahren schwarz */
.lx-buehne .lx-pfeil-zeichen { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; color: #aaa; transition: color 0.3s; }
.lx-buehne .lx-pfeil-zeichen svg { fill: currentColor; }
.lx-buehne .lx-pfeil:hover .lx-pfeil-zeichen { color: #000; }
.lx-buehne .lx-pfeil-feld { position: absolute; top: 0; display: flex; align-items: center; min-height: 70px; background: rgba(0, 0, 0, 0.75);
	transform: scale(0, 1); transition: transform 0.2s; z-index: 1; white-space: nowrap; }
.lx-buehne .lx-pfeil-rechts .lx-pfeil-feld { right: 0; padding-right: 70px; transform-origin: 100% 50%; flex-direction: row; }
.lx-buehne .lx-pfeil-links .lx-pfeil-feld { left: 0; padding-left: 70px; transform-origin: 0% 50%; flex-direction: row-reverse; }
.lx-buehne .lx-pfeil:hover .lx-pfeil-feld { transform: scale(1, 1); }
.lx-buehne .lx-pfeil-bild { display: block; min-width: 90px; height: 70px; }
.lx-buehne .lx-pfeil-titel { padding: 0 30px; font-size: 16px; color: #fff; font-family: 'Open Sans', sans-serif; }
.lx-buehne .lx-maus { position: absolute; bottom: 60px; left: 0; right: 0; margin: 0 auto; width: 32px; height: 46px; border: 2px solid #fff; border-radius: 15px; z-index: 5; }
.lx-buehne .lx-maus span { display: block; width: 6px; height: 6px; background: #fff; border-radius: 50%; margin: 6px auto 0; animation: lx-rad 1.7s infinite ease; }
@keyframes lx-rad { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } }
@media (max-width: 767px) {
	.lx-buehne .lx-buehne-text { font-size: 24px; }
	.lx-buehne .lx-pfeil { width: 50px; height: 50px; }
	.lx-buehne .lx-pfeil-zeichen svg { width: 9px; height: 20px; }
}

/* ---------- News-Kacheln der Startseite (Loop-Vorlage "News-Kachel") ----------
 * Contao newsteaser_v1: Streifen 35 % hoch; beim Darueberfahren waechst er ueber die ganze Kachel,
 * der Anriss erscheint und ein rotes Plus faehrt herein. Elementor kennt fuer Container nur Hover-Farben,
 * keine wachsende Hoehe und kein Einblenden einzelner Widgets; deshalb hier. */
.lx-kachel { position: relative; aspect-ratio: 4 / 3; }
.e-con.lx-kachel { overflow: hidden; }
.e-con.lx-kachel > .e-con.lx-kachel-text { position: absolute; left: 0; bottom: 0; width: 100%; height: 35%; overflow: hidden;
	background: rgba(0, 0, 0, 0.3); transition: all 0.3s ease; }
.e-con.lx-kachel:hover > .e-con.lx-kachel-text { height: 100%; background: rgba(0, 0, 0, 0.5); }
.lx-kachel .lx-kachel-anriss { max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; transition: all 0.3s ease; }
.lx-kachel:hover .lx-kachel-anriss { max-height: 400px; opacity: 1; visibility: visible; }
.lx-kachel .lx-kachel-anriss p { margin-bottom: 0; }
.lx-kachel:hover .lx-kachel-anriss p { margin-bottom: 15px; }
.e-con.lx-kachel::after { content: '+'; position: absolute; right: 0; bottom: -100%; width: 65px; height: 65px; line-height: 65px; text-align: center;
	background: #9d0d16; color: #fff; font-size: 26px; font-weight: 700; z-index: 2; transition: all 0.3s ease; pointer-events: none; }
.e-con.lx-kachel:hover::after { bottom: 0; }
/* ganze Kachel klickbar ueber den Titel-Link (ein Container-Link wuerde die Datums-/Titel-Links verschachteln) */
.lx-kachel .elementor-heading-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }

/* ---------- Seitenleiste der Rubber-Night-Seiten (WordPress-Widget "Navigationsmenue") ----------
 * Contao .subnav zeigt alle Ebenen aufgeklappt; Elementors Menue-Widget klappt Unterpunkte immer ein.
 * Deshalb das WordPress-eigene Menue-Widget, hier nur gestaltet. */
.lx-seitenleiste ul { list-style: none; margin: 0; padding: 0; }
.lx-seitenleiste ul ul { padding-left: 10px; }
.lx-seitenleiste a { display: block; padding: 5px 10px; color: rgba(255, 255, 255, 0.7) !important; font-size: 14px; }
.lx-seitenleiste a:hover, .lx-seitenleiste .current-menu-item > a { background: rgba(255, 255, 255, 0.1); }

/* ---------- Formulare ----------
 * Felder, Beschriftungen und Knopf stehen in den Elementor-Website-Einstellungen (Formularfelder, Schaltflaechen).
 * Contao zeigte die Zustimmung "AGBs und Datenschutz" als Rahmen mit roter Legende; dafuer hat Elementor keine Einstellung. */
.lx-formular .elementor-field-type-radio { border: 1px solid #fff; padding: 20px 15px 10px; margin-top: 15px; position: relative; }
.lx-formular .elementor-field-type-radio > label { position: absolute; top: -12px; left: 10px; background: #9d0d16; padding: 2px 8px; font-size: 13px; }
.lx-formular .elementor-field-type-html { font-size: 13px; }