/* ===========================================================================
 * Ergänzungen des Themes zu den Originalstylesheets.
 *
 * Die Datei ist in Schichten gewachsen: spätere Abschnitte überschreiben
 * bewusst frühere und die Vorlagen unter wp-content/tf-static/. Reihenfolge
 * ist deshalb Teil der Bedeutung - Abschnitte nicht umsortieren.
 *
 * Abschnitte:
 *   - Barrierefreiheit
 *   - Kopfbereich
 *   - Brotkrumen
 *   - Inhalte
 *   - Blätternavigation
 *   - Suchformular
 *   - Fußzeile
 *   - Schmale Darstellung
 *   - Fließtext
 *   - Seitennavigation innerhalb eines Beitrags
 *   - Feinschliff des Rasters
 *   - Blaues Band und Krümelnavigation
 *   - Spalten: Luft zwischen den Bereichen
 *   - Bedienbarkeit
 *   - Krümelband
 *   - Artikel: keine Lücken durch entfernte Dubletten
 *   - Restaurierung
 *   - Karten der Übersicht: enger und ausgerichtet
 *   - Zeitgemäße Ausführung
 *   - Inhaltsfläche
 *   - Karten
 *   - Rubrikseite
 *   - Nachbesserung: Reiter, Kastenköpfe, Spaltenschrift
 *   - Kastenköpfe endgültig
 *   - Aktiver Reiter: das Rot der Vorlage bleibt
 *   - Randspalten flach
 * =========================================================================== */

@charset "UTF-8";
/**
 * Ergänzungen des Themes.
 *
 * Enthält ausschließlich, was in den Originalstylesheets nicht vorkommt:
 * Markup, das es dort nicht gab (Widgets, Suchformular, Blätternavigation,
 * Kommentare), Barrierefreiheit und das Verhalten unterhalb der festen
 * Layoutbreite. Die Originalgestaltung bleibt unangetastet.
 */

/* --- Barrierefreiheit --- */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.tf-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
}

.tf-skip-link:focus {
	left: 0;
	width: auto;
	height: auto;
	clip-path: none;
	padding: .75em 1.25em;
	background: #fff;
	color: #000;
	font-weight: 700;
	box-shadow: 0 0 0 2px #000;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid #005a9c;
	outline-offset: 2px;
}

/* --- Kopfbereich --- */

.tf-menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid #bbb;
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
}

.tf-menu-toggle__bar,
.tf-menu-toggle__bar::before,
.tf-menu-toggle__bar::after {
	display: block;
	width: 20px;
	height: 2px;
	margin: 0 auto;
	background: #333;
	content: "";
}

.tf-menu-toggle__bar::before { transform: translateY(-6px); }
.tf-menu-toggle__bar::after  { transform: translateY(4px); }.tf-footer-menu {
	padding: 0;
	list-style: none;
}

/* --- Brotkrumen --- */

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: .35em;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .85em;
}

.breadcrumb .sep { color: #999; }

/* --- Inhalte --- */


/* Alte Inhaltstabellen dürfen das Layout nicht sprengen. */


/* --- Blätternavigation --- */

.tf-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: .3em;
	margin: 1.5em 0;
	padding: 0;
	list-style: none;
}

.tf-pagination a,
.tf-pagination span {
	display: inline-block;
	padding: .35em .7em;
	border: 1px solid #ccc;
	text-decoration: none;
}

.tf-pagination .current { background: #eee; font-weight: 700; }

/* --- Suchformular --- */

.tf-searchform { display: flex; gap: .25em; }
.tf-searchform__input { min-width: 0; padding: .35em .5em; border: 1px solid #bbb; }
.tf-searchform__submit { padding: .35em .7em; border: 1px solid #bbb; background: #f3f3f3; cursor: pointer; }

/* --- Fußzeile --- */


.tf-footer-menu { display: flex; flex-wrap: wrap; gap: .4em 1em; margin: .8em 0; }

/* --- Schmale Darstellung -------------------------------------------------
 * Das feste Layout bleibt bis 980px unverändert; darunter wird umgebrochen,
 * statt horizontal zu scrollen.
 * ------------------------------------------------------------------------ */

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

	.page_margins > .page,
	.page_margins { min-width: 0; width: auto; }

	#main { display: flex; flex-direction: column; }

	/* Inhalt zuerst, Randspalten darunter. */
	#col3 { order: 1; width: auto; margin: 0; float: none; }
	#col1 { order: 2; }
	#col2 { order: 3; }

	#col1, #col2 { width: auto; margin: 0; float: none; }
	#col1_content, #col2_content, #col3_content { margin: 0; padding: 1em 0; }

	
}

@media screen and (max-width: 640px) {
	
	
	
}.tf-article__header {
	margin: 0 0 1.6em;
}.tf-article__title {
	margin: 0 0 .25em;
	border: 0;
}.tf-article__meta {
	margin: 0;
}

.tf-article__meta > * + *::before {
	content: " · ";
	color: #bbb;
}

/* --- Fließtext --- */

.tf-article__body > p {
	margin: 0 0 1.15em;
	text-align: left;
}

/* Einstieg etwas kräftiger, wie im Original der erste Absatz. */
.tf-article__body > p:first-of-type {
	font-size: 1.05em;
	color: #2a2a2a;
}

.tf-article__body h2,
.tf-article__body h3,
.tf-article__body h4 {
	margin: 1.6em 0 .55em;
	padding-bottom: .22em;
	font-family: Verdana, Arial, sans-serif;
	font-weight: 700;
	line-height: 1.3;
	color: #111;
	border-bottom: 1px solid #ddd;
}

/* Zwei Überschriften hintereinander nicht auseinanderreißen. */
.tf-article__body h2 + h3,
.tf-article__body h3 + h3,
.tf-article__body h2 + h2 {
	margin-top: .8em;
}

.tf-article__body a:hover,
.tf-article__body a:focus-visible {
	color: #004a56;
	border-bottom-color: currentColor;
}

.tf-article__body ul,
.tf-article__body ol {
	margin: 0 0 1.15em;
	padding-left: 1.4em;
}

.tf-article__body li { margin-bottom: .35em; }

.tf-article__body strong { font-weight: 700; }.tf-article__body hr {
	height: 0;
	border: 0;
}.tf-article__body .tf-figure img {
	display: block;
	background: #fff;
}

.tf-article__body .tf-figure figcaption strong {
	color: #222;
}

/* Bilder außerhalb einer Abbildung nie überlaufen lassen. */
.tf-article__body img {
	max-width: 100%;
	height: auto;
}

.tf-article__body small {
	font-size: .85em;
	color: #666;
}

/* --- Seitennavigation innerhalb eines Beitrags --- */

.tf-article__pages {
	margin: 2em 0 0;
	padding-top: .8em;
	border-top: 1px solid #e2e2e2;
	font-size: .9em;
}

.tf-article__pages a {
	display: inline-block;
	margin: 0 .15em;
	padding: .2em .55em;
	border: 1px solid #ccc;
	text-decoration: none;
}

/* --- Schmale Darstellung --- */

@media screen and (max-width: 979px) {
}

/* ==========================================================================
 * Feinschliff des Rasters
 *
 * Die Vorlage bleibt, wie sie ist: Verdana, dunkler Kopf, blaues Band,
 * Kästen mit blauer Kopfzeile. Korrigiert wird nur, was unsauber sitzt -
 * Kopfhöhe, Ausrichtung der Navigation, Abstände zwischen den Spalten und
 * die Suche, die bisher über das Band hinausragte.
 *
 * Grundlage ist ein durchgehender 8px-Rhythmus.
 * ========================================================================== */

:root {
	--tf-space-1: 4px;
	--tf-space-2: 8px;
	--tf-space-3: 12px;
	--tf-space-4: 16px;
	--tf-space-6: 24px;
	--tf-space-8: 32px;

	--tf-gutter: var(--tf-space-4);
	--tf-rule: #d9d9d9;
	--tf-ink: #1c1c1c;
	--tf-ink-muted: #5f5f5f;
	--tf-accent: #1580c0;
	--tf-head-bg: #1f1f1f;
}.tf_pagehead {
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--tf-space-6);
	min-height: 0;
}

.tf_pagehead .tf_logopos {
	flex: 0 0 auto;
	margin-bottom: var(--tf-space-3);
}

.tf_pagehead .tf_logopos img {
	display: block;
	height: 84px;
	width: auto;
	margin: 0;
}.tf_pagehead .tf_headpos {
	right: auto;
	bottom: auto;
	flex: 0 1 auto;
	margin-left: auto;
}.tf_nav .tf_navigation {
	list-style: none;
}.tf_nav .tf_navigation > li > a {
	display: block;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color 180ms ease, color 180ms ease;
}

/* --- Blaues Band und Krümelnavigation ----------------------------------- */

#nav {
	padding-right: var(--tf-space-6);
}

#teaser {
	display: flex;
	align-items: center;
	min-height: 26px;
	max-width: none;
	padding-left: var(--tf-space-6);
	white-space: normal;
}#teaser .breadcrumb {
	gap: var(--tf-space-1) var(--tf-space-2);
}#col2_content #box_search {
	margin-top: 0;
	margin-bottom: var(--tf-space-4);
}#col2_content #box_search .heading {
	float: none;
	margin-bottom: var(--tf-space-2);
	padding: 0;
}#col2_content #box_search .tf-searchform__submit {
	cursor: pointer;
	transition: background-color 180ms ease;
}

/* --- Spalten: Luft zwischen den Bereichen -------------------------------- */

#col1_content {
	padding: var(--tf-space-4) var(--tf-gutter) var(--tf-space-4) var(--tf-space-6);
}

#col2_content {
	padding: var(--tf-space-4) var(--tf-space-6) var(--tf-space-4) var(--tf-gutter);
}.productListing1ColBody .floatbox {
	display: flex;
}


/* --- Bedienbarkeit ------------------------------------------------------- */

a { transition: color 180ms ease; }

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--tf-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* --- Schmale Darstellung ------------------------------------------------- */

@media screen and (max-width: 979px) {.tf_pagehead {
		flex-direction: column;
		align-items: flex-start;
}

	.tf_pagehead .tf_headpos { margin-left: 0; }

	.tf_pagehead .tf_logopos img { height: 60px; }

	#col1_content,
	#col2_content,
	#col3_content {
		padding: var(--tf-space-4);
	}

	#teaser,
	#nav { padding-left: var(--tf-space-4); padding-right: var(--tf-space-4); }

	.productListing1ColBody .floatbox { flex-direction: column; }
	
}

/* --- Krümelband ----------------------------------------------------------
 * #nav_main ist nur da, um den negativen Außenabstand von #teaser
 * aufzufangen. Es soll dabei nicht als graues Band sichtbar werden.
 * ------------------------------------------------------------------------ */

#nav_main {
	height: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: none;
	border: 0;
}

#nav_main ul,
#nav_main li {
	margin: 0;
	padding: 0;
	list-style: none;
}#nav {
	border: 0;
}#teaser {
	margin-bottom: 0;
	padding-top: var(--tf-space-1);
	padding-bottom: var(--tf-space-1);
}

/* Auf der Startseite gibt es keine Krümel - dann auch kein Band. */
#teaser:empty,
.home #teaser {
	display: none;
}

/* --- Artikel: keine Lücken durch entfernte Dubletten --------------------- */

.tf-article__body > h2:first-child,
.tf-article__body > h3:first-child {
	margin-top: 0;
}

.tf-article__body > *:last-child {
	margin-bottom: 0;
}

/* Zwei Überschriften mit nichts dazwischen nicht auseinanderziehen. */
.tf-article__body h2 + h2,
.tf-article__body h2 + h3,
.tf-article__body h3 + h2,
.tf-article__body h3 + h3 {
	margin-top: .7em;
}

#teaser {
	color: var(--tf-ink-muted);
}

#teaser .breadcrumb a,
#teaser .headerNavigation {
	color: var(--tf-ink-muted);
	text-decoration: none;
}#teaser .breadcrumb a:hover {
	text-decoration: underline;
}

/* Startseite: kein Krümelband. */
.home #nav,
.home #teaser {
	display: none;
}

/* ==========================================================================
 * Restaurierung
 *
 * Das Vorbild ist ein restaurierter Klassiker: Form und Charakter bleiben -
 * dunkler Kopf, blaues Band, blaue Kastenköpfe, die vertraute Anmutung -
 * aber sauber ausgeführt. Neu sind Tiefe, Rhythmus und Reaktion auf
 * Bedienung; nicht neu sind Farbwelt und Aufbau.
 * ========================================================================== */

:root {
	--tf-radius: 3px;
	--tf-radius-lg: 6px;
	--tf-shadow-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
	--tf-shadow-2: 0 4px 10px rgba(16, 24, 40, .09), 0 2px 4px rgba(16, 24, 40, .06);
	--tf-blue: #1580c0;
	--tf-blue-dark: #0d5c8c;
	--tf-surface: #fff;
	--tf-canvas: #f6f8fa;
	--tf-ease: cubic-bezier(.4, 0, .2, 1);
}.productListing1ColBody {
	margin-bottom: var(--tf-space-4);
	border: 1px solid #e6eaee;
	border-bottom: 1px solid #e6eaee;
	border-radius: var(--tf-radius-lg);
	background: var(--tf-surface);
	transition: box-shadow 200ms var(--tf-ease), transform 200ms var(--tf-ease), border-color 200ms var(--tf-ease);
}

.productListing1ColBody:hover {
	border-color: #d4dbe3;
	box-shadow: var(--tf-shadow-2);
	transform: translateY(-1px);
}

.productListing1ColBody:last-child { border-bottom: 1px solid #e6eaee; }

/* Text ohne Bild soll die ganze Breite nutzen. */
.productListing1ColBody .productListing1ColBodyTxt:only-child {
	flex-basis: 100%;
}


/*
 * Kein erzwungener Bildausschnitt: in vielen Vorschaubildern steht Text
 * im Bild, den ein Beschnitt abschneiden würde. Die Bilder behalten ihr
 * eigenes Seitenverhältnis.
 */


.productListing1ColBody:hover .productListing1ColBodyImg img {
	transform: scale(1.025);
}.productListing1ColHead {
	letter-spacing: -.005em;
}

.productListing1ColHead a {
	text-decoration: none;
	transition: color 160ms var(--tf-ease);
}

.productListing1ColHead a:hover { color: var(--tf-blue-dark); }.tf-article__body .tf-figure img {
	width: auto;
	max-width: 100%;
	height: auto;
}

.tf-article__body .tf-figure img + img { margin-top: 0; }

/* Vergleichsreihen als Raster. */
.tf-article__body .tf-figure--series {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--tf-space-3);
	align-items: start;
}

.tf-article__body .tf-figure--series img {
	width: 100%;
	margin: 0;
}

.tf-article__body .tf-figure--series figcaption {
	grid-column: 1 / -1;
}

.tf-article__body .tf-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--tf-space-3);
	margin: 2em 0;
}

.tf-article__body .tf-gallery .tf-figure { margin: 0; }

.tf-article__body h2,
.tf-article__body h3 {
	border-bottom-color: #e3e7ec;
	letter-spacing: -.005em;
}

/* --- Schmale Darstellung ------------------------------------------------ */

@media screen and (max-width: 979px) {#col3_content {
		box-shadow: none;
}

	

	.tf-article__body .tf-figure--series,
	.tf-article__body .tf-gallery {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}
}

/* --- Karten der Übersicht: enger und ausgerichtet ------------------------ */

.productListing1ColBody {
	padding: 0;
	overflow: hidden;
}

.productListing1ColBody .floatbox {
	gap: 0;
	align-items: stretch;
}


.productListing1ColHead {
	margin: 0;
	font-size: 1.12em;
	line-height: 1.3;
	border: 0;
	padding: 0;
}


/* Kennzahlen unten links statt rechts schwebend. */


/* Karte ohne Bild: Text über die ganze Breite. */
.productListing1ColBody .floatbox > .productListing1ColBodyTxt:only-child {
	flex: 1 1 100%;
	max-width: 100%;
}.tf-card {
	display: grid;
	grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
	align-items: stretch;
	margin: 0 0 var(--tf-space-4);
	overflow: hidden;
	background: var(--tf-surface);
	transition: box-shadow 200ms var(--tf-ease), transform 200ms var(--tf-ease), border-color 200ms var(--tf-ease);
}.tf-card:hover {
	transform: translateY(-1px);
}

/* Ohne Bild nimmt der Text die ganze Breite ein. */
.tf-card:not(:has(.tf-card__media)) {
	grid-template-columns: 1fr;
}

.tf-card__media {
	display: block;
	overflow: hidden;
	background: #eef1f4;
	/* Einheitliches Bildfenster - sonst springen die Karten in der Höhe. */
	aspect-ratio: 4 / 3;
}

.tf-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 320ms var(--tf-ease);
}

.tf-card:hover .tf-card__image { transform: scale(1.03); }

.tf-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--tf-space-2);
	min-width: 0;
	padding: var(--tf-space-4) var(--tf-space-6);
}.tf-card__title {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: 700;
}.tf-card__title a {
	text-decoration: none;
	transition: color 160ms var(--tf-ease);
}.tf-card__excerpt {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tf-card__meta {
	margin: auto 0 0;
	padding-top: var(--tf-space-2);
}.tf-card__views {
	display: inline-block;
	padding: 2px var(--tf-space-2);
	border-radius: 999px;
	font-weight: 600;
}

@media screen and (max-width: 700px) {
	.tf-card { grid-template-columns: 1fr; }
	.tf-card__media { aspect-ratio: 16 / 9; }
	.tf-card__body { padding: var(--tf-space-4); }
}.tf-listing__header {
	margin: 0 0 var(--tf-space-6);
}.tf-listing__title {
	margin: 0;
	padding: 0;
	border: 0;
	line-height: 1.25;
	font-weight: 700;
}

.tf-listing__intro {
	margin-top: var(--tf-space-3);
	color: #48525c;
	line-height: 1.6;
}

.tf-listing__intro p:last-child { margin-bottom: 0; }

.tf-listing__empty {
	padding: var(--tf-space-6);
	background: var(--tf-canvas);
	border: 1px dashed #d4dbe3;
	border-radius: var(--tf-radius-lg);
	color: #5a6570;
	text-align: center;
}

/* ==========================================================================
 * Zeitgemäße Ausführung
 *
 * Die Anordnung bleibt unverändert: dunkler Kopf, blaues Band, links
 * Rubriken, Mitte Inhalt, rechts Infokästen. Erneuert sind Schrift,
 * Farbabstufungen, Abstände und Zustände - also die Ausführung, nicht
 * der Aufbau.
 * ========================================================================== */

:root {
	/* Systemschrift statt Verdana: der deutlichste Sprung in die Gegenwart. */
	--tf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif;

	/* Kühle, abgestufte Neutraltöne statt reiner Graustufen. */
	--tf-900: #0f172a;
	--tf-800: #1e293b;
	--tf-700: #334155;
	--tf-600: #475569;
	--tf-500: #64748b;
	--tf-300: #cbd5e1;
	--tf-200: #e2e8f0;
	--tf-100: #f1f5f9;
	--tf-050: #f8fafc;

	--tf-brand: #0e7490;
	--tf-brand-strong: #155e75;
}

body,
.tf_page,
.tf_pagehead,
#col1_content,
#col2_content,
#col3_content,
.tf-article,
.tf-card{
	font-family: var(--tf-font);
}

body {
	font-size: 16px;
	color: var(--tf-800);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.tf_nav .tf_navigation {
	gap: var(--tf-space-1);
	align-items: flex-end;
}

.tf_nav .tf_navigation > li > a {
	padding: 9px 18px;
	border-radius: 8px 8px 0 0;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--tf-on-graphite);
	background: rgba(255, 255, 255, .05);
}

.tf_nav .tf_navigation > li > a:hover {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}#teaser .breadcrumb {
	letter-spacing: .01em;
}

#teaser .breadcrumb a { color: var(--tf-500); }#col2_content #box_search {
	background: #fff;
	border: 1px solid var(--tf-200);
	border-radius: 10px;
}

#col2_content #box_search .heading {
	color: var(--tf-500);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

#col2_content #box_search .tf-searchform__input,
#col2_content #box_search .tf-searchform__submit {
	height: 36px;
	border: 1px solid var(--tf-300);
	border-radius: 8px;
	font-size: 14px;
}#col2_content #box_search .tf-searchform__input:focus {
	outline-offset: 0;
}

/* --- Inhaltsfläche ------------------------------------------------------- */

#frame_main_content { background: var(--tf-050); }#col3_content {
	padding: 32px;
}.tf-article {
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--tf-800);
}

.tf-article__header {
	margin-bottom: 28px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--tf-200);
}

.tf-article__title {
	font-size: 34px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--tf-900);
}

.tf-article__meta {
	font-size: 13px;
	color: var(--tf-500);
}

.tf-article__body > p { margin-bottom: 1.35em; }

.tf-article__body h2,
.tf-article__body h3,
.tf-article__body h4 {
	margin: 2.2em 0 .7em;
	padding: 0;
	border: 0;
	color: var(--tf-900);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.28;
}

.tf-article__body h2 { font-size: 25px; }
.tf-article__body h3 { font-size: 20px; }
.tf-article__body h4 { font-size: 17px; }

.tf-article__body h2 + h3,
.tf-article__body h3 + h3,
.tf-article__body h2 + h2 { margin-top: 1em; }

.tf-article__body a {
	color: var(--tf-brand);
	border-bottom: 0;
	text-decoration: underline;
	text-decoration-color: rgba(14, 116, 144, .3);
	text-underline-offset: 3px;
	transition: text-decoration-color 150ms var(--tf-ease), color 150ms var(--tf-ease);
}

.tf-article__body a:hover {
	color: var(--tf-brand-strong);
	text-decoration-color: currentColor;
}

.tf-article__body hr {
	margin: 2.4em 0;
	border-top: 1px solid var(--tf-200);
}

.tf-article__body .tf-figure { margin: 2.2em 0; }

.tf-article__body .tf-figure img {
	border: 0;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 8px 24px rgba(15, 23, 42, .06);
}

.tf-article__body .tf-figure figcaption {
	margin-top: 12px;
	padding-left: 12px;
	border-left: 2px solid var(--tf-300);
	color: var(--tf-500);
	font-size: 13.5px;
	line-height: 1.55;
}

.tf-article__body .tf-note {
	margin: 1.8em 0;
	padding: 16px 18px;
	background: var(--tf-050);
	border: 1px solid var(--tf-200);
	border-left: 3px solid var(--tf-brand);
	border-radius: 10px;
	color: var(--tf-700);
	font-size: 15.5px;
}

.tf-article__body .tf-figure--series,
.tf-article__body .tf-gallery { gap: 14px; }

/* --- Karten -------------------------------------------------------------- */

.tf-card {
	border: 1px solid var(--tf-200);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.tf-card:hover {
	border-color: var(--tf-300);
	box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}

.tf-card__title { font-size: 18px; line-height: 1.32; letter-spacing: -.01em; }
.tf-card__title a { color: var(--tf-900); }
.tf-card__title a:hover { color: var(--tf-brand); }

.tf-card__excerpt { font-size: 14.5px; line-height: 1.6; color: var(--tf-600); }

.tf-card__views {
	background: var(--tf-100);
	color: var(--tf-500);
	font-size: 12px;
	letter-spacing: .01em;
}

/* --- Rubrikseite --------------------------------------------------------- */

.tf-listing__header {
	margin-bottom: 28px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--tf-200);
}

.tf-listing__title {
	font-size: 32px;
	letter-spacing: -.02em;
	color: var(--tf-900);
}

/* --- Blätternavigation --------------------------------------------------- */

.page-numbers {
	padding: 7px 13px;
	border: 1px solid var(--tf-200);
	border-radius: 8px;
	color: var(--tf-600);
	font-size: 14px;
	transition: background-color 150ms var(--tf-ease), border-color 150ms var(--tf-ease);
}

.page-numbers:hover { background: var(--tf-100); border-color: var(--tf-300); }

.page-numbers.current {
	background: var(--tf-brand);
	border-color: var(--tf-brand);
	color: #fff;
	font-weight: 600;
}#footer {
	font-size: 13px;
}

@media screen and (max-width: 979px) {
	.tf-article { font-size: 16px; max-width: none; }
	.tf-article__title { font-size: 26px; }#col3_content { padding: 20px; border-left: 0; border-right: 0;
}
}

/* --- Nachbesserung: Reiter, Kastenköpfe, Spaltenschrift ------------------
 * Die Vorlage setzt für Reiter und Kastenköpfe eigene Hintergründe und
 * Farben. Die folgenden Regeln überschreiben sie vollständig, damit das
 * Bild einheitlich bleibt.
 * ------------------------------------------------------------------------ */

/* Reiter: alle gleich, unabhängig von den Zustandsklassen der Vorlage. */
.tf_nav .tf_navigation > li > a,
.tf_nav .tf_navigation > li > a:link,
.tf_nav .tf_navigation > li > a:visited,
.tf_nav .tf_navigation > li > a.first,
.tf_nav .tf_navigation > li > a.last {
	background: rgba(255, 255, 255, .06);
	background-image: none;
	color: var(--tf-on-graphite);
	font-size: 15px;
	border: 0;
	text-decoration: none;
}

.tf_nav .tf_navigation > li > a:hover,
.tf_nav .tf_navigation > li > a:focus-visible {
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 15px;
}

/* Aktueller Reiter bleibt hervorgehoben - das ist Teil des Charakters. */
.tf_nav .tf_navigation > li.current-menu-item > a,
.tf_nav .tf_navigation > li > a[aria-current="page"] {
	background: #dc2626;
	color: #fff;
}

/* Kastenköpfe: durchgehend flach, kein Verlauf aus der Vorlage. */

#col1_content .catList h4,
#col2_content .boxInfoRS h4 {
	background: #fff;
	background-image: none;
	border-bottom: 1px solid var(--tf-200);
	color: var(--tf-500);
	font-size: 10.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Randspalten: kompaktere Schrift, damit Bezeichnungen nicht umbrechen. */


#col1_content,
#col2_content {
	font-size: 12.5px;
}

/* Inhaltsspalte wieder etwas großzügiger. */
.tf-article { max-width: 46em; }

@media screen and (max-width: 1280px) {
	.tf_nav .tf_navigation > li > a,
	.tf_nav .tf_navigation > li > a:link,
	.tf_nav .tf_navigation > li > a:visited { padding: 8px 13px; font-size: 14px; }
}

/* --- Kastenköpfe endgültig ----------------------------------------------
 * Die Vorlage setzt den Verlauf über ID-Selektoren
 * (#col1_content h4 / #box_categories h4). Hier wird mit derselben
 * Gewichtung dagegengehalten.
 * ------------------------------------------------------------------------ */

#col1_content h4,
#col2_content h4,
#col1_content #box_categories h4,
#col2_content #box_cart h4,
#col2_content #box_reviews h4 {
	background: #fff;
	background-image: none;
	color: var(--tf-500);
	padding: 11px 14px;
	border: 0;
	border-bottom: 1px solid var(--tf-200);
	border-radius: 10px 10px 0 0;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-shadow: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#col1_content h4 a,
#col2_content h4 a,
#col1_content h4 a:link,
#col2_content h4 a:link,
#col1_content h4 a:visited,
#col2_content h4 a:visited {
	color: var(--tf-500);
	padding: 0;
	background: none;
}

/* --- Aktiver Reiter: das Rot der Vorlage bleibt ------------------------- */

.tf_nav .tf_navigation > li:first-child > a,
.tf_nav .tf_navigation > li:first-child > a:link,
.tf_nav .tf_navigation > li:first-child > a:visited,
.tf_nav .tf_navigation > li.current-menu-item > a,
.tf_nav .tf_navigation > li.current-menu-ancestor > a,
.tf_nav .tf_navigation > li.current-menu-parent > a {
	background: #dc2626;
	color: #fff;
	font-weight: 700;
}

.tf_nav .tf_navigation > li:first-child > a:hover,
.tf_nav .tf_navigation > li.current-menu-item > a:hover {
	background: #b91c1c;
	color: #fff;
}

/* Wenn ein anderer Reiter aktiv ist, verliert der erste das Rot. */
.tf_nav .tf_navigation:has(> li.current-menu-item) > li:first-child:not(.current-menu-item) > a,
.tf_nav .tf_navigation:has(> li.current-menu-ancestor) > li:first-child:not(.current-menu-ancestor) > a {
	background: rgba(255, 255, 255, .06);
	color: var(--tf-on-graphite);
	font-weight: 600;
}

/* ==========================================================================
 * Randspalten flach
 *
 * Zuvor steckte jeder Eintrag in mehreren Rahmen: Kastenrahmen, Kopfleiste,
 * Innenfläche, dazu je Eintrag eine eigene Fläche. Das wirkte verschachtelt.
 * Jetzt trägt allein die Typografie die Gliederung - Beschriftung, Liste,
 * Abstand. Kein Rahmen, keine Kopfleiste, keine Flächen je Eintrag.
 * ========================================================================== */

#col1_content,
#col2_content {
	padding-top: 28px;
}

/* Kästen: keine Rahmen, keine Schatten, nur Abstand. */
#col1_content .catList,
#col1_content .boxInfoLS,
#col1_content .boxInfoRS,
#col2_content .boxInfoLS,
#col2_content .boxInfoRS,
#col2_content #box_search {
	margin: 0 0 30px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

/* Beschriftung: nur Text, keine Leiste. */
#col1_content h4,
#col2_content h4,
#col1_content #box_categories h4,
#col2_content #box_cart h4,
#col2_content #box_reviews h4,
#col2_content #box_search .heading {
	margin: 0 0 10px;
	padding: 0 8px;
	background: none;
	border: 0;
	border-radius: 0;
	color: #94a3b8;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: normal;
}

/* Inhaltsfläche ohne eigenes Polster. */
#col1_content .catListBody,
#col1_content .boxInfoBodyLS,
#col1_content .boxInfoBodyRS,
#col2_content .boxInfoBodyLS,
#col2_content .boxInfoBodyRS {
	padding: 0;
	background: none;
	border: 0;
}

/* Einträge: reine Textzeilen. */
#col1_content li,
#col2_content li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
}

#col1_content .catListBody a,
#col1_content .boxInfoBodyLS a,
#col1_content .boxInfoBodyRS a,
#col2_content .boxInfoBodyLS a,
#col2_content .boxInfoBodyRS a {
	display: block;
	padding: 6px 8px;
	margin: 0;
	background: none;
	border: 0;
	border-radius: 6px;
	color: #475569;
	font-size: 13px;
	line-height: 1.45;
	text-decoration: none;
	transition: color 150ms var(--tf-ease), background-color 150ms var(--tf-ease);
}

#col1_content .catListBody a:hover,
#col1_content .boxInfoBodyLS a:hover,
#col1_content .boxInfoBodyRS a:hover,
#col2_content .boxInfoBodyLS a:hover,
#col2_content .boxInfoBodyRS a:hover {
	background: #f1f5f9;
	color: #0e7490;
}

/* Rubrikliste: die aktuelle Rubrik hervorheben. */
#col1_content .catListBody a:focus-visible {
	outline: 2px solid #0e7490;
	outline-offset: -2px;
}

#col2_content #box_search .tf-searchform__input,
#col2_content #box_search .tf-searchform__submit {
	height: 34px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #fff;
	font-size: 13px;
}

/* Textkästen (Favoriten o. Ä.) bleiben schlichter Text. */
#col2_content .boxInfoBodyRS,
#col2_content .boxInfoBodyLS {
	padding: 0 8px;
	color: #64748b;
	font-size: 13px;
	line-height: 1.55;
}

#col2_content .boxInfoBodyRS p,
#col2_content .boxInfoBodyLS p { margin: 0; }

/* Trennung zwischen den Gruppen statt Rahmen um jede. */
#col1_content .catList + *,
#col1_content .boxInfoLS + *,
#col2_content #box_search + *,
#col2_content .boxInfoRS + * {
	padding-top: 26px;
	border-top: 1px solid #eef2f6;
}

/* ==========================================================================
 * Graphit: Kopf und Randspalten als eine Fläche
 *
 * Der dunkle Kopf läuft ohne Bruch in die Randspalten weiter. Das blaue
 * Band entfällt - es zerschnitt die Fläche. Der Text sitzt weiterhin auf
 * einer weißen Karte und hebt sich dadurch deutlich ab.
 * ========================================================================== */

:root {
	--tf-graphite-top: #272727;
	--tf-graphite: #1f1f1f;
	--tf-graphite-deep: #171717;
	--tf-on-graphite: #cfcfcf;
	--tf-on-graphite-dim: #8d8d8d;
}

/* Durchgehende dunkle Fläche vom Kopf bis zum Fuß. */
.page_margins > .page,
#frame_wrapper_main,
#frame_main_left,
#frame_main_right,
#frame_main_content,
#main {
	background: var(--tf-graphite);
}.tf_pagehead {
	background: linear-gradient(180deg, var(--tf-graphite-top) 0%, var(--tf-graphite) 100%);
}

/* Das blaue Band durch eine ruhige Trennlinie ersetzen. */
#frame_wrapper_interim,
#frame_interim_left,
#frame_interim_right {
	height: 0;
	min-height: 0;
	background: none;
	border: 0;
	overflow: hidden;
}

#nav {
	background: var(--tf-graphite);
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}

#teaser .breadcrumb { font-size: 12.5px; }
#teaser .breadcrumb a,
#teaser .headerNavigation { color: var(--tf-on-graphite-dim); }
#teaser .breadcrumb a:hover { color: #fff; }
#teaser .breadcrumb [aria-current="page"] { color: var(--tf-on-graphite); font-weight: 600; }
#teaser .breadcrumb .sep { color: #4b5563; }

/* --- Randspalten auf Graphit -------------------------------------------- */

#col1,
#col2,
#col1_content,
#col2_content {
	background: transparent;
}

#col1_content,
#col2_content {
	padding-top: 26px;
	color: var(--tf-on-graphite);
}

/* Beschriftungen der Kästen. */
#col1_content h4,
#col2_content h4,
#col1_content #box_categories h4,
#col2_content #box_cart h4,
#col2_content #box_reviews h4,
#col2_content #box_search .heading {
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	padding: 0 8px 8px;
	margin-bottom: 10px;
	color: var(--tf-on-graphite-dim);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Einträge. */
#col1_content .catListBody a,
#col1_content .boxInfoBodyLS a,
#col1_content .boxInfoBodyRS a,
#col2_content .boxInfoBodyLS a,
#col2_content .boxInfoBodyRS a {
	color: var(--tf-on-graphite);
	border-radius: 7px;
}

#col1_content .catListBody a:hover,
#col1_content .boxInfoBodyLS a:hover,
#col1_content .boxInfoBodyRS a:hover,
#col2_content .boxInfoBodyLS a:hover,
#col2_content .boxInfoBodyRS a:hover {
	background: rgba(255, 255, 255, .07);
	color: #fff;
}

#col2_content .boxInfoBodyRS,
#col2_content .boxInfoBodyLS { color: var(--tf-on-graphite-dim); }

/* Kästen selbst tragen keine eigene Fläche mehr. */
#col1_content .catList,
#col1_content .boxInfoLS,
#col1_content .boxInfoRS,
#col2_content .boxInfoLS,
#col2_content .boxInfoRS,
#col2_content #box_search {
	background: none;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	margin-bottom: 28px;
}

/* Trennung zwischen Gruppen. */
#col1_content .catList + *,
#col1_content .boxInfoLS + *,
#col2_content #box_search + *,
#col2_content .boxInfoRS + * {
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .07);
}

#col2_content #box_search .tf-searchform__input::placeholder { color: #6b7684; }

#col2_content #box_search .tf-searchform__input:focus {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .28);
	outline: none;
}

#col2_content #box_search .tf-searchform__submit:hover {
	background: rgba(255, 255, 255, .18);
	color: #fff;
}

/* --- Einträge mit Vorschaubild ------------------------------------------ */

.tf-sidelist { margin: 0; padding: 0; list-style: none; }

.tf-sidelist__item + .tf-sidelist__item { margin-top: 2px; }

.tf-sidelist a {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 7px 8px;
}

.tf-sidelist__media {
	flex: 0 0 48px;
	width: 48px;
	height: 40px;
	overflow: hidden;
	border-radius: 5px;
	background: rgba(255, 255, 255, .06);
}

.tf-sidelist__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tf-sidelist__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12.5px;
	line-height: 1.4;
}

/* --- Inhaltskarte hebt sich ab ------------------------------------------ */

#col3_content {
	background: #fff;
	border: 0;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 10px 30px rgba(0, 0, 0, .18);
	margin: 18px 0 26px;
}

/* --- Fuß ----------------------------------------------------------------- */

#footer {
	background: var(--tf-graphite-deep);
	color: var(--tf-on-graphite-dim);
	border-top: 1px solid rgba(255, 255, 255, .07);
	padding: 18px 26px;
}

#footer a { color: var(--tf-on-graphite); }

#frame_main_bottom,
#frame_main_bl,
#frame_main_br {
	background: var(--tf-graphite-deep);
	height: auto;
}

@media screen and (max-width: 979px) {
	#col3_content { margin: 12px 0; border-radius: 10px; }
	#col1_content, #col2_content { padding-top: 18px; }
}

/* --- Karten bleiben hell -------------------------------------------------
 * Die dunkle Fläche gilt für Kopf und Randspalten. Innerhalb der weißen
 * Inhaltskarte muss alles hell bleiben, sonst steht dunkler Text auf
 * dunklem Grund.
 * ------------------------------------------------------------------------ */

#col3_content,
#col3_content .tf-card,
#col3_content .tf-card__body,
#col3_content .tf-listing,
#col3_content .tf-article {
	background: #fff;
	color: var(--tf-800);
}

#col3_content .tf-card {
	border: 1px solid var(--tf-200);
}

#col3_content .tf-card__title a { color: var(--tf-900); }
#col3_content .tf-card__title a:hover { color: var(--tf-brand); }
#col3_content .tf-card__excerpt { color: var(--tf-600); }

#col3_content .tf-card__views {
	background: var(--tf-100);
	color: var(--tf-500);
}

#col3_content .tf-card__media { background: var(--tf-100); }

#col3_content h1,
#col3_content h2,
#col3_content h3,
#col3_content h4,
#col3_content p,
#col3_content li,
#col3_content td,
#col3_content th {
	color: inherit;
}

#col3_content .tf-article__title,
#col3_content .tf-listing__title { color: var(--tf-900); }

#col3_content a { color: var(--tf-brand); }.tf_page {
	height: auto;
	min-height: 0;
	border: 0;
}

/* 2. Keine Kante unter dem Kopf. */
#frame_wrapper_interim,
#frame_interim_left,
#frame_interim_right {
	display: none;
}

#frame_wrapper_main,
#frame_main_left,
#frame_main_right,
#frame_main_content {
	border: 0;
	background: var(--tf-graphite);
}.tf_pagehead {
	border: 0;
	box-shadow: none;
}

.tf_pagehead,
.tf_page,
.tf_pagehead .tf_logopos {
	border-color: transparent;
}

/* 4. Randspalten: eine Textfarbe, ein Kontrast.
 *    Vorher waren Beschriftungen, Verweise und Fließtext drei verschiedene
 *    Grautöne - das war auf Graphit kaum lesbar. */
#col1_content,
#col2_content,
#col1_content p,
#col2_content p,
#col1_content li,
#col2_content li,
#col1_content .boxInfoBodyLS,
#col1_content .boxInfoBodyRS,
#col2_content .boxInfoBodyLS,
#col2_content .boxInfoBodyRS,
#col2_content .textwidget,
#col2_content .custom-html-widget {
	color: #dbe3ec;
	font-size: 12.5px;
}

#col1_content a,
#col2_content a,
#col1_content .catListBody a,
#col1_content .boxInfoBodyLS a,
#col1_content .boxInfoBodyRS a,
#col2_content .boxInfoBodyLS a,
#col2_content .boxInfoBodyRS a,
.tf-sidelist a,
.tf-sidelist__title {
	color: #dbe3ec;
}

#col1_content a:hover,
#col2_content a:hover,
#col1_content .catListBody a:hover,
#col1_content .boxInfoBodyLS a:hover,
#col2_content .boxInfoBodyLS a:hover,
#col2_content .boxInfoBodyRS a:hover,
.tf-sidelist a:hover .tf-sidelist__title {
	color: #ffffff;
}

/* Nur die Beschriftung bleibt bewusst zurückhaltend. */
#col1_content h4,
#col2_content h4,
#col2_content #box_search .heading {
	color: #8d99a6;
}body {
	box-sizing: border-box;
}.page_margins {
	min-width: 0;
}.page_margins > .page {
	min-width: 0;
}

@media screen and (max-width: 979px) {
	body { padding: 6px; }
}

/* --- Blauer Rand: als Rahmen statt als Polster ---------------------------
 * Das Polster am body wird von der Vorlage überstimmt. Ein Rahmen direkt
 * am Seitenblock ist eindeutig und kommt ohne Spezifitätskampf aus.
 * ------------------------------------------------------------------------ */

body {
	padding: 0;
	background: #000080;
}

.page_margins {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	border: 12px solid #000080;
	background: #000080;
}.page_margins > .page {
	border-radius: 8px;
	overflow: hidden;
}

@media screen and (max-width: 979px) {
	.page_margins { border-width: 6px; }
}

/* ==========================================================================
 * Nachbesserung: Bildlauf, Kopfkante, rechte Spalte, Navigation
 * ========================================================================== */

/* 1. Bildlauf wiederherstellen.
 *    "overflow: hidden" auf .page war für die abgerundeten Ecken gedacht,
 *    hat aber den gesamten Inhalt abgeschnitten. Die Rundung übernehmen
 *    jetzt Kopf und Fuß selbst. */
html,
body {
	height: auto;
	overflow-x: hidden;
	overflow-y: visible;
}

.page_margins > .page,
.page_margins,
#main,
#frame_wrapper_main,
#frame_main_left,
#frame_main_right,
#frame_main_content {
	overflow: visible;
	height: auto;
	min-height: 0;
}

.tf_pagehead { border-radius: 8px 8px 0 0; }
#footer { border-radius: 0 0 8px 8px; }

/* 2. Keine graue Kante über dem Kopf.
 *    Die Vorlage setzt am Seitenblock ein Polster; dadurch schaute der
 *    Untergrund oberhalb des Kopfes hervor. */
.page_margins > .page {
	padding: 0;
	margin: 0;
	border: 0;
	background: var(--tf-graphite);
}

.tf_page {
	margin: 0;
	padding: 0;
	background: transparent;
}

.tf_pagehead {
	margin: 0;
	padding: 16px 24px 0;
}

/* 3. Rechte Spalte genau wie die linke. */
#col2_content .boxInfoRS,
#col2_content .boxInfoLS,
#col2_content .widget,
#col2_content #box_search {
	background: none;
	border: 0;
	box-shadow: none;
	border-radius: 0;
}

#col2_content h4,
#col2_content .widget-title,
#col2_content .heading,
#col2_content #box_cart h4,
#col2_content #box_reviews h4,
#col2_content #box_search .heading {
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	border-radius: 0;
	margin: 0 0 10px;
	padding: 0 8px 8px;
	color: #8d99a6;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-shadow: none;
	float: none;
	width: auto;
}

/* Suchfeld: gleiche Breite wie die Liste, kein Versatz. */
#col2_content #box_search {
	margin: 0 0 28px;
	padding: 0;
	width: auto;
}

#col2_content #box_search .inputs {
	float: none;
	display: block;
	height: auto;
	margin: 0;
	padding: 0 8px;
	overflow: visible;
	width: auto;
}#col2_content #box_search .tf-searchform {
	width: 100%;
}#col2_content #box_search .tf-searchform__input {
	width: auto;
}

#col2_content #box_search .link { display: none; }

/* 4. Navigation rechts unter dem Logo, mit zweiter Ebene. */
.tf_pagehead {
	display: block;
	position: relative;
}

.tf_pagehead .tf_logopos {
	float: left;
	margin: 0 0 12px;
}.tf_pagehead .tf_headpos {
	position: static;
	padding-top: 4px;
}.tf_nav .tf_navigation {
	padding-right: 0;
}

/* Zweite Ebene: Klappliste unter dem Reiter. */
.tf_nav .tf_navigation li { position: relative; }.tf_nav .tf_navigation ul {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 200;
	min-width: 230px;
	margin: 0;
	padding: 6px;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 160ms var(--tf-ease), transform 160ms var(--tf-ease), visibility 160ms;
}

.tf_nav .tf_navigation li:hover > ul,
.tf_nav .tf_navigation li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.tf_nav .tf_navigation ul a,
.tf_nav .tf_navigation ul a:link,
.tf_nav .tf_navigation ul a:visited {
	display: block;
	padding: 7px 12px;
	border-radius: 6px;
	background: none;
	color: var(--tf-on-graphite);
	font-size: 13px;
	font-weight: 500;
	white-space: normal;
	line-height: 1.4;
}

.tf_nav .tf_navigation ul a:hover {
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: 13px;
}.tf_nav .tf_navigation ul ul {
	top: -6px;
	left: 100%;
}

@media screen and (max-width: 979px) {
	.tf_pagehead { padding: 12px 14px 0; }
	.tf_pagehead .tf_logopos { float: none; }
	.tf_nav .tf_navigation { justify-content: flex-start; }
}

/* --- Navigation rechts ausrichten ----------------------------------------
 * Die Vorlage lässt .tf_navigation nach links fließen (float:left); dadurch
 * schrumpft der Block auf seine Inhaltsbreite und die Ausrichtung greift
 * nicht. Der Float wird aufgehoben.
 * ------------------------------------------------------------------------ */

.tf_pagehead .tf_headpos {
	display: block;
	width: 100%;
	clear: both;
}

.tf_nav {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
}.tf_nav .tf_navigation {
	float: none;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
}

.tf_nav .tf_navigation > li {
	display: block;
	float: none;
	line-height: normal;
}

/* Kein durchgehender schwarzer Balken hinter den Reitern. */
#nav_main,
.tf_nav ul.tf_navigation { background: none; }

/* ==========================================================================
 * Randspalten: eine Auszeichnung für beide Seiten
 *
 * Die Kästen tragen jetzt durchgehend .tf-box statt der Mischung aus
 * boxInfoRS/boxInfoLS/catList. Dadurch greift eine einzige Regel für
 * links und rechts - vorher war die rechte Spalte hell geblieben, weil
 * die Widgets kein h4 ausgaben.
 * ========================================================================== */

#col1_content .tf-box,
#col2_content .tf-box {
	margin: 0 0 28px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

#col1_content .tf-box + .tf-box,
#col2_content .tf-box + .tf-box {
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .07);
}

#col1_content .tf-box__label,
#col2_content .tf-box__label {
	margin: 0 0 10px;
	padding: 0 8px 8px;
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	color: #8d99a6;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.4;
	text-transform: uppercase;
	text-shadow: none;
}

#col1_content .tf-box__body,
#col2_content .tf-box__body {
	padding: 0;
	background: none;
	color: #dbe3ec;
	font-size: 12.5px;
	line-height: 1.55;
}

#col1_content .tf-box__body p,
#col2_content .tf-box__body p { margin: 0 0 8px; padding: 0 8px; }

#col1_content .tf-box__body ul,
#col2_content .tf-box__body ul { margin: 0; padding: 0; list-style: none; }

#col1_content .tf-box__body li,
#col2_content .tf-box__body li { margin: 0; padding: 0; border: 0; }

#col1_content .tf-box__body a,
#col2_content .tf-box__body a {
	display: block;
	padding: 6px 8px;
	border-radius: 6px;
	color: #dbe3ec;
	text-decoration: none;
	transition: background-color 150ms var(--tf-ease), color 150ms var(--tf-ease);
}

#col1_content .tf-box__body a:hover,
#col2_content .tf-box__body a:hover {
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

/* Suchfeld im Kasten. */
#col2_content #box_search .tf-box__body { padding: 0 8px; }

#col2_content #box_search .tf-searchform { display: flex; gap: 6px; }

#col2_content #box_search .tf-searchform__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 34px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 8px;
	color: #fff;
	padding: 0 10px;
}

#col2_content #box_search .tf-searchform__submit {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	padding: 0;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 8px;
	color: #dbe3ec;
}

/* --- Navigation nach links ----------------------------------------------- */

.tf_nav .tf_navigation { justify-content: flex-start; }

/* --- Zweite Ebene: keine hellen Rundungen -------------------------------- */

.tf_nav .tf_navigation ul {
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 8px;
	background: var(--tf-graphite-top);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}

.tf_nav .tf_navigation ul ul { border-radius: 8px; }

.tf_nav .tf_navigation ul a,
.tf_nav .tf_navigation ul a:link,
.tf_nav .tf_navigation ul a:visited,
.tf_nav .tf_navigation ul a:hover {
	border: 0;
	border-radius: 6px;
	background-image: none;
	box-shadow: none;
}

/* ==========================================================================
 * Navigation im schmalen Layout
 *
 * Bis hierher klappte auf schmalen Bildschirmen der gesamte Menübaum
 * dauerhaft auf: alle Unterlisten standen auf position:static und sichtbar.
 * Vor dem Inhalt lag damit eine Wand aus Verknüpfungen. Jetzt liegt das
 * Menü hinter der Umschaltfläche, und jede Ebene klappt einzeln auf.
 * ========================================================================== */

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

	.tf-menu-toggle {
		display: block;
		margin: 0 0 10px auto;
		border-color: rgba(255, 255, 255, .25);
		background: rgba(255, 255, 255, .06);
	}

	.tf-menu-toggle__bar,
	.tf-menu-toggle__bar::before,
	.tf-menu-toggle__bar::after { background: var(--tf-on-graphite); }

	.tf_nav .tf_navigation { display: none; flex-direction: column; align-items: stretch; }
	.tf_nav.is-open .tf_navigation { display: flex; }

	.tf_nav .tf_navigation > li > a { text-align: left; }

	/* Unterlisten im Fluss, aber eingeklappt bis zum Antippen. */
	.tf_nav .tf_navigation ul {
		display: none;
		position: static;
		min-width: 0;
		margin: 2px 0 2px 14px;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		border-radius: 6px;
		box-shadow: none;
		background: rgba(255, 255, 255, .04);
	}

	.tf_nav .tf_navigation li.is-open > ul { display: block; }

	/* Auf Touchgeräten darf :hover nichts aufklappen. */
	.tf_nav .tf_navigation li:hover > ul { display: none; }
	.tf_nav .tf_navigation li.is-open:hover > ul { display: block; }

	/* Aufklapppunkte als solche erkennbar. */
	.tf_nav .tf_navigation li.menu-item-has-children > a::after {
		content: "▾";
		float: right;
		margin-left: .6em;
		transition: transform 150ms var(--tf-ease);
	}

	.tf_nav .tf_navigation li.menu-item-has-children.is-open > a::after { transform: rotate(180deg); }
}

/* Aufklapppunkte ohne eigene Adresse verhalten sich wie Schaltflächen. */
.tf_nav .tf_navigation a[role="button"] { cursor: pointer; }

/* ==========================================================================
 * Übersichtskarten: kleine Bilder und Unterrubriken
 *
 * Fast zwei Drittel der übernommenen Vorschaubilder sind schmaler als die
 * Bildspalte. Formatfüllend gezogen wurden sie unscharf und verzerrt.
 * Unterrubriken tragen ausserdem keinen Fliesstext - ihre Karte hatte eine
 * leere Textspalte neben einem übergrossen Bild.
 * ========================================================================== */

.tf-card {
	/* Feste, schmalere Bildspalte: weniger Hochskalierung, ruhigere Liste. */
	grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
}

.tf-card__media { aspect-ratio: 4 / 3; }

/*
 * Kleines Bild: nie vergrössern. object-fit: contain hätte weiterhin
 * hochskaliert - scale-down nimmt die kleinere von Originalgrösse und
 * eingepasster Grösse.
 */
.tf-card__image--fit {
	object-fit: scale-down;
	padding: 8px;
}

.tf-card:hover .tf-card__image--fit { transform: none; }

/* Schmale Bildspalte für schmale Bilder: weniger leere Fläche. */
.tf-card--img-sm { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
.tf-card--img-xs { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); }

/* Ohne Vorspann sitzt der Titel mittig statt oben in einer leeren Fläche. */
.tf-card--noexcerpt .tf-card__body { justify-content: center; }

.tf-card--noexcerpt .tf-card__meta { margin-top: var(--tf-space-2); }

/* Unterrubrik: kompakter als ein Beitrag, mit Hinweis auf die Art der Seite. */
.tf-card--section .tf-card__media { aspect-ratio: 16 / 9; }

.tf-card__kind {
	display: inline-block;
	margin-right: var(--tf-space-2);
	padding: 2px var(--tf-space-2);
	border-radius: 999px;
	background: var(--tf-100);
	color: var(--tf-500);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
}

@media screen and (max-width: 700px) {
	.tf-card,
	.tf-card--img-sm,
	.tf-card--img-xs { grid-template-columns: 1fr; }

	.tf-card--section .tf-card__media,
	.tf-card__media { aspect-ratio: 16 / 9; }

	/*
	 * Einspaltig ist das Bildfenster fast so breit wie der Bildschirm. Ein
	 * kleines Bild stand darin mit grossen grauen Flächen darüber und
	 * darunter. Für kleine Bilder ist das Fenster deshalb flach; das Bild
	 * selbst wird weiterhin nie vergrössert.
	 */
	.tf-card--img-xs .tf-card__media { aspect-ratio: auto; height: 120px; }
	.tf-card--img-sm .tf-card__media { aspect-ratio: auto; height: 170px; }
}

/* ==========================================================================
 * Nachbesserungen Kopfbereich und Randspalten
 * ========================================================================== */

/*
 * Vorschaubilder der Randspalten: nie breiter als ihre Originalgrösse.
 *
 * .tf-sidelist__media ist ein <span>; die Blockregel der Kastenkörper
 * (#col1_content .tf-box__body a) ist stärker als die Flex-Regel der Liste,
 * der Span bleibt deshalb inline und ignoriert width/height. Das Bild
 * darin richtete sich nach der Spaltenbreite - auf dem Telefon waren das
 * 284 x 284 Pixel für ein 150 Pixel grosses Bild.
 */
#col1_content .tf-sidelist__media,
#col2_content .tf-sidelist__media {
	display: block;
	width: auto;
	height: auto;
	max-width: 150px;
}

#col1_content .tf-sidelist__media img,
#col2_content .tf-sidelist__media img {
	width: 100%;
	max-width: 150px;
	height: auto;
}

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

	/*
	 * Unter den Inhalt gerutscht sind die Randspalten so breit wie die
	 * Seite. Ein Vorschaubild von 150 Pixel über zwei Textzeilen ergab
	 * dort eine sehr lange Liste. Schmal steht das Bild deshalb neben
	 * dem Titel.
	 */
	#col1_content .tf-box__body .tf-sidelist a,
	#col2_content .tf-box__body .tf-sidelist a {
		display: flex;
		gap: 10px;
		align-items: center;
	}

	#col1_content .tf-sidelist__media,
	#col2_content .tf-sidelist__media {
		flex: 0 0 64px;
		width: 64px;
		max-width: 64px;
	}

	#col1_content .tf-sidelist__media img,
	#col2_content .tf-sidelist__media img { max-width: 64px; }

	#col1_content .tf-sidelist__title,
	#col2_content .tf-sidelist__title { flex: 1 1 auto; min-width: 0; }

	/*
	 * Kopfbereich und Inhalt standen unterschiedlich weit vom Rand:
	 * der Kopf bei 20 px, der Inhalt bei 29 px. Das Logo ragte dadurch
	 * nach links heraus, die Umschaltfläche nach rechts.
	 */
	.tf_pagehead { padding: 12px 23px; }

	/*
	 * Logo und Umschaltfläche gehören in eine Zeile. Die Fläche wird aus
	 * dem Fluss genommen, damit das geöffnete Menü darunter weiterhin die
	 * volle Breite bekommt.
	 */
	.tf_pagehead { position: relative; }

	.tf_pagehead .tf_logopos { margin-bottom: 0; }

	/*
	 * .tf_nav trägt aus der Vorlage position:relative und wäre sonst der
	 * Bezugspunkt der Fläche - sie sässe dann um die Innenabstände des
	 * Kopfbereichs zu weit links.
	 */
	.tf_nav { position: static; }

	.tf-menu-toggle {
		position: absolute;
		top: 20px;
		right: 23px;
		margin: 0;
	}

	.tf_nav.is-open .tf_navigation { margin-top: 12px; }
}

/* ==========================================================================
 * Aufräumen: leichte Mittel statt teurer Effekte
 *
 * Mehrlagige Schlagschatten, Text-Schatten und Transformationen beim
 * Überfahren zwingen den Browser, grosse Flächen neu zu zeichnen - auf einer
 * Übersicht mit zehn Karten und zehn Bildern ist das spürbar. Ersetzt durch
 * das, was dieselbe Aussage mit einer Rechenoperation trifft: Flächenfarbe,
 * eine Linie, ein flacher Verlauf.
 * ========================================================================== */

:root {
	--tf-shadow-1: none;
	--tf-shadow-2: none;
}

/* Keine Schatten mehr - die Abgrenzung übernimmt die Linie. */
.tf-card,
.tf-card:hover,
#col3_content,
#col3_content .tf-card,
.tf_pagehead,
.tf-box,
.tf_nav .tf_navigation ul,
.tf-searchform__input,
.tf-searchform__submit { box-shadow: none; }

/* Kein Anheben, kein Zoomen: nur die Linie und die Schriftfarbe wechseln. */
.tf-card,
.tf-card:hover { transform: none; }

.tf-card { transition: border-color 120ms linear; }
.tf-card:hover { border-color: var(--tf-500); }

.tf-card__image,
.tf-card:hover .tf-card__image { transform: none; transition: none; }

/* Schatten hinter Schrift bringt auf flachen Flächen nichts. */
.tf_pagehead,
.tf_logopos,
.tf-article__title,
#col3_content h1,
#col3_content h2 { text-shadow: none; }

/* --- Blätternavigation ---------------------------------------------------
 * Sie stand ohne Abstand unter der letzten Karte und lief optisch in sie
 * hinein.
 * ------------------------------------------------------------------------ */

.tf-pagination {
	margin: var(--tf-space-6) 0 var(--tf-space-2);
	padding-top: var(--tf-space-4);
	border-top: 1px solid var(--tf-200);
}

.tf-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tf-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tf-pagination li { margin: 0; }

.tf-pagination a,
.tf-pagination span {
	display: block;
	min-width: 38px;
	padding: 7px 12px;
	border: 1px solid var(--tf-200);
	border-radius: var(--tf-radius);
	background: #fff;
	color: var(--tf-700);
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	box-shadow: none;
}

.tf-pagination a:hover { border-color: var(--tf-500); background: var(--tf-100); }

.tf-pagination .current {
	border-color: var(--tf-700);
	background: var(--tf-700);
	color: #fff;
	font-weight: 600;
}

.tf-pagination .dots { border-color: transparent; background: none; }

/* --- Abstände der Übersicht ---------------------------------------------- */

.tf-listing__header { margin-bottom: var(--tf-space-6); }

.tf-listing__intro { margin-bottom: var(--tf-space-4); }

/* Letzte Karte ohne Abstand: die Blätternavigation bringt ihren eigenen mit. */
.tf-card:last-of-type { margin-bottom: 0; }

/* --- Untermenüs im schmalen Layout ---------------------------------------
 * Die zweite und dritte Ebene übernahmen die Darstellung der breiten
 * Ansicht: halbdurchsichtige Fläche, Schlagschatten, abgerundete Ecken und
 * ein absolut gesetztes Feld, das hinter den Einträgen durchschien.
 * Schmal ist eine schlichte, eingerückte Liste richtig.
 * ------------------------------------------------------------------------ */

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

	.tf_nav .tf_navigation ul {
		margin: 0;
		padding: 0 0 0 14px;
		border: 0;
		border-left: 2px solid rgba(255, 255, 255, .14);
		border-radius: 0;
		background: none;
		box-shadow: none;
		opacity: 1;
		transform: none;
		transition: none;
	}

	.tf_nav .tf_navigation ul ul {
		top: auto;
		left: auto;
		padding-left: 14px;
	}

	.tf_nav .tf_navigation > li { margin-bottom: 4px; }

	.tf_nav .tf_navigation ul li { margin: 0; }

	.tf_nav .tf_navigation ul a,
	.tf_nav .tf_navigation ul a:link,
	.tf_nav .tf_navigation ul a:visited {
		padding: 9px 12px;
		border-radius: var(--tf-radius);
		background: none;
		color: var(--tf-on-graphite);
		font-size: 14px;
	}

	.tf_nav .tf_navigation ul a:hover,
	.tf_nav .tf_navigation ul a:focus-visible {
		background: rgba(255, 255, 255, .08);
		color: #fff;
	}

	/* Dritte Ebene eine Spur zurückhaltender als die zweite. */
	.tf_nav .tf_navigation ul ul a,
	.tf_nav .tf_navigation ul ul a:link,
	.tf_nav .tf_navigation ul ul a:visited {
		color: var(--tf-on-graphite-dim);
		font-size: 13.5px;
	}
}

/* --- Tabellen aus dem Altbestand ------------------------------------------
 * Feste Breiten aus der Zeit fester Layouts: schmal schnitt die rechte
 * Hälfte einfach ab. Der Rahmen ist mit der Tastatur erreichbar.
 * ------------------------------------------------------------------------ */

.tf-scroll {
	max-width: 100%;
	margin: 24px 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.tf-scroll:focus-visible {
	outline: 2px solid var(--tf-blue);
	outline-offset: 2px;
}

#col3_content .tf-scroll > table {
	width: auto;
	min-width: 100%;
}

/* Datentabellen der Tests
 * ------------------------------------------------------------------------
 * Die Messwerte der Objektiv- und Kameratests stehen in Tabellen aus der
 * Zeit vor dem Umzug. Beim Aufbereiten bekommt jede Tabelle, in der
 * tatsächlich Werte in Zeilen und Spalten stehen, die Kennzeichnung
 * tf-daten; nur sie wird hier gezeichnet. Die übrigen Tabellen hielten
 * früher das Seitenlayout zusammen und bleiben unsichtbar.
 */

.tf-article__body table.tf-daten {
	width: 100%;
	margin: 20px 0;
	border-collapse: collapse;
	font-size: 0.95rem;
	line-height: 1.45;
}

.tf-article__body table.tf-daten td,
.tf-article__body table.tf-daten th {
	padding: 8px 12px;
	border-bottom: 1px solid var(--tf-700, #3a3a3a);
	vertical-align: top;
	text-align: left;
}

.tf-article__body table.tf-daten th {
	font-weight: 600;
}

.tf-article__body table.tf-daten tr:last-child > td {
	border-bottom: 0;
}

/* Bilder in Tabellenzellen sprengen die Spalte nicht. */
.tf-article__body td img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 600px) {
	.tf-article__body table.tf-daten {
		font-size: 0.9rem;
	}

	.tf-article__body table.tf-daten td,
	.tf-article__body table.tf-daten th {
		padding: 6px 8px;
	}
}

/* Beitragskarten aus dem alten Listenlayout
 * ------------------------------------------------------------------------
 * Die Karten der Startseite und der Rubriken stammen aus dem früheren
 * Shop-Template: das Vorschaubild schwebt links, der Text bekommt einen
 * festen linken Abstand von 150px. Auf einem Telefon bleiben davon knapp
 * 100px Textbreite - jedes Wort steht einzeln. Ab hier stapeln sich Bild
 * und Text untereinander.
 */

@media (max-width: 720px) {
	.productListing1ColBodyImg {
		float: none;
		padding-right: 0;
		margin-bottom: 10px;
	}

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

	.productListing1ColBodyTxt {
		margin-left: 0;
	}
}

/* Auch auf breiten Schirmen darf das Vorschaubild die Spalte nicht sprengen. */
.productListing1ColBodyImg img {
	max-width: 150px;
	height: auto;
}