/****************************************************************************
 * customize.css
 * Projekt: buendner-immobilien.ch
 * Basis: Contao | Premium Contao Themes
 ****************************************************************************/


/****************************************************************************
 * 0. Fonts (lokal)
 ****************************************************************************/
 /* noto-sans-regular - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Noto Sans';
   font-style: normal;
   font-weight: 400;
   src: url('../fonts/noto-sans-v42-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* noto-sans-700 - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Noto Sans';
   font-style: normal;
   font-weight: 700;
   src: url('../fonts/noto-sans-v42-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* noto-sans-italic - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Noto Sans';
   font-style: italic;
   font-weight: 400;
   src: url('../fonts/noto-sans-v42-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* noto-serif-italic - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Noto Serif';
   font-style: italic;
   font-weight: 400;
   src: url('../fonts/noto-serif-v33-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* roboto-condensed-700 - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Roboto Condensed';
   font-style: normal;
   font-weight: 700;
   src: url('../fonts/roboto-condensed-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }


/* =========================================================
   1. Reset / Fixes
   ========================================================= */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
}

button {
	-webkit-appearance: none;
}

.autogrid, .autogrid_row>.column:not(.autogrid_row.bg-yellow-gradient>.column) {
	padding-left: 30px;
	padding-right: 30px;
}

.autogrid_wrapper, .autogrid_row {
	margin-left: -30px;
	margin-right: -30px;
}

.content_page #main .mod_article .ce_erlink a {
	padding-bottom: 30px;
}


/* =========================================================
   2. Farbdefinitionen
   ========================================================= */

:root {
	--bodyColor: #3d3f40;
	--thirdColor: #77848c;
	--secondColor: #fcc02b;
	--accentColor: #0071bb;

	--bodyBackgroundColor: #cfd4d6;
	--bgLight: #d6d6d6;
	--bgDark: #3d3f40;
	--bgBeige: #f5f2e9;

	--white: #ffffff;
	--black: #000000;
	
	--linkarrow: #8c8c8c;
	--navbg: #5d6260;
}


/* =========================================================
   3. Typografie
   ========================================================= */

html {
	font-size: 16px;
}

body {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--bodyColor);
}

p {
	margin-bottom: 0.6rem;
}

strong {
	font-weight: 700;
}

a {
	color: var(--accentColor);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--accentColor);
	opacity: 0.8;
}

.ce_hyperlink a, a.btn {
	padding: 0;
	background: none;
	color: var(--accentColor);
	border: none;
	font-weight: 400;
	margin-bottom: 30px;
}

.ce_download_default a {
	background: none;
	padding: 0;
	color: var(--accentColor);
}

.ce_download_default a[href*=".pdf" i]::before {
  content: "📄";
  margin-right: 0.4em;
}

.ce_download a span.size {
	color: var(--accentColor);
	padding-left: 5px;
}

.ce_download a:after {
	display: none;
}

/* Headlines */
h1 {
	font-family: 'Noto Serif', serif;
	font-style: italic;
	font-size: 48px;
	font-weight: 400;
	line-height: 1.3em;
	color: var(--white);
}

.content_page.angebote #main h1, .content_page.angebote-reader #main h1, .content_page #main h6 {
	padding-left: 30px;
}

h2 {
	font-family: 'Noto Serif', serif;
	font-style: italic;
	font-weight: 400;
	line-height: 1.25;
	padding-top: 20px;
}

h1, h2 {
	margin-bottom: 1rem;
}

h3, h4, h5, h6 {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.03rem;
	margin-bottom: 0.8rem;
}

.datenschutz h3 {
	margin-top: 20px;
}

h6 {
	color: var(--white);
}

h1 { font-size: 3rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.45rem; }
h4 { font-size: 1.25rem; }

.bg-yellow-gradient .bannertitel p.gross {
	font-size: 230px;
	line-height: 198px;
	font-family: 'Noto Serif', serif;
	font-style: italic;
}

.bg-yellow-gradient .bannertitel p.gross + p {
	padding: 10px 0 12px;
}

.bg-yellow-gradient .bannertitel p {
	font-size: 34px;
	line-height: 34px;
	font-family: 'Noto Serif', serif;
	font-style: italic;
}

.bg-yellow-gradient .bannertitel * {
	color: var(--white);
}

.bg-yellow-gradient .bannerinhalt p.untertitel, .bg-yellow-gradient .bannerinhalt p.klein {
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 0.75px;
	font-family: 'Noto Sans', sans-serif;
	font-weight: bold;
	font-style: inherit;
}

.bg-yellow-gradient .bannerinhalt p.untertitel {
	padding-top: 20px;
}

.bg-yellow-gradient .bannerinhalt p.klein {
	font-weight: normal;
	font-size: 16px;
	line-height: 24px;
	padding-top: 10px;
}

.bg-yellow-gradient .bannerinhalt p {
	font-size: 28px;
	line-height: 36px;
	font-family: 'Noto Serif', serif;
	font-style: italic;
	font-weight: normal;
}

.content_page #main p:not(.bg-yellow-gradient p, .content_page #main p.more) {
	margin-top: 1em;
}


/* =========================================================
   4. Header
   ========================================================= */
#header .inside {
	padding-left: 0;
	padding-right: 0;
}

#header .logo {
	position: relative;
	z-index: 2;
}

#header .logo a, #header .logo a:hover {
	opacity: 1;
}

#kontakt1, #kontakt2 {
	position: absolute;
	height: 170px;
	width: 50%;
	top: 0;
	font-size: 17px;
	font-weight: 400;
	font-style: italic;
	z-index: 1;
}

#kontakt1 {	
	left: 0;
}

#kontakt2 {
	right: 0;
}

#kontakt1 p, #kontakt2 p {
	margin-top: 105px;
	padding-top: 0;
	line-height: 2.5;
	background: url(../img/kontakt_bg.png) repeat-x top left;
}

#kontakt1 p {
	margin-right: 170px;
	padding-right: 35px;
	text-align: right;
}

#kontakt2 p {
	margin-left: 170px;
	padding-left: 35px;
}

#kontakt2 a {
	color: var(--bodyColor);
}
   


/* =========================================================
   5. Navigation
   ========================================================= */

/* Desktop Navigation */
.header .mainmenu ul {
	margin-top: 15px;
}

.header .mainmenu ul li {
	margin: 0 1px 0 0;
	display: inline;
	float: left;
}

.home .header .mainmenu ul li ol li:first-of-type {
	display: none;
}

.header .mainmenu ul li a {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 700;
	line-height: 30px;
	text-align: center;
	text-transform: uppercase;
	color: var(--white);
	text-decoration: none;
	background-color: var(--navbg);
}

.header .mainmenu ul li ol li:last-of-type:after {
	width: 0;
	content: '';
	position: absolute;
	top: 0;
	right: -30px;
	border-top: 30px solid var(--bgBeige);
	border-left: 30px solid var(--navbg);
	opacity: 1;
	transition: opacity 0.3s ease;
	-webkit-transition: opacity 0.3s ease;
}

.header .mainmenu ul li ol li:last-of-type:hover:after {
	opacity: 0.8;
	transition: opacity 0.3s ease;
	-webkit-transition: opacity 0.3s ease;
}

/* Active State */
.header .mainmenu ul li ol li.active:last-of-type:after {
	border-left: 30px solid var(--bodyBackgroundColor);
}

.header .mainmenu ul li ol li a.active, .header .mainmenu ul li ol li.active:last-of-type:hover:after {
	opacity: 1;
}


/* =========================================================
   6. Buttons & Links
   ========================================================= */

.btn,
button,
input[type="submit"],
input[type="button"] {
	background: var(--bodyColor);
	color: var(--white);
	border-radius: 6px;
	padding: 0.6rem 1.3rem;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
	background: var(--secondColor);
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Phone und Contact Buttons */
#phone-button, #contact-button {
	width: 40px;
	height: auto;
	position: fixed;
	right: 0;
	margin-right: -11px;
	z-index: 9999;
}

#phone-button {
	top: 490px;
}

#contact-button {
	top: 540px;
}

#phone-button a, #phone-button a:visited, #contact-button a, #contact-button a:visited {
	display: block;
	width: 30px;
	height: 40px;
	background-color: var(--accentColor);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,.50);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.50);
	box-shadow: 0 0 10px rgba(0,0,0,.50);
	color: var(--white);
	font-weight: bold;
	line-height: 18px;
	text-align: center;
	letter-spacing: 1px;
	text-transform: uppercase;
	border: 1px solid #004e81;
	padding: 10px 3px 5px;
}

#phone-button a {
	font-size: 20px;
}

#contact-button a {
	font-size: 15px;
}


/* =========================================================
   7. Hintergründe
   ========================================================= */

.content_page .column:not(.bg-yellow-gradient .column, #footer .column), .content_page #main .ce_text:not(.bg-yellow-gradient .ce_text), .content_page #main .ce_list, .content_page #main .ce_table, .content_page #main .ce_accordion, .content_page #main .ce_code, .content_page #main .ce_hyperlink, .content_page #main .ce_toplink, .content_page #main .ce_image, .content_page #main .ce_download, .content_page #main .ce_downloads, .content_page #main .ce_form {
	background: #fff;
	vertical-align: top;
}

.bg-yellow-gradient {
	background: linear-gradient(128deg, rgba(252,185,20,1) 0%, rgba(252,185,20,1) 45%, rgba(253,202,76,1) 65%, rgba(252,185,21,1) 85%, rgba(252,185,21,1) 100%);
	padding: 20px 20px 16px;
}

.bg-beige {
	background: var(--bgBeige);
}


/* =========================================================
   8. Content-Elemente
   ========================================================= */

/* Artikel */
.mod_article {
	margin-bottom: 3rem;
}

/* Headline-Element */
.ce_headline {
	margin-bottom: 1.2rem;
}

/* Bild */
.ce_image {
	margin-bottom: 2rem;
}

/* Text + Bild Kombinationen */
.ce_text + .ce_image,
.ce_image + .ce_text {
	margin-top: 1.5rem;
}

/* Listen */
.ce_text ul,
.ce_text ol {
	margin: 1rem 0 1.5rem 1.4rem;
}

.ce_text li {
	margin-bottom: 0.4rem;
}

/* Tabellen */
table {
	width: 100%;
	border-collapse: collapse;
	margin: 2rem 0;
}

table th,
table td {
	border: 1px solid #ddd;
	padding: 0.6rem 0.7rem;
	text-align: left;
}

/* Slider Startseite */
.home .ce_revolutionslider .tp-bannertimer {
	display: none;
	visibility: hidden;
}

.home .ce_revolutionslider.block {
	overflow: visible;
}

.home .ce_revolutionslider:after {
	position: absolute;
	bottom: -14px;
	left: 50%;
	transform: translateX(-50%);
	max-width: 1220px;
	width: 100%;
	height: 14px;
	margin: 0 auto;
	background: url(../img/main_bg.png) no-repeat left top;
	content: '';
	z-index: 99999;
}

.home .tp-mask-wrap {
	margin-left: 10px;
}

.home .ce_revolutionslider_text {
	background: rgba(61,63,64,.9);
	font-family: 'Noto Serif', serif;
	font-style: italic;
	line-height: 1.3;
	color: var(--white);
	white-space: normal !important;
}

/* Tabs Startseite */
.home .ce_tabs .tabs ul li {
	position: relative
}

.home .ce_tabs .tabs.vertical ul li:hover span, .home .ce_tabs .tabs.vertical ul li.active span {
	font-weight: 400;
}

.home .ce_tabs .tabs.vertical ul li span {
	padding: 0;
}

.home .tab_three {
	margin: 0;
	padding: 22px 0 22px 2vw;
	cursor: pointer;
}

.home .tab_three:nth-child(1) {
	background: url(../img/house_bg.png) no-repeat right 34px center;
	background-color: var(--accentColor);
}

.home .tab_three:nth-child(2) {
	background: url(../img/key_bg.png) no-repeat right 20px center;
	background-color: var(--thirdColor);
}

.home .tab_three:nth-child(3) {
	background: url(../img/prov_bg.png) no-repeat right 20px center;
	background-color: var(--secondColor);
}

.home .tab_three:after {
	border-bottom: 50px solid transparent;
	border-top: 50px solid transparent;
	content: "";
	left: 386px;
	position: absolute;
	z-index: 100;
	top: 0;
}

.home .tab_three.active:nth-child(1):after {
	border-left: 34px solid var(--accentColor);
}

.home .tab_three.active:nth-child(2):after {
	border-left: 34px solid var(--thirdColor);
}

.home .tab_three.active:nth-child(3):after {
	border-left: 34px solid var(--secondColor);
}

.home .ce_tabs a, .home .mod_newslist p.more a {
	font-family: 'Noto Serif', serif;
	font-style: italic;
}

.home .ce_tabs .tabs.vertical ul li span {
	border: none;
	font-family: 'Noto Serif', serif;
	font-style: italic;
	color: var(--white);
}

.home .tabs .container {
	padding-left: 10px;
	padding-right: 10px;
}

.home .tabs .container .autogrid_row>.column {
	padding-left: 0;
	padding-right: 0;
}

.home .tabs .column.col_8 {
	float: left;
	background: var(--bgBeige);
}

.home .tabs .column.col_4 {
	float: left;
	box-sizing: border-box;
	padding: 10px 35px 10px 50px;
	background: var(--white) url(../img/capricorn.png) no-repeat bottom right;
}

.home .ce_tabs .panes.vertical {
	border: none;
	padding-top: 10px;
}

.datenschutz .ce_text ul li {
	padding-bottom: 0;
}

/* Angebote */
.angebote .autogrid_row {
	margin: 0 0 30px;
}

.mod_newsreader #c_left {
	background: var(--white);
	padding-bottom: 30px;
}

.mod_newsreader .ce_gallery {
	background: var(--bgBeige);
}

.mod_newsreader .ce_gallery li .image_container {
	margin: 0 1px 1px 0;
}

.mod_newsreader .ce_image .image_container img {
	min-width: 100%;
}

.mod_newsreader h2 {
	padding-left: 35px;
	margin-top: 0;
}

.mod_newsreader p, .mod_newsreader ul:not(.mod_newsreader .ce_gallery ul) {
	padding-left: 35px;
	padding-right: 35px;
}

.mod_newsreader p.back {
	box-sizing: border-box;
	background-color: #fff;
	color: var(--white);
	cursor: pointer;
	display: inline-block;
	font-family: 'Noto Serif', serif;
	font-style: italic;
	line-height: 70px;
	padding-left: 30px;
	position: relative;
	text-decoration: none;
	width: auto;
	margin-top: 10px;
}

.back a:before {
	content: '\f104';
}

.mod_newslist .layout_latest:not(.home .mod_newslist .layout_latest) {
	position: relative;
	margin-bottom: 30px;
	background: var(--white);
}

.mod_newslist .layout_latest .image_container {
	margin-bottom: 0;
}

.mod_newslist .layout_latest h2 a {
	color: var(--bodyColor);
}

.mod_newslist p.more a {
	font-family: 'Noto Serif', serif;
	font-style: italic;
}

.mod_newslist p.more a:not(.home .mod_newslist p.more a) {
	font-size: 1.25rem;
	color: var(--white);
	cursor: pointer;
	display: inline-block;
	height: 60px;
	width: 220px;
	line-height: 60px;
	background: var(--linkarrow);
	position: relative;
	text-decoration: none;
	padding-left: 15px;
	box-sizing: border-box;
}

.mod_newslist .layout_latest .ce_text h2 {
	padding-top: 0;
}

.mod_newslist p.more a:after:not(.home .mod_newslist p.more a:after) {
	border-bottom: 30px solid transparent;
	border-left: 20px solid var(--linkarrow);
	border-top: 30px solid transparent;
	content: "";
	left: 220px;
	position: absolute;
	top: 0;
	z-index: 100;
}

.home .mod_newslist {
	padding-left: 40px
}

.home .mod_newslist h1 {
	font-size: 1.625rem;
	margin-top: 23px;
	color: var(--bodyColor);
}

.home .mod_newslist h2 {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 400;
	font-size: 1rem;
	color: var(--bodyColor);
	margin: 0;
	padding: 0;
}

.mod_newsreader .layout_full {
	position: relative;
}

.verkauft:after, .vermietet:after {
	width: 200px;
	height: 35px;
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
	position: absolute;
	background: var(--accentColor);
	top: -100px;
	left: -100px;
	z-index: 1;
	text-align: center;
	padding-top: 165px;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 24px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}

.verkauft:after {
	content: "VERKAUFT";
}

.vermietet:after {
	content: "VERMIETET";
}

.angebote-reader a.button {
	font-family: 'Noto Serif', serif;
	font-style: italic;
	font-size: 20px;
	display: block;
	color: var(--white);
	cursor: pointer;
	display: inline-block;
	height: 60px;
	width: 220px;
	line-height: 60px;
	background: url(../img/arrow_mail.png) no-repeat 180px 50% var(--linkarrow);
	position: relative;
	text-decoration: none;
	padding-left: 15px;
	box-sizing: border-box;
	margin: 30px 0 30px 30px;
}

.angebote p.more a:after, .angebote-reader a.button:after {
	border-bottom: 30px solid transparent;
	border-left: 20px solid var(--linkarrow);
	border-top: 30px solid transparent;
	content: "";
	left: 220px;
	position: absolute;
	top: 0;
	z-index: 100;
}

.angebote p.more a:hover, .angebote-reader a:hover {
	opacity:1;
}

/* Form Styling */
form fieldset legend {
	background: var(--white);
	color: var(--bodyColor);
}

.widget-explanation {
	margin-top: 40px;
}

button.submit {
	font-size: 1rem;
	padding: 20px 40px;
	height: auto;
	margin-bottom: 30px;
}

/* Isotope Gallery & Colorbox Styling */
.ce_gallery .content {
  background: rgba(237,232,224,0.8); /* Thumbnail Hover Overlay */
}

#cboxOverlay {
  background: #171310; /* Hintergrundfarbe Colorbox */
  opacity: 0.85 !important; /* Hintergrundopazität Colorbox */
}

#colorbox, #colorbox * {
  overflow: visible !important;
}

#cboxContent {
  position: relative !important;
  background: transparent;
}

#cboxLoadedContent {
  border: 5px solid rgba(0,0,0,0);
  background: transparent;
}

#cboxCurrent {
  display: none !important;
}

#cboxClose {
  top: -13px;
  background: url(../img/colorbox-controls.png) no-repeat top center;
}

#cboxPrevious {
  background: url(../img/colorbox-controls.png) no-repeat top left;
}

#cboxPrevious:hover {
  background-position: left -66px !important;
}

#cboxNext {
  background: url(../img/colorbox-controls.png) no-repeat top right;
}

#cboxNext:hover {
  background-position: right -66px !important;
}

#cboxPrevious,
#cboxNext {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999; /* sicherstellen, dass sie über dem Bild liegen */
}

#cboxPrevious {
  left: -12px; /* Abstand nach links – anpassen je nach Bedarf */
}

#cboxNext {
  right: -12px; /* Abstand nach rechts – anpassen je nach Bedarf */
}

#cboxPrevious, #cboxNext {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#cboxPrevious:focus, #cboxNext:focus {
  outline: none;
}


/* =========================================================
   9. Footer
   ========================================================= */

#footer .inside {
	max-width: none;
	padding: 0;
}

#footer .bg-beige h2, #footer .bg-beige p {
	color: var(--bodyColor);
}

#footer .bg-beige a, #footer .bg-beige a:hover:not(#footer .bg-beige .ce_hyperlink a, #stopper a) {
	color: var(--accentColor);
}

.footer,
.site-footer {
	background: var(--bgDark);
	color: var(--white);
	font-size: 0.9rem;
	padding: 2.5rem 0;
}

.footer a,
.site-footer a {
	color: var(--white);
}

.footer a:hover,
.site-footer a:hover {
	color: var(--secondColor);
}

#footer h2 {
	font-size: 28px;
	margin-top: 10px;
}

#footer h5 {
	font-family: 'Noto Serif', serif;
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1;
	hyphens: auto;
	-webkit-hyphens: auto;
}

#footer li {
	margin: 0;
	padding: 0;
}

#footer li:before, #footer li:after {
	display: none;
}

.bg-beige #zitat {
	font-family: 'Noto Serif', serif;
	font-style: italic;
	font-size: 22px;
	line-height: 30px;
	padding: 73px 0px 10px 0px;
}

.bg-beige #stopper {
	float: left;
	transform: rotate(-6deg);
	background-color: #0071bb;
	margin: 45px 27px 0 0;
	padding: 0;
	box-shadow: 3px 4px 5px rgba(23,24,27,.4);
}

.bg-beige #stopper p {
	margin: 0;
	padding: 0;
}

.bg-beige #stopper a, .bg-beige #stopper a:visited {
	padding: 20px;
	color: var(--white);
	display: block;
	width: 230px;
	height: 100%;
	font-size: 20px;
	line-height: 28px;
	font-weight: 400;
	text-shadow: 0 -1px 0 #002447;
	text-align: center;
}

.top-link {
	background: rgba(255,255,255,0.8);
	transition: all .3s ease-in-out;
	-webkit-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1); 
	box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1);
	backdrop-filter: blur(3px);
}

.top-link:hover {
	background: rgba(255,255,255,1);
	transition: all .3s ease-in-out;
}

.top-link a {
	font-size: 18px;
}

.top-link a i {
	color: #000;
}

.top-link .progress-ring circle {
	stroke: var(--bg-customColor1);
}


/* =========================================================
   10. Utilities
   ========================================================= */

.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

.mt-1 { margin-top: 0.5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }

.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }


/* =========================================================
   11. Responsive
   ========================================================= */

/* Grösser als Seitenlayout */
   @media (min-width: 1240px) {
	   
	   .header .mainmenu ul li a {
		   font-size: 0.9375rem;
		   letter-spacing: 1px;
		   padding: 0 20px;
	   }
	   
	   .home .ce_revolutionslider_text {
		   padding: 30px;
		   width: 386px;
		   height: 140px;
		   font-size: 1.75rem !important;
	   }
	   
	   .ce_tabs .tabs.vertical {
		   width: 386px;
	   }
	   
	   .home .ce_tabs .tabs.vertical ul li span {
		   font-size: 2.125rem;
	   }
	   
	   .home .ce_tabs .panes.vertical {
		   width: calc(100% - 386px);
		   padding-right: 30px;
		   padding-bottom: 10px;
	   }
	   
	   .mod_newslist .layout_latest .image_container.float_left {
		   margin-right: 0;
		   width: 44%;
	   }
	   
	   .mod_newsreader #c_left {
		   width: 730px;
	   }
	   
	   .mod_newsreader #request_detail {
		   width: 410px;
	   }
	   
   }
   
   /* Grösser als Tablet, maximal Seitenlayout */
   @media  (min-width: 1024px) and (max-width: 1239px) {
	   
	   .header .mainmenu ul li a {
		   font-size: 0.9375rem;
		   padding: 0 2vw;
		}
	   
   }
   
   /* Tablet */
   @media (min-width: 768px) and (max-width: 1024px) {
	   
	   .header.original .smartmenu {
		   float: none;
		   position: absolute;
		   top: 30px;
		   right: 40px;
	   }
	   
	   .header .smartmenu .smartmenu-trigger .line, .header .smartmenu .smartmenu-trigger .line:before, .header .smartmenu .smartmenu-trigger .line:after {
		   background: var(--navbg);
	   }
	   
	   .smartmenu .smartmenu-trigger .line:before {
		   margin-top: 10px;
	   }
	   
	   .smartmenu .smartmenu-trigger .line, .smartmenu .smartmenu-trigger .line:before, .smartmenu .smartmenu-trigger .line:after, .smartmenu-content .smartmenu-close:before, .smartmenu-content .smartmenu-close:after {
		   height: 2px;
	   }
	   
	   .bg-beige #stopper {
			  margin-left: -20px;
		  }
	   
	   .bg-beige #stopper a, .bg-beige #stopper a:visited {
		   padding: 1vw;
		   width: 22vw;
		   font-size: 2vw;
		   line-height: 2.66vw;
	   }
	   
	   .angebote-reader a.button {
		   font-size: 0.9rem;
		   width: 140px;
		   padding-right: 15px;
	   }
	   
	   .angebote-reader a.button:after {
		   left: 140px;
	   }
	   
   }
   
   /* Grösser als Mobile, maximal Seitenlayout */
   @media (max-width: 1239px) and (min-width: 768px) {
	   
	  .home .ce_revolutionslider:after {
		  margin-left: 10px;
	  } 
	  
	   .home .ce_revolutionslider_text {
		   padding: 20px 40px;
		   width: 33vw;
		   height: 11vw;
		   font-size: 2.2vw !important;
	   }
	   
	   .bg-yellow-gradient .bannertitel p.gross {
		   font-size: 18vw;
		   line-height: 13vw;
		   padding-top: 20px;
	   }
	   
	   .bg-yellow-gradient .bannertitel p {
		   font-size: 3.4vw;
	   }
	   
	   .home .ce_tabs .tabs.vertical ul li {
		   height: 100px;
	   }
	   
	   .home .ce_tabs .tabs.vertical ul li span {
			  font-size: 3vw;
		}
	   
	   .ce_tabs .tabs.vertical {
		   width: 28.3vw;
	   }
	   
	   .home .tab_three:after {
		   left: 28.3vw
	   }
	   
	   .home .ce_tabs .panes.vertical {
		   width: calc(100% - 28.3vw);
		   padding-right: 1.75vw;
		   padding-bottom: 0; 
	   }
	   
	   .home .ce_tabs .panes.vertical p {
		   line-height: 2.3vw;
	   }
	   
	   #kontakt1 p, #kontakt2 p {
		   font-size: 1.3vw;
		   line-height: 4vw;
	   }
	   
	   .mod_newslist .layout_latest .image_container.float_left {
		   margin-right: 15px;
		   width: 41vw;
		   min-height: 282px;
	   }
	   
	   .mod_newslist .layout_latest .image_container.float_left img {
			min-height: 282px;
			object-fit: cover;
		  }
	   
	   .mod_newsreader #c_left {
		   width: 59vw;
	   }
	   
	   .mod_newslist h2 {
		   margin-bottom: 0;
		   padding-top: 15px;
		   font-size: 1.6rem;
	   }
	   
	   .mod_newslist .layout_latest .ce_text h2 {
		   font-size: 1.6rem;
	   }
	   
	   .mod_newslist .layout_latest .ce_text p {
		   line-height: 1.4;
	   }
	   
	   .mod_newslist p.more a {
		   margin-top: 10px;
	   }
	   
	   .mod_newsreader #request_detail {
		   width: 29vw;
		   padding-right: 15px;
	   }
	   
   }

/* Tablet & größer */
@media (min-width: 768px) {

	body {
		font-size: 1rem;
	}

	.mod_article {
		margin-bottom: 3.5rem;
	}
	
	.mod_newslist .layout_latest {
		padding-right: 5px;
	}
	
	.mod_newsreader #request_detail {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 100;
	}
	
	.ce_form, .ce_download, .content_page .ce_text:not(.layout_latest .ce_text, .layout_full .ce_text) {
		margin-left: -30px;
		margin-right: -30px;
		padding-left: 30px;
		padding-right: 30px;
	}

}

/* Mobile */
@media (max-width: 767px) {

	.header {
		background: var(--bgBeige);
	}
	
	.header .logo {
		margin-left: 30px;
		width: 240px;
		height: 150px;
	}
	
	#kontakt1, #kontakt2 {
		display: none;
	}
	
	.mmenu_trigger .label {
		display: none;
	}
	
	.mmenu_trigger {
		right: 30px;
	}
	
	.mmenu_trigger .burger .burger_lines, .mmenu_trigger .burger .burger_lines:after, .mmenu_trigger .burger .burger_lines:before {
		background: var(--navbg);
	}
	
	#mmenu #mmenu_middle {
		padding: 10vw 10vw 10vw 40px;
	}
	
	#slider {
		display: none;
	}
	
	/* .home .ce_revolutionslider .banner {
		height: 60vw !important;
	}
	
	/* .home .ce_revolutionslider_text {
	   padding: 20px 40px;
	   width: 43vw;
	   height: 13vw;
	   font-size: 3.2vw !important;
   } */
	
	h1 { font-size: 1.9rem; }
	h2 { font-size: 1.6rem; }
	h3 { font-size: 1.35rem; }

	.btn,
	button,
	input[type="submit"] {
		width: 100%;
		text-align: center;
	}
	
	#phone-button {
		top: 150px;
	}
	
	#contact-button {
		top: 200px;
	}
	
	.mod_article:not(.fullwidth) > .container {
		padding-left: 10px;
		padding-right: 10px;
	}
	  
   .bg-yellow-gradient .bannertitel p.gross {
	   font-size: 170px;
	   line-height: 150px;
   }
   
   .home .tab_three {
	   font-size: 2rem;
   }
   
   .home .tab_three:nth-child(1) {
		  background-position: right 35px center;
	  }
   
   .home .tab_three:nth-child(2), .home .tab_three:nth-child(3) {
	   background-position: right 20px center;
   }
   
   .home .tab_three.active:after {
	   display: none;
   }
   
   .home .ce_tabs .panes.vertical {
	   margin-top: 0;
	   padding: 20px 30px 30px;
	   background: var(--bgBeige) url("../img/tabcontrol-arrow.png") no-repeat top center;
   }
   
   .mod_article {
	   margin-bottom: auto;
   }
	
	.content_page #main p:not(.bg-yellow-gradient p, .mod_newslist p), .content_page #main .widget:not(.content_page #main .widget-explanation), .datenschutz h3 {
		padding: 0 20px;
	}
	
	.content_page #main h2:not(.content_page #main .mod_newslist .ce_text h2), .content_page #main .ce_download, .content_page #main .ce_hyperlink {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.content_page #main .ce_hyperlink a {
		font-size: 1rem;
	}
	
	.home .mod_newslist:not(.home #footer .mod_newslist) {
		padding-left: 10px;
	}
	
	.bg-beige #zitat {
		padding: 0;
	}
	
	.home #footer .mod_newslist {
		padding-left: 0;
	}
	
	.home .mod_newslist h1, .home .mod_newslist p.more {
		padding-left: 20px;
	}
	
	.mod_newslist .layout_latest .image_container {
		margin-bottom: 30px;
	}
	
	.mod_newslist .layout_latest > *:not(.mod_newslist .layout_latest .image_container) {
		padding: 0 20px;
	}
	
	.image_container.float_left {
		width: 100%;
		float: none;
		margin-right: 0;
	}
	
	.image_container.float_left a, .image_container.float_left img {
		width: 100%;
		height: auto;
	}
	
	.mod_newslist p.more a {
		margin-bottom: 20px;
	}
	
	.mod_newsreader #c_left {
		width: 100%;
	}
	
	.ce_gallery .image_container {
		aspect-ratio: 1;
	}
	
	.ce_gallery .image_container img {
		width: 100%;
		height: 100%;
		object-fit: cover;    /* Das Bild füllt das DIV proportional aus */
		display: block;  
	}
	
	.mod_newsreader h2 {
		padding-left: 20px;
	}

	.footer,
	.site-footer {
		text-align: center;
	}
	
}