/**
 * mks2 — Site-Template Manfred Küster Schließtechnik
 * Child-Template von Cassiopeia. Liegt als Ebene über Cassiopeias template.css.
 *
 * Design portiert aus templates/mks_final/css/template.css (Artisteer 4.2, 2014).
 * Alle Farb- und Maßwerte stehen als Custom Properties in :root — Anpassungen
 * dort vornehmen, nicht weiter unten im Code.
 */

/* ==========================================================================
   1. Design-Tokens
   ========================================================================== */

:root {
	/* Flächen */
	--mks-page-width: 1000px;
	--mks-gutter: 1.5rem;
	--mks-sidebar-width: 25%;

	/* Grautöne — aus dem Altbestand übernommen */
	--mks-nav-from: #b2b2b2;
	--mks-nav-to: #8c8c8c;
	--mks-block-from: #9e9e9e;
	--mks-block-mid: #808080;
	--mks-block-to: #7a7a7a;
	--mks-rule: #737373;
	--mks-hairline: #dbdbdb;

	/* Text */
	--mks-text: #141414;
	--mks-heading: #575757;
	--mks-brand-text: #7a7a7a;
	--mks-nav-text: #2e2e2e;
	--mks-nav-text-active: #000;
	--mks-link: #5e5e5e;
	--mks-link-hover: #1a1a1a;
	/* Aktiver Punkt im Menümodul der Seitenspalte */
	--mks-menu-active: #8c8c8c;

	/* Footer */
	--mks-footer-bg: #f2f2f2;
	--mks-footer-text: #262626;
	--mks-footer-link: #5e5e5e;

	/* Typografie */
	--mks-font: Arial, "Arial Unicode MS", Helvetica, sans-serif;
	/* Nur für den Seitentitel im Kopfbereich, wie im Altbestand. */
	--mks-font-display: "Arial Rounded MT Bold", Arial, "Arial Unicode MS", Helvetica, sans-serif;
	--mks-font-size: 0.9375rem; /* 15px */
	--mks-line-height: 1.6;     /* Altbestand hatte "normal" — zu eng, hier korrigiert */

	/* Fokus — im Altbestand nicht vorhanden */
	--mks-focus: #0b5ed7;

	/*
	 * Gebürstetes Metall, dreilagig wie im Altbestand: Aufhellung über der
	 * Textur über dem Grundverlauf. Die url() wird relativ zu dieser Datei
	 * aufgelöst, nicht relativ zum verwendenden Element.
	 *   --mks-metal      waagerecht kachelnd, für das Menüband (53 px hoch)
	 *   --mks-metal-tile in beide Richtungen, für höhere Flächen wie Untermenüs
	 */
	--mks-metal:
		linear-gradient(180deg, rgba(188, 188, 188, 0.31) 0%, rgba(131, 131, 131, 0.14) 100%),
		url("../images/nav-metall.jpg") repeat-x top left,
		linear-gradient(180deg, #b2b2b2 0%, #8c8c8c 100%);
	--mks-metal-tile:
		linear-gradient(180deg, rgba(188, 188, 188, 0.31) 0%, rgba(131, 131, 131, 0.14) 100%),
		url("../images/nav-metall.jpg") repeat top left,
		linear-gradient(180deg, #b2b2b2 0%, #8c8c8c 100%);
}

/* ==========================================================================
   2. Basis
   ========================================================================== */

/*
 * Cassiopeias CSS-Bündel setzt box-sizing nicht global. Ohne diese Regel
 * rechnet der Browser Polsterung und Rahmen zu jeder Breite hinzu: Die
 * Inhaltsspalte maß dadurch 1048 statt 1000 px und der Kopfbereich 161 statt
 * 122 px. Bewusst nur auf die eigenen Bausteine begrenzt — ein globales
 * Zurücksetzen würde auch Cassiopeias und Joomlas Komponenten treffen.
 */
[class*="mks-"],
[class*="mks-"]::before,
[class*="mks-"]::after {
	box-sizing: border-box;
}

body.site {
	font-family: var(--mks-font);
	font-size: var(--mks-font-size);
	line-height: var(--mks-line-height);
	color: var(--mks-text);
	background: #fff;
	margin: 0;
}

/*
 * Grundzustand ohne Unterstreichung — sonst gewinnt diese Regel per Spezifität
 * gegen .mks-nav a und .mks-brand a. Unterstrichen wird gezielt im Fließtext,
 * wo die Unterscheidbarkeit von Links tatsächlich gebraucht wird.
 */
body.site a {
	color: var(--mks-link);
	text-decoration: none;
}

body.site a:hover,
body.site a:focus-visible {
	color: var(--mks-link-hover);
}

/* Sichtbarer Fokus für Tastaturbedienung. */
body.site :focus-visible {
	outline: 3px solid var(--mks-focus);
	outline-offset: 2px;
}

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

/*
 * Eigene Umsetzung statt der Bootstrap-Klassen .visually-hidden /
 * .visually-hidden-focusable: Im kompilierten CSS-Bündel von Cassiopeia sind
 * die nicht enthalten. Fehlen sie, steht Text sichtbar auf der Seite, der nur
 * für Screenreader gedacht war — etwa das „More about …" der Menümodule.
 *
 * Deshalb wird hier auch die Bootstrap-Schreibweise mitdefiniert: Kern- und
 * Cassiopeia-Markup nutzt sie an vielen Stellen, nicht nur im Menü.
 */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within),
.mks-visually-hidden,
.mks-skip:not(:focus) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/*
 * Cassiopeias mod_menu-Override hängt an jeden Elternpunkt einen Aufklapp-Knopf
 * für metismenu — im Hauptmenü wie in den Menümodulen der Seitenspalte. Ohne
 * metismenu tut der Knopf nichts. Unsere Untermenüs öffnen per Hover und Fokus,
 * in der Seitenspalte stehen sie ohnehin offen.
 */
.mod-menu__toggle-sub {
	display: none !important;
}

.mks-skip:focus {
	/* Alle Verbergungs-Eigenschaften ausdrücklich zurücksetzen. */
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	overflow: visible !important;
	clip-path: none !important;
	white-space: normal !important;

	position: absolute;
	inset-inline-start: 0.5rem;
	top: 0.5rem;
	z-index: 100;
	padding: 0.5rem 1rem !important;
	background: #fff;
	border: 2px solid var(--mks-rule) !important;
	text-decoration: none;
}

/* ==========================================================================
   3. Kopfbereich (Logo + Seitentitel)
   ========================================================================== */

.mks-brand {
	/* Ersetzt images/header.jpg — war nur ein weicher Grauverlauf. */
	background: linear-gradient(105deg, #f7f7f7 0%, #fff 38%, #ededed 72%, #f4f4f4 100%);
	/* Kein Trennstrich: im Original grenzt das Produktband direkt an. */
	/* Trägt das Logo, das unten aus dem Kopfbereich herausragt. */
	position: relative;
	z-index: 2;
}

.mks-brand__inner {
	max-width: var(--mks-page-width);
	margin-inline: auto;
	padding: 1.25rem var(--mks-gutter);
	display: flex;
	align-items: center;
	gap: 1rem;
	/* Im Original ist der Kopfbereich 122 px hoch; daraus ergibt sich die
	   Überlappung des Würfels mit dem Produktband von rund 88 px. */
	min-height: 7.625rem;
	/*
	 * Ausdrücklich kein Bezugsrahmen: Titel und Würfel liegen absolut und
	 * beziehen sich auf .mks-brand, also auf die volle Breite — genau wie im
	 * Original.
	 */
	position: static;
}

/*
 * Der Seitentitel steht im Original 66 px vom linken Fensterrand entfernt und
 * folgt damit nicht der zentrierten Inhaltsspalte (dort .art-headline mit
 * left: -14px und padding-left: 80px). Auf sehr breiten Schirmen rückt er
 * dadurch merklich links neben den Inhalt — so verhält sich die alte Seite.
 * Wer ihn stattdessen an der Inhaltsspalte ausrichten will, ersetzt die beiden
 * Werte durch position: static.
 */
.mks-brand__title {
	position: absolute;
	inset-inline-start: 4.125rem;   /* 66 px */
	top: 3.375rem;                  /* 54 px */
}

.mks-brand__title a {
	text-decoration: none;
}

.mks-brand__name {
	display: block;
	font-family: var(--mks-font-display);
	font-size: 1.5rem;        /* 24px */
	font-variant: small-caps;
	color: var(--mks-brand-text);
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.mks-brand__claim {
	display: block;
	font-size: 0.8125rem;
	color: #8c8c8c;
}

/*
 * Der MKS-Würfel liegt wie im Original absolut, ragt unten aus dem Kopfbereich
 * heraus und überlappt das Produktband. Gemessen am Altbestand: 192×200 px,
 * 10 px von oben, rechtsbündig zur Inhaltsbreite, Überlappung rund 90 px.
 */
.mks-brand__logo {
	position: absolute;
	top: 0.625rem;
	/*
	 * Rechter Rand der Inhaltsspalte minus 50 px, wie im Original gemessen.
	 * Der Bezugsrahmen ist die volle Breite, deshalb wird die halbe Differenz
	 * zur Spaltenbreite dazugerechnet. max() fängt schmale Fenster ab, in denen
	 * die Rechnung sonst negativ würde.
	 */
	inset-inline-end: max(
		var(--mks-gutter),
		calc((100% - var(--mks-page-width)) / 2 + 3.125rem)
	);
	z-index: 3;
	line-height: 0;
}

.mks-brand__logo img {
	height: 12.5rem;   /* 200 px */
	width: auto;
}

/* ==========================================================================
   4. Produktband („Slider")
   --------------------------------------------------------------------------
   Kein Slider, sondern ein waagerechtes Band verlinkter Produktbilder.
   Ersetzt slick.js + jQuery vollständig durch CSS Scroll-Snap.

   Gestylt werden zwei Markup-Varianten:
     .slides         — Altbestand aus dem Custom-Modul (funktioniert sofort)
     .mks-produktband — Neufassung (siehe build/slider-modul.html)
   ========================================================================== */

.mks-slider {
	background: #fff;
	border-bottom: 1px solid var(--mks-hairline);
	/* Bezugsrahmen für die Pfeile; z-index unter dem Logo. */
	position: relative;
	z-index: 1;
}

/* --- Navigationspfeile ------------------------------------------------- */

.mks-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	background: transparent no-repeat center / contain;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity 0.15s ease;
}

.mks-slider__nav:hover,
.mks-slider__nav:focus-visible {
	opacity: 1;
}

.mks-slider__nav[hidden],
.mks-slider__nav:disabled {
	display: none;
}

.mks-slider__nav--prev {
	inset-inline-start: 0.625rem;
	background-image: url("../images/slider-prev.png");
}

.mks-slider__nav--next {
	inset-inline-end: 0.625rem;
	background-image: url("../images/slider-next.png");
}

.mks-slider .slides,
.mks-produktband > ul {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.mks-slider .slides > div,
.mks-produktband > ul > li {
	flex: 0 0 auto;
	scroll-snap-align: center;
	margin: 0;
	padding: 0;
	line-height: 0;
}

/* Der Altbestand hat teils dreifach verschachtelte Hüll-Divs. */
.mks-slider .slides div {
	line-height: 0;
}

/* Feste Pixelmaße aus dem Modul-HTML neutralisieren: einheitliche Bandhöhe. */
.mks-slider .slides img,
.mks-produktband img {
	height: 12.5rem;
	width: auto !important;
	max-width: none;
	object-fit: contain;
	display: block;
}

.mks-slider .slides a,
.mks-produktband a {
	display: block;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.mks-slider .slides a:hover,
.mks-slider .slides a:focus-visible,
.mks-produktband a:hover,
.mks-produktband a:focus-visible {
	opacity: 0.75;
}

/* Leere Slides aus dem Altbestand einziehen. */
.mks-slider .slides > div:empty {
	display: none;
}

/* ==========================================================================
   5. Hauptnavigation
   ========================================================================== */

/*
 * Dreilagiger Hintergrund wie im Altbestand: Aufhellung, gebürstete Metall-
 * textur, Grundverlauf. Die Textur ist die Originaldatei images/nav.png,
 * auf den sichtbaren oberen Streifen beschnitten und als JPEG gespeichert
 * (285 KB -> 39 KB); im 53 px hohen Band ist der Rest ohnehin nie zu sehen.
 */
.mks-nav {
	background: var(--mks-metal);
	border-block: 1px solid rgba(0, 0, 0, 0.12);
	position: relative;
	z-index: 4; /* liegt wie im Original über dem Produktband */
}

.mks-nav__inner {
	max-width: var(--mks-page-width);
	margin-inline: auto;
	padding-inline: var(--mks-gutter);
}

.mks-nav ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mks-nav ul ul {
	display: none;
}

/* siehe globale Regel weiter oben: .mod-menu__toggle-sub */

.mks-nav li {
	position: relative;
}

.mks-nav a {
	display: block;
	padding: 0.5rem 1.375rem;
	line-height: 2.4;
	font-size: 0.875rem;
	color: var(--mks-nav-text);
	text-decoration: none;
	border: 1px solid transparent;
	white-space: nowrap;
}

.mks-nav a:hover,
.mks-nav a:focus-visible {
	color: var(--mks-nav-text-active);
	background: rgba(255, 255, 255, 0.28);
}

.mks-nav .current > a,
.mks-nav .active > a,
.mks-nav a.active {
	color: var(--mks-nav-text-active);
	border-color: var(--mks-rule);
	background: rgba(255, 255, 255, 0.36);
}

/* Untermenüs: aufklappbar per Hover/Fokus, ohne JavaScript. */
.mks-nav li:hover > ul,
.mks-nav li:focus-within > ul {
	display: block;
	position: absolute;
	inset-inline-start: 0;
	top: 100%;
	z-index: 30;
	min-width: 14rem;
	/* Gleiche Metalloptik wie das Menüband, hier in beide Richtungen kachelnd. */
	background: var(--mks-metal-tile);
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-top: 0;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.mks-nav ul ul a {
	line-height: 1.5;
	white-space: normal;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Umschalter — nur im schmalen Viewport sichtbar. */
.mks-nav__toggle {
	display: none;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.75rem var(--mks-gutter);
	margin-inline: calc(var(--mks-gutter) * -1);
	background: none;
	border: 0;
	color: var(--mks-nav-text);
	font: inherit;
	cursor: pointer;
}

.mks-nav__toggle-bar,
.mks-nav__toggle-bar::before,
.mks-nav__toggle-bar::after {
	display: block;
	width: 1.375rem;
	height: 2px;
	background: currentColor;
	content: "";
}

.mks-nav__toggle-bar {
	position: relative;
}

.mks-nav__toggle-bar::before { position: absolute; top: -6px; }
.mks-nav__toggle-bar::after  { position: absolute; top: 6px; }

/* ==========================================================================
   6. Seitenraster
   ========================================================================== */

.mks-page {
	max-width: var(--mks-page-width);
	margin-inline: auto;
	padding: 1.5rem var(--mks-gutter) 3rem;
}

.mks-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}

/*
 * Zweispaltig ab 768 px — damit bekommt auch das iPad im Hochformat das
 * richtige Layout und nicht die Handy-Ansicht.
 */
@media (min-width: 48em) {
	.mks-grid--sidebar-left {
		grid-template-columns: var(--mks-sidebar-width) 1fr;
	}

	.mks-grid--sidebar-right {
		grid-template-columns: 1fr var(--mks-sidebar-width);
	}

	.mks-grid--sidebar-right .mks-sidebar {
		order: 2;
	}
}

.mks-content {
	min-width: 0; /* verhindert, dass breite Tabellen das Raster sprengen */
}

/* ==========================================================================
   7. Navigationspfad
   ========================================================================== */

.mks-breadcrumbs {
	margin-bottom: 1rem;
	font-size: 0.8125rem;
	color: #6b6b6b;
}

.mks-breadcrumbs ol,
.mks-breadcrumbs .breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
}

/* ==========================================================================
   8. Modulblöcke (Chrome „mksblock")
   ========================================================================== */

.mks-block {
	margin-bottom: 1.75rem;
}

.mks-block__header {
	margin: 0;
	padding: 0.5rem 0.75rem;
	/*
	 * Gleiche Metalloptik wie das Menüband, aber mit dem eigenen Grundverlauf
	 * des Blockkopfs. Im Altbestand lag dafür images/vmenublockheader.png —
	 * dieselbe gebürstete Textur, hier wird nav-metall.jpg mitbenutzt.
	 */
	background:
		linear-gradient(180deg, rgba(167, 167, 167, 0.22) 0%, rgba(121, 121, 121, 0.09) 86%, rgba(113, 113, 113, 0.11) 100%),
		url("../images/nav-metall.jpg") repeat-x top left,
		linear-gradient(180deg, var(--mks-block-from) 0%, var(--mks-block-mid) 86%, var(--mks-block-to) 100%);
	border: 1px solid rgba(0, 0, 0, 0.14);
	color: #000;
	font-size: 1.125rem;   /* 18px */
	font-weight: 400;
	line-height: 1.3;
}

.mks-block__content {
	padding: 0.75rem 0;
}

.mks-block__content ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mks-block__content li + li {
	border-top: 1px solid var(--mks-hairline);
}

.mks-block__content li > a {
	display: block;
	padding: 0.4rem 0.25rem;
	text-decoration: none;
}

.mks-block__content li > a:hover,
.mks-block__content li > a:focus-visible {
	background: #f4f4f4;
}

/* --- Menümodule in der Seitenspalte ------------------------------------ */

/*
 * Ebenenzählung wie in der Abstimmung: Ebene 1 ist das Hauptmenü im Kopf,
 * die Seitenspalte beginnt bei Ebene 2.
 *
 *   Ebene 2  .mod-menu > li                      z. B. Schließanlagen
 *   Ebene 3  .mod-menu > li > ul > li            z. B. Mechanische Schließanlagen
 *   Ebene 4  .mod-menu > li > ul > li > ul > li  z. B. Konventionelle Systeme
 *
 * Joomlas mod-menu.css blendet Untermenüs über
 * :where(.mod-menu__sub[aria-hidden="true"]) aus — gedacht für metismenu, das
 * wir nicht laden. :where() hat Spezifität null, ein einfacher Selektor genügt
 * zum Überschreiben. Das aria-hidden räumt template.js weg, damit sichtbare
 * Punkte nicht gleichzeitig vor Screenreadern versteckt sind.
 */

/* Metalloptik hinter dem gesamten Menümodul. */
.mks-block__content .mod-menu {
	background: var(--mks-metal-tile);
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-top: 0;
	padding-block: 0.25rem;
}

/* Innenabstand des Blocks entfällt, damit das Metall bündig anschließt. */
.mks-block__content:has(> .mod-menu) {
	padding: 0;
}

/* Auf Metall braucht der Text mehr Gewicht als das helle Grau der Fließtexte. */
.mks-block__content .mod-menu a {
	color: var(--mks-nav-text);
	padding: 0.25rem 0.5rem 0.25rem 0.4375rem;   /* 7 px Einzug wie im Original */
}

.mks-block__content .mod-menu li + li {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.mks-block__content .mod-menu a:hover,
.mks-block__content .mod-menu a:focus-visible {
	background: rgba(255, 255, 255, 0.28);
	color: #000;
}

/*
 * Aufklappen entlang des gewählten Pfades, wie auf der alten Seite:
 * Jede Unterebene ist eingeklappt und öffnet erst, wenn ihr übergeordneter
 * Punkt angeklickt wurde. Ebene 3 nach Klick auf Ebene 2, Ebene 4 nach Klick
 * auf Ebene 3. Zweige daneben bleiben zu.
 *
 * Joomla vergibt „current active" für die aufgerufene Seite und
 * „alias-parent-active" für deren übergeordnete Punkte. Beides muss greifen,
 * sonst klappt auf einer tieferen Seite genau der Zweig zu, in dem man steht.
 */
.mks-block__content .mod-menu__sub {
	display: none;
	padding-inline-start: 0;
}

.mks-block__content > .mod-menu > li.active > .mod-menu__sub,
.mks-block__content > .mod-menu > li.alias-parent-active > .mod-menu__sub,
.mks-block__content > .mod-menu > li > .mod-menu__sub > li.active > .mod-menu__sub,
.mks-block__content > .mod-menu > li > .mod-menu__sub > li.alias-parent-active > .mod-menu__sub {
	display: block;
}

/*
 * Größen und Einrückung gemessen an der alten Seite:
 * Ebene 2 = 15 px bei 7 px Einzug, Ebenen 3 und 4 = 11 px bei 15 bzw. 30 px.
 * Ebene 3 und 4 sind also gleich groß und werden über den Einzug getrennt.
 */
.mks-block__content .mod-menu__sub > li > a {
	font-size: 0.6875rem;          /* 11 px */
	padding-inline-start: 0.9375rem;
}

.mks-block__content .mod-menu__sub .mod-menu__sub > li > a {
	padding-inline-start: 1.875rem;
}

/* Aktiver Pfad: Ebene 2 hinterlegt, Ebene 3 fett. */
.mks-block__content > .mod-menu > li.active > a,
.mks-block__content > .mod-menu > li.alias-parent-active > a {
	background: var(--mks-menu-active);
	/* Auf dem 8C8C8C reicht das helle Linkgrau nicht mehr für den Kontrast. */
	color: #1a1a1a;
}

.mks-block__content > .mod-menu > li > .mod-menu__sub > li.active > a,
.mks-block__content > .mod-menu > li > .mod-menu__sub > li.alias-parent-active > a {
	font-weight: 700;
}

/*
 * Quadratischer Punkt vor den Bezeichnungen der Unterebenen,
 * senkrecht auf Textmitte ausgerichtet.
 */
.mks-block__content .mod-menu__sub > li > a::before {
	content: "";
	display: inline-block;
	/* in em, damit der Punkt in Ebene 4 mit der Schrift mitschrumpft */
	width: 0.4em;
	height: 0.4em;
	margin-inline-end: 0.5em;
	background: currentColor;
	vertical-align: middle;
}


/* ==========================================================================
   9. Inhalt
   ========================================================================== */

.mks-content h1,
.mks-content .page-header h1,
.mks-content h2,
.mks-content h3 {
	color: var(--mks-heading);
	line-height: 1.25;
}

.mks-content h1 {
	font-size: 1.5rem;
	font-weight: 700;
}

/* h2 und h3 bewusst nicht fett — Abstufung läuft über Größe und Farbe. */
.mks-content h2 {
	font-size: 1.375rem;
	font-weight: 400;
}

.mks-content h3 {
	font-size: 1.125rem;
	font-weight: 400;
}

.mks-content p {
	margin: 0 0 0.75rem;
	/*
	 * Blocksatz wie im Altbestand. Dort stand hyphens: manual — daher die
	 * breiten Wortlücken. Mit auto trennt der Browser anhand von lang="de"
	 * und der Satz wird ruhig.
	 */
	text-align: justify;
	hyphens: auto;
}

/*
 * Aufzählungen mit quadratischem Punkt. Im Altbestand lag dafür
 * images/postbullets.png — ein graues Quadrat von 6×6 px, hängend eingerückt
 * (li padding-left 12 px, Punkt mit margin-left -12 px davor). Gleiche Optik,
 * hier ohne Grafik.
 */
.mks-content ul {
	list-style: none;
	margin: 1em 0 1em 0.75rem;
	padding: 0;
}

.mks-content ul > li {
	margin: 0.5rem 0;
	padding-inline-start: 0.75rem;
	/* Listeneinträge sind kurz — Blocksatz reißt hier nur Lücken. */
	text-align: start;
}

.mks-content ul > li::before {
	content: "";
	display: inline-block;
	width: 0.375rem;
	height: 0.375rem;
	margin-inline-start: -0.75rem;
	margin-inline-end: 0.375rem;
	background: var(--mks-block-mid);
	vertical-align: middle;
}

/* Nummerierte Listen behalten ihre Ziffern. */
.mks-content ol > li {
	margin: 0.5rem 0;
	text-align: start;
}

/* Fließtext-Links unterstrichen — im Blocksatz sonst kaum auffindbar. */
.mks-content p a,
.mks-content li a,
.mks-content td a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Überschriften und Tabellen bleiben linksbündig. */
.mks-content h1,
.mks-content h2,
.mks-content h3,
.mks-content h4,
.mks-content th,
.mks-content td,
.mks-content .article-info {
	text-align: start;
	hyphens: manual;
}

.mks-content .item-page,
.mks-content .blog-item {
	margin-bottom: 2rem;
}

.mks-content .article-info {
	font-size: 0.8125rem;
	color: #7a7a7a;
}

.mks-content table {
	width: 100%;
	border-collapse: collapse;
}

/*
 * Ohne Rahmen. Im Bestand werden Tabellen als Layouthilfe benutzt (etwa die
 * Kontaktdaten), da stören Linien. Wer eine echte Datentabelle mit Rahmen
 * will, setzt im Editor die Klasse "table" — siehe unten.
 */
.mks-content table th,
.mks-content table td {
	padding: 0.4rem 0.6rem;
	text-align: start;
	vertical-align: top;
}

.mks-content table.table th,
.mks-content table.table td {
	border: 1px solid var(--mks-hairline);
}

/* Breite Inhalte dürfen die Seite nicht waagerecht scrollen lassen. */
.mks-content .table-responsive,
.mks-content pre {
	overflow-x: auto;
}

/* ==========================================================================
   10. Fußbereich
   ========================================================================== */

.mks-footer {
	background: var(--mks-footer-bg);
	border-top: 1px solid var(--mks-hairline);
	color: var(--mks-footer-text);
}

.mks-footer__inner {
	max-width: var(--mks-page-width);
	margin-inline: auto;
	padding: 1.25rem var(--mks-gutter);
	text-align: center;
	font-size: 0.8125rem;
}

.mks-footer p {
	margin: 0.25rem 0;
}

.mks-footer a {
	color: var(--mks-footer-link);
	text-decoration: none;
}

.mks-footer a:hover,
.mks-footer a:focus-visible {
	text-decoration: underline;
}

/* ==========================================================================
   11. Nach oben
   ========================================================================== */

.mks-backtop {
	position: fixed;
	inset-inline-end: 1rem;
	bottom: 1rem;
	z-index: 40;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--mks-block-mid);
	color: #fff;
	border-radius: 50%;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.mks-backtop[hidden] {
	display: none;
}

/* ==========================================================================
   12. Fehlerseite
   ========================================================================== */

.mks-error__box {
	padding: 2rem 0;
	text-align: center;
}

.mks-error__code {
	font-size: 4rem;
	color: var(--mks-block-mid);
	margin: 0;
}

.mks-error__message {
	font-size: 1.125rem;
}

/* Eigene Knopf-Optik, damit die Fehlerseite nicht von Bootstrap abhängt. */
.mks-error__actions .btn {
	display: inline-block;
	padding: 0.5rem 1.25rem;
	background: var(--mks-block-mid);
	color: #fff;
	border: 1px solid var(--mks-rule);
	text-decoration: none;
}

.mks-error__actions .btn:hover,
.mks-error__actions .btn:focus-visible {
	background: var(--mks-block-to);
	color: #fff;
}

.mks-error__debug {
	margin-top: 2rem;
	text-align: start;
	font-size: 0.8125rem;
	overflow-x: auto;
}

/* ==========================================================================
   13a. Tablet (768–991 px) — iPad Hochformat
   --------------------------------------------------------------------------
   Zweispaltig und mit waagerechtem Menü wie am Schreibtisch, aber kompakter:
   Würfel und Titel kleiner, Menü enger gesetzt, Seitenspalte etwas breiter,
   damit die Modultitel nicht umbrechen.
   ========================================================================== */

@media (min-width: 48em) and (max-width: 61.9375em) {
	:root {
		--mks-sidebar-width: 30%;
		--mks-gutter: 1rem;
	}

	.mks-brand__inner {
		min-height: 5.5rem;
	}

	.mks-brand__name {
		font-size: 1.25rem;
	}

	.mks-brand__inner {
		min-height: 5.5rem;
	}

	.mks-brand__title {
		inset-inline-start: var(--mks-gutter);
		top: 1.5rem;
	}

	.mks-brand__logo {
		inset-inline-end: var(--mks-gutter);
	}

	.mks-brand__logo img {
		height: 8.75rem;   /* 140 px */
	}

	.mks-nav a {
		padding-inline: 0.75rem;
	}

	.mks-slider .slides img,
	.mks-produktband img {
		height: 10rem;
	}

	.mks-page {
		padding-inline: var(--mks-gutter);
	}
}

/* ==========================================================================
   13b. Schmale Viewports (bis 767 px) — Telefone
   ========================================================================== */

@media (max-width: 47.9375em) {
	/*
	 * Einspaltig gehört der Artikel nach oben. Sonst scrollt man auf dem
	 * Telefon erst an Kontextmenü und News vorbei, bevor der Text beginnt.
	 */
	.mks-content {
		order: 1;
	}

	.mks-sidebar {
		order: 2;
		margin-top: 1.5rem;
	}

	.mks-brand__inner {
		min-height: 0;
		padding-block: 0.875rem;
		justify-content: space-between;
	}

	/* Im schmalen Viewport zurück in den normalen Fluss — sonst deckt der
	   Würfel den Titel zu und der Kopfbereich bräuchte feste Höhen. */
	.mks-brand__title {
		position: static;
	}

	.mks-brand__name {
		font-size: 1.125rem;
		white-space: normal;
	}

	.mks-brand__logo {
		position: static;
		flex: 0 0 auto;
	}

	.mks-brand__logo img {
		height: 3.5rem;
	}

	.mks-slider .slides img,
	.mks-produktband img {
		height: 7.5rem;
	}

	/* Auf Touchgeräten wischt man; die Pfeile verdecken nur Bildfläche. */
	.mks-slider__nav {
		display: none !important;
	}

	.mks-nav__toggle {
		display: flex;
	}

	.mks-nav__menu {
		display: none;
	}

	.mks-nav__menu.is-open {
		display: block;
		padding-bottom: 0.5rem;
	}

	.mks-nav ul {
		display: block;
	}

	/* Untermenüs im schmalen Viewport dauerhaft ausklappen statt per Hover. */
	.mks-nav ul ul,
	.mks-nav li:hover > ul,
	.mks-nav li:focus-within > ul {
		display: block;
		position: static;
		min-width: 0;
		box-shadow: none;
		background: rgba(0, 0, 0, 0.06);
	}

	.mks-nav a {
		line-height: 1.5;
		padding: 0.6rem 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.12);
		white-space: normal;
	}

	.mks-nav ul ul a {
		padding-inline-start: 1.25rem;
	}
}

/* ==========================================================================
   13c. Touch-Bedienung
   --------------------------------------------------------------------------
   Greift auf Geräten mit grobem Zeiger, unabhängig von der Fensterbreite —
   das iPad im Querformat ist 1024 px breit und wird trotzdem mit dem Finger
   bedient. Am Schreibtisch ändert sich dadurch nichts.
   ========================================================================== */

@media (pointer: coarse) {
	/* Seitenspalte: enger gesetzt als am Schreibtisch, für den Finger aber
	   immer noch rund 40 px hoch. */
	.mks-block__content li > a {
		padding-block: 0.5rem;
	}

	.mks-block__content .mod-menu a {
		padding-block: 0.5rem;
	}

	/* Fußzeile: 15 px reichen für einen Finger nicht, WCAG 2.2 AA fordert 24 */
	.mks-footer a {
		display: inline-block;
		padding-block: 0.4rem;
	}

	.mks-breadcrumbs a {
		display: inline-block;
		padding-block: 0.3rem;
	}

}

/*
 * Aufklappen per Hover gibt es auf Touch nicht. Die Elternpunkte sind echte
 * Seiten und führen dorthin; das jeweilige Untermenü steht auf der Zielseite
 * in der Seitenspalte. Der Hover-Zustand erzeugt hier nur einen Fehlversuch
 * beim ersten Tippen.
 *
 * Nur ab Tablet-Breite: im eingeklappten Telefonmenü stehen die Untermenüs
 * ohnehin statisch offen, dort darf diese Regel nicht dazwischenfunken.
 */
@media (pointer: coarse) and (min-width: 48em) {
	.mks-nav li:hover > ul {
		display: none;
	}

	.mks-nav li:focus-within > ul {
		display: block;
	}
}

/* ==========================================================================
   14. Bewegungsreduktion und Druck
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.mks-nav,
	.mks-slider,
	.mks-sidebar,
	.mks-backtop,
	.mks-skip {
		display: none !important;
	}

	.mks-page {
		max-width: none;
		padding: 0;
	}

	body.site {
		color: #000;
	}

	.mks-content a::after {
		content: " (" attr(href) ")";
		font-size: 0.75em;
		word-break: break-all;
	}
}