/* Brücke EclipseX 4.13 -> EclipseX 6 (Contao 5.7): Abweichungen der neuen styles.css auf den alten Stand
 * zurückholen. Nach customize.css geladen (fe_page*.html5). Werte vom Live-Web (Okt. 2026) übernommen. */

:root {
	--accentColor: #d0b35d;
	/* Hauptmenü-Hervorhebung (Kontakt): früher dunkelgrau ohne Rahmen */
	--menu-highlight-bg-color: #555454;
	--menu-highlight-border-color: #555454;
	--menu-highlight-border-width: 0;
	--menu-highlight-color: rgba(255, 255, 255, .9);
	--menu-highlight-padding-lr: 10px;
}

/* Überschriften: EclipseX 6 gibt <h2 class="h2"> aus, dadurch schlagen die Theme-Regeln „.h2“ die
 * Kundenregeln „html body h2“ aus defaults.scss. Dieselben Werte hier mit Klasse. */
html body h1.h1 { line-height: 1.1em; }
html body h2.h2 { line-height: 1.1em; }
html body h3.h3 { font-size: 2.2rem; line-height: 1.1em; }
@media (max-width: 768px) {
	html body h2.h2 { font-size: 2.4rem; }
	html body h3.h3 { font-size: 2.4rem; }
}

/* Hyperlink-Buttons: Zeilenhöhe vom Elternelement, weiße Varianten mit 2px Rahmen */
.ce_hyperlink a.hyperlink_txt { line-height: inherit; }
.ce_hyperlink.btn-white a.hyperlink_txt,
.ce_hyperlink.btn-white-outline a.hyperlink_txt { border-width: 2px; }


/* Nach-oben-Link: alter Stil (weißer Kreis, erscheint erst beim Scrollen, mobil aus) */
#top_link { position: fixed; display: block; opacity: 0; width: 45px; height: 45px; line-height: 45px; right: 15px; bottom: -40px;
	z-index: 10005; border-radius: 0; background: none; overflow: visible; transition: all .2s ease; }
#top_link a { position: relative; display: block; float: left; width: 100%; height: 100%; background: rgba(255,255,255,.9);
	text-align: center; border-radius: 100%; box-shadow: 0 0 25px 0 rgba(0,0,0,.04); border: 1px solid rgb(235,237,235);
	color: var(--accentColor); font-size: 20px; line-height: 40px; transition: all .6s ease; }
#top_link i { display: inline-block; font-size: 20px; line-height: 20px; }
#top_link:hover a { margin-top: -7px; }
#top_link .progress-ring { display: none; }
body.fixed-header #top_link { opacity: 1; bottom: 45px; }
body.fixed-header.cookiebar_open #top_link { opacity: 1; bottom: 70px; }
@media only screen and (max-width: 767px) { #top_link { display: none; } }

/* Akkordeon: Contao 5 rendert den Toggler als <button> */
.ce_accordion .toggler,
.ce_accordion .toggler.ui-accordion-header { font-family: inherit; font-size: inherit; font-weight: 700; line-height: 30px;
	color: inherit; padding: 0 20px 20px; border-radius: 0; display: block; position: static; }
.ce_accordion .toggler:before { width: 25px; height: 25px; margin-left: 15px; font: 1.3em/28px FontAwesome; opacity: 1; clear: both; }
.ce_accordion { margin-bottom: 1px; }
.ce_accordion .accordion { padding: 20px; }

/* Newsliste v3: EclipseX 6 lädt news_newslist-v3.css (runde Ecken, ohne Rahmen). Alter Stil: eckig mit Rahmen um den Text.
 * Contao 5 kennt keine Meta-Felder-Auswahl mehr; die genutzten Module (167, 690) zeigten nur das Datum. */
.newslist-v3-inside { border-radius: 0; overflow: visible; }
.newslist-v3 .image_container { border-radius: 0; }
.newslist-v3 .content { border: 1px solid rgb(220, 221, 221); }
html body .news-newslist .mod_newslist .h6 { font-size: 1.5rem !important; line-height: 1.3; }   /* Kunden-Regel galt für h6, jetzt div.h6 */
.newslist-v3 .info .author,
.newslist-v3 .info .comments { display: none; }

/* Swiper-Pfeile: EclipseX 6 rendert <button> und lädt Swiper 11 (swiper-icons, flex) nach den alten Regeln.
 * Alter Stil: FontAwesome-Winkel 70px, weiß mit Schatten, halbtransparent. */
html body .swiper-button-next,
html body .swiper-button-prev { display: block; background: none; border: 0; padding: 0; width: 27px; height: 44px; margin-top: -75px; text-align: left;
	font: inherit; color: inherit; opacity: .3 !important; transition: all .3s ease; }
html body .swiper-container:hover .swiper-button-next,
html body .swiper-container:hover .swiper-button-prev { opacity: 1 !important; }
html body .swiper-button-next:after,
html body .swiper-button-prev:after { display: inline; width: auto; height: auto; font-family: FontAwesome; content: "\f105"; font-size: 70px;
	line-height: 70px; color: rgba(255,255,255,.8); text-shadow: 1px 1px 1px rgba(0,0,0,.3); }
html body .swiper-button-prev:after { content: "\f104"; }
html body .ce_swiper-slider-start.style2_dark .swiper-button-next:after,
html body .ce_swiper-slider-start.style2_dark .swiper-button-prev:after { text-shadow: none; color: rgba(0,0,0,.9); }
html body .ce_swiper-slider-start.style2_light .swiper-button-next:after,
html body .ce_swiper-slider-start.style2_light .swiper-button-prev:after { text-shadow: none; color: rgba(255,255,255,.9); }

/* Autogrid 2: Spalteninhalt liegt in div.attributes; Bilder mit height:100% (Goldrahmen-Block) brauchen die volle Spaltenhöhe */
.fmel-border-imgs .autogrid_row > .column > .attributes { height: 100%; }

/* Fließtext „format-p-large“: früher Zeilenhöhe vom Body (Desktop 1.75, mobil 1.4) */
.ce_text.format-p-large p, .ce_text.format-p-large ul, .ce_text.format-p-large ol { line-height: inherit; }
.ce_text.format-p-large ul, .ce_text.format-p-large ol { font-size: inherit; }

/* Hyperlinks mobil: früher volle Breite und linksbündig; Ausrichtungsklassen heißen jetzt h-align-* */
@media only screen and (max-width: 767px) {
	html body .ce_hyperlink a.hyperlink_txt { display: block; }
	.ce_hyperlink.h-align-right { text-align: left !important; }
}

/* Swiper in vollbreiten Artikeln: EclipseX 6 rückt ihn mobil 20px ein (ce_swiper_slider_start.css), früher randlos */
@media only screen and (max-width: 767px) {
	.mod_article.fullwidth .ce_swiper-slider-start { margin-left: 0; margin-right: 0; }
	/* Button-Zeile im Slider (Flex-Spalte, zentriert) volle Breite wie früher */
	html body #slider .offset_layer + .ce_bgimage-inside > .autogrid_row { width: 100%; }
}

/* Mobilmenü: Regeln aus der alten framework.css (EclipseX 4.13), mit „html body“ gegen die neue styles.css */
/* früher ab 768px ausgeblendet, customize.css blendet es bis 1024px wieder ein (html #mmenu) */
@media only screen and (min-width: 1025px) { html body #mmenu {display: none;} }
html body #mmenu {left: 0px; right: 0px; height: calc(100% - 70px); position: fixed; top: 70px; z-index: 1000; min-width: 80%; transform: translateY(calc(-100% - 55px)); transition: transform 0.3s ease; -webkit-transition: transform 0.3s ease; background: rgb(255,255,255);}
html body.mmenu_open #mmenu {transform: translate(0)!important;}
html body #mmenu .scrollable {height: calc(100% - 50px); overflow-y: auto;}
html body #mmenu #mmenu_top {padding: 20px; background: rgb(255,255,255); overflow: visible; position: relative;}
html body #mmenu #mmenu_middle {padding: 0 20px 20px 20px; background: rgb(255,255,255);}
html body #mmenu #mmenu_bottom {background: rgb(255,255,255); position: fixed; bottom: 0; left: 0; right: 0; display: flex; align-items: center; padding: 5px 20px 10px 20px;}
html body #mmenu .mod_navigation li.submenu {position: relative;}
html body #mmenu .mod_navigation li.submenu .opener {position: absolute; right: 0; top: 0; width: 30px; height: 34px; z-index: 10;}
html body #mmenu .mod_navigation li.submenu a {z-index: 5;}
html body #mmenu .mod_navigation li a.submenu:after {content: "\f107"; font-family: FontAwesome; position: absolute; right: 10px; top: 3px; margin-left: 15px; transition-duration: 0.3s; transition-property: transform;}
html body #mmenu .mod_navigation.mobile_horizontal li a.submenu.open:after {transform:rotate(180deg);}
html body #mmenu .mod_navigation.mobile_horizontal li a.submenu:after {transform:rotate(-90deg);}
html body #mmenu .mod_navigation.mobile_horizontal li a.submenu.open:after {transform:rotate(90deg); float: left; margin-left: 0;}
html body #mmenu .mod_navigation.mobile_horizontal li a.submenu.open {border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 10px; margin-bottom: 10px;}
html body #mmenu .mod_navigation.mobile_horizontal .level_2 li a.submenu.open {border-bottom: 0; padding-bottom: 0; margin-bottom: 0;}
html body #mmenu .mod_navigation.mobile_horizontal .level_2 li a.submenu.open:after {transform:rotate(90deg);}
html body #mmenu li i {margin-right: 10px;}
html body #mmenu .mod_socials {margin-right: 20px;}
html body #mmenu .mod_socials a i {line-height: 17px; padding: 5px; margin-right: 1px; background: rgba(0,0,0,0.05); font-size: 17px; display: inline-block; height: 27px; width: 27px; text-align: center; margin-bottom: 1px;}
html body #mmenu .mod_langswitcher {position: absolute; top: 50%; transform: translateY(-50%); right: 10px; margin: 0; text-align: right;}
html body #mmenu .mod_langswitcher .mod_langswitcher_inside:before {border-color: rgb(51, 51, 51);}
html body #mmenu .mod_search {width: 75%;}
html body #mmenu .mod_search input {border-radius: 5px; background: rgba(255,255,255,0.2); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIzMy43MDZweCIgaGVpZ2h0PSIzMy43MDZweCIgdmlld0JveD0iMCAwIDMzLjcwNiAzMy43MDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMzLjcwNiAzMy43MDYiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnIG9wYWNpdHk9IjAuOCI+PHBhdGggZmlsbD0iIzkzOTM5MyIgZD0iTTE3Ljc1NSwwLjk0NUMxNi4yMDksMC4zMTgsMTQuNTc2LDAsMTIuOSwwYy0xLjY3NSwwLTMuMzA4LDAuMzE4LTQuODU0LDAuOTQ1QzYuNDQ1LDEuNTk0LDUuMDEsMi41NDcsMy43NzgsMy43NzhDMi41NDcsNS4wMSwxLjU5NCw2LjQ0NSwwLjk0NCw4LjA0N0MwLjMxOCw5LjU5MywwLDExLjIyNiwwLDEyLjljMCwxLjY3NiwwLjMxOCwzLjMwOSwwLjk0NCw0Ljg1NGMwLjY0OSwxLjYwMSwxLjYwMywzLjAzNywyLjgzNCw0LjI2OWMxLjIzMSwxLjIzLDIuNjY3LDIuMTg2LDQuMjY5LDIuODM0YzEuNTQ2LDAuNjI3LDMuMTc5LDAuOTQ0LDQuODU0LDAuOTQ0YzEuNjc2LDAsMy4zMDktMC4zMTcsNC44NTQtMC45NDRjMS42MDItMC42NDgsMy4wMzctMS42MDQsNC4yNy0yLjgzNGMxLjIyOS0xLjIzLDIuMTg1LTIuNjY4LDIuODM0LTQuMjY5YzAuNjI1LTEuNTQ2LDAuOTQzLTMuMTc5LDAuOTQzLTQuODU0YzAtMS42NzUtMC4zMTgtMy4zMDgtMC45NDMtNC44NTRjLTAuNjQ5LTEuNjAyLTEuNjA0LTMuMDM3LTIuODM0LTQuMjY5QzIwLjc5MiwyLjU0NywxOS4zNTQsMS41OTQsMTcuNzU1LDAuOTQ1eiBNMjAuNjU4LDIwLjY1OGMtNC4yNzcsNC4yNzYtMTEuMjM3LDQuMjc2LTE1LjUxNSwwYy00LjI3OC00LjI3Ny00LjI3Ny0xMS4yMzcsMC0xNS41MTVzMTEuMjM3LTQuMjc3LDE1LjUxNSwwUzI0LjkzNywxNi4zODEsMjAuNjU4LDIwLjY1OHoiLz48cmVjdCB4PSIyNi45NTIiIHk9IjIwLjY5NyIgdHJhbnNmb3JtPSJtYXRyaXgoMC43MDcxIC0wLjcwNzEgMC43MDcxIDAuNzA3MSAtMTEuNTYzOCAyNy45MTc1KSIgZmlsbD0iIzkzOTM5MyIgd2lkdGg9IjEuOTMxIiBoZWlnaHQ9IjE0LjQ0MiIvPjwvZz48L3N2Zz4=); background-repeat: no-repeat; background-position: 93% center; background-size: 20px; padding: 5px 50px 5px 20px; height: 36px!important; margin-bottom: 0;}
html body #mmenu .mod_search .widget {width: 100%!important; margin-bottom: 0; height: auto!important;}
html body #mmenu .mod_search .submit {display: none;}
html body #mmenu .mod_search .label,
html body #mmenu .mod_search .close-window {display: none;}
html body #mmenu .mod_navigation li a {display: block; padding: 4px 40px 4px 0;}
html body #mmenu .mod_navigation li a.open,
html body #mmenu .mod_navigation li a.active,
html body #mmenu .mod_navigation li a:focus {font-weight: bold;}
html body #mmenu nav.mobile_horizontal {display: none;}
html body #mmenu nav.mobile_horizontal li.hidden {display: none !important;}
html body #mmenu nav.mobile_horizontal ul ul li {display: none;}
html body #mmenu nav.mobile_horizontal li.open > ul > li {display: block;}
html body #mmenu nav.mobile_horizontal li.open > a {font-weight: bold;}
html body #mmenu nav.mobile_vertical ul > li > ul {display: none;}
html body #mmenu nav.mobile_vertical ul > li.open > ul {display: block;}
html body #mmenu nav.mobile_vertical ul ul {padding-left: 15px;}
html body #mmenu .mod_mmenu_custom_nav a {display: inline-block; margin-right: 8px;}
html body #mmenu nav.mobile_horizontal.show { display: none; }   /* neue Vorlage setzt „show“, live nur die vertikale Navigation */
html body #mmenu .mod_navigation ul li a.highlight { color: var(--accentColor); background: none; border: 0; padding: 4px 40px 4px 0; }
html body #mmenu .mod_navigation li a { line-height: 1.4; }
html body #mmenu .mod_socials a i { border-radius: 0; }

/* Newsreader: Contao 5 kennt keine Meta-Felder-Auswahl mehr; die Reader-Module (35, 688) zeigten nichts davon */
.newsreader > .info { display: none; }

/* Listen: alter Stil (Punkte, 4px Abstand) statt EclipseX-6-Listen mit Trennlinien.
 * Selektoren wie früher (ohne „html body“), damit die Kundenregeln aus defaults.scss weiter gewinnen */
.ce_text ul, .ce_list ul, .ce_text ol, .ce_list ol { margin-bottom: 15px; }
.ce_text li, .ce_list li { line-height: 1.5em; }
.ce_list:not(.hasIcon) ul, .ce_list:not(.hasIcon) ol { padding-left: 25px; }
.ce_text ul li, .ce_list ul li { list-style-type: disc; list-style-position: outside; margin-bottom: 4px; padding-top: 0; padding-bottom: 0; }
.ce_list:not(.hasIcon) li:after { display: none; }
.ce_list.hasIcon ol li, .ce_list.hasIcon ul li { margin-bottom: 20px; padding: 0; }

/* Autogrid mobil: früher für alle Spalten ohne Innenabstand und 25px Abstand unten; grid.css 6.x nimmt Spalten mit Mobilklasse (col_12_m …) aus */
@media only screen and (max-width: 767px) {
	.column[class*="col_"], .autogrid_grid .column { padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 25px; }
	/* leere Abstandsspalten blendet 6.x aus, früher blieben sie (0px hoch + 25px Abstand) */
	.column:empty, .column .attributes:empty, .column:has(> .attributes:empty) { display: block; }
	/* Hintergrundbild links (img-leftside): 6.x setzt mobil Element und Inhalt auf 10px Innenabstand; früher Element 0, Inhalt seitlich 20px */
	.ce_bgimage.img-leftside-33, .ce_bgimage.img-leftside-50 { padding: 0; }
	.ce_bgimage.img-leftside-33 .ce_bgimage-inside, .ce_bgimage.img-leftside-50 .ce_bgimage-inside { padding-left: 20px; padding-right: 20px; }
}

/* Kundenregeln aus defaults.scss, die gegen neue, spezifischere 6.x-Regeln verlieren:
 * - „.color-white a:not(.link-white):not(.ce_hyperlink a)“ (0,3,2) färbt Textlinks weiß, früher gold
 * - „.ce_text ul li:first-child { padding-top: 0 }“ nimmt dem ersten Listenpunkt in .ul-grid den Innenabstand */
html body .color-white .ce_text.format-p-large p a,
html body .color-white .ce_text.format-p-large li a { color: #d0b35d !important; }
html body .ul-grid ul li:first-child { padding-top: 10px; }

/* Kundenzusätze aus der alten files/cto_layout/css/styles.css (direkt im Theme-CSS geändert, vom EclipseX-6-Paket überschrieben) */
.smartmenu { display: none !important; }
.cookiebar { padding: 15px 110px 15px 15px; }
.virtuelle-tour .container { max-width: 100% !important; text-align: center !important; }

/* Alias-Elemente mit Autogrid-Spalte, deren Original ebenfalls eine Spalte hat: 6.x verschachtelt column > column
 * (z. B. Apartment-Boxen /lp/lechner-living-apartments). Die innere Spalte füllt die äußere, wie früher. */
/* mit ID, damit auch Kundenregeln wie „html .apartment_page #apartments .container .col_4 {flex:0 0 50% !important}“ nicht greifen */
html body #contentwrapper .autogrid_row > .column > .column,
html body #contentwrapper .autogrid_row > .column > .attributes > .column { flex: 0 0 100% !important; max-width: 100% !important; width: 100%; padding-left: 0 !important; padding-right: 0 !important; margin: 0; }

/* Tabellen: früher ohne Zeilenumbruch, zu breite Tabellen scrollbar (alte scripts.js setzte .overflow) */
.ce_table table { white-space: nowrap; }
.ce_table { overflow-x: auto; }

/* Hyperlink-Hover: 6.x macht beim Hover nur opacity .8, früher füllten Outline- und weiße Buttons die Fläche
 * (Werte aus der alten styles.css bzw. dem Theme-Designer: Zweitfarbe #57595e) */
/* !important: Theme-Designer-Regeln mit :not()-Ketten (0,5,1) setzen Farbe und Rahmen der Outline-Buttons */
html body .ce_hyperlink.btn-accent-outline a:hover { background: rgb(37,37,37); border-color: rgb(37,37,37) !important; color: #fff !important; }
html body .ce_hyperlink.btn-second-outline a:hover { background: #57595e; border-color: #57595e !important; color: #fff !important; }
html body .ce_hyperlink.btn-white a:hover { background: var(--accentColor); color: #fff; }
html body .ce_hyperlink.btn-white-outline a:hover { background: #fff; border-color: #fff; color: #555454; }

/* Hyperlink-Icon: 6.x setzt das Icon absolut in einen Kreis (40px, Rahmen) und schiebt den Text beim Hover.
 * Früher (btn-animated) stand es klein vor dem Text und wurde beim Hover nur eingeblendet. */
html body .ce_hyperlink.has-icon a i,
html body .ce_hyperlink.has-icon.icon-animated a i,
html body .ce_hyperlink.has-icon.icon-animated a:hover i { position: static; display: inline-block; transform: none; width: auto; height: auto;
	line-height: inherit; font-size: inherit; border: 0 !important; border-radius: 0; background: none; box-shadow: none; margin: 0 10px 0 0; }
html body .ce_hyperlink.has-icon.icon-pos-before a > span,
html body .ce_hyperlink.has-icon.icon-animated.icon-pos-before a:hover > span { padding: 0; transform: none; }

/* Slider in 50/50-Artikeln (fmel-swiper-50-50): Kundenregel setzt height:100% bis in den Slider,
 * in 6.x liegt dazwischen div.attributes ohne Höhe → Slider nur so hoch wie seine Buttons */
html body .fmel-swiper-50-50 .autogrid_row > .column > .attributes { height: 100%; }
/* Dieselbe Kundenregel („.ce_swiper-slider-start * { height:100% }“) macht die Pfeile 635px hoch. Früher stand der Pfeil
 * oben im Element, das neue <button> zentriert ihn → Pfeil rutscht nach unten. Höhe = Zeilenhöhe des Pfeils, genau mittig. */
html body .fmel-swiper-50-50 .ce_swiper-slider-start .swiper-button-next,
html body .fmel-swiper-50-50 .ce_swiper-slider-start .swiper-button-prev { height: 70px; margin-top: -35px; }

/* Hauptmenü: über 1300px greift die Theme-Schrift 16px/2px, bis ca. 1360px rutscht das Menü unter das Logo
 * (auch live). Die 14px-Stufe aus customize.scss bis 1399px verlängern. */
@media (min-width: 1301px) and (max-width: 1399px) {
	html body #header .mainmenu ul li { margin-left: 5px; margin-right: 5px; }
	html body #header .mainmenu ul li a { font-size: 14px; letter-spacing: 1px; }
}

/* Referenzen (mod_portfoliolist_v8): 6.x legt das Overlay .content (z-index 100) über das verlinkte Bild, ein Klick aufs Bild
 * landet im Leeren. Overlay klickdurchlässig, nur seine Icons bleiben Links. Optik des Overlays wie früher:
 * Titel weiß/fett, Unterzeile ohne schwarze Pille, Icon-Kästen halbtransparent statt weiß. */
html body .mod_portfoliolist_v8 .item .content { pointer-events: none; }
html body .mod_portfoliolist_v8 .item .content a { pointer-events: auto; }
html body .mod_portfoliolist_v8 .item .info .title { color: #fff; font-weight: 700; margin-bottom: 0; }
html body .mod_portfoliolist_v8 .item .info .subline { background: none; padding: 0; border-radius: 0; text-align: left; }
html body .mod_portfoliolist_v8 .item a.linkbar-link { background: rgba(255,255,255,.15); }
html body .mod_portfoliolist_v8 .item a.linkbar-link i { color: #fff !important; }
html body .mod_portfoliolist_v8 .item a.linkbar-link:hover { background: #fff; opacity: 1; }
html body .mod_portfoliolist_v8 .item a.linkbar-link:hover i { color: #000 !important; }