@charset "utf-8";

/*
 * Tanzsport Sendenhorst – standortspezifische Ergänzungen
 *
 * Das allgemeine Layout, Buttons, Menüs, Formulare, Showcase-Module und
 * Hilfsklassen kommen aus NK Ultimate. Regeln in dieser Datei bleiben bewusst
 * auf die Body-Klasse "tssendenhorst" begrenzt, damit Erweiterungen ihre
 * eigenen Komponentenstile zuverlässig behalten.
 */

@font-face {
	font-family: "Open Sans";
	src: url("fonts/OpenSans-Light.woff2") format("woff2"),
		url("fonts/OpenSans-Light.woff") format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Open Sans";
	src: url("fonts/OpenSans-Regular.woff2") format("woff2"),
		url("fonts/OpenSans-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Open Sans";
	src: url("fonts/OpenSans-Italic.woff2") format("woff2"),
		url("fonts/OpenSans-Italic.woff") format("woff");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Open Sans";
	src: url("fonts/OpenSans-SemiBold.woff2") format("woff2"),
		url("fonts/OpenSans-SemiBold.woff") format("woff");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Open Sans";
	src: url("fonts/OpenSans-Bold.woff2") format("woff2"),
		url("fonts/OpenSans-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

body.tssendenhorst {
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Hervorgehobener letzter Hauptmenüpunkt der TSS-Navigation. */
@media (min-width: 60rem) {
	body.tssendenhorst #mainmenu > ul > li > a.specialStyleButton {
		padding-right: 1.5em;
		padding-left: 1.5em;
		background: var(--nk-template-accent-color, #e30613);
		color: #fff;
	}

	body.tssendenhorst #mainmenu > ul > li > a.specialStyleButton:hover,
	body.tssendenhorst #mainmenu > ul > li.current > a.specialStyleButton,
	body.tssendenhorst #mainmenu > ul > li.active > a.specialStyleButton {
		background: var(--nk-template-secondary-color, #707070);
		color: #fff;
	}
}

/* Mobile Slider-Labels nicht deckend über Gesichtern darstellen. */
@media (max-width: 39.99rem) {
	body.tssendenhorst #headerimage h1,
	body.tssendenhorst #headerimage h2,
	body.tssendenhorst .separateLabels.white span,
	body.tssendenhorst .nkMellowSlides .separateLabels.white span {
		border: 1px solid rgba(255, 255, 255, 0.9);
		border-radius: 0.25rem;
		background: rgba(255, 255, 255, 0.7);
		color: #707070;
	}
}

/* Das Formular bringt bereits eine passende eigene Überschrift mit. */
body.tssendenhorst #kontaktformular-59 > h2 {
	display: none;
}

/* Individuelles Linien-Icon. */
body.tssendenhorst .b5f3c6b4-35ce-4e30-87cc-c02e3b3b85dd {
	fill: none;
	stroke: currentColor;
	stroke-miterlimit: 10;
	stroke-width: 3px;
	transition: stroke 0.25s ease;
}

/* Ältere News-Ausgabe: Bild und Text responsiv nebeneinander. */
body.tssendenhorst .news-single h1 {
	font-size: 2em;
}

body.tssendenhorst #component .newsflash-image {
	width: 80%;
	min-width: 15em;
	max-width: 100%;
	margin-bottom: 1em;
}

body.tssendenhorst #component .newsflash-image > a,
body.tssendenhorst #component .newsflash-image > a > img {
	display: block;
}

body.tssendenhorst .newsflash > div {
	clear: both;
	padding-top: 2em;
	margin-top: 2em;
	border-top: 1px solid #ddd;
}

body.tssendenhorst .newsflash > div:first-child {
	padding-top: 0;
	margin-top: 0;
	border-top: 0;
}

body.tssendenhorst .newsflash > div h2 {
	padding-top: 0 !important;
	margin-top: 0;
}

@media (min-width: 30rem) {
	body.tssendenhorst #component .newsflash-image {
		float: left;
		width: 45%;
		min-width: 15em;
		max-width: 20em;
		margin-right: 1.8em;
		margin-bottom: 1.8em;
	}

	body.tssendenhorst #component .imagesRight .newsflash-image {
		float: right;
		margin-right: 0;
		margin-left: 1.8em;
	}
}

/* Externes Fußball.de-Widget erst nach Einwilligung bzw. Initialisierung. */
body.tssendenhorst div.fussballde {
	position: relative;
}

body.tssendenhorst div.fussballde button {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: min(24rem, 90%);
	font-size: 1rem;
	white-space: normal;
	transform: translate(-50%, -50%);
}

body.tssendenhorst.fussballdeWidgetsLoaded div.fussballde {
	display: none;
}

/* TSS-Bild 1 soll am oberen Rand ausgerichtet bleiben. */
body.tssendenhorst .bg1 {
	background-position: top center;
}

/* Zusatztypografie für die bestehenden Showcase-Inhalte. */
body.tssendenhorst .likeSlider h2 > span {
	position: relative;
	display: block;
	padding-top: 2em;
	font-size: 0.5em;
	font-weight: 300;
	line-height: 1.2;
	text-transform: none;
}

body.tssendenhorst .likeSlider h2 > span::before {
	position: absolute;
	top: calc(0.8em - 1px);
	left: 0;
	display: block;
	width: 20%;
	height: 3px;
	background: currentColor;
	content: "";
}

body.tssendenhorst .likeSlider.allCentered h2 > span::before {
	left: 50%;
	transform: translateX(-50%);
}

body.tssendenhorst .likeSlider h2.col1 {
	color: var(--nk-template-accent-color, #e30613);
}

/* Altes, derzeit deaktiviertes Trainingsplan-Modul. */
body.tssendenhorst #trainingsplan-toggleCtrl a {
	min-width: 15em;
	margin-bottom: 1em;
}

body.tssendenhorst #trainingsplan-toggleCtrl .menuItemIsNotActive a {
	background: #ddd;
}

body.tssendenhorst #trainingsplan-toggleCtrl .menuItemIsNotActive a:hover {
	background: #707070;
}

body.tssendenhorst #trainingsplan-toggleCtrl .menuItemIsActive a {
	background: var(--nk-template-accent-color, #e30613);
}

body.tssendenhorst #bottom2 {
	background-color: #f3f3f3;
}

/* Bestehende farbige Inhaltskarten; bewusst nur auf TSS-Inhalte begrenzt. */
body.tssendenhorst .imgBorders img {
	display: block;
	box-sizing: border-box;
	border: 0.4em solid #34495e;
}

body.tssendenhorst .imgBorders.col2 img { border-color: #16a085; }
body.tssendenhorst .imgBorders.col3 img { border-color: #e67e22; }
body.tssendenhorst .imgBorders.col4 img { border-color: #2980b9; }

body.tssendenhorst .labeledH3 h3 {
	display: inline-block;
	padding: 0.5em 1em;
	margin-bottom: 0.5em;
	background: #34495e;
	color: #fff;
	font-weight: 700;
}

body.tssendenhorst .labeledH3.col2 h3,
body.tssendenhorst #component .labeledH3.col2 a.button { background: #16a085; }
body.tssendenhorst .labeledH3.col3 h3,
body.tssendenhorst #component .labeledH3.col3 a.button { background: #e67e22; }
body.tssendenhorst .labeledH3.col4 h3,
body.tssendenhorst #component .labeledH3.col4 a.button { background: #2980b9; }

body.tssendenhorst #component .labeledH3 a.button:hover {
	background: #707070;
}

body.tssendenhorst .h2Col1 h2,
body.tssendenhorst h2.col1 { color: #34495e; border-color: #34495e; }
body.tssendenhorst .h2Col2 h2,
body.tssendenhorst h2.col2 { color: #16a085; border-color: #16a085; }
body.tssendenhorst .h2Col3 h2,
body.tssendenhorst h2.col3 { color: #e67e22; border-color: #e67e22; }
body.tssendenhorst .h2Col4 h2,
body.tssendenhorst h2.col4 { color: #2980b9; border-color: #2980b9; }

/* News: ruhige redaktionelle Hierarchie passend zur TSS-Typografie. */
body.tssendenhorst .com-content-category-blog__items .blog-item {
	margin-bottom: 0.75em;
	padding-bottom: 2.75em;
	border-bottom: 1px solid rgba(112, 112, 112, 0.2);
}

body.tssendenhorst .com-content-category-blog__items .blog-item:last-child {
	margin-bottom: 0;
	border-bottom: 0;
}

body.tssendenhorst #component .com-content-category-blog__items .page-header h2 {
	margin: 0.7em 0 0.9em;
	font-size: 1.3em;
	font-weight: 700;
	line-height: 1.2;
}

body.tssendenhorst #component .com-content-category-blog__items .item-content > h3 {
	margin: 0 0 0.65em;
	font-size: 1.05em;
	font-weight: 600;
	line-height: 1.3;
}

body.tssendenhorst .com-content-category-blog__items .item-content > p:not(.readmore) {
	margin-bottom: 1em;
	font-size: 0.9em;
	line-height: 1.6;
}

body.tssendenhorst .com-content-category-blog__items .item-content > p.readmore {
	margin-top: 0.35em;
	font-size: 0.9em;
}

@media (min-width: 40rem) {
	body.tssendenhorst .com-content-category-blog__items .blog-item:has(> .item-image) {
		grid-template-columns: minmax(12em, 38%) minmax(0, 1fr);
		column-gap: 1.5em;
	}
}

/* Weitere News: unterhalb der Beitragsliste, kompakt und klar gegliedert. */
body.tssendenhorst #postcontent {
	box-sizing: border-box;
	padding: 2.75rem max(1.5rem, calc((100% - 64rem) / 2));
	background: #f3f3f3;
}

body.tssendenhorst #postcontent > .moduletable {
	width: 100%;
	margin: 0 auto;
}

body.tssendenhorst #postcontent h2 {
	margin: 0 0 0.8em;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
}

body.tssendenhorst #postcontent .mod-articlescategory {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 2rem;
	margin: 0;
	padding: 0;
	font-size: 1rem;
	list-style: none;
}

body.tssendenhorst #postcontent .mod-articlescategory > li {
	margin: 0;
	padding: 0.65em 0;
	border-top: 1px solid rgba(112, 112, 112, 0.25);
}

body.tssendenhorst #postcontent .mod-articlescategory a {
	color: inherit;
	line-height: 1.4;
	text-decoration: none;
}

body.tssendenhorst #postcontent .mod-articlescategory a:is(:hover, :focus-visible) {
	color: var(--nk-template-accent-color, #e30613);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

@media (min-width: 60rem) {
	body.tssendenhorst #postcontent .mod-articlescategory {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Prefooter: Größen und Farbfläche wie im bisherigen TSS-Auftritt. */
body.tssendenhorst #prefooter {
	padding: 3.5rem 0;
	background: #34495e;
	font-size: 1rem;
	line-height: 1.5;
}

body.tssendenhorst #prefooter > .wrapperWidth {
	align-items: flex-start;
	gap: 3rem;
}

body.tssendenhorst #prefooter .moduletable,
body.tssendenhorst #prefooter .mod-custom {
	font-size: 1rem;
	line-height: 1.5;
}

body.tssendenhorst #prefooter .littleSpaces {
	align-items: flex-start;
	gap: 3rem;
}

body.tssendenhorst #prefooter h2 {
	margin: 0 0 0.45em;
	padding: 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
}

body.tssendenhorst #prefooter h2:not(:first-child) {
	margin-top: 1.25em;
}

body.tssendenhorst #prefooter p,
body.tssendenhorst #prefooter li,
body.tssendenhorst #prefooter a {
	font-size: 1rem;
	line-height: 1.5;
}

body.tssendenhorst #prefooter a {
	color: #fff;
}

body.tssendenhorst #prefooter .socialsHorizontal {
	gap: 1rem;
}

body.tssendenhorst #prefooter .socialsHorizontal svg {
	width: 2rem;
	height: 2rem;
}

/*
 * TSS-Buttonfarben: bewusst websitespezifisch statt global im Template.
 * Transparente Varianten behalten ihre jeweils eigene Darstellung.
 */
body.tssendenhorst a.button:not(.outline):not(.emptyBor),
body.tssendenhorst a.transbutton:not(.outline):not(.emptyBor) {
	background-color: #e30613;
	color: #fff;
}

body.tssendenhorst a.button:not(.outline):not(.emptyBor):is(:hover, :focus-visible),
body.tssendenhorst a.transbutton:not(.outline):not(.emptyBor):is(:hover, :focus-visible) {
	background-color: #707070;
	color: #fff;
}

/* Startseite: rote Icon-Akzente passend zur TSS-Marke. */

body.tssendenhorst #precontent .threeIconLinkBoxes svg {
	fill: var(--nk-template-accent-color, #e30613);
	transition: fill 0.25s ease;
}

body.tssendenhorst #precontent .threeIconLinkBoxes a:hover svg,
body.tssendenhorst #precontent .threeIconLinkBoxes a:focus-visible svg {
	fill: var(--nk-template-secondary-color, #707070);
}

/* Kompakte TSS-Ueberschriften wie im bisherigen Auftritt. */
body.tssendenhorst #componentContainer > div h2,
body.tssendenhorst #postcontent .likeComponent h2,
body.tssendenhorst #precontent .likeComponent h2,
body.tssendenhorst #bottom div h2,
body.tssendenhorst .nkBookingContainer h2.introTitle {
	margin-bottom: 1em;
	padding-bottom: 0.5em;
	border-bottom: 2px solid currentColor;
	font-size: 1.2em;
	font-weight: 400;
	line-height: 1.15;
	text-transform: uppercase;
}

body.tssendenhorst .item-page h3,
body.tssendenhorst .likeComponent h3 {
	margin-bottom: 0.5em;
	padding-bottom: 0.25em;
	font-size: 0.9em;
	font-weight: 400;
	line-height: 1.15;
	text-transform: none;
}

/* Dokumentenliste: neutrale Schrift, einheitlicher roter Interaktionszustand. */
body.tssendenhorst #postcomponent {
	--nk-postcomponent-link-color: #707070;
	--nk-postcomponent-link-hover-color: #e30613;
	--nk-postcomponent-icon-color: #e30613;
	--nk-postcomponent-icon-hover-color: #e30613;
}