/*
 * Helvetia Vermietungswebseite – Template helvetia2022v1
 *
 * Aufbau:
 *   1. Schriften
 *   2. Variablen
 *   3. Grundlagen und Typografie
 *   4. Layout
 *   5. Header
 *   6. Footer
 *   7. Links im Inhalt und Popups
 *   8. Formulare und Buttons
 *   9. Startbild und Slideshows
 *  10. Badge
 *  11. Bilder und Galerie
 *  12. FAQ
 *  13. Links, Highlights, News, Blog
 *  14. Kontakt
 *  15. Situationsplan und Grundrisse
 *  16. Filter-Slider
 *  17. Cookie-Hinweis
 *  18. Tag-Pill
 *  19. Angebot (v1.0: Filter, Preisliste, Lageplan, Detail-Popup)
 *  20. Hilfsklassen
 *  21. Media Queries
 *
 * Schriftgrössen in rem (Basis 16px).
 * Design und Grundlage identisch mit helvetia2022v2; Unterschied ist das Angebots-Modul v1.0.
 */

/* ==========================================================================
   1. Schriften
   ========================================================================== */

/* Helvetia Hausschrift Baloise (Freigabe durch Helvetia) */
@font-face
{
	font-family:"Baloise";
	font-weight:400;
	font-style:normal;
	font-display:swap;
	src:url("baloise-text.woff") format("woff");
}

@font-face
{
	font-family:"Baloise";
	font-weight:500;
	font-style:normal;
	font-display:swap;
	src:url("baloise-medium.woff") format("woff");
}

@font-face
{
	font-family:"Baloise";
	font-weight:700;
	font-style:normal;
	font-display:swap;
	src:url("baloise-bold.woff") format("woff");
}

/* ==========================================================================
   2. Variablen
   ========================================================================== */

:root
{
	/* Helvetia Farbpalette (Brand Guide) */
	--helvetia-blue: #000D6E;
	--helvetia-blue-hover: #0014AA;
	--helvetia-blue-light: #E5F1FE;
	--helvetia-green: #1B5951;
	--helvetia-light-green: #94E3D4;
	--helvetia-red: #D9304C;
	--helvetia-tangerine: #FA9319;

	/* Verwendung */
	--theme-color: var(--helvetia-blue);
	--accent-color: #E9FBF7; /* helle Variante von Helvetia Light Green */
	--hover-color: var(--helvetia-green);
	--button-hover-color: var(--helvetia-blue-hover);
	--alert-color: var(--helvetia-red);
	--success-color: var(--helvetia-green);

	--status-color-available: var(--helvetia-green);
	--status-color-unknown: var(--helvetia-tangerine);
	--status-color-unavailable: var(--helvetia-red);

	/* Flächen, Linien, Schatten */
	--surface-color: #FAFAFA;
	--surface-alt-color: #F7F7F7;
	--row-odd-color: #F2F2F2;
	--line-color: lightgrey;
	--input-border-color: #8B9196;
	--shadow-popup: 0 15px 50px -5px rgba(139, 145, 150, .5);
	--shadow-tooltip: 0 8px 30px -5px rgba(50, 50, 50, .45);

	/* Masse */
	--radius: 12px;
	--pad-base: 3.75rem;
	--default-pad: 1.875rem 3.75rem;
	--header-height: 0px; /* Abstand für sticky Elemente; 0, da der Header mitscrollt */
	--header-size: 0px; /* tatsächliche Header-Höhe, wird per script.js (initResize) gesetzt */

	/* Bibliotheken */
	--is-iso-level-spacing: -200px;
	--is-iso-level-active-count: 1;
	--is-iso-flat-active-filter-color: var(--theme-color);
	--swiper-navigation-color: var(--theme-color);
	--swiper-pagination-color: var(--theme-color);
}

/* ==========================================================================
   3. Grundlagen und Typografie
   ========================================================================== */

html
{
	font-family:"Baloise", sans-serif;
	font-size:16px;
	line-height:1.625;
	color:var(--theme-color);
	height:100%;
}

body
{
	display:flex;
	min-height:100%;
	flex-direction:column;
	align-items:center;
	background:var(--surface-color);
	margin:0;
}

a
{
	color: inherit;
	text-decoration: none;
}

strong
{
	font-weight:bold;
}

h1,
h2,
h3,
.badge
{
	font-weight:bold;
}

h1,
h2,
h3
{
	color:var(--theme-color);
	letter-spacing:.025rem;
}

/* Überschriften auf farbigem Hintergrund behalten die Textfarbe des Containers */
header h2,
.home .overlay h1,
.home .overlay h2,
.home .overlay h3,
.highlights .items > div h3,
.offer-popup-header h1,
.offer-popup-header h2,
.offer-popup-header h3,
.blog .list .entry h1,
.blog .list .entry h2,
.blog .list .entry h3,
.consent-dialog h1,
.consent-dialog h2,
.consent-dialog h3
{
	color:inherit;
}

/* Schriftgrössen wie helvetia.ch (Desktop) */
h1
{
	font-size:2.375rem;
	line-height:3rem;
	margin:.5em 0;
}

h2
{
	font-size:1.75rem;
	line-height:2.375rem;
	margin:.5em 0;
}

h3
{
	font-size:1.5rem;
	line-height:2.125rem;
	margin:1em 0;
}

.text-left
{
	text-align: left;
}

.text-center
{
	text-align: center;
}

.text-right
{
	text-align: right;
}

/* ==========================================================================
   4. Layout
   ========================================================================== */

.outer
{
	background:white;
	width:1920px;
	max-width:100%;
	flex: 1 1 auto;
	display:flex;
	flex-direction:column;
}

main
{
	flex: 1 1 auto;
}

.group .element
{
	margin:1em 0;
}

.responsive
{
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.responsive iframe,
.responsive > .consent-content
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border:0;
}

.video video
{
	display:block;
	width:100%;
}

.group .responsive
{
	margin:1em 0;
}

.placeholder
{
	width:100%;
	padding-bottom:20vmin;
	background: var(--accent-color);
}

.placeholder + .group:not(.large) > .wrapper,
.headerimage + .group:not(.large) > .wrapper,
.googlemap + .group:not(.large) > .wrapper
{
	margin-top:-3.75em;
	position:relative;
	background:white;
	z-index:101;
	border-top-left-radius: .75rem;
	border-top-right-radius: .75rem;
}

.googlemap .responsive
{
	padding-bottom:33.85%;
}

.group > .wrapper,
.offer > .wrapper,
.contact > .wrapper
{
	box-sizing:border-box;
	max-width:60rem;
	margin:auto;
	padding:var(--default-pad);
}

.group.large > .wrapper,
.offer > .wrapper,
.contact > .wrapper
{
	max-width:90rem;
}

.offer.hasIso > .wrapper
{
	max-width: none;
}

.group + .group  > .wrapper
{
	padding-top:1px;
}

.group + .offer:not(.offer-has-iso) > .wrapper,
.offer:not(.offer-has-iso) + .group > .wrapper,
.offer + .offer:not(.offer-has-iso) > .wrapper
{
	padding-top:0;
}

table
{
	width:100%;
	border-collapse: collapse;
}

.row {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 1.25em;
}

/* ==========================================================================
   5. Header
   ========================================================================== */

header
{
	position: relative;
}

header > .wrapper,
footer > .wrapper
{
	padding:var(--default-pad);
}

/* Raster: Titel + Logo in der ersten Zeile, Navigation darunter.
   So bleibt das Logo beim Titel, auch wenn die Navigation umbricht. */
header > .wrapper
{
	display:grid;
	grid-template-columns:minmax(0,1fr) auto;
	align-items:center;
	column-gap:2em;
}

header > .wrapper > div,
header > .wrapper > div > div:not(.language)
{
	display:contents;
}

header .title
{
	grid-column:1;
	grid-row:1;
}

header .logo
{
	grid-column:2;
	grid-row:1;
}

header .main-nav
{
	grid-column:1;
	grid-row:2;
}

header .language
{
	grid-column:2;
	grid-row:2;
	align-self:end;
	justify-self:end;
}

header .language nav
{
	display: flex;
	gap:.5em;
	flex-wrap: nowrap;
	flex-direction:row;
	margin:0;
}

header .language a
{
	text-transform: uppercase;
}

header nav
{
	margin:1em 0 0 0;
}

header nav ul
{
	display:flex;
	flex-wrap:wrap;
	list-style-type: none;
	padding:0;
	gap:1.5em;
	margin:0;
}

header nav a
{
	position:relative;
	font-weight:500;
	font-size:1.125rem;
	display:block;
	padding-bottom:.3em;
	margin-bottom:-.5em;
}

header nav a::after
{
	content:"";
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	width:0;
	height:.25em;
	background:var(--theme-color);
	transition:width .5s;
}

header nav a.active::after,
header nav a:hover::after
{
	width:100%;
}

header .logo img
{
	display:block;
	width:213px;
	max-height:40px;
	object-fit:contain;
	object-position:center right;
}

.nav-toggle
{
	display:none;
}

header h1,
header h2
{
	display:inline;
	margin:0;
}

header h1
{
	font-size:2.75rem;
	padding-right:.25em;
	line-height:1.2;
}

header h2
{
	font-size:1rem;
	font-weight:normal;
	line-height:1.4;
	white-space:nowrap;
}

/* ==========================================================================
   6. Footer
   ========================================================================== */

footer > .wrapper
{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);
	align-items:center;
	justify-content:center;
	background:var(--surface-color);
	color:var(--theme-color);
	gap:1.25em;
}

footer nav
{
	display: grid;
	font-size: .875rem;
}

footer a:hover
{
	text-decoration: underline;
}

footer .middle
{
	text-align:center;
}

footer .middle a
{
	text-decoration: underline;
	overflow-wrap: anywhere; /* lange Adressen als Linktext umbrechen */
}

footer h2
{
	margin:0;
	font-size:1.25rem;
	line-height:1.875rem;
}

footer .right
{
	display: flex;
	justify-content: end;
}

footer .right a,
footer .right a>img {
	display: block;
	max-width: 12.5rem;
	width: 100%;
}

/* ==========================================================================
   7. Links im Inhalt und Popups
   ========================================================================== */

main a:not(.button, button),
.fancybox__content a:not(.button, button)
{
	color:var(--theme-color);
	transition: color .3s;
}

.fancybox__content
{
	padding:0;
	width:60rem;
	max-width:100%;
	color:var(--theme-color);
}

.fancybox__slide.has-image .fancybox__content
{
	width: 100%;
}

/* ==========================================================================
   8. Formulare und Buttons
   ========================================================================== */

.form-layout
{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap: 0em 3em;
}

.form-group
{
	padding:.5em 0 .75em 0;
}

.form-label
{
	display:block;
	padding-bottom:.25em;
}

.selectables
{
	display:flex;
	flex-wrap:wrap;
	gap: 0 1.25em;
}

.selectables > label
{
	display:flex;
	align-items: center;
	gap:.5rem;
}

input,
select,
textarea,
button
{
	font:inherit;
	box-sizing:border-box;
}

select option
{
	font-family:"Baloise", sans-serif;
}

/* Eingabefelder wie auf helvetia.ch: Rahmen, leicht gerundet, gut antippbar */
input[type=text],
input[type=email],
input[type=tel],
select,
textarea
{
	display:block;
	width:100%;
	min-height:3rem;
	border:1px solid var(--input-border-color);
	border-radius:4px;
	padding:.75rem 1rem;
	outline:none;
	background:white;
	color:var(--theme-color);
	transition:border-color .2s, box-shadow .2s;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
select:focus,
textarea:focus
{
	border-color:var(--theme-color);
	box-shadow:0 0 0 1px var(--theme-color);
}

::placeholder
{
	color:var(--input-border-color);
	opacity:1;
}

input[type=checkbox],
input[type=radio]
{
	appearance:none;
	-webkit-appearance:none;
}

input[type=checkbox]:after,
input[type=radio]:after
{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 6 Pro";
	font-weight: 400;
	font-size:1.25rem;
	line-height:1;
	display:block;
}

input[type=checkbox]:after{content: "\f0c8";}

input[type=checkbox]:checked:after{content: "\f14a";}

input[type=radio]:after{content:"\f111";}

input[type=radio]:checked:after{content: "\f192";}

textarea
{
	min-height:7rem;
	resize:vertical;
}

/* Buttons wie auf helvetia.ch */
button,
.button
{
	display: inline-block;
	white-space: nowrap;
	font-weight: bold;
	font-size: 1rem;
	line-height: 1.2;
	color: white;
	background: var(--theme-color);
	border: 1.6px solid var(--theme-color);
	border-radius: 4px;
	padding: 1em 1.5em;
	transition: background-color .3s, border-color .3s, color .3s;
	cursor: pointer;
}

button:hover,
.button:hover
{
	background: var(--button-hover-color);
	border-color: var(--button-hover-color);
}

button.secondary,
.button.secondary
{
	background: white;
	color: var(--theme-color);
	border-color: var(--theme-color);
}

button.secondary:hover,
.button.secondary:hover
{
	background:var(--helvetia-blue-light);
	color: var(--button-hover-color);
	border-color: var(--button-hover-color);
}

button.application,
.button.application
{
	background: var(--alert-color);
	border-color: var(--alert-color);
}

button.application:hover,
.button.application:hover
{
	filter: brightness(.85);
}

.contact .form-warning
{
	display:block;
	color:var(--alert-color);
	padding:.25em 0;
	font-size:smaller;
	width:100%; /* for boxes */
}

.contact .form-invalid
{
	border-color:var(--alert-color);
}

.ajax-loading,
.ajax-error,
.mail.success,
.mail.error
{
	background: var(--success-color);
	padding:3em 1em;
	text-align:center;
	color:white;
}

.ajax-error,
.mail.error
{
	background:var(--alert-color);
}

.ajax-form .ajax-loading,
.ajax-form .ajax-result,
.ajax-form .ajax-error,
.ajax-form.ajax-state-loading form,
.ajax-form.ajax-state-success form
{
	display:none;
}

.ajax-form.ajax-state-loading .ajax-loading,
.ajax-form.ajax-state-success .ajax-result,
.ajax-form.ajax-state-error .ajax-error
{
	display:block;
}

/* ==========================================================================
   9. Startbild und Slideshows
   ========================================================================== */

.swiper-button-next,
.swiper-button-prev
{
	transition:transform .3s;
}

.swiper-button-next:hover,
.swiper-button-prev:hover
{
	transform:scale(1.1);
}

.home .swiper-slide
{
	height:calc(100svh - var(--header-size));
	min-height: 30vw;
	max-height: 100vmin;
	object-fit:cover;
}

/* Titel im Startbild: weisse Box unten links (wie Kundenvorlage / helvetia.ch) */
.home .overlay
{
	position:absolute;
	bottom:var(--pad-base);
	left:var(--pad-base);
	z-index:1;
	box-sizing:border-box;
	max-width:min(40rem, calc(100% - 2 * var(--pad-base) - 6rem)); /* rechts Platz für die Bildnavigation */
	color:var(--theme-color);
	text-align:left;
	padding:1.75rem 2rem;
	background:white;
	border-radius:var(--radius);
	box-shadow:var(--shadow-popup);
}

.home .overlay h1
{
	margin:0;
	font-size:2.375rem;
}

.swiper-pagination-bullet
{
	border-color:white;
}

/* Bildnavigation im Startbild unten rechts, damit sie nie über der Titelbox liegt */
.home .swiper .swiper-pagination.swiper-pagination-bullets
{
	left:auto;
	right:var(--pad-base);
	bottom:var(--pad-base);
	width:auto;
}

/*Fix Grid fr unit*/
.slideshow .swiper-slide,
.slideshow .swiper-slide > img
{
	width: 100% !important;
}

.group .slideshow,
.popup .slideshow
{
	margin:1em 0;
}

/* ==========================================================================
   10. Badge
   ========================================================================== */

.badge
{
	font-size:clamp(.75rem, 1.2vw, 1.25rem);
	position:absolute;
	right:2rem;
	bottom:2rem;
	background:var(--alert-color);
	border-radius:50%;
	z-index:1;
	color:white;
	transform:rotate(-10deg);
	width:8em;
	height:8em;
	overflow:hidden;
	text-overflow: ellipsis;
	text-align:center;
	display:flex;
	align-items:center;
	justify-content: center;
	line-height:1.15;
	padding:.75em;
	box-sizing: border-box;
	box-shadow:var(--shadow-popup);
	overflow-wrap:anywhere;
}

/* ==========================================================================
   11. Bilder und Galerie
   ========================================================================== */

.images img
{
	display:block;
	width:100%;
}

.gallery .row
{
	margin-bottom:1em;
	grid-template-columns: 1fr 1fr 1fr;
}

.gallery .row.cols-1
{
	grid-template-columns: 1fr;
}

.gallery .row.cols-1 img
{
	aspect-ratio: 16/9;
}

.gallery .row.cols-2
{
	grid-template-columns: 1fr 1fr;
}

.gallery .row.cols-2 img
{
	aspect-ratio: 16/9;
}

.gallery a
{
	overflow:hidden;
}

.gallery img
{
	width:100%;
	display:block;
	aspect-ratio: 1;
	object-fit:cover;
	transition: transform .5s;
}

.gallery img:hover
{
	transform:scale(1.05);
}

/* ==========================================================================
   12. FAQ
   ========================================================================== */

.faq .item
{
	margin-bottom: 1em;
	border: 1px solid var(--accent-color);
}

.faq .item .head
{
	cursor: pointer;
	text-align: left;
	user-select: none;
	font-weight: normal;
	padding: 0 1rem;
	display: flex;
	align-items: baseline;
	background: var(--accent-color);
	color: var(--theme-color);
}

/* Fragen eine Stufe kleiner als H2, lange Fragen sonst zu wuchtig */
.faq .item .head h2
{
	font-size:1.25rem;
	line-height:1.75rem;
	margin:.75rem 0;
}

.faq .item .head:before
{
	content: "\f054";
	font-family: var(--fa-style-family-classic);
	font-weight: 300; /* Light: feiner als Regular */
	display: inline-block;
	margin: 0 .5em 0 0;
	font-size: 1.125rem;
	width: 1em;
	transition: .25s;
}

.faq .item.toggled .head:before
{
	transform: rotate(90deg);
	margin: .45em .5em 0 0;
}

.faq .item .content
{
	display: flex;
	text-align: left;
	overflow:hidden;
	max-height:0;
	gap: 2em;
	transition:max-height .4s cubic-bezier(0,1,0,1);
	flex-direction: column;
}

.faq .item .content .inner
{
	padding: 1rem 1.25rem;
}

.faq .item.toggled .content
{
	max-height:900px;
	transition: all .8s cubic-bezier(.8,0,.2,1);
}

/* ==========================================================================
   13. Links, Highlights, News, Blog
   ========================================================================== */

.links .items
{
	display:flex;
	gap: .62em;
	flex-wrap:wrap;
	justify-content:center;
	padding:var(--default-pad);
}

.link-container
{
	display:flex;
	gap: .62em;
	flex-wrap:wrap;
	margin:1em 0;
}

/* Kacheln und Kästen mit gerundeten Ecken (wie helvetia.ch) */
.highlights .items > div,
.blog .list .entry,
.faq .item,
.news .row,
.contact .form,
.contact .info,
.contact .row
{
	border-radius:var(--radius);
}

/* Bild bzw. Kopfzeile bis an den Rand: an den Ecken abschneiden */
.blog .list .entry,
.faq .item,
.news .row
{
	overflow:hidden;
}

.highlights .items
{
	display:flex;
	flex-wrap:wrap;
	gap: 1.25em;
	justify-content:center;
}

.highlights .items > div
{
	background: var(--accent-color);
	color:var(--theme-color);
	padding:var(--default-pad);
	width: calc( ( 100% - ( 1.25em * 2 ) ) / 3 );
	box-sizing: border-box;
}

.highlights p
{
	font-size:1rem;
}

.news .row
{
	background: var(--accent-color);
	color: var(--theme-color);
	padding:var(--default-pad);
	grid-template-areas:"text image";
}

.news .col-text{grid-area:text;}

.news > :first-child{grid-area:image;}

.news .slideshow .pagination {
	display: none;
}

.blog .list
{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1.25em;
	margin: 0em auto 3em auto;
	max-width:90rem;
	padding: var(--default-pad);
	padding-top: 0px;
}

.blog .list .entry
{
	background: var(--accent-color);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: var(--theme-color);
	text-decoration: none;
	transition: all .2s ease-in-out;
}

.blog .list .entry:hover {
	background-color: var(--hover-color);
	color: #FFFFFF;
}

.blog .list .entry .item
{
	padding: 1em;
}

.blog .list .entry h2
{
	margin-top: .25em;
	text-decoration: none;
}

.blog .list .entry .typo
{
	color: inherit;
}

.blog .list .entry .image
{
	height: 280px;
	background-size: cover;
	background-position: center center;
}

.blog.detail .group + .group
{
	padding-top: 0em;
	margin-top: -2em;
}

.blog.detail h1
{
	margin: 0px;
}

/* ==========================================================================
   14. Kontakt
   ========================================================================== */

.contact .items:not(.onecol)
{
	display:grid;
	grid-template-columns: 3fr 2fr;
}

.contact .items.onecol .info
{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0 4em;
	align-items: flex-end;
}

.contact .items.onecol .info h2
{
	width: 100%;
}

.contact .form
{
	background:var(--surface-color);
	padding:var(--default-pad);
}

.contact .info
{
	padding:var(--default-pad);
	background:var(--surface-alt-color);
}

.person,
.company
{
	margin:3em 0;
}

.info p
{
	margin:0;
	line-height:1.2em;
}

.info img
{
	display:block;
	margin-bottom:1em;
}

.person .image img
{
	max-width:150px;
}

.company .logo img
{
	width:200px;
	max-height:100px;
	object-fit:contain;
	object-position:bottom left;
}

.contact .row
{
	display:flex;
	flex-wrap:wrap;
	background:var(--surface-alt-color);
	align-items: flex-end;
}

/* ==========================================================================
   15. Situationsplan und Grundrisse
   ========================================================================== */

.situationplan
{
	background:var(--hover-color);
}

.situationplan .wrapper
{
	box-sizing: border-box;
	max-width:90rem;
	margin: auto;
}

.situationplan img,
.situationplan .wrapper > div,
.situationplan .wrapper > div svg
{
	display:block;
	width:100%;
}

.plan img
{
	display:block;
	width:100%;
	box-shadow: 0 0 2px 1px #ddd;
	border-radius: var(--radius);
}

/* ==========================================================================
   16. Filter-Slider
   ========================================================================== */

[data-slider] .slider-input
{
	padding:0 8px;
	margin:8px 0;
	height: 10px;
}

[data-slider] .slider-value
{
	font-size:.8125rem;
}

[data-slider] .slider-value span
{
	white-space: nowrap;
}

[data-slider] .slider-input,
[data-slider] .slider-input .noUi-handle
{
	box-shadow: none;
}

/* Hide markers on slider handles */
[data-slider] .slider-input .noUi-handle::before,
[data-slider] .slider-input .noUi-handle::after
{
	display: none;
}

[data-slider] .slider-input .noUi-connect
{
	background: var(--accent-color);
}

[data-slider] .slider-input .noUi-handle
{
	height: 18px;
	width: 18px;
	top: -5px;
	right: -9px; /* half the width */
	border-radius: 9px;
	background: var(--theme-color);
	border: 0;
}

/* ==========================================================================
   17. Cookie-Hinweis
   ========================================================================== */

.consent-cover
{
	position:absolute;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.2);
	display:flex;
	justify-content: center;
	align-items:center;
}

.consent-cover .consent-message
{
	text-align:center;
}

.consent-cover-info
{
	display:flex;
	flex-direction:column;
	align-items: center;
	gap:.5em;
	padding:2em;
}

.consent-dialog
{
	position:sticky;
	bottom:0;
	left: 0px;
	right: 0px;
	width: 100%;
	background: #434341;
	color: #FFFFFF;
	z-index:301;
	box-shadow: 3px 3px 10px 0px rgb(50 50 50);
	font-size: .8em;
}

.consent-dialog .wrapper
{
	display:flex;
	flex-direction:column;
	gap: .5em;
	margin:auto;
	padding:1em 2em;
	max-width:90rem;
}

.toggle-button
{
	font-size:1.4em;
	position:relative;
	width:2em;
	height:1em;
	background:gray;
	box-sizing:border-box;
	border-radius:.5em;
	transition:background .5s;
	cursor:pointer;
}

.toggle-button::after
{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:calc(1em - 4px);
	height:calc(1em - 4px);
	margin:2px;
	background:white;
	border-radius:.4em;
	transition:background .3s;
}

.toggle-button.active
{
	/* aktiv: mintgrüne Spur, dunkelgrüner Knopf (Helvetia Light Green / Green) */
	background:var(--helvetia-light-green);
}

.toggle-button.active::after
{
	right:0;
	left:auto;
	background:var(--helvetia-green);
}

a[consent-settings]
{
	cursor: pointer;
}

.consent-settings .tab
{
	border-top:1px solid black;
}

.consent-settings .consent-preferences
{
	border-bottom: 1px solid black;
}

.consent-settings .tab .header
{
	display:flex;
	justify-content: space-between;
	align-items:center;
	gap:.5em;
	font-size: .8em;
}

.consent-links
{
	gap:.5em;
	display:inline-flex;
	text-decoration: underline;
	flex-wrap: wrap;
}

.links.consent-buttons
{
	background: none;
}

.links.consent-buttons .items
{
	padding: 0;
	justify-content: flex-start;
}

.consent-settings .tab [data-toggle]
{
	cursor:pointer;
}

.consent-settings .tab [data-toggle] h2
{
	display: flex;
	gap:.5em;
	align-items: center;
}

.consent-settings .tab [data-toggle] h2:before
{
	display: block;
	font: var(--fa-font-regular);
	content:"\f054"
}

.consent-settings .tab [data-toggle].active h2:before
{
	content:"\f078";
}

.consent-settings .tab .body
{
	padding-bottom: 1em;
}

.tab .body.toggled
{
	display:block;
}

/* ==========================================================================
   18. Tag-Pill
   ========================================================================== */

.tag-pill
{
	padding:.1em .5em;
	background:var(--line-color);
	color:white;
	border-radius:.5em;
	margin-top:-.25em;
}

/* ==========================================================================
   19. Angebot (v1.0: Filter, Preisliste, Lageplan, Detail-Popup)
   ========================================================================== */

.offer
{
	margin-bottom:3rem;
}

/* Filter */
.offer .filters
{
	display:flex;
	flex-wrap:wrap;
	gap:1rem 1.5rem;
	margin-bottom:1.5rem;
	font-size:1rem;
}

.offer .filter-disabled,
.offer .filters-disabled
{
	display:none;
}

.offer .filters .filter[data-filter-type=slider]
{
	flex: 1 0 auto;
	min-width:8rem;
}

.offer .filters .filter[data-filter-type=slider][data-filter-field=rentalprice_incl],
.offer .filters .filter[data-filter-type=slider][data-filter-field=sellingprice],
.offer .filters .filter[data-filter-type=slider][data-filter-field=rentalpriceexcl_m2y]
{
	flex: 2 0 auto;
}

.offer .filters .checkbox
{
	display:flex;
	align-items:center;
	gap:.5rem;
	white-space:nowrap;
}

.offer .filtered
{
	display:none;
}

/* Preisliste: Haus-Titel blau, Zeilen abwechselnd hellgrau / weiss */
.offer .house
{
	margin-bottom:1.5rem;
}

.offer .house h2
{
	font-size:1.5rem;
	line-height:2.375rem;
	text-align:left;
	background:var(--theme-color);
	color:white;
	padding:.5rem .75rem;
	margin:0;
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:0 1.25rem;
}

.offer .house h2 small
{
	font-size:.875rem;
	line-height:1.4;
}

/* Hinweis unter der Liste, z.B. Parkplätze */
.offer .house > .typo,
.offer .house > .typo small
{
	font-size:.875rem;
}

.offer .house > .typo
{
	padding:0 .75rem;
}

.offer .houses table,
.facts table
{
	width:100%;
	border-collapse:collapse;
}

.offer table th,
.offer table td
{
	text-align:center;
	padding:.5rem;
}

.offer table th:first-child,
.offer table td:first-child
{
	text-align:left;
	padding-left:.75rem;
}

.offer table th:last-child,
.offer table td:last-child
{
	padding-right:.75rem;
}

.offer table .text-right
{
	text-align:right;
}

.offer table th
{
	font-size:.8125rem;
	font-weight:normal;
	line-height:1.2;
	vertical-align:bottom;
	padding-top:.75rem;
	background:white;
	color:var(--theme-color);
}

.offer table td
{
	font-size:1rem;
}

.offer .houses .odd
{
	background:var(--row-odd-color);
}

.offer .houses .even
{
	background:white;
}

.offer table tbody tr[data-src]
{
	cursor:pointer;
}

.offer table tbody tr[data-src]:hover,
.offer table tbody tr.active
{
	background:var(--accent-color);
}

.offer table .property_reference
{
	font-weight:bold;
}

/* Preis nur bei freien Objekten, dann grün und fett */
.offer table td.primary
{
	font-weight:bold;
}

.offer .houses tr[data-availability_status=free] td.primary
{
	color:var(--status-color-available);
}

/* Status-Spalte: frei = Pfeil zum Detail, sonst Status-Text */
.offer .houses tr[data-availability_status=reserved] .availability_status
{
	color:var(--status-color-unknown);
}

.offer .houses tr[data-availability_status=rented] .availability_status,
.offer .houses tr[data-availability_status=sold] .availability_status
{
	color:var(--status-color-unavailable);
}

.offer .houses tr[data-availability_status=free] .availability_status span
{
	display:none;
}

.offer .houses tr[data-availability_status=free] .availability_status:after
{
	font:var(--fa-font-light);
	font-size:1.25rem;
	content:"\f105";
}

/* Handy: Eckdaten unter der Objektnummer statt in Spalten */
.offer .offerMobile
{
	font-size:.75rem;
	line-height:1.4;
	padding-top:.2rem;
	flex-wrap:wrap;
	gap:0 .5rem;
}

.offer .offerMobile span
{
	white-space:nowrap;
}

.offer .offerMobile > span
{
	display:inline-flex;
	column-gap:.25em;
}

.offer .offerMobile span span:first-child
{
	opacity:.7;
}

.offer .offerMobile > span:after
{
	content:",";
	margin-left:-.25em; /* Leerzeichen aus dem Markup vor dem Komma ausgleichen */
}

.offer .offerMobile span:last-child:after
{
	display:none;
}

/* 2D-Lageplan neben der Liste */
.offer.hasIso .items
{
	display:grid;
	grid-template-columns:2fr 3fr;
	gap:2rem;
}

.offer.hasIso .iso,
.offer.hasIso .iso [data-iso]
{
	position:sticky;
	top:calc(var(--header-height) + 1rem);
}

.offer.hasIso .iso img
{
	display:block;
	width:100%;
	border-radius:var(--radius);
}

.offer [data-iso] .is-iso-level
{
	transition: all .6s ease;
}

.offer [data-iso] .is-iso-level.is-iso-open
{
	transform: translateY(calc(var(--is-iso-level-spacing) * var(--is-iso-level-active-count) ) );
}

.offer [data-iso] .flat.active *
{
	fill:var(--helvetia-light-green);
}

/* Detail-Popup (Fancybox): Titel, Grundriss + Fakten, Text, Links, Bilder */
.offerpopup h1
{
	font-size:2rem;
	line-height:2.5rem;
	margin-top:0;
}

.offerpopup .row
{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:1.25rem;
}

.offerpopup .row.noimage
{
	display:block;
}

.offerpopup .row .layout img
{
	display:block;
	width:100%;
	box-shadow:0 0 2px 1px #ddd;
	border-radius:var(--radius);
}

.facts table tr:nth-child(odd)
{
	background:var(--row-odd-color);
}

.facts table td
{
	font-size:1rem;
	padding:.5rem;
}

.facts table td:last-child
{
	text-align:right;
}

.facts table tr.primary td
{
	font-weight:bold;
}

@media(max-width:1400px)
{
	.offer.hasIso .items
	{
		display:block;
	}

	.offer.hasIso .iso
	{
		position:static;
		margin-bottom:1.5rem;
	}
}

@media(max-width:800px)
{
	.offer .house h2
	{
		font-size:1.125rem;
		line-height:1.875rem;
	}

	.offer .house h2 small,
	.offer .house > .typo,
	.offer .house > .typo small
	{
		font-size:.75rem;
	}

	.offer table td
	{
		font-size:.875rem;
	}

	.offer table th
	{
		font-size:.75rem;
	}

	.offerpopup h1
	{
		font-size:1.5rem;
		line-height:2rem;
	}

	.offerpopup .row
	{
		display:block;
	}

	.offerpopup .row .layout img
	{
		margin-bottom:1rem;
	}
}

/* ==========================================================================
   20. Hilfsklassen
   ========================================================================== */

.hidden
{
	display:none;
}

input[name=Email_Address]{display:none !important;}

/* ==========================================================================
   21. Media Queries
   ========================================================================== */

@media(max-width:1360px)
{
	.blog .list
	{
		grid-template-columns: 1fr 1fr;
	}
}

@media(max-width:1100px)
{
	.optional.medium
	{
		display:none;
	}

	.highlights .items,
	footer .wrapper,
	.contact .items:not(.onecol),
	.form-layout,
	.popup .row
	{
		display:flex;
		flex-direction: column;
	}

	footer .right
	{
		width: 100%;
		justify-content: center;
	}

	.highlights .items > div
	{
		width:auto;
	}

	.placeholder + .group > .wrapper,
	.headerimage + .group > .wrapper,
	.googlemap + .group > .wrapper
	{
		margin-top:0 !important;
	}

	.news .row,
	.offer.hasIso .items
	{
		display:block;
	}

	.badge
	{
		bottom:1rem;
	}
}

@media(max-width:800px)
{
	/* Schriftgrössen wie helvetia.ch (Mobile) */
	h1
	{
		font-size:1.5rem;
		line-height:2.125rem;
	}

	h2
	{
		font-size:1.25rem;
		line-height:1.875rem;
	}

	h3
	{
		font-size:1.125rem;
		line-height:1.75rem;
	}

	:root
	{
		--pad-base:1.25rem;
		--default-pad:1.25rem;
	}

	.optional
	{
		display:none;
	}

	.offer .offerMobile
	{
		display:flex;
	}

	.googlemap .responsive
	{
		padding-bottom:100%;
	}

	.home .overlay
	{
		position:relative;
		left:auto;
		bottom:auto;
		max-width:none;
		margin:-2.5rem var(--pad-base) 1.5rem;
		padding:1.25rem 1.5rem;
	}

	/* mobil steht die Titelbox unter dem Bild: Bildnavigation oben rechts */
	.home .swiper .swiper-pagination.swiper-pagination-bullets
	{
		top:1rem;
		bottom:auto;
	}

	.home .overlay h1
	{
		font-size:1.5rem;
		line-height:2.125rem;
	}

	footer h2
	{
		font-size:1.125rem;
		line-height:1.75rem;
	}

	/* Header mobil: Titel + Menü-Button, Logo nur im Footer */
	header > .wrapper
	{
		column-gap:.75rem;
	}

	header .logo
	{
		display:none;
	}

	header h1
	{
		display:block;
		font-size:1.5rem;
		padding-right:0;
	}

	.faq .item .head h2
	{
		font-size:1.125rem;
		line-height:1.625rem;
	}

	header h2
	{
		display:block;
		font-size:.875rem;
		white-space:normal;
	}

	/* Burger-Menü: Navigation aufklappbar unter Titel und Logo */
	.nav-toggle
	{
		display:grid;
		place-items:center;
		grid-column:2;
		grid-row:1;
		width:3rem;
		height:3rem;
		margin-right:-.625rem;
		padding:0;
		border:none;
		background:none;
		color:var(--theme-color);
		font-size:2rem;
	}

	.nav-toggle:hover
	{
		background:none;
		border:none;
	}

	.nav-toggle .fa-xmark,
	.nav-toggle.active .fa-bars
	{
		display:none;
	}

	.nav-toggle.active .fa-xmark
	{
		display:block;
	}

	header .main-nav
	{
		display:none;
		grid-column:1 / -1;
		grid-row:2;
		margin:1rem 0 -.5rem;
	}

	header .main-nav.toggled
	{
		display:block;
	}

	header .main-nav ul
	{
		flex-direction:column;
		gap:0;
	}

	header .main-nav li
	{
		border-top:1px solid var(--line-color);
	}

	header .main-nav a
	{
		display:inline-block;
		margin:0;
		padding:.75rem 0;
		line-height:1.4;
	}

	header .main-nav a::after
	{
		bottom:.5rem;
		height:2px;
	}

	header .main-nav a.active
	{
		font-weight:700;
	}

	/* Sprachauswahl (mehrsprachige Websites) nur im geöffneten Menü, unter der Navigation */
	header .language
	{
		display:none;
		grid-column:1 / -1;
		grid-row:3;
		justify-self:start;
		margin-top:1rem;
	}

	header:has(#main-nav.toggled) .language
	{
		display:block;
	}

	.offer table caption,
	.offer table td,
	.offer table th
	{
		padding-left: 0.38rem;
		padding-right: 0.38rem;
	}

	.blog .list
	{
		grid-template-columns: 1fr;
	}
}

@media(orientation: portrait)
{
	.vtour .responsive
	{
		padding-bottom:120%;
	}
}