/* =========================================================
   Furchner GmbH – zentrales Stylesheet
   Alle Farben, Schriften und Abstände werden hier über
   Variablen gesteuert. Änderungen bitte nur in :root.
   ========================================================= */

:root {
	/* Markenfarben */
	--c-primary:       #df0c1b;   /* Furchner-Rot (Logo) */
	--c-primary-dark:  #b80a16;   /* Hover / aktiv */
	--c-primary-soft:  rgba(223, 12, 27, .15);

	/* Graustufen (Anthrazit-Familie) */
	--c-dark:          #454545;   /* Header, Footer, Navigation */
	--c-darker:        #2b2b2b;   /* Fußleiste, mobile Menüleiste */
	--c-dark-2:        #5a5a5a;   /* Dropdown-Hintergrund */
	--c-text:          #404040;   /* Fließtext */
	--c-muted:         #6b6b6b;   /* Nebeninformationen */
	--c-border:        #dcdcdc;
	--c-surface:       #f5f5f5;   /* helle Flächen */
	--c-white:         #ffffff;
	--c-on-dark:       #ffffff;   /* Text auf dunklem Grund */
	--c-on-dark-muted: #cfcfcf;

	/* Schrift – eine Familie für die ganze Seite */
	--font:            "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Schriftgrößen (wachsen fließend mit dem Bildschirm) */
	--fs-small:  15px;
	--fs-nav:    16px;
	--fs-body:   clamp(16px, 0.25vw + 15px, 18px);
	--fs-h4:     clamp(19px, 0.5vw + 16px, 22px);
	--fs-h3:     clamp(22px, 1.4vw + 15px, 32px);

	--lh-body:   1.6;
	--lh-head:   1.25;

	/* Abstände */
	--space-xs:  8px;
	--space-s:   12px;
	--space-m:   24px;
	--space-l:   48px;
	--gutter:    24px;

	--radius:    4px;
}


/* ---------- Grundlagen ---------- */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;
	background: var(--c-white);
	font-family: var(--font);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: var(--lh-body);
	color: var(--c-text);
	overflow-wrap: break-word;
}

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

p {
	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-text);
	margin: var(--space-m) 0;
}

b, strong { font-weight: 700; }

/* Links im Inhalt */
main a {
	color: var(--c-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color .2s;
}
main a:hover,
main a:focus-visible {
	color: var(--c-primary-dark);
}


/* ---------- Überschriften ---------- */

h3 {
	font-family: var(--font);
	color: var(--c-text);
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: var(--lh-head);
	margin: var(--space-l) 0 var(--space-m) 0;
	padding: 0;
	-webkit-hyphens: auto;
	hyphens: auto;
}

h3:before {
	content: "\25CF";
	display: inline-block;
	padding: 0 10px 4px 0;
	vertical-align: middle;
	font-size: .6em;
	color: var(--c-primary);
}

h4,
h4.subh4 {
	font-family: var(--font);
	color: var(--c-text);
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: var(--lh-head);
	margin: 36px 0 var(--space-s) 0;
	padding-left: 12px;
	border-left: 3px solid var(--c-primary);
}


/* ---------- Listen im Inhalt ---------- */

main ul:not(.gallery) {
	margin: var(--space-s) 0 var(--space-m) 0;
	padding-left: 1.3em;
}

main ul:not(.gallery) li {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	margin: 4px 0;
	padding-left: 4px;
}

main ul:not(.gallery) li::marker {
	color: var(--c-primary);
}

/* Partnerlisten mehrspaltig */
.list-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 var(--gutter);
}
.list-grid ul { margin-top: 0; }

/* Eingebettete Inhalte (z. B. Somfy) */
.iframe-box {
	max-width: 100%;
	overflow-x: auto;
	margin: var(--space-m) 0;
}
.iframe-box iframe { max-width: 100%; }


/* ---------- Header ---------- */

header {
	display: block;
	background: var(--c-dark);
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	padding: var(--space-l) 0 var(--space-m) 0;
	text-align: center;
}

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


/* ---------- Navigation ---------- */

#container {
	margin: 0 auto;
	max-width: 890px;
}

.toggle,
[id^=drop] {
	display: none;
}

nav {
	margin: var(--space-m) 0 0 0;
	padding: 0;
	font-family: var(--font);
}

nav:after {
	content: "";
	display: table;
	clear: both;
}

nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
}

nav ul li {
	margin: 0;
	display: inline-block;
	background-color: var(--c-dark);
}

nav a {
	display: block;
	padding: 14px 20px;
	color: var(--c-on-dark);
	font-size: var(--fs-nav);
	line-height: 1.4;
	text-decoration: none;
	transition: color .2s, background-color .2s;
}

nav a:hover,
nav a:focus-visible,
nav a.active {
	color: var(--c-primary);
}

/* Dropdown */
nav ul ul {
	display: none;
	position: absolute;
	z-index: 10;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}

nav ul li:hover > ul {
	display: inherit;
}

nav ul li:hover > ul.drop-multi {
	background: var(--c-dark-2);
	display: grid !important;
	grid-template-columns: 225px 225px 225px;
	grid-column-gap: 0;
	margin: 0;
}

nav ul li:hover > ul.drop-multi li {
	width: fit-content;
}

nav ul ul li {
	width: auto;
	float: none;
	display: list-item;
	position: relative;
	left: -80px;
	background: var(--c-dark-2);
	text-align: left;
}

nav ul ul li:hover { background: var(--c-darker); }

nav ul ul a:hover,
nav ul ul a.active { color: var(--c-on-dark); }
nav ul ul li:hover > a { color: var(--c-on-dark); }
nav ul ul a.active { box-shadow: inset 3px 0 0 var(--c-primary); }

nav ul ul ul li {
	position: relative;
	top: -60px;
	left: 170px;
}

/* Dropdown-Pfeil */
li > a:after {
	content: '»';
	display: inline-block;
	position: absolute;
	vertical-align: middle;
	margin-left: 10px;
	transform: rotate(90deg);
	transition: color .3s, background-color .3s;
}
li > a:only-child:after { content: ''; }


/* ---------- Titelbild / Slider ---------- */

.titleimage {
	display: block;
	width: 100%;
	height: auto;
	overflow-y: hidden;
}

.fade {
	position: relative;
	width: 100%;
	height: clamp(180px, 40vw, 400px);
	overflow: hidden;
	background: var(--c-dark);
}
.fade img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}
.fade img.active { opacity: 1; }


/* ---------- Inhalt ---------- */

.main-content {
	width: auto;
	max-width: 1120px;
	padding: 0 var(--gutter);
	display: block;
	margin: 0 auto;
}

main .main-content { padding-bottom: var(--space-l); }

.img-left {
	float: left;
	margin: 0 var(--gutter) var(--space-s) 0;
	width: 35%;
}

.clear { clear: both; }

/* Bild-Link-Kacheln (Startseite) */
.img-link-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gutter);
	margin: 72px 0 var(--space-m);
}

.img-link-grid img {
	width: 100%;
	display: block;
	transition: opacity .2s;
}
.img-link-grid a:hover img { opacity: .85; }

.img-link-grid p {
	font-size: var(--fs-h4);
	line-height: var(--lh-head);
	font-weight: 700;
	text-align: center;
	margin: var(--space-s) 0 0 0;
}

.img-link-grid p:before {
	content: "\25CF";
	display: inline-block;
	padding: 0 8px 3px 0;
	vertical-align: middle;
	font-size: .6em;
	color: var(--c-primary);
}

.img-link-grid p a {
	color: var(--c-text);
	text-decoration: none;
}
.img-link-grid p a:hover { color: var(--c-primary); }


/* ---------- Galerie-Raster ---------- */

.gallery {
	list-style: none;
	margin: var(--space-m) 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
	gap: 20px;
}
.gallery figure { margin: 0; }
.gallery button {
	all: unset;
	cursor: pointer;
	display: block;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--c-border);
	padding: 4px;
	background: var(--c-white);
	transition: border-color .2s;
}
.gallery button:hover { border-color: var(--c-primary); }
.gallery button:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery figcaption {
	margin-top: 6px;
	text-align: center;
	font-size: var(--fs-small);
	line-height: 1.4;
	color: var(--c-text);
}
.gallery figcaption small { display: block; color: var(--c-muted); font-size: 13px; }

/* ---------- Lightbox ---------- */

.lightbox {
	border: 0;
	padding: 10px 10px 0;
	background: var(--c-white);
	color: var(--c-text);
	font-family: var(--font);
	max-width: min(94vw, 1100px);
	max-height: 94dvh;
	overflow: hidden;
}
.lightbox::backdrop { background: rgb(0 0 0 / .8); }
.lightbox[open] { display: flex; flex-direction: column; }

.lb-stage { position: relative; touch-action: pan-y; }
.lb-stage img {
	display: block;
	max-width: 100%;
	max-height: calc(94dvh - 90px);
	margin-inline: auto;
	object-fit: contain;
}
.lb-caption {
	display: flex; flex-wrap: wrap; gap: 4px 12px;
	align-items: baseline;
	padding: 10px 40px 12px 2px;
	font-size: var(--fs-small);
}
.lb-caption strong { font-weight: 700; }
.lb-caption span { color: var(--c-muted); }
.lb-count { order: 3; margin-left: auto; color: var(--c-muted); font-size: 14px; }

.lb-btn {
	position: absolute;
	border: 0;
	background: rgb(255 255 255 / .85);
	color: var(--c-text);
	font-size: 1.6rem; line-height: 1;
	width: 44px; height: 44px;
	cursor: pointer;
}
.lb-btn:hover, .lb-btn:focus-visible { background: var(--c-white); color: var(--c-primary); outline: none; }
.lb-prev  { left: 0;  top: 50%; translate: 0 -50%; }
.lb-next  { right: 0; top: 50%; translate: 0 -50%; }
.lb-close { right: 0; bottom: 0; background: none; font-size: 1.5rem; }


/* ---------- Footer ---------- */

footer {
	display: block;
	width: 100%;
	padding: var(--space-m) 0 0 0;
	margin: 0 auto;
	background: var(--c-dark);
	font-family: var(--font);
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gutter);
	margin: var(--space-m) 0 var(--space-l) 0;
}

.separator {
	display: flex;
	align-items: center;
	text-align: center;
	width: 60%;
	margin: 0 auto var(--space-xs);
	color: var(--c-primary);
	font-size: 28px;
	line-height: 1;
}

.separator::before,
.separator::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid rgba(255, 255, 255, .35);
}
.separator:not(:empty)::before { margin-right: .3em; }
.separator:not(:empty)::after  { margin-left: .3em; }

.footer-grid h4 {
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: var(--lh-head);
	color: var(--c-on-dark);
	text-align: center;
	margin: 0 0 var(--space-s) 0;
	padding: 0;
	border: 0;
}

.footer-grid p {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-on-dark-muted);
	text-align: center;
	margin: 0;
}

.footer-grid p a {
	color: var(--c-on-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.footer-grid p a:hover { color: var(--c-primary); }

.footer-link {
	display: block;
	background: var(--c-darker);
	width: 100%;
	box-sizing: border-box;
	padding: var(--space-m) 16px;
	margin: 0 auto;
	text-align: center;
}

.footer-link p {
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-on-dark-muted);
	text-align: center;
	margin: 0;
}

ul.footer-link-list {
	list-style-type: none;
	margin: 0 0 var(--space-s) 0;
	padding: 0;
}

ul.footer-link-list li { display: inline-block; }

ul.footer-link-list li::after {
	content: "|";
	margin: 0 12px;
	color: rgba(255, 255, 255, .35);
}
ul.footer-link-list li:last-child:after { content: ''; margin: 0; }

ul.footer-link-list li a {
	color: var(--c-on-dark);
	font-size: var(--fs-nav);
	line-height: 1.5;
	text-decoration: none;
}
ul.footer-link-list li a:hover { color: var(--c-primary); text-decoration: underline; }


/* =========================================================
   Responsive
   ========================================================= */

/* Tablet Querformat / kleine Laptops */
@media all and (min-width: 769px) and (max-width: 1024px) {
	nav ul li:hover > ul.drop-multi {
		grid-template-columns: 225px 225px;
	}
	.img-link-grid { margin-top: 56px; }
}

/* Tablet Hochformat / Smartphones: mobiles Menü */
@media all and (max-width: 768px) {

	:root {
		--gutter: 20px;
		--space-l: 36px;
	}

	header { padding: var(--space-m) 0 0 0; }
	header > a {
		display: block;
		padding: 0 20px 16px 20px;
	}
	header img { max-width: 300px; }

	nav { margin: 0; }

	.toggle + a,
	.menu { display: none; }

	.toggle {
		display: block;
		background-color: var(--c-darker);
		padding: 14px 20px;
		color: var(--c-on-dark);
		font-size: var(--fs-nav);
		line-height: 1.4;
		text-align: left;
		border: none;
		border-top: 1px solid rgba(255, 255, 255, .08);
		cursor: pointer;
	}

	nav > .toggle {
		text-align: center;
		font-weight: 700;
		letter-spacing: .03em;
		border-top: 3px solid var(--c-primary);
	}

	.toggle:hover { background-color: #000; }

	[id^=drop]:checked + ul { display: block; }

	nav ul li {
		display: block;
		width: 100%;
		background-color: var(--c-darker);
		text-align: left;
	}

	nav a {
		border-top: 1px solid rgba(255, 255, 255, .08);
	}

	nav a:hover { background-color: #000; }

	nav ul li ul li .toggle,
	nav ul ul a,
	nav ul ul ul a {
		padding: 12px 20px 12px 36px;
		color: var(--c-on-dark);
		font-size: var(--fs-nav);
		background-color: var(--c-dark);
	}

	nav ul ul a:hover { background-color: var(--c-dark-2); }

	nav ul ul {
		float: none;
		position: static;
		box-shadow: none;
	}

	nav ul ul li:hover > ul,
	nav ul li:hover > ul { display: none; }

	nav ul ul li {
		display: block;
		width: 100%;
		left: 0;
		background: var(--c-dark);
	}

	nav ul li:hover > ul.drop-multi { display: none !important; }
	[id^=drop]:checked + ul.drop-multi {
		display: block !important;
		background: none;
	}
	nav ul li ul.drop-multi li,
	nav ul li:hover > ul.drop-multi li { width: 100%; }

	nav ul ul ul li { position: static; }

	/* Pfeil im mobilen Menü ausblenden (Toggle übernimmt) */
	li > a:after { display: none; }

	h4, h4.subh4 { margin-top: 28px; }

	.list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.img-link-grid {
		gap: 16px;
		margin-top: var(--space-l);
	}

	.footer-grid {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}
	.separator { width: 50%; }
	ul.footer-link-list li::after { margin: 0 8px; }
}

/* Smartphones */
@media all and (max-width: 600px) {
	p { margin: 18px 0; -webkit-hyphens: auto; hyphens: auto; }

	.img-left {
		float: none;
		display: block;
		width: 100%;
		margin: 0 0 var(--space-xs) 0;
	}

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

	.img-link-grid {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}

	.gallery { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

	ul.footer-link-list li { margin: 4px 0; }
	ul.footer-link-list li a { font-size: var(--fs-small); }
	.footer-link p { font-size: 13px; }
}

/* Sehr kleine Geräte (z. B. 320 px) */
@media all and (max-width: 360px) {
	:root { --gutter: 14px; }
	.gallery { grid-template-columns: 1fr; }
}