/* Downloads – Ausgabe über [downloads]
--------------------------------------------------
   Selektoren bewusst zweistufig (.sww-downloads davor), damit die
   Elementor-Kit-Styles für ul, li, a und button nicht gewinnen.
-------------------------------------------------- */

.sww-downloads {
	--sww-downloads-radius: 40px;
	--sww-downloads-tab-radius: 20px;
	--sww-downloads-padding: 50px;
	--sww-downloads-filter-abstand: 150px;
}

/* 1) Filter (Taxonomie "Typen") – Styles wie bei den Ansprechpartnern
-------------------------------------------------- */

.sww-downloads .sww-downloads__filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
	margin: 0 0 var(--sww-downloads-filter-abstand);
}

.sww-downloads .sww-downloads__filter-item {
	padding: 10px 20px;
	border: 1px solid var(--e-global-color-secondary);
	border-radius: 40px;
	background-color: transparent;
	font-family: var(--e-global-typography-mnrotpc-font-family), Sans-serif;
	font-size: var(--e-global-typography-mnrotpc-font-size);
	font-weight: var(--e-global-typography-mnrotpc-font-weight);
	line-height: var(--e-global-typography-mnrotpc-line-height);
	letter-spacing: var(--e-global-typography-mnrotpc-letter-spacing);
	text-transform: var(--e-global-typography-mnrotpc-text-transform);
	color: var(--e-global-color-secondary);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sww-downloads .sww-downloads__filter-item:hover,
.sww-downloads .sww-downloads__filter-item:focus-visible,
.sww-downloads .sww-downloads__filter-item[aria-pressed="true"] {
	border-color: var(--e-global-color-secondary);
	background-color: var(--e-global-color-secondary);
	color: var(--e-global-color-ffffff, #fff);
}

/* 2) Reiter (Taxonomie "Bereiche")
--------------------------------------------------
   Die Flächen sind eine Abstufung der Primärfarbe: der linke Reiter voll
   deckend, dann 75, 50 und 25 Prozent. Die Werte setzt das JavaScript, weil
   nur die Reiter mitzählen, die zum gewählten Typ auch Einträge haben. Die
   nth-child-Regeln greifen, solange kein JavaScript läuft.
-------------------------------------------------- */

.sww-downloads .sww-downloads__tabs {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	gap: 0;
	margin: 0;
}

.sww-downloads .sww-downloads__tab {
	--sww-downloads-tab-deckkraft: 25%;

	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 18px 30px;
	border: 0;
	border-radius: 0;
	background-color: color-mix(in srgb, var(--e-global-color-primary) var(--sww-downloads-tab-deckkraft), transparent);
	font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
	font-size: var(--e-global-typography-secondary-font-size);
	font-weight: var(--e-global-typography-secondary-font-weight);
	line-height: var(--e-global-typography-secondary-line-height);
	color: var(--e-global-color-secondary);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sww-downloads .sww-downloads__tab:nth-child(1) {
	--sww-downloads-tab-deckkraft: 100%;
}

.sww-downloads .sww-downloads__tab:nth-child(2) {
	--sww-downloads-tab-deckkraft: 75%;
}

.sww-downloads .sww-downloads__tab:nth-child(3) {
	--sww-downloads-tab-deckkraft: 50%;
}

.sww-downloads .sww-downloads__tab[hidden] {
	display: none;
}

/* Nur die Außenkanten oben sind gerundet – die Klassen setzt das JavaScript
   auf den ersten und letzten sichtbaren Reiter. */
.sww-downloads .sww-downloads__tab--erster {
	border-top-left-radius: var(--sww-downloads-tab-radius);
}

.sww-downloads .sww-downloads__tab--letzter {
	border-top-right-radius: var(--sww-downloads-tab-radius);
}

/* Icon als Maske: Die SVG-Datei liefert die Form, die Farbe kommt von hier. */
.sww-downloads .sww-downloads__tab-icon {
	flex: 0 0 auto;
	width: 35px;
	height: 35px;
	background-color: var(--e-global-color-secondary);
	-webkit-mask: var(--sww-downloads-icon) no-repeat center / contain;
	mask: var(--sww-downloads-icon) no-repeat center / contain;
	transition: background-color 0.2s ease;
}

/* Aktiv und bei Hover: Fläche wie die Inhaltsbox, damit das weiße Label
   lesbar bleibt. */
.sww-downloads .sww-downloads__tab:hover,
.sww-downloads .sww-downloads__tab:focus-visible,
.sww-downloads .sww-downloads__tab[aria-selected="true"] {
	background-color: var(--e-global-color-secondary);
	color: var(--e-global-color-ffffff, #fff);
}

.sww-downloads .sww-downloads__tab:hover .sww-downloads__tab-icon,
.sww-downloads .sww-downloads__tab:focus-visible .sww-downloads__tab-icon,
.sww-downloads .sww-downloads__tab[aria-selected="true"] .sww-downloads__tab-icon {
	background-color: var(--e-global-color-primary);
}

/* 3) Inhaltsbox – oben rechts eckig, dort sitzt der letzte Reiter
-------------------------------------------------- */

.sww-downloads .sww-downloads__panel {
	padding: var(--sww-downloads-padding);
	border-radius: var(--sww-downloads-radius) 0 var(--sww-downloads-radius) var(--sww-downloads-radius);
	background-color: var(--e-global-color-secondary);
}

.sww-downloads .sww-downloads__list {
	margin: 0;
	padding: 0;
	list-style: none;
	/* Linie über dem ersten Eintrag, siehe Entwurf. */
	border-top: 1px solid var(--e-global-color-primary);
}

/* Ein Eintrag ist normaler Textfluss, kein Flex-Element: Nur so steht der
   Dateityp direkt hinter dem letzten Wort des Titels und rutscht bei einem
   Umbruch mit, statt rechts aus der Box zu laufen. Das Icon liegt dafür
   absolut in der eingerückten Fläche links. */
.sww-downloads .sww-downloads__item {
	position: relative;
	margin: 0;
	padding: 20px 0 20px 45px;
	list-style: none;
	border-bottom: 1px solid var(--e-global-color-primary);
	font-family: var(--e-global-typography-accent-font-family), Sans-serif;
	font-size: var(--e-global-typography-accent-font-size);
	font-weight: var(--e-global-typography-accent-font-weight);
	line-height: var(--e-global-typography-accent-line-height);
	letter-spacing: var(--e-global-typography-accent-letter-spacing);
	color: var(--e-global-color-ffffff, #fff);
}

.sww-downloads .sww-downloads__item[hidden] {
	display: none;
}

.sww-downloads .sww-downloads__link {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.sww-downloads .sww-downloads__link:hover,
.sww-downloads .sww-downloads__link:focus-visible {
	color: var(--e-global-color-primary);
}

/* Das Icon bleibt in der Primärfarbe, nur das Label wechselt. */
.sww-downloads .sww-downloads__icon {
	position: absolute;
	top: 50%;
	left: 0;
	width: 30px;
	height: 30px;
	transform: translateY(-50%);
	color: var(--e-global-color-primary);
}

.sww-downloads .sww-downloads__label {
	text-decoration: underline;
	text-underline-offset: 3px;
	/* Lange Dateinamen ohne Leerzeichen dürfen nicht überstehen. */
	overflow-wrap: anywhere;
}

/* Dateityp hinter dem Titel – ohne Unterstreichung, außerhalb des Links */
.sww-downloads .sww-downloads__dateityp {
	white-space: nowrap;
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	font-weight: var(--e-global-typography-text-font-weight);
	line-height: var(--e-global-typography-text-line-height);
	letter-spacing: var(--e-global-typography-text-letter-spacing);
	text-decoration: none;
}

.sww-downloads .sww-downloads__leer {
	margin: 0;
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	color: var(--e-global-color-ffffff, #fff);
}

.sww-downloads .sww-downloads__leer[hidden] {
	display: none;
}

/* Hinweis außerhalb der Inhaltsbox (gar keine Downloads angelegt) */
.sww-downloads > .sww-downloads__leer {
	color: var(--e-global-color-text);
}

/* 3b) Handverlesene Liste über [downloads-list]
--------------------------------------------------
   Ohne Inhaltsbox und ohne Trennlinien; die Schriftfarbe steuert das
   Attribut color="light|dark".
-------------------------------------------------- */

.sww-downloads--liste .sww-downloads__list,
.sww-downloads--liste .sww-downloads__item {
	border: 0;
}

.sww-downloads--liste.sww-downloads--dark .sww-downloads__item {
	color: var(--e-global-color-secondary);
}

.sww-downloads--liste.sww-downloads--light .sww-downloads__item {
	color: var(--e-global-color-ffffff, #fff);
}

/* 4) Ab Tablet: Akkordeon statt Reiterleiste
--------------------------------------------------
   Vier Reiter nebeneinander brechen hier unschön um. Stattdessen stehen die
   Bereiche untereinander, und das JavaScript schiebt die Inhaltsbox unter den
   geöffneten Bereich. Runde Ecken gibt es dann keine.
-------------------------------------------------- */

@media (max-width: 1024px) {

	.sww-downloads {
		--sww-downloads-padding: 40px;
		--sww-downloads-filter-abstand: 60px;
		--sww-downloads-akkordeon-radius: 40px;
	}

	.sww-downloads .sww-downloads__tabs {
		flex-direction: column;
		justify-content: flex-start;
	}

	.sww-downloads .sww-downloads__tab {
		width: 100%;
		justify-content: flex-start;
		padding: 15px 25px;
		border-radius: 0;
	}

	.sww-downloads .sww-downloads__tab--letzter {
		border-radius: 0;
	}

	.sww-downloads .sww-downloads__panel {
		border-radius: 0;
	}

	/* Gerundet ist nur der äußere Rand des Akkordeons: oben die erste
	   Kopfzeile, unten das letzte sichtbare Element – das ist mal eine
	   Kopfzeile, mal die Inhaltsbox (Klasse kommt aus dem JavaScript). */
	.sww-downloads .sww-downloads__tab--erster {
		border-radius: var(--sww-downloads-akkordeon-radius) var(--sww-downloads-akkordeon-radius) 0 0;
	}

	.sww-downloads .sww-downloads__tab.sww-downloads__ende,
	.sww-downloads .sww-downloads__panel.sww-downloads__ende {
		border-bottom-right-radius: var(--sww-downloads-akkordeon-radius);
		border-bottom-left-radius: var(--sww-downloads-akkordeon-radius);
	}

	/* Ist nur ein Bereich vorhanden, ist dessen Kopfzeile zugleich Anfang
	   und Ende – dann bleiben die unteren Ecken der Inhaltsbox zuständig. */
	.sww-downloads .sww-downloads__tab--erster.sww-downloads__ende {
		border-radius: var(--sww-downloads-akkordeon-radius);
	}
}

/* [downloads-tabs]: Die Beschriftungen sind kurz (Jahreszahlen), die Reiter
   bleiben deshalb auf jeder Breite nebeneinander – kein Akkordeon. Steht
   hinter dem Tablet-Block, damit es dessen Spaltenumbruch überstimmt. */
@media (max-width: 1024px) {

	.sww-downloads--reiter .sww-downloads__tabs {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.sww-downloads--reiter .sww-downloads__tab {
		width: auto;
		flex: 1 1 auto;
		justify-content: center;
	}

	.sww-downloads--reiter .sww-downloads__tab--erster {
		border-radius: var(--sww-downloads-tab-radius) 0 0 0;
	}

	.sww-downloads--reiter .sww-downloads__tab--letzter {
		border-radius: 0 var(--sww-downloads-tab-radius) 0 0;
	}

	.sww-downloads--reiter .sww-downloads__panel {
		border-radius: var(--sww-downloads-radius) 0 var(--sww-downloads-radius) var(--sww-downloads-radius);
	}
}

@media (max-width: 767px) {

	.sww-downloads {
		--sww-downloads-radius: 30px;
		--sww-downloads-padding: 30px;
		--sww-downloads-filter-abstand: 30px;
		--sww-downloads-akkordeon-radius: 30px;
	}

	.sww-downloads .sww-downloads__filter {
		gap: 10px;
	}

	.sww-downloads .sww-downloads__tab {
		padding: 12px 20px;
		gap: 10px;
	}

}