/*
 * Helvetia Vermietungswebseite – Template helvetia2022v2-temp
 *
 * 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. 3D-Modell
 *  20. Angebot (Preisliste, 3D, Detail-Popup)
 *  21. Hilfsklassen
 *  22. Media Queries
 *
 * Schriftgrössen in rem (Basis 16px). Ausnahme: Das Angebots-Modul (.offer)
 * hat eine eigene Grundgrösse (24px Desktop / 18px Mobile), an der seine Abstände
 * und Container-Abfragen in em hängen. Seine Schriftgrössen sind trotzdem in rem gesetzt.
 */

/* ==========================================================================
   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;
}

/* Projektlogo statt Helvetia-Logo: grösser, Breite nach Seitenverhältnis */
header .logo.project img
{
	width:auto;
	max-width:16rem;
	height:5rem;
	max-height:none;
}

/* ohne Sprachwahl: Projektlogo neben Titel und Navigation, Header wird nicht höher */
header:not(:has(.language)) .logo.project
{
	grid-row:1 / span 2;
	align-self:center;
}

.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. 3D-Modell
   ========================================================================== */

[data-iso3d]
{
	position:relative;
	aspect-ratio:1; /* todo: aspect ratio from content*/
}

[data-iso3d] canvas
{
	position: absolute;
	top:0;
	left:0;
	box-sizing: border-box;
	background: transparent;
	bottom: 0;
	width: 100% !important;
	height: 100% !important;
	outline: none;
}

.model-toolbar,
.model-direction
{
	position:absolute;
	display:flex;
	z-index:1;
}

.model-toolbar.model-toolbar-navigation
{
	top:0;
	left:1px;
}

.model-toolbar.model-toolbar-rotation
{
	bottom:0;
	right:1px;
}

.model-toolbar.model-toolbar-size
{
	right:1px;
	top:50%;
	flex-direction:column;
	transform:translateY(-50%);
}

.model-overlay,
.model-loading
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:grid;
	place-items: center;
	box-sizing: border-box;
	z-index:1;
	pointer-events:none;
}

.model-overlay
{
	display:none;
}

.model-overlay.model-overlay-mouse,
.model-overlay.model-overlay-touch
{
	/*display:grid;*/
	color:white;
	font-size:clamp(1em,3vw,1.5em);
	padding:2em;
	text-align:center;
}

.model-overlay.model-overlay-mouse > div,
.model-overlay.model-overlay-touch > div
{
	background:rgba(0,0,0,.3);
	padding: .5em 1em;
}

.model-overlay.model-overlay-mouse .model-info-touch,
.model-overlay.model-overlay-touch .model-info-mouse
{
	display:none;
}

.model-loading-done
{
	display:none;
}

.model-toolbar > div
{
	background:white;
	outline:1px solid black;
}

.model-toolbar > div::after,
.model-loading > div::after,
.model-direction::after
{
	display: block;
	font:var(--fa-font-regular);
	cursor: pointer;
	width:1em;
	height:1em;
	padding: 1em;
	margin:auto;
}

.model-loading > div::after{
	content:"\f110";
	animation-name: fa-spin;
	animation-duration: var(--fa-animation-duration, 2s);
	animation-iteration-count: var(--fa-animation-iteration-count, infinite);
	animation-timing-function: var(--fa-animation-timing, linear);
}

.model-toolbar
{
	display:none;
}

.model-toolbar .model-prev::after{content:"\f01e"; transform:rotate(-45deg)}

.model-toolbar .model-next::after{content:"\f0e2"; transform:rotate(45deg)}

.model-toolbar .model-zoom-in::after{content:"\f00e";}

.model-toolbar .model-home::after{content:"\f015";}

.model-toolbar .model-zoom-out::after{content:"\f010";}

.model-direction
{
	right:0;
	bottom:0;
	font-size:2em;
}

.model-direction::after{
	padding:.5em;
	content:"\f602";
	transform-style: preserve-3d;
	transform:rotate(calc(-45deg + var(--model-direction)))
}

.model-logo
{
	position:absolute;
	bottom: 1em;
	left: 1em;
}

.model-logo,
.model-logo svg
{
	height: .7em;
}

.model-logo-small
{
	display:none;
}

.model-logo svg
{
	transition:opacity .5s ease;
	opacity: .7;
}

.model-logo:hover svg
{
	opacity: 1;
}

@media(max-width: 1000px)
{
	.model-logo-small
	{
		display: block;
	}

	.model-logo-large
	{
		display:none;
	}
}

/* ==========================================================================
   20. Angebot (Preisliste, 3D, Detail-Popup)
   ========================================================================== */

.offer
{
	--offer-height: 100svh;
	--offer-sidebar-margin: 2em;
	/* Angebots-Modul ist auf 24px Grundschrift abgestimmt */
	font-size:1.5rem;
	line-height:normal;
}

.offer.offer-has-iso
{
	scroll-margin-top: var(--header-height);
	background-color: var(--offer-background-color,transparent);
}

.offer.offer-has-iso .offer-ui
{
	grid-area: ui;
	pointer-events:none;
	overflow:hidden;
	aspect-ratio: var(--is-iso-aspect-ratio,1);
}

.offer.offer-has-iso .offer-ui > *
{
	pointer-events:auto;
}

.offer.offer-has-iso .offer-ui,
.offer.offer-has-iso .offer-iso
{
	position:sticky;
	top:var(--header-height);
	width:100%;
	height:var(--offer-height);
}

.offer.offer-has-iso .offer-iso
{
	display:grid;
	overflow:hidden;
	grid-area: start /start / end / end;
}

.offer [data-iso3d]
{
	--is-iso-meta_zone_state_active_free_color: #00ff004d;
	--is-iso-meta_zone_state_active_reserved_color: #ffff004d;
	--is-iso-meta_zone_state_active_rented_color: #ff00004d;
	--is-iso-meta_zone_state_active_sold_color: #ff00004d;
	--is-iso-meta_zone_state_selected_free_color: #00ff0099;
	--is-iso-meta_zone_state_selected_reserved_color: #ffff0099;
	--is-iso-meta_zone_state_selected_rented_color: #ff000099;
	--is-iso-meta_zone_state_selected_sold_color: #ff000099;
	--is-iso-meta_zone_state_filter_free_color: #00ff001a;
	--is-iso-meta_zone_state_filter_reserved_color: #ffff001a;
	--is-iso-meta_zone_state_filter_rented_color: #ffff001a;
	--is-iso-meta_zone_state_filter_sold_color: #ff00001a;
	aspect-ratio: auto;
}

.offer [data-iso]
{
	--is-iso-meta_zone_state_active_free_color: #00ff00cc;
	--is-iso-meta_zone_state_active_reserved_color: #ffff00cc;
	--is-iso-meta_zone_state_active_rented_color: #ff0000cc;
	--is-iso-meta_zone_state_active_sold_color: #ff0000cc;
	--is-iso-meta_zone_state_selected_free_color: #00ff00ff;
	--is-iso-meta_zone_state_selected_reserved_color: #ffff00ff;
	--is-iso-meta_zone_state_selected_rented_color: #ff0000ff;
	--is-iso-meta_zone_state_selected_sold_color: #ff0000ff;
	--is-iso-meta_zone_state_filter_free_color: #00ff0099;
	--is-iso-meta_zone_state_filter_reserved_color: #ffff0099;
	--is-iso-meta_zone_state_filter_rented_color: #ff000099;
	--is-iso-meta_zone_state_filter_sold_color: #ff000099;
}

.offer [data-iso] svg
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

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

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

.offer .offer-sidebar
{
	position:relative;
	container-type: inline-size;
}

.offer.offer-has-iso .offer-sidebar
{
	grid-area: sidebar;
	margin:var(--offer-sidebar-margin);
}

.offer.offer-has-iso .offer-list,
.offer.offer-has-iso .offer-detail,
.offer.offer-has-iso .offer-detail .offer-close
{
	background:white;
}

.offer.offer-has-iso .offer-list
{
	grid-area: list;
	padding:1.5rem;
}

.offer .offer-list
{
	border-radius:var(--radius);
}

/* Detail-Popup der Wohnung wie die Preisliste abgerundet */
.offer.offer-has-iso .offer-detail
{
	border-radius:var(--radius);
}

.offer .offer-title
{
	display:flex;
	align-items: baseline;
	gap:1.25em;
}

.offer .offer-title h1,
.offer-popup h1
{
	margin:0;
}

/* Wohnungsnummer im Detailfenster */
.offer-popup h1
{
	font-size:2rem;
	line-height:2.5rem;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:.5em;
}

.offer-popup h1 .offer-popup-close
{
	font-size:2.375rem;
	line-height:1;
	margin-right:-.15em;
}

.offer-popup h1 .property_status.tag-pill
{
	font-size:.5em;
}

/* im blauen Kopf (3D-Ansicht) etwas kleiner */
.offer.offer-has-iso .offer-popup h1
{
	font-size:1.75rem;
}

.offer.offer-has-iso .offer-detail
{
	grid-area: detail;
	position:sticky;
	bottom:0;
	width:100%;
	height:0;
	transition:all .5s;
	transform:translateY(100%);
	opacity:0;
	pointer-events:none;
	z-index:1;
}

.offer.offer-has-iso.offer-state-popup .offer-detail
{
	transform:translateY(0%);
	height:var(--offer-height);
	opacity:1;
	pointer-events:auto;
}

.offer.offer-has-iso .offer-detail .offer-close
{
	position:absolute;
	top:0;
	right:0;
	font-size:2em;
	display:grid;
	place-items:center;
	width:2em;
	height:2em;
	cursor:pointer;
	z-index:1;
	transition:transform .5s;
	border:1px solid black;
	display:none;
}

.offer.offer-has-iso .offer-detail .offer-close::after
{
	content: "\f00d";
	display: block;
	font:var(--fa-font-regular);
}

@keyframes fade-in
{
	0% {transform:translateY(100%);opacity: 0;}
	100% {transform:translateY(0%);opacity: 1;}
}

@keyframes fade-out
{
	0% {opacity: 1;}
	100% {opacity: 0;}
}

.offer.offer-has-iso .offer-popup
{
	display:none;
	background:white;
	border-radius:var(--radius);
	box-shadow:var(--shadow-popup);
}

.offer.offer-has-iso .offer-popup.toggled
{
	display:block;
	overflow:auto;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	animation: fade-in 250ms forwards;
}

.offer.offer-has-iso .offer-popup .offer-popup-header
{
	position:sticky;
	top:0;
	background: var(--theme-color);
	color: #FFFFFF;
}

.offer-popup .offer-popup-header > .wrapper
{
	padding: .75rem 1.75rem;
}

.offer-popup .offer-popup-header > .wrapper .title
{
	margin: 0;
}

.offer-popup .offer-popup-body > .wrapper
{
	padding:.75rem 1.75rem 1.75rem 1.75rem;
	font-size: 1rem;
}

/* Detail-Popup ohne 3D (Fancybox): Innenabstände wie Impressum/Seiten-Popups */
.fancybox__content.offer-popup .offer-popup-header > .wrapper
{
	padding:max(2rem, calc(var(--pad-base) * .8)) var(--pad-base) .75rem;
}

.fancybox__content.offer-popup .offer-popup-body > .wrapper
{
	padding:.75rem var(--pad-base) var(--pad-base);
}

.offer-popup .offer-popup-close
{
	display:none;
}

.offer.offer-has-iso .offer-popup .offer-popup-close
{
	display:initial;
	cursor:pointer;
}

.offer.offer-has-iso .offer-popup.closing
{
	animation: fade-out 250ms forwards;
}

.offer .offer-tooltips
{
	position:absolute;
}

.offer .offer-tooltip
{
	--offer-tooltip-padding:1em;
	--offer-tooltip-background:white;
	display:none;
	width:13em;
	font-size:.9375rem;
	transform-style: preserve-3d;
	text-align:center;
	container-type: inline-size;
	position:absolute;
	transform: translateX(-50%);
	pointer-events:none;
	padding:var(--offer-tooltip-padding);
	transition: opacity .5s;
	z-index:var(--offer-tooltip-z);
	cursor:pointer;
}

.offer .offer-tooltip.active
{
	display:block;
}

.offer .offer-tooltip::after
{
	content:"";
	display:block;
	position:absolute;
	width: 0;
	height: 0;
}

.offer .offer-tooltip .property-body
{
	display:block;
}

.offer .offer-tooltip.offer-tooltip-occluded
{
	opacity:.5;
}

.offer .offer-tooltip.offer-tooltip-orientation-top
{
	transform:translate(calc(-50% + var(--offer-tooltip-x)), calc(-100% + var(--offer-tooltip-y)));
}

.offer .offer-tooltip.offer-tooltip-orientation-top::after
{
	bottom:1px;
	left:50%;
	transform:translateX(-50%);
	border-left: var(--offer-tooltip-padding) solid transparent;
	border-right: var(--offer-tooltip-padding) solid transparent;
	border-top: var(--offer-tooltip-padding) solid var(--offer-tooltip-background);
}

.offer .offer-tooltip .property-container
{
	background:var(--offer-tooltip-background);
	padding:.5em;
	box-shadow:var(--shadow-tooltip);
	border-radius: var(--radius);
}

.offer .offer-tooltip .property-field-title
{
	font-weight:bold;
	font-size:1rem;
	border-bottom:1px solid var(--line-color);
}

.offer .offer-tooltip .primary
{
	text-align:center;
	border-top:1px solid var(--line-color);
}

.offer.offer-has-iso > .wrapper
{
	padding:0;
	margin:auto;
	max-width:none;
}

.offer.offer-has-iso > .wrapper > .items
{
	position:relative;
	display:grid;
	grid-template-columns: auto minmax(0,max-content) minmax(0,29em) auto;
	grid-template-areas: "start ui sidebar end";
}

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

.offer .houses [data-offer-link]:hover
{
	cursor:pointer;
}

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

.offer .houses td,
.offer .houses th
{
	padding:.25em .5em;
	white-space: nowrap;
}

/* Preisliste: Zeilen abwechselnd hellgrau / weiss */
.offer .houses .odd
{
	background: var(--row-odd-color);
}

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

.offer .house
{
	margin-bottom: 1.5em;
}

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

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

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

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

.offer .model-loading > div
{
	font-size: 1rem;
}

.offer .houses [data-reference]:hover,
.offer .houses [data-reference].active
{
	background:var(--accent-color);
	color: var(--theme-color);
}

.offer.offer-has-iso .houses [data-reference].selected
{
	background:var(--theme-color);
	color: white;
}

.offer .property-header,
.offer .property-body
{
	display:grid;
	grid-template-columns: minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);
	grid-template-areas: "property-title property-facts property-primary";
}

@container (max-width: 23em)
{
	.offer .property-header,
	.offer .property-body
	{
		grid-template-columns: minmax(0,2fr) minmax(0,1.2fr);
		grid-template-areas: "property-title property-title"
			"property-facts property-primary";
	}

	/* zweizeilig: Wohnungsnummer näher an die Zeile darunter */
	.offer .offer-list .property-body .property-title .property-field
	{
		padding-bottom:0;
	}

	.offer .offer-list .property-body .property-facts .property-field,
	.offer .offer-list .property-body .property-primary .property-field
	{
		padding-top:.15em;
	}
}

.offer .offer-list .property-container
{
	display:flex;
	flex-direction:column;
}

.offer .offer-list .property-body
{
	padding:0 .5rem;
	font-size:1rem;
}

.offer .offer-list [data-reference]
{
	cursor:pointer;
}

.offer .offer-list .property-header
{
	padding:0 .5rem;
	background:white;
}

.offer .property-header .property-field
{
	text-transform:none;
	font-size:.8125rem;
	/* Spaltenköpfe in normaler Schreibweise und umbrechend statt abgeschnitten */
	white-space:normal;
	text-overflow:clip;
	hyphens:auto;
	-webkit-hyphens:auto;
	overflow-wrap:normal;
	overflow:visible;
	line-height:1.2;
}

.offer .property-header .property-facts,
.offer .property-header .property-primary
{
	align-items:end;
	align-self:end;
}

.offer .property-header .property-title
{
	display:none;
}

.offer .property-title
{
	grid-area: property-title;
}

.offer .property-facts
{
	grid-area: property-facts;
	display:grid;
	grid-template-columns: var(--property-column-sizes);
}

.offer .property-primary
{
	grid-area: property-primary;
}

.offer .property-field,
.offer-popup .facts td
{
	padding: .5em .25rem;
}

.offer-popup .facts td:first-child
{
	padding-left:.5rem;
}

.offer .property-field
{
	overflow:hidden;
	text-overflow: ellipsis;
	white-space:nowrap;
	box-sizing: border-box;
}

.offer .property-field.property-field-title
{
	font-weight:bold;
}

@container (max-width: 60em)
{
	.offer .property-field
	{
		display:none;
	}

	.offer .property-field.required
	{
		display:block;
	}

	.offer .property-facts
	{
		grid-template-columns: var(--property-column-sizes-required);
	}
}

.offer [data-reference]:not([data-availability_status="free"]) .primary
{
	color:var(--status-color-unavailable);
}

.offer [data-reference][data-availability_status="reserved"] .primary
{
	color:var(--status-color-unknown);
}

.offer [data-reference][data-availability_status="free"] .primary
{
	color:var(--status-color-available);
	font-weight:bold;
}

.offer.offer-has-iso .iso
{
	position:relative;
	display:grid;
}

.offer.offer-has-iso .iso > img
{
	width:100%;
}

.offer .filter-button
{
	display:grid;
	align-items:center;
	grid-template-columns:auto 1fr auto;
	gap:.5em;
	background:none;
	padding:.5em 0;
	cursor:pointer;
	font-size:1.125rem;
}

.offer .filter-button .tag-pill
{
	font-size: .8125rem;
}

.offer .filters
{
	display:flex;
	flex-wrap:wrap;
	gap:1em;
	padding: .5rem 0;
	margin-top:1px;
	font-size:1rem;
}

@container (max-width:35em)
{
	.offer .filters
	{
		flex-direction:column;
	}
}

.offer .toggled .filters,
.offer .filter-button:not(.active) .fa-angle-up,
.offer .filter-button.active .fa-angle-down
{
	display:none;
}

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

.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:block;
	margin:5px 0;
	white-space: nowrap;
}

.offer .filtered
{
	display:none;
}

@media(orientation: landscape)
{
	.offer.offer-has-iso.offer-iso-type .offer-ui,
	.offer.offer-has-iso.offer-iso-type .offer-iso
	{
		grid-area: ui;
	}
}

.property_status.tag-pill
{
	font-size:.4em;
	font-weight: normal;
	vertical-align:middle;
	background:var(--contrast-color);

	/* Fallback for browsers that don't support RCS */
	color: white;
	text-shadow: 0 0 .05em black, 0 0 .05em black, 0 0 .05em black, 0 0 .05em black;

	@supports (color: oklch(from red l c h)) {
		--l: clamp(0, (var(--l-threshold, 0.623) / l - 1) * infinity, 1);
		color: oklch(from var(--contrast-color) var(--l) 0 h);
		text-shadow: none;
	}

	@supports (color: contrast-color(red)) {
		color: contrast-color(var(--contrast-color));
		text-shadow: none;
	}
}

:not([data-availability_status="free"]) .property_status.tag-pill
{
	--contrast-color:var(--status-color-unavailable);
}

[data-availability_status="reserved"] .property_status.tag-pill
{
	--contrast-color:var(--status-color-unknown);
}

[data-availability_status="free"] .property_status.tag-pill
{
	--contrast-color:var(--status-color-available);
}

/* ==========================================================================
   21. Hilfsklassen
   ========================================================================== */

.hidden
{
	display:none;
}

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

/* ==========================================================================
   22. 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;
	}

	/* Angebots-Modul: Abstände skalieren mit, Schriften fest in rem */
	.offer
	{
		font-size:1.125rem;
	}

	.offer .house h2
	{
		font-size:1.125rem;
	}

	.offer .house h2 small,
	.offer .house > .typo,
	.offer .house > .typo small,
	.offer .property-header .property-field,
	.offer .offer-list .property-body,
	.offer .offer-tooltip
	{
		font-size:.75rem;
	}

	.offer .offer-tooltip .property-field-title
	{
		font-size:.875rem;
	}
	: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-popup h1
	{
		font-size:1.5rem;
		line-height:2rem;
	}

	.offer.offer-has-iso .offer-popup h1
	{
		font-size:1.375rem;
	}

	.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)
{
	.offer.offer-has-iso
	{
		border-top:none;
	}

	.offer.offer-has-iso > .wrapper > .items
	{
		grid-template-columns:none;
		grid-template-areas: "iso"
		"sidebar";
		height:auto;
	}

	.offer.offer-has-iso .offer-ui,
	.offer.offer-has-iso .offer-iso
	{
		grid-area: iso;
		height: calc(50svh - var(--header-height) / 2);
		z-index:1;
	}

	.offer.offer-has-iso .offer-iso
	{
		background:var(--offer-background-color,white);
	}

	.offer.offer-has-iso.offer-state-popup .offer-detail
	{
		height:calc((100dvh - var(--header-height)) - (50svh - var(--header-height) / 2));
	}

	.offer.offer-has-iso .offer-sidebar
	{
		margin:0;
		display:block;
	}

	.offer.offer-has-iso .offer-list
	{
		padding: var(--pad-base)
	}

	.vtour .responsive
	{
		padding-bottom:120%;
	}
}