/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {
  /* wichtig! z.B. für Angleichung der Breite von CTA-Bar und Angebote-Slides */
  --cta-bar-width: 68rem;
  /* wichtig für Berechnung der absoluten Position des HolidayCheck Widgets im Footer */
  --hero-plain-height: 31rem;
  --logo-clamp-width: clamp(17rem, 7.5vw + 14rem, 26.5rem);
  /* Hero Booking Bar Placeholder Height*/
  --booking-bar-height: 7rem;
}

/* Newsletter-Formular Seite und Kontaktformulare Seiten: Farben ändern */
.postid-3391 {
  --body-bg-color: var(--bg-dark);
  --body-color: var(--text-light);  
}

/* allen Links in main und in Popup Unterstreichung zuweisen und Arrow-Zeichen, außer bei Buttons, in divs mit den Klassen .section-angebote, .section-cards etc. */
main a:not(:is(.section-angebote a, .section-cards a, .cta a, [class*="hero-"] a)):is(:not([class*="btn--"])),
.gma-modal-alpha a:not(:is([class*="btn--"])) {
	text-decoration: underline;
}
main a:not(:has(picture)):not(:has(img)):not(:is(.section-angebote a, .section-cards a, .cta a, [class*="hero-"] a)):is(:not([class*="btn--"]))::after,
/*.gma-modal-alpha a:not(:is([class*="btn--"]))::after*/ {
	content: " »";
}
main a:not(:is(.section-angebote a, .section-cards a, .cta a, [class*="hero-"] a)):is(:not([class*="btn--"], .vri-button)):hover,
.gma-modal-alpha a:not(:is([class*="btn--"])):hover {
	opacity: .6;
}

/* Bricks Footer Standard-Einstellung überschreiben, 
damit Holidaycheck-Widget absolut im gesamten Bildschirm positioniert werden kann*/
#brx-footer {
  position: static;
}

/* Accessibility Settings */
/* externe Links markieren */
a[target="_blank"]::after {
  content: " ↗";
}
/* PDF-Links markieren */
a[href$=".pdf"]::after {
  content: " [PDF]";
  margin-left: 0;
}

/* Bricks Container Standard-Einstellung überschreiben, 
das macht normalerweise ACSS, funktioniert aber nach Bricks-Update nicht mehr */
.brxe-container
 {
    width: var(--content-width);
}

/* leere Components-Elemente ausblenden */
/*Buttons-Links, die keinen Linktext haben */
.brxe-button:empty {
	display: none;
}
/*leere Überschriften*/
.brxe-heading:empty {
	display: none;
}
/*leerer Text */
.brxe-text:empty {
	display: none;
}

/* Chat von DialogShift auf Gutschein-Seite ausblenden -> da Warenkorb Button vom Chat Button verdeckt wird */
.postid-165 .ds-widget {
	display: none !important;
}

/* Fluentform Standard Settings*/
.brxe-xfluentform {
	width: 100%;
}
.ff-default .ff_btn_style:focus, .ff-default .ff_btn_style:hover
 {
    opacity: 1 !important;
}

/* Wordpress und Bricks Elements */
.wp-caption {
    border: none;
    padding: 0;
}
.wp-caption figcaption {
    color: var(--text-dark);
}

/* Vioma */

/* Schnellbuchungsmaske */
#vri-container-11658 .vri-title,
#vri-container-11658 .vri-widget-children {
	display:none;
}
/*#vri-container-11658,
#vri-container-11658 .vri-widget-container {
	background:transparent !important;
}*/

#vri-container-11658 .vri-widget-container {
	padding: var(--grid-gap) !important;
}
@media (max-width: 767px) {
	#vri-container-11658 {
		width: 100%;
		max-width:40rem;
	}		
}

#vri-container-11658 form {
	width: 100%;
	display: flex;
	flex: 1;
	align-items: center;
	--widget-column-gap: var(--space-xs);
	column-gap: var(--widget-column-gap);
}

#vri-container-11658 form .vri-button {
	width: 100%;
	display: flex;
	justify-content: center;
	padding-inline: 1em;
}
	
#vri-container-11658 form .vri-element-select::before {
	line-height:3.5rem;
}
	
#vri-container-11658 form .vri-element-date-from::before,
#vri-container-11658 form .vri-element-date-to::before {
		content: '\e806';
} 
	
#vri-container-11658 form > div {
	margin-block: 0 !important;
	display: flex;
	flex: 1;
	width: 100%;
}
@media (max-width: 767px) {
	#vri-container-11658 form {
		flex-direction: column;
		row-gap: calc(var(--space-xs) * .5);
		align-items: flex-start;
	}
}
@media (min-width: 768px) {
	#vri-container-11658 form > div[class*='vri-widget-date']::after {
		content: '';
		display: flex;
		height: 4rem;
		width: 1px;
		transform: translateX(calc(var(--widget-column-gap) * .5));
		background-color: var(--divider-color-dark);
	}
}

/* Chat */
.ds-button {
  /*background-color: var(--primary) !important;*/
  background-image: linear-gradient(var(--primary), var(--primary-ultra-dark));
}
@media (min-width: 1440px) {
	.ds-button {
	  width: 80px !important;
	  height: 80px !important;
	  line-height: 80px !important;
	  border-radius: 40px !important;
	}
}
/* Buchen Container */
/* Buchen Post Content position: static setzen, um absolute Positionierung des Booking Bar Widgets zu ermöglichen */
.postid-139 #brx-content,
.postid-139 .brxe-post-content {
	position: static;
}
#vri-container-22503 /*("Chatbot")*/ {
	width: 100%;
	max-width: 100%;
}
#vri-container-22503 .vsc {
	margin: 0 auto;
	max-width: 100% !important;
}
/* Metabar (Language-Select */
.vsc-metabar-select {
	color: var(--text-dark) !important
}
.vsc-metabar-select-selected {
	display: inline-flex;
	column-gap: .5em;
}
/* Buchen Popup: z-index erhöhen, um Sticky-Header zu überlagern */
#vri-overlay-background {
	z-index: 1001 !important;
}
/* Pauschalenslider */
.vri-package-scroller-title {
	display:none;
}
.vri-package-image,
.vri-package-scroller-prev,
.vri-package-scroller-next {
}
.vri-package-scroller {
		margin:0 auto;
}
@media (max-width: 1279px) {
	.vri-package-scroller {
	}
}
/* Zimmerliste, Angeboteliste */
.vri-button::after, .vri-button::before {
  /*content: " »";*/
  content: "" !important;
}
.brxe-code > div {
	background:transparent !important;
}
.vri-page {
	max-width:100% !important;
}
.vri-roomtype-group,
.vri-package {
    padding: var(--container-gap) var(--gutter);
}
.vri-roomtype-group:nth-child(odd),
.vri-package:nth-child(odd) {
    background-color: var(--secondary);
}
.vri-roomtype-group:nth-child(even),
.vri-package:nth-child(even) {
    background-color: transparent;
}
.vri-roomtype-group .vri-roomtypes,
.vri-roomtype-group-header,
.vri-package-head,
.vri-package-variant {
	/*inline-size: calc(var(--content-width) * 0.8);*/
	inline-size: var(--content-width);
	max-inline-size: 100%;
    max-width:100%;
	margin:0 auto !important;
}
.vri-package-list .vri-package-info,
.vri-switch-contents + div .vri-switch-contents-less {
	overflow:visible !important;
}
.vri-roomtype-list .vri-switch-contents + div .vri-switch-contents-less {
	max-height:100% !important;
}
.vri-roomtype-list .vri-switch-contents + div .vri-switch-contents-less .vri-roomtype-alloc {
	position:static !important;
	margin-top:20px;
}

.vri-roomtype-list .vri-switch-contents:checked + div .vri-switch-contents-more.vri-roomtype-title {
	background: transparent !important;
}
.vri-roomtype-list .vri-switch-contents-more.vri-roomtype-title h3 {
  color: var(--text-dark) !important;
  padding:0 !important;
  margin-top:30px !important;
}

.vri-roomtype-group-header {
	font-size: var(--text-m) !important;
	margin-bottom:15px !important;
}
.vri-roomtype-title,
.vri-roomtype-title h2,
.vri-roomtype-title h3,
.vri-package-title h2,
.vri-package-title h3 {
	font-size: var(--h3) !important;
	font-weight:700 !important;
	margin-bottom:25px !important;
	line-height: var(--text-line-height) !important;
}
.vri-roomtype-list .vri-roomtype .vri-roomtype-head .vri-teaser {
	max-height:auto !important;
	height:auto !important;
}
.vri-roomtype-list .vri-roomtype-image,
.vri-package-list .vri-package-image {
	width:435px !important;
	margin-right: var(--space-xl) !important;
}
@media only screen and (max-width: 767px) {
	.vri-roomtype-list .vri-roomtype-image,
	.vri-package-list .vri-package-image {
		margin-right:0;
	}
}

.vri-package-list .vri-package-variant-infobar {
  color: var(--text-dark) !important;
  background:transparent !important;
}
.vri-package-list .vri-package-variant {
  border-bottom: none !important;
  color: var(--text-dark) !important;
} 
.vri-package-list .vri-switch-contents + div label .vri-status-icon {
  color: var(--text-dark) !important;
}
.vri-package-variant-infobar-summary .vri-package-variant-infobar-content-row-title {
	display:none !important;
}
.vri-package-list .vri-package-variant-infobar .vri-package-variant-infobar-content-row .vri-package-variant-infobar-summary .vri-package-variant-price {
  color: var(--text-dark) !important;
  font-size:calc(var(--h3)) !important;
	font-weight:700 !important;
}
.vri-package-list .vri-package-variant-infobar .vri-package-variant-infobar-content-row .vri-package-variant-infobar-more {
  color: var(--text-dark) !important;
}

@media only screen and (min-width: 768px) {
  .vri-package-list .vri-package-variant-infobar .vri-package-variant-infobar-content-row .vri-package-variant-infobar-more::before {
	  border: none !important;
  }
}



/* GUeMA Text WhatsApp Button*/

/* WhatsApp Button Container */
.whatsapp-float-button {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
}

/* Hauptbutton: rund, nur Icon sichtbar */
.whatsapp-button {
    width: 56px;
    height: 56px;
    background-color: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: background 0.3s ease, transform 0.2s ease;
    position: relative;
}

/* WhatsApp Icon */
.wa-icon {
    width: 28px;
    height: 28px;
    fill: white;
}

/* Label: erscheint nur beim Hover */
.wa-label {
    position: absolute;
    left: 65px;
    background-color: #fff;
    color: #000;
    padding: 8px 12px;
    border-radius: 8px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(0);
}

/* Label erscheint bei Hover sichtbar */
.whatsapp-button:hover .wa-label,
.whatsapp-button:focus .wa-label {
    opacity: 1;
    pointer-events: auto;
}

/* Fokus-Stil für Tastatur-Navigation */
.whatsapp-button:focus {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* Responsive: kleinere Buttons auf kleineren Geräten */
@media (max-width: 480px) {
    .whatsapp-button {
        width: 48px;
        height: 48px;
    }

    .wa-icon {
        width: 24px;
        height: 24px;
    }

    .wa-label {
        font-size: 13px;
    }
}