@charset "UTF-8";

/* ============================================================
   MOX Kollektion — Main Stylesheet
   Base (mobile first) + Tablet 720px+ + Desktop 1200px+
   ============================================================ */

/* ============================================================
   Design Tokens
   ============================================================ */

:root {
	--color-bg:          #f4f3ee;
	--color-text:        #2A2A2A;
	--color-text-muted:  #888888;
	--color-line:        #CCCCCC;
	--color-logo:        #58595B;
	--font-serif:        'Spectral', "Iowan Old Style", Georgia, serif;
	--font-sans:         'Inter', Arial, sans-serif;
	--type-display:      clamp(2.8rem, 5vw, 4.5rem);
	--type-heading:      clamp(1.6rem, 2.5vw, 2.4rem);
	--type-body:         1rem;
	--type-caption:      0.75rem;
	--space-section:     clamp(4rem, 8vw, 8rem);
	--space-grid:        2px;
	--max-width:         1440px;
	--transition:        0.2s ease;
	--header-height:     70px; /* height of #header-d; used for content clearance below logo */
	/* --color-accent intentionally unset — rotates per context (CI 2010) */
}

/* ============================================================
   Reset
   ============================================================ */

* {
	border: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	overflow-y: scroll;  /* forces scrollbar on html = prevents layout shift, keeps html as scroll container */
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-serif);
	font-size: var(--type-body);
	font-style: normal;
	line-height: 1.6;
	color: var(--color-text);
	background-color: var(--color-bg);
}

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

#kollektion {
	scroll-margin-top: 20px;
	margin-bottom: 0.5rem;
}

a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

h1 {
	font-family: var(--font-serif);
	font-size: var(--type-heading);
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	margin-top: 5%;
	margin-bottom: 2%;
	text-align: center;
	}

h2 {
	font-family: var(--font-serif);
	font-size: clamp(1.4rem, 2vw, 2rem);
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	margin-top: 5%;
	margin-bottom: 2%;
	padding-top: 25px;
	text-align: center;
	}

h3 {
	font-family: var(--font-serif);
	font-size: 1.05rem;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	margin-top: -4px;
	background: var(--color-bg);
	color: var(--color-text);
	text-align: center;
	line-height: 1.8em;
	}

img {
	width: 100%;
	height: auto;
	border: none;
	margin: 0;
	padding: 0;
	}

li {
	list-style: none;
	}

p {
	font-size: var(--type-body);
	font-style: normal;
	line-height: 1.6;
	margin-bottom: 8px;
	}

ul {
	font-size: 1rem;
	}

/* ============================================================
   Layout Shell
   ============================================================ */

#overlay {
	position: fixed;
	display: none;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 95;
	background: rgba(0, 0, 0, 0.15);
	}

#header-d {
	position: relative;
	height: 70px;
	width: 100%;
	background-color: var(--color-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	}

#footer {
	background: var(--color-line);
	padding: 3rem 2rem;
	margin-top: 0;
	}

.footer-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	text-align: center;
	}

.footer-social {
	display: flex;
	gap: 2rem;
	}

.footer-social a {
	color: var(--color-text);
	text-decoration: none;
	transition: opacity var(--transition);
	display: flex;
	align-items: center;
	}

.footer-social a:hover {
	opacity: 0.6;
	text-decoration: none;
	}

.footer-social svg {
	width: 24px;
	height: 24px;
	}

.footer-contact {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	color: var(--color-text-muted);
	}

.footer-contact a {
	color: var(--color-text-muted);
	}

.footer-contact a:hover {
	color: var(--color-text);
	text-decoration: none;
	}

.footer-legal {
	font-family: var(--font-sans);
	font-size: 0.7rem;
	color: var(--color-text-muted);
	}

.footer-legal a {
	color: var(--color-text-muted);
	}

.footer-legal a:hover {
	color: var(--color-text);
	text-decoration: none;
	}

/* Language toggle — top-right */
#lang-switch {
	position: fixed;
	right: 10px;
	top: 24px;
	z-index: 101;
	font-family: var(--font-sans);
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	}

/* Frosted-glass backdrop — keeps both controls legible over any background */
#menu-b,
#lang-switch {
	background: rgba(244, 243, 238, 0.85); /* --color-bg at 85% */
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 4px;
	padding: 6px 8px;
	}

#lang-switch a {
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--transition);
	}

#lang-switch a:hover {
	color: var(--color-text);
	text-decoration: none;
	}

#lang-switch .lang-active {
	color: var(--color-text);
	}

/* Google Map */
#map {
	width: calc(100% - 24px);
	height: 400px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

/* ============================================================
   Navigation Overlay
   ============================================================ */

#menu {
	margin-top: 0;
	}

#menu ul {
	text-align: center;
	font-size: 1rem;
	padding: 0;
	}

#menu li {
	margin-bottom: 1.8rem;
	}

#menu a {
	font-family: var(--font-serif);
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	font-weight: normal;
	font-style: normal;
	color: var(--color-text);
	letter-spacing: 0.03em;
	text-decoration: none;
	transition: opacity var(--transition);
	}

#menu a:hover {
	opacity: 0.5;
	text-decoration: none;
	}

/* Submenu accordion within navigation overlay */
#menu .has-submenu > a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	cursor: pointer;
	}

#menu .has-submenu > a .chevron {
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 300ms ease;
	flex-shrink: 0;
	}

#menu .has-submenu.open > a .chevron {
	transform: rotate(45deg);
	}

#menu .submenu {
	margin-top: 0;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 400ms ease, margin-top 400ms ease;
	}

#menu .has-submenu.open .submenu {
	margin-top: 0.6rem;
	max-height: 500px;
	}

#menu .submenu li {
	margin-bottom: 0.6rem;
	padding-left: 1.5rem;
	}

#menu .submenu a {
	font-size: clamp(1rem, 2.2vw, 1.5rem);
	color: var(--color-text-muted);
	}

#menu .submenu a:hover {
	color: var(--color-text);
	opacity: 1;
	}

#menu-b {
	display: inline-block;
	position: fixed;
	margin-left: 10px;
	margin-top: 28px;
	z-index: 101;
	cursor: pointer;
	}

#menu-b a {
	font-style: normal;
	}

/* Hamburger bars
   Closing sequence: × fades out first (no delay), then bars fade in (delayed).
   The base-state transition handles the "closing" direction. */
.bar1, .bar2, .bar3 {
	width: 20px;
	height: 2px;
	background-color: var(--color-text);
	margin: 4px 0;
	transition: opacity 0.15s ease 0.15s;
	}

/* #xmenu needs relative positioning so ::before/::after can be placed inside it */
#xmenu {
	position: relative;
	}

/* Opening sequence: bars fade out first (no delay), then × fades in (delayed).
   The .change-state transition handles the "opening" direction. */
.change .bar1,
.change .bar2,
.change .bar3 {
	opacity: 0;
	transition: opacity 0.15s ease;
	}

/* × icon — two lines always present but invisible until menu opens.
   Centred at 50%/50% of #xmenu, then translate(-50%,-50%) puts the line's
   own centre on that point before rotation — giving a geometrically perfect ×.
   Base-state transition: fade out immediately when closing. */
#xmenu::before,
#xmenu::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 1.5px;
	background: var(--color-text);
	transform-origin: center center;
	opacity: 0;
	transition: opacity 0.15s ease;
	}

#xmenu::before { transform: translate(-50%, -50%) rotate(45deg);  }
#xmenu::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* Opening: × fades in after bars have fully hidden */
#xmenu.change::before,
#xmenu.change::after {
	opacity: 1;
	transition: opacity 0.15s ease 0.15s;
	}

/* Scroll-to-top chevron */
.wrapper {
	margin-top: 30px;
	height: 40px;
	display: flex;
	justify-content: center;
	}

.bar4 {
	margin-left: 7px;
	width: 20px;
	height: 2px;
	background-color: var(--color-text-muted);
	transform: rotate(45deg);
	}

.bar5 {
	margin-left: -7px;
	width: 20px;
	height: 2px;
	background-color: var(--color-text-muted);
	transform: rotate(-45deg);
	}

/* Menu panel — full-screen overlay */
.panel {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: var(--color-bg);
	z-index: 99;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;          /* Firefox */
	-ms-overflow-style: none;       /* IE/Edge */
	transform: translateX(-100%);
	transition: transform 400ms ease;
	}

.panel::-webkit-scrollbar {
	display: none;                  /* Chrome/Safari */
	}

/* Top-level menu list: fills viewport so flex centers when content fits;
   container's overflow-y handles scroll when content (e.g. open submenu) overflows.
   This pattern works reliably across browsers where the older auto-margin
   centering on a flex parent could break scrolling. */
#menu > ul {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 4rem 1rem;
	margin: 0;
	box-sizing: border-box;
	}

#topline {
	visibility: hidden;
	height: 0;
	}

/* ============================================================
   Typography & Content
   ============================================================ */

.mitte {
	text-align: center;
	}

.no-margin-bottom {
	margin-bottom: 0;
	}

/* One-word product descriptor — 'Medium', 'Klassiker', etc. */
.kursiv {
	display: inline-block;
	margin-right: 0.5em;
	font-family: var(--font-sans);
	font-size: var(--type-caption);
	font-style: normal;
	font-weight: normal;
	color: var(--color-text-muted);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	}

.destext {
	font-size: 0.85rem;
	text-align: center;
	color: var(--color-text-muted);
	}

/* Legacy — kept for compatibility, colour neutralised */
.blue {
	color: var(--color-text);
	text-decoration: none;
	font-style: normal;
	}

.red {
	color: var(--color-text-muted);
	}

/* ============================================================
   Button
   ============================================================ */

.btn {
	display: inline-block;
	padding: 0.55em 1.4em;
	font-family: var(--font-sans);
	font-size: var(--type-caption);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text);
	background: transparent;
	border: 1px solid var(--color-text);
	cursor: pointer;
	text-decoration: none;
	transition: background var(--transition), color var(--transition);
	}

.btn:hover {
	background: var(--color-text);
	color: var(--color-bg);
	text-decoration: none;
	}

/* Secondary / muted variant — standalone, used in bezug links */
.btn--muted {
	display: inline-block;
	padding: 8px 16px;
	font-family: var(--font-sans);
	font-size: var(--type-caption);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
	border: 1px solid var(--color-line);
	background: transparent;
	transition: color var(--transition), border-color var(--transition), background var(--transition);
	white-space: nowrap;
	text-decoration: none;
	}

.btn--muted:hover {
	background: var(--color-text);
	color: var(--color-bg);
	border-color: var(--color-text);
	text-decoration: none;
	}

/* ============================================================
   Spacing Utilities
   ============================================================ */

.top-mar-neg {
	margin-top: -5px;
	}

.top-dist {
	margin-top: 10px;
	}

.bott-25 {
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 25px;
	}

.clear-f {
	width: 100%;
	margin-top: 5px;
	margin-bottom: 5px;
	height: 30px;
	clear: both;
	}

.clear-50 {
	width: 100%;
	height: 70px;
	clear: both;
	}

.clear-x {
	width: 100%;
	height: 90px;
	clear: both;
	}

.clear-y {
	width: 100%;
	height: 200px;
	clear: both;
	}

/* ============================================================
   Main Content Area
   ============================================================ */

.maincont {
	min-height: calc(100vh - 360px);
	margin-right: 30px;
	margin-left: 30px;
	}

/* Pages where .maincont is the first content block (sell, about, architekten, impressum).
   On the homepage .maincont follows #hero, not #overlay, so this selector is safe to use. */
#overlay + .maincont {
	margin-top: 24px; /* breathing room below in-flow header */
	}

/* ============================================================
   Dealer / Sell Page
   ============================================================ */

.adr {
	background-color: var(--color-bg);
	border: 1px solid var(--color-line);
	padding: 16px;
	min-height: 80px;
	box-sizing: border-box;
	text-align: center;
	font-size: 0.8em;
	}

.adr p { margin: 0; }

.adr-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 40px;
	}

.adr-grid > .adr {
	flex: 0 0 calc(50% - 5px);
	}

.adr3 {
	margin-top: 25px;
	width: 250px;
	margin-left: calc((100% - 200px)/2);
	float: left;
	position: relative;
	display: inline-block;
	overflow: hidden;
	font-size: calc(var(--type-body) + 2px);
	}

.titel-cont {
	color: var(--color-text);
	border: 1px solid var(--color-line);
	height: 60px;
	margin-top: 10px;
	margin-bottom: 70px;
	padding-top: 20px;
	width: 150px;
	margin-left: calc((100% - 300px)/3);
	float: left;
	position: relative;
	display: inline-block;
	overflow: hidden;
	}

/* ============================================================
   Image Grids & Containers
   ============================================================ */

.pic-item-h {
	width: calc((100% - 36px)/2);
	margin-top: 12px;
	margin-left: 12px;
	float: left;
	position: relative;
	}

.pic-item-q {
	width: calc(100% - 24px);
	margin-top: 12px;
	margin-left: 12px;
	float: left;
	position: relative;
	}

.pic-cont {
	margin-left: 12px;
	width: calc((100% - 36px)/2);
	float: left;
	position: relative;
	display: inline-block;
	}

.pic-cont > a {
	display: block;
	overflow: hidden;
	}

.pic-cont img {
	transition: .5s;
	}

.pic-cont:hover img {
	transform: scale(1.1);
	}

.pic-cont2 {
	margin-top: 5px;
	margin-left: 12px;
	width: calc(100% - 24px);
	float: left;
	position: relative;
	display: inline-block;
	overflow: hidden;
	}

.pic-cont4 {
	margin-left: 12px;
	width: calc((100% - 36px)/2);
	float: left;
	position: relative;
	display: inline-block;
	overflow: hidden;
	text-align: center;
	}

.team-photos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	}

.team-photos .pic-cont4 {
	float: none;
	margin-left: 0;
	}

.logo-cont {
	height: 150px;
	margin-top: 30px;
	margin-left: 10%;
	width: calc((100% - 30%)/2);
	float: left;
	position: relative;
	display: inline-block;
	overflow: hidden;
	}

/* ============================================================
   Header / Logo Positioning
   ============================================================ */

.pos-1 {
	margin-left: 0;
	}

.produktgruppe {
	margin-left: 10px;
	margin-top: 30px;
	width: calc(100% - 20px);
	}

.res-logo {
	height: 40px;
	width: auto;
	}

/* ============================================================
   Pool Story Image
   ============================================================ */

.pool-story-image {
	margin-top: 2rem;
	margin-bottom: 70px;
	}

.pool-story-image img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	}

/* ============================================================
   Video
   ============================================================ */

.video-overcont {
	display: block;
	width: calc(100% - 24px);
	margin-top: 8px;
	margin-left: auto;
	margin-right: auto;
	}

.video-overcont2 {
	margin-top: 5px;
	margin-left: 12px;
	width: calc(100% - 24px);
	float: left;
	position: relative;
	display: inline-block;
	overflow: hidden;
	}

.video-container {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 56.25%; /* 16:9 */
	}

.video {
	border: 0;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	}


/* ============================================================
   Tablet (720px+)
   ============================================================ */

@media only screen and (min-width: 720px) {

#menu-b {
	margin-left: 35px;
	}

.top-mar-neg {
	margin-top: -15px;
	}

.maincont {
	min-height: calc(100vh - 355px);
	margin-right: 80px;
	margin-left: 80px;
	}

.pic-cont {
	width: calc((100% - 48px)/3);
	}

.pic-cont2 {
	margin-left: 12px;
	width: calc((100% - 36px)/2);
	}

.pic-cont4 {
	width: calc((100% - 48px)/3);
	}

.logo-cont {
	margin-top: 50px;
	width: calc((100% - 40%)/3);
	}

.titel-cont {
	height: 90px;
	margin-top: 20px;
	margin-bottom: 60px;
	padding-top: 30px;
	width: 170px;
	margin-left: calc((100% - 510px)/5);
	}

.pic-item-h {
	width: calc((100% - 48px)*0.2729);
	}

.pic-item-q {
	width: calc((100% - 48px)*0.4543);
	}

.res-logo {
	height: 52px;
	width: auto;
	}

.video-overcont {
	width: 65%;
	margin-top: 5px;
	}

.video-overcont2 {
	margin-left: 12px;
	width: calc((100% - 36px)/2);
	}

}


/* ============================================================
   Desktop (1200px+)
   ============================================================ */

@media only screen and (min-width: 1200px) {

#menu-b {
	margin-left: 40px;
	}

.maincont {
	min-height: calc(100vh - 430px);
	margin-right: 100px;
	margin-left: 100px;
	}

.top-mar-neg {
	margin-top: -25px;
	}

.pic-cont {
	width: calc((100% - 54px)/4);
	}

.pic-cont2 {
	margin-left: 12px;
	width: calc((100% - 36px)/2);
	}

.pic-cont4 {
	width: calc((100% - 54px)/4);
	}

.logo-cont {
	margin-top: 80px;
	width: calc((100% - 50%)/4);
	}

.titel-cont {
	height: 150px;
	margin-top: 30px;
	margin-bottom: 50px;
	padding-top: 58px;
	width: 260px;
	margin-left: calc((100% - 780px)/5);
	}

.pic-item-h {
	width: calc((100% - 48px)*0.2729);
	}

.pic-item-q {
	width: calc((100% - 48px)*0.4543);
	}

.produktgruppe {
	margin-top: 30px;
	margin-left: 200px;
	width: calc(100% - 400px);
	}

.res-logo {
	height: 64px;
	width: auto;
	}

.video-overcont {
	width: 55%;
	margin-top: 5px;
	}

.video-overcont2 {
	margin-left: 12px;
	width: calc((100% - 36px)/2);
	}

/* 64px logo needs more than 70px header to breathe — increase to 80px on desktop */
#header-d {
	height: 80px;
	}

/* Comfortable gap below header on desktop (overrides global 24px) */
#hero,
.product-layout,
#overlay + .maincont {
	margin-top: 48px;
	}

}

/* ============================================================
   Editorial Sections (Homepage)
   ============================================================ */

.editorial-section {
	margin: var(--space-section) 0;
	}

.editorial-subline {
	font-family: var(--font-sans);
	font-size: var(--type-caption);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
	margin-bottom: 1rem;
	}

.editorial-images {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 2rem 0;
	}

.editorial-img-full {
	grid-column: 1 / -1;
	}

.editorial-img-full img,
.editorial-img-half img {
	width: 100%;
	height: auto;
	display: block;
	background: #e8e7e3;
	min-height: 200px;
	max-height: 550px;
	object-fit: cover;
	transition: filter 0.2s ease;
	}

.editorial-img-full a,
.editorial-img-half a {
	display: block;
	text-decoration: none;
	border: none;
	cursor: pointer;
	}

.editorial-img-full a:hover,
.editorial-img-half a:hover {
	text-decoration: none;
	}

@media (min-width: 720px) {
	.editorial-img-full a:hover img,
	.editorial-img-half a:hover img {
		filter: brightness(0.92);
		}
}

.btn-full-width {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 2rem;
	}

/* Compact variant — reduced spacing, shorter image cap */
.editorial-section.section-compact {
	margin: calc(var(--space-section) * 0.6) 0;
	}

.section-compact .editorial-img-full img {
	max-height: 480px;
	}

@media (max-width: 719px) {
	.editorial-images { grid-template-columns: 1fr; }
	.editorial-img-full img,
	.editorial-img-half img { max-height: 400px; }
	.section-compact .editorial-img-full img { max-height: 320px; }
}

/* ============================================================
   Phase 2 — Hero
   ============================================================ */

#hero {
	position: relative;
	width: 100%;
	height: 65vh;
	min-height: 300px;
	overflow: hidden;
	margin-top: 24px; /* breathing room below in-flow header */
	}

#hero picture,
#hero picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	margin: 0;
	}

#hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.38) 0%, transparent 55%);
	pointer-events: none;
	}

.hero-text {
	position: absolute;
	bottom: clamp(1.5rem, 4vw, 3rem);
	left: clamp(1.5rem, 4vw, 3rem);
	z-index: 1;
	}

.hero-statement {
	font-family: var(--font-serif);
	font-size: var(--type-display);
	font-weight: 300;
	color: #fff;
	line-height: 1.1;
	margin: 0;
	}


/* ============================================================
   Phase 2 — Product Page Two-Column Layout
   ============================================================ */

.product-layout {
	display: block;
	padding: 0 30px 4rem;
	margin-top: 24px; /* breathing room below in-flow header */
	}

/* Gallery: Zalando-style thumbnail + main image */
.gallery-main {
	width: 100%;
	}

.gallery-main a {
	display: block;
	}

.gallery-main img {
	width: 100%;
	height: auto;
	display: block;
	}

/* Mobile: thumbs as horizontal scroll row below main image */
.gallery-thumbs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 8px 0;
	-webkit-overflow-scrolling: touch;
	}

.gallery-thumb {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	display: block;
	border: 1px solid transparent;
	opacity: 0.6;
	transition: opacity var(--transition), border-color var(--transition);
	}

.gallery-thumb.active {
	opacity: 1;
	border-color: var(--color-text);
	}

.gallery-thumb:hover {
	opacity: 1;
	}

.gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	float: none;
	}

.product-drawing {
	background: #fff;
	border: 1px solid var(--color-line);
	padding: 2rem;
	margin-top: 10px;
	width: 100%;
	flex-basis: 100%;
	}

.product-drawing img {
	width: 100%;
	height: auto;
	display: block;
	}

.product-gallery .video-container {
	margin-top: 10px;
	}

.product-info {
	width: 100%;
	padding-top: 0;
	display: flex;
	flex-direction: column;
	}

/* Product info: content order (all breakpoints) */
.product-info > h1                                                          { order: 1; }
.product-info > p:not(.product-family-link)                                 { order: 2; }
.product-info > .product-cta                                                { order: 3; }
.product-info > .product-video                                              { order: 4; }
.product-info > .product-downloads                                          { order: 5; }
.product-info > .product-designer-block                                     { order: 6; }
.product-info > .product-family-link                                        { order: 7; }
.product-info > .bezug-module                                               { order: 8; }

.product-video {
	margin-top: 1.5rem;
	}

/* Mobile lead image — hidden on tablet/desktop */
.product-mobile-image { display: none; }

.product-mobile-image {
	position: relative;
	cursor: pointer;
	}

/* keep <a> inside the hero as a block so it fills the full width */
.product-mobile-image a { display: block; }

/* Zoom indicator — bottom-right corner of mobile hero */
.product-mobile-image::after {
	content: '';
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background:
		rgba(244, 243, 238, 0.90)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='5.5' cy='5.5' r='4' fill='none' stroke='%232A2A2A' stroke-width='1.4'/%3E%3Cline x1='8.5' y1='8.5' x2='13' y2='13' stroke='%232A2A2A' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")
		center / 14px 14px no-repeat;
	border: 1px solid rgba(42, 42, 42, 0.18);
	}

.product-info h1 {
	font-size: var(--type-heading);
	text-align: left;
	margin-top: 0;
	margin-bottom: 0.2rem;
	}

.product-designer-credit {
	font-family: var(--font-sans);
	font-size: var(--type-caption);
	color: var(--color-text-muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 1.5rem;
	}

.product-cta {
	margin: 2rem 0 0;
	}

.btn-product {
	display: inline-block;
	padding: 14px 48px;
	background: transparent;
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1px solid var(--color-text);
	cursor: pointer;
	text-decoration: none;
	transition: background var(--transition), color var(--transition);
	margin-bottom: 0.75rem;
	}

.btn-product:hover {
	background: var(--color-text);
	color: var(--color-bg);
	text-decoration: none;
	}

.product-dealer-link {
	font-size: var(--type-caption);
	color: var(--color-text-muted);
	text-align: center;
	margin-bottom: 0;
	}

.product-dealer-link a {
	color: var(--color-text-muted);
	}

.product-dealer-link a:hover {
	color: var(--color-text);
	}

.bezug-module {
	margin-top: 0;
	padding-top: 0;
	margin-bottom: 0;
	}

.bezug-region {
	margin-bottom: 1.5rem;
	}

.bezug-region-title {
	font-family: var(--font-sans);
	font-size: var(--type-caption);
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-text-muted);
	margin-top: 0;
	margin-bottom: 0.5rem;
	text-align: left;
	background: none;
	opacity: 1;
	line-height: 1.4;
	}

.bezug-group {
	margin-bottom: 0.75rem;
	}

.bezug-label {
	font-family: var(--font-sans);
	font-size: var(--type-caption);
	color: var(--color-text-muted);
	margin-bottom: 0.35rem;
	}

.bezug-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	}

/* ============================================================
   Bezug Modal Overlay
   ============================================================ */

.bezug-modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(244, 243, 238, 0.97);
	z-index: 300;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	}

.bezug-modal-overlay.is-open {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 4rem 2rem 4rem;
	}

.bezug-modal-inner {
	position: relative;
	max-width: 560px;
	width: 100%;
	}

.bezug-modal-close {
	position: fixed;
	top: 1.5rem;
	right: 1.5rem;
	background: none;
	border: none;
	font-size: 1.4rem;
	cursor: pointer;
	color: var(--color-text);
	line-height: 1;
	padding: 8px;
	z-index: 301;
	}

.bezug-modal-close:hover {
	opacity: 0.5;
	}

/* Country selector bar — no border-bottom; first section's border-top is the divider */
.bezug-country-bar {
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
	}

.bezug-country-label {
	font-family: var(--font-sans);
	font-size: var(--type-caption);
	color: var(--color-text-muted);
	display: block;
	margin-bottom: 0.5rem;
	}

.bezug-country-label strong {
	color: var(--color-text);
	}

.bezug-country-hint {
	font-family: var(--font-sans);
	font-size: var(--type-caption);
	color: var(--color-text-muted);
	display: block;
	margin-bottom: 0.4rem;
	}

.bezug-chips {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	}

.bezug-chip {
	padding: 5px 14px;
	background: transparent;
	border: 1px solid var(--color-line);
	font-family: var(--font-sans);
	font-size: var(--type-caption);
	cursor: pointer;
	color: var(--color-text-muted);
	transition: all var(--transition);
	letter-spacing: 0.06em;
	}

.bezug-chip.is-active,
.bezug-chip:hover {
	border-color: var(--color-text);
	color: var(--color-text);
	}

.bezug-country-select {
	font-family: var(--font-sans);
	font-size: var(--type-caption);
	color: var(--color-text-muted);
	border: 1px solid var(--color-line);
	background: transparent;
	padding: 5px 8px;
	cursor: pointer;
	}

/* Modal content sections */
.bezug-section {
	border-top: 1px solid var(--color-line);
	padding-top: 1.25rem;
	margin-bottom: 1.25rem;
	}

.bezug-section--link {
	padding-top: 1rem;
	margin-bottom: 1rem;
	}

.bezug-section-label {
	font-family: var(--font-sans);
	font-size: var(--type-caption);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-text-muted);
	margin: 0 0 0.75rem;
	}

/* City heading within showroom group */
.bezug-city-heading {
	font-family: var(--font-sans);
	font-size: var(--type-caption);
	font-weight: 500;
	color: var(--color-text);
	margin: 0.75rem 0 0.25rem;
	}

.bezug-city-heading:first-child {
	margin-top: 0;
	}

/* Local showrooms */
.bezug-showroom-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	}

.bezug-dealer {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	}

.bezug-dealer-name {
	font-family: var(--font-sans);
	font-size: var(--type-body);
	color: var(--color-text);
	}

.bezug-dealer-addr,
.bezug-dealer-phone {
	font-family: var(--font-sans);
	font-size: var(--type-caption);
	color: var(--color-text-muted);
	}

.bezug-dealer-phone {
	text-decoration: none;
	}

/* Contact form */
.bezug-contact-form {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	}

.bezug-hp {
	position: absolute;
	left: -9999px;
	opacity: 0;
	height: 0;
	}

.bezug-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
	}

@media (max-width: 719px) {
	.bezug-form-row { grid-template-columns: 1fr; }
	.sell-online-grid { flex-direction: column; align-items: center; }
	}

.bezug-input,
.bezug-textarea {
	font-family: var(--font-sans);
	font-size: var(--type-body);
	color: var(--color-text);
	background: transparent;
	border: 1px solid var(--color-line);
	padding: 9px 12px;
	width: 100%;
	box-sizing: border-box;
	resize: vertical;
	}

.bezug-input:focus,
.bezug-textarea:focus {
	outline: none;
	border-color: var(--color-text);
	}

.bezug-submit {
	align-self: flex-start;
	}

.bezug-form-status {
	font-family: var(--font-sans);
	font-size: var(--type-caption);
	color: var(--color-text-muted);
	margin: 0;
	min-height: 1.2em;
	}

.btn--disabled {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
	}

.bezug-note {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: var(--type-caption);
	color: var(--color-text-muted);
	margin-left: 0.5em;
	vertical-align: middle;
	}

/* ============================================================
   Sell / Vertrieb page
   ============================================================ */

.sell-online-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem 2rem;
	margin-bottom: 1rem;
	}

.sell-online-item {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 180px;
	}

.sell-online-item a {
	font-family: var(--font-sans);
	font-size: var(--type-body);
	color: var(--color-text);
	text-decoration: underline;
	text-underline-offset: 3px;
	}

.sell-ships-to {
	font-family: var(--font-sans);
	font-size: var(--type-caption);
	color: var(--color-text-muted);
	}

.sell-country-heading {
	margin-top: 3rem;
	margin-bottom: 0.25rem;
	}

.sell-subsection-heading {
	font-family: var(--font-sans);
	font-size: var(--type-caption);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-text-muted);
	font-weight: 400;
	margin: 1.5rem 0 0.5rem;
	}

/* ============================================================
   Product Downloads
   ============================================================ */

.product-downloads {
	border-top: 1px solid var(--color-line);
	margin-top: 2rem;
	padding-top: 1.5rem;
	}

.product-downloads a {
	display: block;
	font-size: var(--type-caption);
	font-family: var(--font-sans);
	color: var(--color-text-muted);
	padding: 0.25rem 0;
	text-decoration: none;
	transition: color var(--transition);
	}

.product-downloads a:hover {
	color: var(--color-text);
	text-decoration: none;
	}
.product-downloads .dl-na {
	display: block;
	font-size: var(--type-caption);
	font-family: var(--font-sans);
	color: var(--color-text-muted);
	padding: 0.25rem 0;
	opacity: 0.4;
	cursor: default;
	}

.product-designer-block {
	border-top: 1px solid var(--color-line);
	margin-top: 2rem;
	padding-top: 1.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	}

.product-designer-block img {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 50%;
	flex-shrink: 0;
	}

.product-family-link {
	border-top: 1px solid var(--color-line);
	margin-top: 2rem;
	padding-top: 1.5rem;
	font-size: var(--type-caption);
	color: var(--color-text-muted);
	margin-bottom: 0;
	}

.product-family-link a {
	color: var(--color-text-muted);
	}

.product-family-link a:hover {
	color: var(--color-text);
	}

@media only screen and (min-width: 720px) {

.product-layout {
	display: flex;
	align-items: flex-start;
	gap: 2rem;
	padding: 0 80px;
	}

.product-gallery {
	width: 60%;
	flex-shrink: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	}

.gallery-thumbs {
	flex-direction: column;
	overflow-x: visible;
	overflow-y: auto;
	max-height: 80vh;
	width: 80px;
	flex-shrink: 0;
	padding: 0;
	}

.gallery-thumb {
	width: 80px;
	height: 80px;
	}

.gallery-main {
	flex: 1;
	min-width: 0;
	}

.product-info {
	width: 40%;
	position: sticky;
	top: 85px;
	padding-top: 0;
	max-height: calc(100vh - 100px);
	overflow-y: auto;
	scrollbar-width: none;          /* Firefox */
	-ms-overflow-style: none;       /* IE/Edge */
	}

.product-info::-webkit-scrollbar {
	display: none;                   /* Chrome/Safari */
	}

.btn-product {
	padding: 14px 32px;
	}

}

@media only screen and (min-width: 1200px) {

.product-layout {
	padding: 0 100px 4rem;
	gap: 3rem;
	}

.product-gallery {
	flex: 0 0 55%;
	max-width: 55%;
	}

.product-info {
	flex: 0 0 45%;
	max-width: 45%;
	}

}


/* ============================================================
   Mobile: Header — 60px height, vertically centred elements
   ============================================================ */

@media only screen and (max-width: 719px) {

/* Override global 70px to 60px on mobile */
#header-d { height: 60px; }

/* Centre hamburger vertically in 60px header (glass pill ~26px tall → top: 17px) */
#menu-b { margin-top: 17px; }

/* Centre lang switch vertically in 60px header */
#lang-switch { top: 17px; }

/* Content clearance — small breathing gap below header on mobile */
#hero,
.product-layout,
#overlay + .maincont { margin-top: 20px; }

}

/* ============================================================
   Mobile: Product page — interleaved content ordering
   Uses display:contents so gallery + info children participate
   directly in .product-layout's flex ordering.
   ============================================================ */

@media only screen and (max-width: 719px) {

.product-layout {
	display: flex;
	flex-direction: column;
	}

.product-gallery { display: contents; }
.product-info    { display: contents; }

.product-info > h1                                      { order: 1; }
.gallery-main                                           { order: 2; }
.gallery-thumbs                                         { order: 3; flex-direction: row; overflow-x: auto; }
.product-info > p:not(.product-family-link)              { order: 4; }
.product-info > .product-cta                             { order: 5; margin-top: 1rem; }
.product-info > .product-downloads                       { order: 6; }
.product-drawing                                         { order: 7; }
.product-info > .product-designer-block                  { order: 8; }
.product-info > .product-video                           { order: 9; }
.product-info > .product-family-link                     { order: 10; }
.product-info > .bezug-module                            { order: 11; }

/* Hide the dedicated mobile image — gallery-main now serves that role */
.product-mobile-image { display: none; }

/* Buy button: ensure content-width, never stretched */
.btn-product { display: inline-block; width: auto; }

}