@charset "UTF-8";
/* css/main.css – globales Stylesheet (Handle "hs-base").
   Reihenfolge: Fonts → Reset → Basis → Animationen → Breakpoints (absteigend, max-width!).
   nav.css / hero.css / dzsparallaxer.css werden weiter separat über inc/hero-nav.php geladen. */

/* ========== Fonts ========== */
/* css/fonts.css – selbst gehostete Proxima Nova (nur WOFF2; Preload in hero-nav.php) */

@font-face {
  font-family: "proxima-nova";
  src: url("../fonts/proximanova-regular-webfont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "proxima-nova";
  src: url("../fonts/proximanova-regularit-webfont.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "proxima-nova";
  src: url("../fonts/proximanova-bold-webfont.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ========== Reset ========== */
/* css/reset.css – schlanker Reset (nur aktuelle HTML5-Elemente) */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strong, sub, sup, var,
b, u, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
	display: block;
}

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote::before, blockquote::after,
q::before, q::after { content: none; }

table {
	border-collapse: collapse;
	border-spacing: 0;
}

button { font: inherit; color: inherit; }

/* ========== Basis ========== */
/* css/base.css
   Design-Tokens (Desktop ≥1201px) + Grundstile.
   Die Breakpoint-Dateien überschreiben nur noch die Variablen.
   Ladereihenfolge: 1428 → 1212 → 1002 → 792 → 589 → 386 (absteigend!). */

:root {
	/* Abstände: --hs-pad kommt aus nav.css (Fallback hier) */
	--hs-top: min(6.3vw, 78px);

	/* Typografie (Root = 75 % → 1rem = 12px bei Standard-Browsereinstellung) */
	--fs-h2: clamp(2.625rem, 2.625vw, 3rem);
	--fs-h3: clamp(1.75rem, 1.75vw, 2rem);
	--fs-h3s: clamp(1.575rem, 1.575vw, 1.8rem);   /* 90 % */
	--fs-title: 3.6rem;
	--fs-title-sub: 2.4rem;
	--fs-copy: 1.5rem;
	--fs-c-h2: 2.1rem;
	--fs-c-h3: 1.8rem;
	--fs-c-h4: 1.5rem;
	--fs-cap: 1.1rem;
	--fs-pag: calc(var(--fs-copy) * 1);

	/* Paginierung */
	--pag-gap: 3.6rem;
}

/* ---- Grundtypografie ---- */
html {
	font-size: 75%;   /* = 12px, respektiert aber die Browser-Schriftgröße */
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: "proxima-nova", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #333333;
	background-color: #ffffff;
	text-align: left;
	hyphens: none;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h2 {
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: 1.2;
	display: block;
	padding-bottom: 1.2rem;
}

/* Teaser-Überschriften: immer drei Zeilen Platz, nie Überlauf */
h3 {
	font-size: var(--fs-h3);
	line-height: 1.2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	min-height: 3.6em;
}
.smallie h3 { font-size: var(--fs-h3s); }

a {
	color: #333;
	text-decoration: underline 2px transparent;
	text-underline-offset: 0.2em;
	transition: text-decoration-color 0.5s;
}
a:hover,
a:focus-visible {
	color: #333;
	text-decoration-color: rgba(51, 51, 51, 1);
}

em { font-style: italic; }
strong { font-weight: 700; }

img {
	width: 100%;
	display: block;
}

.date {
	font-size: clamp(0.85rem, 0.8vw, 0.95rem);
	line-height: 1.2;
	text-transform: uppercase;
	color: #767676;   /* ≥ 4,5:1 auf Weiß */
	letter-spacing: 0.1em;
}

/* ---- Skip-Link ---- */
.hs-skip {
	position: fixed;
	top: 0.8rem;
	left: 0.8rem;
	z-index: 1100;
	padding: 0.8rem 1.2rem;
	background: #ffffff;
	color: #333333;
	font-size: 1.4rem;
	transform: translateY(-200%);
}
.hs-skip:focus { transform: none; }

/* ---- Layout-Container ---- */
.main-outer { width: 100%; }

.main-inner {
	width: 100%;
	max-width: 1410px;
	margin-left: auto;
	margin-right: auto;
	padding: var(--hs-top) 0 0 0;
}

.margin-0-0-1-0 { margin: 0 0 var(--hs-pad, min(2.4vw, 32px)) 0; }
.pad-1-1-1-1    { padding: var(--hs-pad, min(2.4vw, 32px)); }
.pad-0-1-3-1    {
	padding: 0 var(--hs-pad, min(2.4vw, 32px)) var(--hs-top) var(--hs-pad, min(2.4vw, 32px));
}

.cont-row-inner {
	display: flex;
	gap: max(14px, var(--hs-pad, min(2.4vw, 32px)));
}

.cont-banner-inner {
	display: flex;
	gap: clamp(0px, 1vw, 14px);
	margin-bottom: clamp(0px, 1vw, 14px);
}

.cont-big-outer,
.cont-small-outer { flex: 1; }

.cont-small-inner img,
.cont-big-inner img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- Helfer ---- */
.spacer {
	display: block;
	height: 1.2rem;
	overflow: hidden;
}

.break {
	display: none;   /* nur ≤800px sichtbar (breakpoint-792.css) */
	width: 100%;
	height: 0;
	overflow: hidden;
}

/* Sichtbarkeit Desktop/Mobile (Werte je Breakpoint-Datei) */
.desktop { display: block; }
.mobile, .tiny-mobile { display: none; }

.pulse-on-hover:hover { animation: pulse 0.6s ease-out; }

.section { transition: background-color 0.5s ease, color 0.5s ease; }

/* ---- Scroll-Reveal (nur mit JS: <html class="js">) ---- */
.js .fade-in,
.js .fade-in-up {
	opacity: 0;
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .fade-in-up { transform: translateY(24px); }
.js .fade-in.is-visible,
.js .fade-in-up.is-visible {
	opacity: 1;
	transform: none;   /* kein Containing Block für fixed-Nachfahren */
}

@media (prefers-reduced-motion: reduce) {
	.js .fade-in,
	.js .fade-in-up {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.pulse-on-hover:hover { animation: none; }
}

/* ---- Paginierung (Kategorien + Beiträge) ---- */
.hs-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--pag-gap);
	width: 100%;
	font-size: var(--fs-pag);
	font-weight: 400;
	line-height: 1.6;
}
.hs-pagination .page-numbers,
.hs-pagination a.page-numbers:hover,
.hs-pagination a.page-numbers:focus-visible {
	display: inline-flex;
	align-items: center;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	color: #333333;
	font-size: inherit;
	font-weight: 400;
	text-decoration: none;
}
.hs-pagination .page-numbers.current {
	background: none;
	color: #333333;
	font-weight: 700;
}
.hs-pagination .page-numbers.dots { color: #333333; }
.hs-pagination .prev.page-numbers svg,
.hs-pagination .next.page-numbers svg {
	display: block;
	width: 1em;
	height: 1em;
	flex: 0 0 1em;
	fill: currentColor;
}
.hs-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
/* Abstand über der Beitrags-Paginierung = --hs-top */
.hs-copy .hs-pagination,
.cont-article-inner .hs-pagination {
	margin-top: var(--hs-top);
}

/* ---- Beitragsseiten ---- */
.cont-article-outer { width: 100%; }

/* Copy inkl. Bilder: maximal 800px */
.cont-article-inner {
	width: 100%;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.hs-article-head { padding-bottom: 4.8rem; }

.hs-title {
	font-size: var(--fs-title);
	font-weight: 400;
	line-height: 1.2;
	padding-bottom: 1rem;
	hyphens: auto;
}
.hs-title-sub { font-size: var(--fs-title-sub); }

.hs-copy {
	font-size: var(--fs-copy);
	line-height: 1.6;
	overflow-wrap: break-word;
}
.hs-copy > * { max-width: 100%; }

.hs-copy p,
.hs-copy ul,
.hs-copy ol,
.hs-copy blockquote,
.hs-copy figure { margin-bottom: 1.5em; }

.hs-copy h2,
.hs-copy h3,
.hs-copy h4 {
	display: block;
	margin: 1.6em 0 0.6em 0;
	padding-bottom: 0;
	font-weight: 700;
	line-height: 1.25;
	height: auto;
	min-height: 0;
	overflow: visible;
	-webkit-line-clamp: unset;
	line-clamp: unset;
}
.hs-copy h2 { font-size: var(--fs-c-h2); }
.hs-copy h3 { font-size: var(--fs-c-h3); }
.hs-copy h4 { font-size: var(--fs-c-h4); }

/* Zwischenüberschriften (Gehört mit / Herstellerangaben / Statement)
   = H1-Stil ab Seite 2 (.hs-title-sub), als H3, 80 % der Größe */
.hs-copy h3.hs-sub {
	font-size: calc(var(--fs-title-sub) * 0.8);
	font-weight: 400;
	line-height: 1.2;
	margin: 1.6em 0 0 0;
	padding-bottom: 1rem;
	hyphens: auto;
}
.hs-copy h3.hs-sub strong { font-weight: 700; }

/* H1-Fallback für Statement-Block */
.hs-copy .statement > h1 {
	font-size: calc(var(--fs-title-sub) * 0.8);
	font-weight: 700;
	line-height: 1.2;
	margin: 1.6em 0 0 0;
	padding-bottom: 1rem;
	text-transform: lowercase;
}
.hs-copy .statement > h1::first-letter { text-transform: uppercase; }
.hs-copy .statement > h1::after { content: "."; }
.hs-copy .statement > p { margin-top: 0; }

.hs-copy a {
	text-decoration-color: rgba(51, 51, 51, 0.2);
}
.hs-copy a:hover {
	text-decoration-color: rgba(51, 51, 51, 1);
}

.hs-copy blockquote {
	padding-left: 1.2em;
	border-left: 3px solid #dddddd;
	font-style: italic;
}

.hs-copy img,
.hs-copy video,
.hs-copy iframe,
.hs-copy embed,
.hs-copy object,
.hs-copy figure,
.hs-copy .wp-caption { max-width: 100%; }

.hs-copy img,
.hs-copy video { height: auto; }

.hs-copy iframe { width: 100%; }
.hs-copy iframe[src*="youtube"],
.hs-copy iframe[src*="vimeo"] {
	height: auto;
	aspect-ratio: 16 / 9;
}

.hs-copy .wp-caption { width: auto !important; }

.hs-copy figcaption,
.hs-copy .wp-caption-text {
	margin-top: 0.5em;
	font-size: var(--fs-cap);
	line-height: 1.4;
	color: #6b6b6b;
}

/* Tabellen sehen aus wie Fließtext (keine Linien, Paddings, Margins);
   Label : Text = 33,33 % : 66,67 %.
   Wrapper wird per main.js ergänzt (Semantik bleibt erhalten) */
.hs-table-wrap {
	overflow-x: auto;
	margin: 0;
	padding: 0;
}
.hs-copy table,
.hs-copy tbody,
.hs-copy thead {
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
.hs-copy tr {
	display: flex;
	align-items: flex-start;
	width: 100%;
	margin: 0;
	padding: 0.4em 0;
	border: 0;
	border-bottom: 2px solid rgba(51, 51, 51, 0.1);   /* Linie unter jeder Zeile, nicht unter der letzten */
	background: none;
}
.hs-copy td,
.hs-copy th {
	display: block;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	overflow-wrap: break-word;
}
.hs-copy td:first-child,
.hs-copy th:first-child {
	flex: 0 0 33.333%;
	width: 33.333%;
}
.hs-copy td:last-child:not(:first-child),
.hs-copy th:last-child:not(:first-child) {
	flex: 0 0 66.667%;
	width: 66.667%;
}

/* ---- Spezifikationslisten (<dl>): Label 33,33 % : Text 66,67 % ---- */
.hs-copy .hs-spec {
	margin: 0;
	padding: 0;
}
.hs-copy .hs-spec dl {
	display: grid;
	grid-template-columns: 33.333% 66.667%;
	align-items: start;
	margin: 0;
	padding: 0;
}
.hs-copy .hs-spec dt,
.hs-copy .hs-spec dd {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	overflow-wrap: break-word;
	min-width: 0;
}

/* Linien unter Tabellenzeilen: siehe .hs-copy tr oben; letzte Zeile ohne Linie */
.hs-copy tr:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.hs-copy .hs-spec dt,
.hs-copy .hs-spec dd {
	border-bottom: 2px solid rgba(51, 51, 51, 0.1);
	padding: 0.4em 0;
}
.hs-copy .hs-spec dt:nth-last-of-type(1),
.hs-copy .hs-spec dd:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* Sicherheitsabstand rechts in der Label-Spalte (Linie läuft durch, Text bricht früher um) */
.hs-copy td:first-child:not(:last-child),
.hs-copy th:first-child:not(:last-child) {
	padding-right: 1.2em;
}
.hs-copy .hs-spec dt {
	padding-right: 1.2em;
}

@media (max-width: 589px) {
	.hs-copy .hs-spec dt { padding-right: 0; }
}

/* Silbentrennung nur in der ersten Spalte (Label) der Tabellen und Spezifikationslisten */
.hs-copy td:first-child:not(:last-child),
.hs-copy th:first-child:not(:last-child),
.hs-copy .hs-spec dt {
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* Mobil: Label über dem Text */
@media (max-width: 589px) {
	.hs-copy .hs-spec dl { grid-template-columns: 1fr; }
	.hs-copy .hs-spec dt { border-bottom: 0; padding-bottom: 0; }
	.hs-copy .hs-spec dd { margin-bottom: 0.6em; }
	.hs-copy .hs-spec dd:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
}

/* Aufzählungen: Linien unter jedem Punkt, nicht unter dem letzten */
.hs-copy ul,
.hs-copy ol {
	list-style: none;
	padding-left: 0;
	counter-reset: hs-li;
}
.hs-copy li {
	position: relative;
	padding: 0.4em 0 0.4em 1.4em;
	border-bottom: 2px solid rgba(51, 51, 51, 0.1);
}
.hs-copy li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.hs-copy ul > li::before {
	content: "•";
	position: absolute;
	left: 0;
}
.hs-copy ol > li { counter-increment: hs-li; }
.hs-copy ol > li::before {
	content: counter(hs-li) ".";
	position: absolute;
	left: 0;
}
.hs-copy li > ul,
.hs-copy li > ol { margin: 0.4em 0 0; }

.hs-copy .alignleft,
.hs-copy .alignright {
	float: none;
	margin: 0 0 1.2em 0;
}
.hs-copy .aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.hs-copy::after {
	content: "";
	display: block;
	clear: both;
}

/* ---- Galerie ---- */
.hs-gallery {
	display: grid;
	grid-template-columns: repeat(var(--hs-cols, 4), minmax(0, 1fr));
	gap: 1rem;
	margin: 1.5em 0;
}
.hs-gallery figure.bild-mit-legende { margin: 0; }
@media (max-width: 800px) {
	.hs-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 386px) {
	.hs-gallery { grid-template-columns: 1fr; }
}

/* ---- Teaser (Beitragskopf) ---- */
.cont-teaser-outer { width: 100%; }
.cont-teaser-inner {
	width: 100%;
	max-width: 1346px;
	margin-left: auto;
	margin-right: auto;
}
.cont-teaser-inner picture { display: block; }

/* 5:2 (≤800px: 3:2, siehe breakpoint-792.css) */
.cont-teaser-inner img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 2;
	object-fit: cover;
	object-position: center;
}

/* ---- Zurück-Pfeil ---- */
.hs-back {
	display: inline-block;
	text-decoration: none;
	color: inherit;
	line-height: 1;
}
.hs-back svg {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	vertical-align: -0.1em;
	transition: transform 0.3s ease;
}

/* ---- Bildnachweis ---- */
.hs-credit {
	position: relative;
	display: block;
}
.hs-credit::after {
	content: "© HIFISTATEMENT";
	position: absolute;
	left: clamp(0.2rem, 0.4vw, 0.4rem);
	bottom: clamp(0.2rem, 0.4vw, 0.4rem);
	font-weight: 700;
	font-size: clamp(0.9rem, 1.1vw, 1rem);
	line-height: 1;
	letter-spacing: 0.05em;
	color: #ffffff;
	opacity: 0.5;
	pointer-events: none;
	user-select: none;
}

/* ---- Flow-Zeilen: Sichtbarkeit je Ebene ---- */
.hs-flow .cont-big-outer:not(.lv-w) { display: none; }

/* ---- Kategorieseiten ---- */
.hs-cat .cl-mo { display: none; }
.hs-cat-mid { display: none; }

/* GeneratePress-Footerleiste ausblenden */
.copyright-bar { display: none; }

/* ========== Animationen ========== */
/* css/animations.css – Keyframes und Utility-Klassen
   Hinweis: .fade-in / .fade-in-up (Scroll-Reveal) liegen in base.css und
   werden über main.js gesteuert. Hier keine zweite Fade-Logik mehr. */

@keyframes pulse {
  0%   { transform: scale(1); }
  60%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.pulse { animation: pulse 0.6s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .pulse,
  .pulse-on-hover:hover { animation: none; }
}

/* ========== Breakpoint ≤1200px ========== */
/* ≤1200px (Datei heißt historisch „1212“). Muss NACH breakpoint-1428.css geladen werden. */

@media (max-width: 1200px) {

	:root {
		--fs-h2: clamp(2.1875rem, 2.625vw, 2.625rem);
		--fs-h3: clamp(1.46rem, 1.75vw, 1.75rem);
		--fs-h3s: clamp(1.314rem, 1.575vw, 1.575rem);
		--fs-title: 3.2rem;
		--fs-title-sub: 2.2rem;
		--fs-c-h2: 2.1rem;
		--fs-c-h3: 1.8rem;
		--fs-c-h4: 1.5rem;
		--fs-pag: 1.5rem;
	}

	.banner-07 { display: none; }

}

/* ========== Breakpoint ≤1002px ========== */
/* ≤1002px */

@media (max-width: 1002px) {

	:root {
		--hs-top: min(7.4vw, 74px);
		--fs-h2: clamp(1.9rem, 2.88vw, 2.4rem);
		--fs-h3: clamp(1.6rem, 2.4vw, 2rem);
		--fs-h3s: clamp(1.44rem, 2.16vw, 1.8rem);
		--fs-title: 3rem;
		--fs-title-sub: 2rem;
		--fs-c-h2: 2rem;
		--fs-c-h3: 1.7rem;
		--fs-c-h4: 1.5rem;
		--fs-pag: 1.5rem;
	}

	/* helpers */
	.banner-06, .banner-07,
	.cont-small-outer.item-04,
	.cont-big-outer.item-03 { display: none; }

	.desktop { display: none; }
	.mobile { display: block; }
	.tiny-mobile { display: none; }

	.hs-flow .cont-big-outer { display: none; }
	.hs-flow .cont-big-outer.lv-m { display: block; }

	/* Kategorieseiten: Tests 2 Spalten (2×2), News 3 Spalten */
	.hs-cat.biggie .cont-row-inner { flex-wrap: wrap; }
	.hs-cat.biggie .cont-big-outer { flex: 0 0 calc(50% - max(14px, var(--hs-pad)) / 2); }
	.hs-cat .cont-big-outer.cl-mo, .hs-cat .cont-small-outer.cl-mo { display: block; }
	.hs-cat .cont-big-outer.cl-nm, .hs-cat .cont-small-outer.cl-nm { display: none; }
	.hs-cat-mid { display: block; }

}

/* ========== Breakpoint ≤800px ========== */
/* ≤800px (Datei heißt historisch „792“) */

@media (max-width: 800px) {

	:root {
		--hs-top: min(9.8vw, 88.2px);
		--fs-h2: clamp(1.9rem, 2.88vw, 2.4rem);
		--fs-h3: clamp(1.6rem, 3.2vw, 2.1rem);
		--fs-h3s: clamp(1.44rem, 2.88vw, 1.89rem);
		--fs-title: 2.8rem;
		--fs-title-sub: 2rem;
		--fs-copy: 1.4rem;
		--fs-c-h2: 1.9rem;
		--fs-c-h3: 1.6rem;
		--fs-c-h4: 1.4rem;
		--fs-cap: 1.05rem;
		--fs-pag: 1.4rem;
	}

	.cont-row-inner { flex-wrap: wrap; }

	/* Teaser: ab hier übernimmt intro.* (per <picture>), Seitenverhältnis 3:2 */
	.cont-teaser-inner img { aspect-ratio: 3 / 2; }

	/* helpers */
	.banner-05, .banner-06, .banner-07,
	.cont-big-outer.item-02,
	.cont-big-outer.item-03 { display: none; }
	.cont-small-outer.item-03,
	.cont-small-outer.item-04 { display: block; }

	.break { display: block; }

	.desktop, .mobile { display: none; }
	.tiny-mobile { display: block; }

	.hs-flow .cont-big-outer.lv-m { display: none; }
	.hs-flow .cont-big-outer.lv-s { display: block; }

	/* Kategorieseiten: Tests 1 Spalte, News 2 Spalten (2×2) */
	.hs-cat.biggie .cont-big-outer { flex: 0 0 100%; }
	.hs-cat.smallie .cont-small-outer { flex: 0 0 calc(50% - max(14px, var(--hs-pad)) / 2); }
	.hs-cat .cont-big-outer.cl-mo, .hs-cat .cont-small-outer.cl-mo { display: none; }
	.hs-cat .cont-big-outer.cl-nm, .hs-cat .cont-small-outer.cl-nm { display: block; }
	.hs-cat-mid { display: none; }

}

/* ========== Breakpoint ≤589px ========== */
/* ≤589px. Erbt alles aus ≤800px (breakpoint-792.css) und überschreibt nur Abweichungen. */

@media (max-width: 589px) {

	:root {
		--fs-h3: clamp(1.3rem, 4vw, 2rem);
		--fs-h3s: clamp(1.18rem, 3.67vw, 1.8rem);
		--fs-title: 2.6rem;
		--fs-copy: 1.35rem;
		--fs-c-h2: 1.8rem;
		--fs-c-h3: 1.6rem;
		--fs-c-h4: 1.4rem;
		--fs-cap: 1rem;
	}

}

/* ========== Breakpoint ≤386px ========== */
/* ≤386px. Erbt aus ≤589px und überschreibt nur Abweichungen. */

@media (max-width: 386px) {

	:root {
		--hs-top: min(12.25vw, 98px);
		--fs-title: 2.4rem;
		--fs-c-h2: 1.7rem;
		--fs-c-h3: 1.5rem;
		--fs-c-h4: 1.35rem;
		--fs-pag: 1.3rem;
		--pag-gap: 0.4rem;
	}

}

/* ---- In-Text-Banner: gleicher Abstand oberhalb und unterhalb (= --hs-top) ---- */

/* 1. Letztes Element vor dem Banner: kein eigener Abstand nach unten */
.cont-article-outer:has(+ .cont-banner-outer) .hs-copy > :last-child {
	margin-bottom: 0 !important;
}

/* 2. Erstes Element nach dem Banner: kein eigener Abstand nach oben */
.cont-banner-outer + .cont-article-outer .hs-copy > :first-child {
	margin-top: 0 !important;
}

/* 3. Banner-Innenbox: Zusatzabstand unten auf 1rem setzen (Megabanner und letzte Rects-Reihe) */
body .cont-article-outer + .cont-banner-outer > .cont-banner-inner:last-child,
body .cont-article-outer + .cont-banner-outer.hs-rects > .cont-banner-inner:last-child {
	margin-bottom: 1rem !important;
}

/* ---- SiHF-Kachel im Kastenbild ---- */
.hs-intro { position: relative; container-type: size; }
.hs-intro > a:first-child,
.hs-intro > a:first-child img { display: block; width: 100%; height: 100%; }
.hs-sihf {
	position: absolute;
	bottom: 0;
	right: calc(max(14px, var(--hs-pad, min(2.4vw, 32px))) / 2);
	width: 25cqh;
	height: 25cqh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	text-decoration: none;
	transition: background-color 0.5s ease;
}
.hs-sihf:hover,
.hs-sihf:focus-visible { background: rgba(255, 255, 255, 0.8); }
.hs-sihf img { width: 70%; height: 70%; object-fit: contain; }

/* ---- SiHF-Kachel im Teaser (Artikel-Vollansicht) ---- */
.hs-teaser { position: relative; }
.hs-sihf.hs-sihf--teaser {
	bottom: 0;
	right: max(14px, var(--hs-pad, min(2.4vw, 32px)));
	width: 8%;                     /* 1/5 der Höhe bei 5:2 */
	height: auto;
	aspect-ratio: 1 / 1;
}
@media (max-width: 800px) {
	.hs-sihf.hs-sihf--teaser { width: 13.333%; }   /* 1/5 der Höhe bei 3:2 */
}

/* ========== Footer ========== */
.hs-footer {
	background-color: #ffffff;
	color: #333333;
	margin-top: var(--hs-top);
}
.hs-footer-inner {
	width: 100%;
	max-width: 1410px;                              /* = .main-inner */
	margin: 0 auto;
	padding: var(--hs-top) var(--hs-pad);
}

/* Partner-Logos */
.hs-partners {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--hs-top) max(14px, var(--hs-pad));    /* = .cont-row-inner */
	margin: 0 0 var(--hs-top);
}
.hs-partner-logo {
	display: flex;
	align-items: center;
	height: 2.4rem;
	margin-bottom: 1.2rem;
	text-decoration: none;
}
.hs-partner-logo img {
	width: auto;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
	opacity: 0.8;
}
.hs-partner-logo:hover img,
.hs-partner-logo:focus-visible img { opacity: 0.8; }
.hs-partner p {
	font-size: var(--fs-cap);
	line-height: 1.5;
	color: #767676;
	max-width: 20rem;
}

/* Leiste: Copyright + Footer-Menü, zentriert */
.hs-footer-bar {
	padding-top: var(--hs-pad);
	font-size: calc(var(--fs-cap) * 1.1);
	line-height: 1.5;
	text-align: center;
}
.hs-copyright { display: inline; margin: 0; }

/* Menü bleibt als Ganzes zusammen und bricht nur komplett um */
.hs-footer-menu {
	display: inline-block;
	white-space: nowrap;
}
.hs-footer-list,
.hs-footer-list li {
	display: inline;
	margin: 0;
	padding: 0;
}

/* Darunter: Menü in eigener Zeile */
@media (max-width: 760px) {
	.hs-footer-menu { display: block; }
}

.hs-footer-list a {
	font-weight: 700;
	font-size: calc(var(--fs-cap) * 1.1);
	line-height: 1.5;
}
.hs-footer a,
.hs-footer a:visited {
	color: #333333;
	text-decoration-color: transparent;
}
.hs-footer a:hover,
.hs-footer a:focus-visible {
	color: #333333;
	text-decoration-color: rgba(51, 51, 51, 1);
}

/* Responsive */
@media (max-width: 1002px) {
	.hs-partners { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 589px) {
	.hs-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hs-footer-bar { flex-direction: column; }
}