/* Ansprechpartner – Ausgabe über [ansprechpartner]
--------------------------------------------------
   Selektoren bewusst zweistufig (.sww-ansprechpartner davor), damit die
   Elementor-Kit-Styles für h3, p, ul und a nicht gewinnen.
-------------------------------------------------- */

.sww-ansprechpartner {
	--sww-ap-gap: 30px;
	--sww-ap-padding: 30px;
	--sww-ap-radius: 40px;
	--sww-ap-block-gap: 25px;
	--sww-ap-min-height: 355px;
}

/* 1) Filter – Styles 1:1 aus /filter/taxonomy-filter.json
-------------------------------------------------- */

.sww-ansprechpartner .sww-ansprechpartner__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin: 0 0 40px;
}

.sww-ansprechpartner .sww-ansprechpartner__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-ansprechpartner .sww-ansprechpartner__filter-item:hover,
.sww-ansprechpartner .sww-ansprechpartner__filter-item:focus-visible,
.sww-ansprechpartner .sww-ansprechpartner__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) Raster
--------------------------------------------------
   Jede Kachel belegt drei Zeilen des Rasters (Titel, Zuständigkeit, Details)
   und gibt diese per "subgrid" an ihre eigenen Blöcke weiter. Dadurch stehen
   Titel, Zuständigkeit und Details aller Kacheln einer Reihe auf gleicher
   Höhe – unabhängig davon, wie viele Zeilen der einzelne Text braucht.

   Der Zeilenabstand innerhalb der Kachel kommt aus deren eigenem row-gap,
   der Abstand zwischen den Kartenreihen aus dem row-gap des Rasters. Beide
   dürfen sich unterscheiden, solange alle Kacheln denselben Wert nutzen.
-------------------------------------------------- */

/* minmax(0, 1fr) statt 1fr: Sonst zieht ein langes Wort wie
   "Grundstücksentwässerung" seine Spalte breiter als die übrigen. */
.sww-ansprechpartner .sww-ansprechpartner__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sww-ap-gap);
}

.sww-ansprechpartner .sww-ansprechpartner__card {
	display: grid;
	grid-row: span 3;
	grid-template-rows: subgrid;
	/* Auch innen minmax(0, …): Eine auto-Spalte würde auf die Min-Content-Breite
	   des längsten Wortes wachsen und über das Padding der Kachel hinauslaufen. */
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--sww-ap-block-gap);
	margin: 0;
	padding: var(--sww-ap-padding);
	border-radius: var(--sww-ap-radius);
	background-color: var(--e-global-color-f7fbef);
}

/* Höhere Spezifität als [hidden] im Browser-Stylesheet – sonst blieben
   ausgefilterte Kacheln durch "display: grid" sichtbar. */
.sww-ansprechpartner .sww-ansprechpartner__card[hidden] {
	display: none;
}

/* Ohne subgrid: Kacheln als eigenständige Boxen, Details unten bündig.
   Die Blöcke richten sich dann nicht mehr reihenweise aus. */
@supports not (grid-template-rows: subgrid) {
	.sww-ansprechpartner .sww-ansprechpartner__card {
		grid-row: auto;
		grid-template-rows: auto auto 1fr;
	}
}

/* 3) Inhalt der Kachel
-------------------------------------------------- */

/* Feste Zeile und Spalte statt automatischer Platzierung: Ab 1025px liegt
   zusätzlich ein Platzhalter (::before) in der Kachel. Ohne diese Angaben
   würde die automatische Platzierung die Blöcke in eine zweite, inhaltsbreite
   Spalte neben den Platzhalter schieben. */
.sww-ansprechpartner .sww-ansprechpartner__title {
	grid-row: 1;
	grid-column: 1;
}

.sww-ansprechpartner .sww-ansprechpartner__role {
	grid-row: 2;
	grid-column: 1;
}

/* Kontaktdaten unten bündig: Hat eine Kachel der Reihe mehr Zeilen (zweite
   E-Mail), enden trotzdem alle Blöcke auf gleicher Höhe – wie in der
   Agenturvorlage. Der Abstand zum unteren Rand bleibt so immer das Padding. */
.sww-ansprechpartner .sww-ansprechpartner__details {
	grid-row: 3;
	grid-column: 1;
	align-self: end;
}

/* Lange Komposita ("Grundstücksentwässerung") in der schmalen Spalte trennen
   statt überlaufen lassen – wie in der Agenturvorlage. */
.sww-ansprechpartner .sww-ansprechpartner__title,
.sww-ansprechpartner .sww-ansprechpartner__role,
.sww-ansprechpartner .sww-ansprechpartner__details {
	hyphens: auto;
	overflow-wrap: break-word;
}

.sww-ansprechpartner .sww-ansprechpartner__title {
	margin: 0;
	padding: 0;
	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);
	letter-spacing: var(--e-global-typography-secondary-letter-spacing);
	color: var(--e-global-color-primary);
}

.sww-ansprechpartner .sww-ansprechpartner__role {
	margin: 0;
	padding: 0;
	font-family: var(--e-global-typography-od2xcdl-font-family), Sans-serif;
	font-size: var(--e-global-typography-od2xcdl-font-size);
	font-weight: var(--e-global-typography-od2xcdl-font-weight);
	line-height: var(--e-global-typography-od2xcdl-line-height);
	letter-spacing: var(--e-global-typography-od2xcdl-letter-spacing);
	color: var(--e-global-color-secondary);
}

.sww-ansprechpartner .sww-ansprechpartner__details {
	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);
	color: var(--e-global-color-text);
}

.sww-ansprechpartner .sww-ansprechpartner__phone,
.sww-ansprechpartner .sww-ansprechpartner__mails,
.sww-ansprechpartner .sww-ansprechpartner__mails li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sww-ansprechpartner .sww-ansprechpartner__mail {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
	overflow-wrap: anywhere;
}

.sww-ansprechpartner .sww-ansprechpartner__mail:hover,
.sww-ansprechpartner .sww-ansprechpartner__mail:focus-visible {
	color: var(--e-global-color-primary);
	text-decoration: underline;
}

.sww-ansprechpartner .sww-ansprechpartner__leer {
	margin: 0;
}

/* 4) Breakpoints
-------------------------------------------------- */

/* Desktop und Laptop: Mindesthöhe der Kacheln.
--------------------------------------------------
   min-height auf der Kachel selbst bleibt wirkungslos – ihre Höhe kommt aus
   den Zeilen des Rasters. Deshalb fordert ein unsichtbarer Platzhalter über
   alle drei Zeilen die Gesamthöhe an; das Raster vergrößert daraufhin die
   Zeilen der ganzen Reihe.

   Wohin der zusätzliche Platz wandert, entscheidet sonst die Verteilung des
   Rasters – je nach Textlänge mal über die Kontaktdaten, mal unter sie. Die
   Titelzeile als 1fr macht das eindeutig: Flexible Zeilen nehmen den Platz
   zuerst auf, also sammelt er sich unter dem Titel. Zuständigkeit und
   Kontaktdaten behalten dadurch exakt ihre Abstände. */
@media (min-width: 1025px) {
	.sww-ansprechpartner .sww-ansprechpartner__grid {
		grid-auto-rows: 1fr auto auto;
	}

	.sww-ansprechpartner .sww-ansprechpartner__card::before {
		content: "";
		grid-row: 1 / 4;
		grid-column: 1;
		width: 0;
		min-height: calc(var(--sww-ap-min-height) - 2 * var(--sww-ap-padding));
	}
}

/* Tablet: zwei Kacheln nebeneinander */
@media (max-width: 1024px) {
	.sww-ansprechpartner .sww-ansprechpartner__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Smartphone: Kacheln untereinander, kleinerer Radius */
@media (max-width: 767px) {
	.sww-ansprechpartner .sww-ansprechpartner__grid {
		grid-template-columns: 1fr;
	}

	.sww-ansprechpartner .sww-ansprechpartner__card {
		border-radius: 30px;
	}
}