/*
 * Mehrsprachigkeit (alle Seiten): Sprachumschalter, Hinweis „maschinell übersetzt“, Schriften für
 * Latin Extended (Mono) und Kyrillisch. Arabische Schrift und gespiegelte Regeln: rtl.css + rtl/*.css.
 * Nicht Teil des Exports aus der nativen Variante (bin/export-from-native.mjs überschreibt nur base.css & Co.).
 */

/* --- Schriften: Dateien werden nur geladen, wenn Zeichen aus ihrem unicode-range vorkommen --------------- */
@font-face {
	font-family: "Plex Mono";
	src: url(../fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2");
	font-weight: 400;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Plex Mono";
	src: url(../fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2");
	font-weight: 500;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Plex Mono";
	src: url(../fonts/ibm-plex-mono-cyrillic-400-normal.woff2) format("woff2");
	font-weight: 400;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: "Plex Mono";
	src: url(../fonts/ibm-plex-mono-cyrillic-500-normal.woff2) format("woff2");
	font-weight: 500;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: Plex;
	src: url(../fonts/ibm-plex-sans-cyrillic-wght-normal.woff2) format("woff2-variations");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Archivo hat kein Kyrillisch: Überschriften in bg/uk/ru setzen die kyrillischen Zeichen in IBM Plex Sans
   (dieselbe Datei wie der Fließtext, Breitenachse entfällt) */
@font-face {
	font-family: Archivo;
	src: url(../fonts/ibm-plex-sans-cyrillic-wght-normal.woff2) format("woff2-variations");
	font-weight: 600 900;
	font-stretch: 100% 125%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* --- Sprachumschalter --------------------------------------------------------------------------------- */
.lang {
	position: relative;
	flex: none;
}
.lang-btn {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 44px;
	padding: 0 .7rem;
	border: 1px solid var(--line-d);
	border-radius: var(--radius);
	background: transparent;
	color: #fff;
	font: 500 .8125rem/1 var(--f-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .2s, background-color .2s;
}
.lang-btn[hidden] {
	display: none;
}
.lang-btn:hover,
.lang.is-open .lang-btn {
	border-color: #ffffff80;
}
.lang-btn svg {
	width: 16px;
	height: 16px;
	flex: none;
}
.lang-btn svg.chevron {
	width: 14px;
	height: 14px;
	transition: transform .25s var(--ease);
}
.lang.is-open .lang-btn svg.chevron {
	transform: rotate(180deg);
}
.lang--bar .lang-name,
.lang--bar .lang-btn svg.chevron {
	display: none;
}
.lang--bar .lang-btn {
	padding: 0 .6rem;
}
.lang-list {
	display: none;
	margin: 0;
	padding: .4rem;
	list-style: none;
	background: var(--ink);
	border: 1px solid var(--line-d);
	border-radius: var(--radius);
	grid-template-columns: repeat(2, minmax(9.5rem, 1fr));
	gap: 1px;
}
.lang-list:target,
.lang.is-open .lang-list {
	display: grid;
}
.lang--bar .lang-list {
	position: absolute;
	top: calc(100% + .6rem);
	inset-inline-end: 0;
	z-index: 60;
	box-shadow: 0 18px 40px #00000059;
}
.lang-list a {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .6rem .7rem;
	border-radius: var(--radius);
	color: #d5d9dc;
	font: 500 .95rem/1.2 var(--f-body);
	text-decoration: none;
	white-space: nowrap;
}
.lang-list a:before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	background: transparent;
}
.lang-list a:hover,
.lang-list a:focus-visible {
	background: var(--ink-3);
	color: #fff;
}
.lang-list a[aria-current] {
	color: #fff;
}
.lang-list a[aria-current]:before {
	background: var(--red);
}
@media (width<=1100px) {
	.lang--bar {
		display: none;
	}
	.lang--menu .lang-btn {
		width: 100%;
		min-height: 52px;
		padding: 0 1rem;
		font: 600 1rem/1.1 var(--f-body);
		letter-spacing: .01em;
		text-transform: none;
	}
	.lang--menu .lang-code {
		display: none;
	}
	.lang--menu .lang-btn svg.chevron {
		margin-inline-start: auto;
	}
	.lang--menu .lang-list {
		margin-top: .5rem;
	}
}
/* Ohne JavaScript bleibt das mobile Menü zu – dann den kompakten Umschalter in der Kopfzeile zeigen */
@media (width<=1100px) and (scripting: none) {
	.header-cta {
		display: flex;
	}
	.header-cta > :not(.lang) {
		display: none;
	}
	.lang--bar {
		display: block;
	}
}
@media (width>1100px) {
	.lang--menu {
		display: none;
	}
}

/* Platz für den Umschalter in der Desktop-Kopfzeile: etwas engere Abstände (alle Sprachen, auch Deutsch);
   die Telefonnummer weicht bis 1365 px (vorher 1180 px), damit Menü und Button einzeilig bleiben */
@media (width>1100px) {
	.site-header .wrap {
		gap: 1.25rem;
	}
	.nav ul a {
		padding-inline: .65rem;
	}
	.nav ul a:after {
		inset-inline: .65rem;
	}
}
@media (width>1100px) and (width<=1365px) {
	.header-phone {
		display: none;
	}
}

/* Im mobilen Menü erbt die Liste sonst Anzeige und Schrift der Menüpunkte (.nav ul, .nav ul a) */
.nav .lang-list {
	display: none;
}
.nav .lang-list:target,
.nav .lang.is-open .lang-list {
	display: grid;
}
.nav .lang-list li {
	border-bottom: 0;
}
.nav .lang-list a {
	display: flex;
	padding: .7rem .75rem;
	color: #d5d9dc;
	font: 500 1rem/1.2 var(--f-body);
}
.nav .lang-list a[aria-current] {
	color: #fff;
}

/* Menüpunkte und Kopfzeilen-Button nicht umbrechen (Übersetzungen sind oft mehrteilig); Unterzeile im Logo
   mobil kürzen statt die Kopfzeile zu sprengen */
:root:not([lang=de]) .header-cta .btn {
	white-space: nowrap;
}
@media (width<=1100px) {
	:root:not([lang=de]) .site-header .brand {
		min-width: 0;
		flex: 0 1 auto;
	}
	:root:not([lang=de]) .site-header .brand-text {
		min-width: 0;
	}
	/* zweizeilig statt mit „…“ gekürzt; Ellipse + overflow schnitten Akzente (İ, Ă, Ë, Й) oben ab */
	:root:not([lang=de]) .site-header .brand-sub {
		line-height: 1.35;
		margin-top: .3rem;
	}
}
.site-header .brand svg.mark,
.header-phone svg {
	flex: none;
}

/* --- Hinweis „maschinell übersetzt“ (nur Sprachseiten) ------------------------------------------------ */
.foot-mt {
	margin: -1rem 0 0;
	padding-bottom: 2rem;
	max-width: 75ch;
	color: var(--muted-d);
	font-size: var(--fs-xs);
}
.foot-mt a {
	color: #e6e8ea;
	text-decoration: underline;
	text-underline-offset: .15em;
}
.foot-mt a:hover {
	color: #fff;
}

/* --- Mobiles Menü auch auf schmalen Desktops: alle Sprachen bis 1239 px, Sprachseiten (längere Menüpunkte) bis 1360 px.
   Kopie der Regeln aus base.css „width<=1100px“; :where() hält die Spezifität gleich. Ohne JavaScript bleibt das
   Desktop-Menü, weil sich das mobile Menü nur per Skript öffnet. */
@media (width>1100px) and (width<=1239px) and (scripting: enabled) {
	:where(html) .menu-btn {
		display: block;
	}
	:where(html) .header-cta {
		display: none;
	}
	:where(html) .nav {
		inset: var(--header-h) 0 0 0;
		background: var(--ink);
		padding: 1.5rem var(--gut) 2rem;
		overscroll-behavior: contain;
		visibility: hidden;
		transition: transform .45s var(--ease), visibility 0s linear .45s;
		flex-direction: column;
		margin: 0;
		display: flex;
		position: fixed;
		overflow-y: auto;
		transform: translate(100%);
	}
	:where(html[dir=rtl]) .nav {
		transform: translate(-100%);
	}
	:where(html) .nav.is-open {
		visibility: visible;
		transition: transform .45s var(--ease);
		transform: none;
	}
	:where(html) .nav ul {
		flex-direction: column;
		gap: 0;
	}
	:where(html) .nav li {
		border-bottom: 1px solid var(--line-d);
	}
	:where(html) .nav ul a {
		font: 760 1.75rem/1 var(--f-display);
		color: #fff;
		padding: 1.15rem 0;
		font-stretch: 115%;
	}
	:where(html) .nav ul a:after {
		display: none;
	}
	:where(html) .nav ul a[aria-current=page] {
		color: var(--red);
	}
	:where(html) .nav-mobile-extra {
		gap: .75rem;
		margin-top: auto;
		padding-top: 2rem;
		display: grid !important;
	}
	:where(html) .nav .lang-list li {
		border-bottom: 0;
	}
	:where(html) .nav .lang-list a {
		padding: .7rem .75rem;
		color: #d5d9dc;
		font: 500 1rem/1.2 var(--f-body);
	}
	:where(html) .nav .lang-list a[aria-current] {
		color: #fff;
	}
	:where(html) .lang--menu {
		display: block;
	}
	:where(html) .lang--menu .lang-btn {
		width: 100%;
		min-height: 52px;
		padding: 0 1rem;
		font: 600 1rem/1.1 var(--f-body);
		letter-spacing: .01em;
		text-transform: none;
	}
	:where(html) .lang--menu .lang-code {
		display: none;
	}
	:where(html) .lang--menu .lang-btn svg.chevron {
		margin-inline-start: auto;
	}
	:where(html) .lang--menu .lang-list {
		margin-top: .5rem;
	}
}
@media (width>=1240px) and (width<=1360px) and (scripting: enabled) {
	:where(html:not([lang=de])) .menu-btn {
		display: block;
	}
	:where(html:not([lang=de])) .header-cta {
		display: none;
	}
	:where(html:not([lang=de])) .nav {
		inset: var(--header-h) 0 0 0;
		background: var(--ink);
		padding: 1.5rem var(--gut) 2rem;
		overscroll-behavior: contain;
		visibility: hidden;
		transition: transform .45s var(--ease), visibility 0s linear .45s;
		flex-direction: column;
		margin: 0;
		display: flex;
		position: fixed;
		overflow-y: auto;
		transform: translate(100%);
	}
	:where(html[dir=rtl]) .nav {
		transform: translate(-100%);
	}
	:where(html:not([lang=de])) .nav.is-open {
		visibility: visible;
		transition: transform .45s var(--ease);
		transform: none;
	}
	:where(html:not([lang=de])) .nav ul {
		flex-direction: column;
		gap: 0;
	}
	:where(html:not([lang=de])) .nav li {
		border-bottom: 1px solid var(--line-d);
	}
	:where(html:not([lang=de])) .nav ul a {
		font: 760 1.75rem/1 var(--f-display);
		color: #fff;
		padding: 1.15rem 0;
		font-stretch: 115%;
	}
	:where(html:not([lang=de])) .nav ul a:after {
		display: none;
	}
	:where(html:not([lang=de])) .nav ul a[aria-current=page] {
		color: var(--red);
	}
	:where(html:not([lang=de])) .nav-mobile-extra {
		gap: .75rem;
		margin-top: auto;
		padding-top: 2rem;
		display: grid !important;
	}
	:where(html:not([lang=de])) .nav .lang-list li {
		border-bottom: 0;
	}
	:where(html:not([lang=de])) .nav .lang-list a {
		padding: .7rem .75rem;
		color: #d5d9dc;
		font: 500 1rem/1.2 var(--f-body);
	}
	:where(html:not([lang=de])) .nav .lang-list a[aria-current] {
		color: #fff;
	}
	:where(html:not([lang=de])) .lang--menu {
		display: block;
	}
	:where(html:not([lang=de])) .lang--menu .lang-btn {
		width: 100%;
		min-height: 52px;
		padding: 0 1rem;
		font: 600 1rem/1.1 var(--f-body);
		letter-spacing: .01em;
		text-transform: none;
	}
	:where(html:not([lang=de])) .lang--menu .lang-code {
		display: none;
	}
	:where(html:not([lang=de])) .lang--menu .lang-btn svg.chevron {
		margin-inline-start: auto;
	}
	:where(html:not([lang=de])) .lang--menu .lang-list {
		margin-top: .5rem;
	}
}

/* Desktop-Menü ab 1240 px: Menüpunkte und Kopfzeilen-Button einzeilig („Über uns“, „Angebot anfragen“) */
@media (width>=1240px) {
	.nav ul a,
	.header-cta .btn {
		white-space: nowrap;
	}
}
/* Ab 1361 px Desktop-Menü auf Sprachseiten: etwas kleinere Menüpunkte, Logo-Unterzeile darf zweizeilig werden
   (übersetzt oft doppelt so lang wie „Meisterbetrieb · Mannheim“). Passt dann für alle 17 Sprachen einzeilig,
   nur sehr lange Menüpunkte (it „Lavorare con noi“) brechen notfalls zweizeilig um statt überzulaufen */
@media (width>1360px) {
	:where(html:not([lang=de])) .nav ul {
		align-items: center;
	}
	:where(html:not([lang=de])) .nav ul a {
		white-space: normal;
		font-size: .875rem;
		line-height: 1.25;
		padding-inline: .45rem;
	}
	:where(html:not([lang=de])) .site-header .brand-sub {
		max-width: 30ch;
		line-height: 1.35;
	}
	:where(html:not([lang=de])) .nav ul a:after {
		inset-inline: .45rem;
	}
}

/* Lange Wörter in Übersetzungen (ru „конфиденциальности“, pl, uk …): Silbentrennung nach lang-Attribut, notfalls
   Umbruch im Wort statt Überlauf. Deutsch bleibt unverändert */
:where(html:not([lang=de])) body {
	overflow-wrap: break-word;
}
:where(html:not([lang=de])) :is(h1, h2, h3, h4, .h1, .h2, .h3, .lead) {
	hyphens: auto;
}

/* Claim der Startseite: Übersetzungen haben längere Wörter („fundamentu“, „фасадата“) – etwas kleiner, keine
   Silbentrennung im roten Akzentwort, Zeilenabstand mit Platz für Akzente über/unter der Zeile (ț, Ă, Ł) */
:where(html:not([lang=de])) .hero h1 .display {
	font-size: clamp(2.5rem, 1rem + 4.6vw, 5.25rem);
	line-height: 1.02;
	hyphens: manual;
}
:where(html:not([lang=de])) .hero h1 .accent {
	white-space: nowrap;
}