/*
 * PISA CH – Theme-Styles (PoC, Phase 2)
 * Portiert aus den WPCodeBox-SCSS-Partials und den GP-Settings.
 * Navigation: klassische Menü-Terms als reine CSS-Dropdowns (keine Mega-Panels).
 */

/* -------- Legacy-Farbvariablen (GP Global Colors, von Altinhalten referenziert) -------- */

:root {
	--green-100: #1A744D;
	--green-40: #b6dcd1;
	--green-20: #e7f3f0;
	--contrast: #222222;
	--accent: #ffc107;
	--base-3: #ffffff;
	--red-80: #bd4b63;
	--gelb-100: #e4b823;
}

/* -------- Inhalt -------- */

main ul:not(.pisa-menu):not(.sub-menu):not(.pisa-langswitcher) {
	list-style-type: square;
	margin: 0 0 20px 35px;
}

p.has-background {
	padding: 30px;
}

@media (max-width: 768px) {
	p.has-background {
		padding: 20px;
	}
}

strong {
	font-weight: 600;
}

figure.wp-block-image {
	margin-bottom: 15px;
}

/* -------- Boxed Layout: Body schwarz, Site-Box 1700px zentriert -------- */

.wp-site-blocks > * {
	margin-block-start: 0;
}

.pisa-layout,
.pisa-footer {
	max-width: 1700px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.pisa-layout {
	background: var(--wp--preset--color--weiss);
}

/* -------- Header (Struktur wie GP-Element «Header DE») -------- */

.pisa-header {
	background-image: url("/wp-content/uploads/2021/09/header.jpeg");
	background-size: cover;
	background-position: 50% 35%;
	min-height: 260px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

@media (max-width: 768px) {
	.pisa-header {
		min-height: 220px;
	}
}

.pisa-header a {
	color: var(--wp--preset--color--weiss);
	text-decoration: none;
}

.pisa-header a:hover,
.pisa-header a:focus {
	color: var(--wp--preset--color--weiss);
	text-decoration: underline;
}

/* Topbar: oben rechts auf dem Foto (Abgeschlossene Erhebungen + Sprache) */

/* Kompakte Zeile ganz oben am Viewport-Rand (wie Produktion: 12px, weiss) */
.pisa-topbar {
	max-width: 1700px;
	margin: 0 auto;
	width: 100%;
	/* kein Abstand nach oben — der dunkle Block klebt an der Oberkante */
	padding: 0 clamp(16px, 2.8vw, 48px);
	justify-content: flex-end;
	align-items: flex-start;
}

.pisa-topnav {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	/* dunkler Block wie die Hauptnavigation, angedockt an die Oberkante */
	background: #222;
	padding: 6px 12px;
}

.pisa-topnav .pisa-menu {
	list-style: none;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.pisa-topnav .pisa-menu > li {
	position: relative;
}

.pisa-topnav a {
	display: block;
	padding: 8px;
	line-height: 1;
}

/* Sprachwechsler als Dropdown: «DE ⌄» */

.pisa-lang {
	position: relative;
	/* flex verhindert Whitespace-Lineboxen, die den Wrapper höher machen
	 * als den Button (Ursache des vertikalen Topbar-Versatzes) */
	display: flex;
	align-items: center;
}

.pisa-lang-current {
	background: none;
	border: none;
	color: var(--wp--preset--color--weiss);
	font: inherit;
	line-height: 1;
	padding: 8px;
	cursor: pointer;
}

.pisa-lang-list {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 60;
	background: var(--wp--preset--color--weiss);
	list-style: none;
	margin: 0;
	padding: 6px 0;
	min-width: 70px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.pisa-lang:hover .pisa-lang-list,
.pisa-lang:focus-within .pisa-lang-list {
	display: block;
}

.pisa-topnav .pisa-lang-list a {
	color: var(--wp--preset--color--schwarz);
	padding: 6px 14px;
}

.pisa-topnav .pisa-lang-list a:hover {
	color: var(--wp--preset--color--gruen-100);
	text-decoration: underline;
}

@media (max-width: 1215px) {
	/* Doppelte Klasse: schlägt WPs generierte Flex-Layout-Regel
	 * (display:flex), die nach pisa.css lädt. Erhebungen + Sprachen
	 * stecken hier im Burger-Panel. */
	.pisa-topbar.pisa-topbar {
		display: none;
	}
}

/* Chevrons für Dropdown-Items */

.pisa-mainnav .menu-item-has-children > a::after,
.pisa-topnav .menu-item-has-children > a::after,
.pisa-lang-current::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-left: 8px;
	vertical-align: 3px;
}

/* Grüner Balken: geboxt, Logo links, Suche + Navigation rechts */

.pisa-mainbar {
	max-width: 1700px;
	margin: 0 auto;
	width: 100%;
}

.pisa-mainbar-inner {
	max-width: 1700px;
	margin: 0 auto;
	padding: 16px clamp(16px, 2.8vw, 48px) 0;
}

.pisa-mainbar .wp-block-site-logo {
	padding-bottom: 16px;
}

.pisa-mainbar .wp-block-site-logo img {
	max-width: 240px;
	height: auto;
}

@media (max-width: 768px) {
	.pisa-mainbar .wp-block-site-logo img {
		max-width: 180px;
	}
}

.pisa-nav-suche {
	align-items: flex-end;
	gap: 14px;
	padding-bottom: 0;
}

/* Hauptnavigation: dunkler Streifen, weiss, bold, bündig am Balken-Ende */

.pisa-mainnav {
	background: #222;
	font-size: 16px;
	font-weight: 700;
}

.pisa-mainnav .pisa-menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
}

.pisa-mainnav li {
	position: relative;
}

.pisa-mainnav a {
	display: block;
	padding: 12px 16px;
}

/* Aktiver Menüpunkt: farbige Unterkante */

.pisa-mainnav .pisa-menu > li.current-menu-item > a,
.pisa-mainnav .pisa-menu > li.current-menu-ancestor > a,
.pisa-mainnav .pisa-menu > li.current-page-ancestor > a,
.pisa-mainnav .pisa-menu > li.current_page_parent > a {
	box-shadow: inset 0 -4px 0 var(--wp--preset--color--beere);
}

.pisa-mainnav .sub-menu,
.pisa-topnav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	background: var(--wp--preset--color--weiss);
	min-width: 260px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.pisa-mainnav li:last-child .sub-menu,
.pisa-topnav .sub-menu {
	left: auto;
	right: 0;
}

.pisa-mainnav li:hover > .sub-menu,
.pisa-mainnav li:focus-within > .sub-menu,
.pisa-topnav li:hover > .sub-menu,
.pisa-topnav li:focus-within > .sub-menu {
	display: block;
}

.pisa-mainnav .sub-menu a,
.pisa-topnav .sub-menu a {
	color: var(--wp--preset--color--schwarz);
	font-weight: 400;
	font-size: 15px;
	padding: 8px 14px;
}

.pisa-mainnav .sub-menu a:hover,
.pisa-topnav .sub-menu a:hover {
	color: var(--wp--preset--color--gruen-100);
	text-decoration: underline;
}

.pisa-topnav .sub-menu {
	min-width: 160px;
}

/* -------- Mobile Navigation: Burger ≤1215px (dort ist die Topbar weg,
 * deshalb enthält das Panel auch Abgeschlossene Erhebungen + Sprachen) -------- */

.pisa-burger,
.pisa-mobil-extra,
.pisa-subtoggle {
	display: none;
}

/* Der «Abgeschlossene Erhebungen»-Menüpunkt (Klasse alte-erhebungen an den
 * 48 klassischen Menüs) erscheint nur mobil — am Desktop sitzt er in der
 * Topbar. Regel aus dem WPCodeBox-1.css übernommen, damit der Plugin-Abbau
 * keinen doppelten Menüpunkt hinterlässt. */
@media (min-width: 1216px) {
	.pisa-mainnav li.alte-erhebungen {
		display: none;
	}
}

.pisa-navwrap {
	display: contents; /* Desktop: Wrapper unsichtbar, Layout wie bisher */
}

@media (max-width: 1215px) {
	/* Topbar ist weg → grüner Balken ans Header-Ende, Foto-Streifen darüber
	 * (wie Produktion) */
	.pisa-header {
		justify-content: flex-end;
	}

	.pisa-mainbar-inner {
		position: relative;
	}

	/* «☰ Nav»-Button wie Produktion: dunkler Block rechts im grünen Balken */
	.pisa-burger {
		display: flex;
		align-items: center;
		gap: 10px;
		position: absolute;
		bottom: 0; /* bündig am Balken-Ende → Panel (top:100%) dockt nahtlos an */
		right: clamp(16px, 2.8vw, 48px);
		padding: 12px 18px;
		background: #222;
		border: none;
		cursor: pointer;
		z-index: 70;
		color: var(--wp--preset--color--weiss);
		font-family: inherit;
		font-size: 17px;
		font-weight: 400;
	}

	.pisa-burger-icon {
		display: block;
		width: 22px;
	}

	.pisa-burger-icon span {
		display: block;
		height: 3px;
		background: var(--wp--preset--color--weiss);
		margin: 4px 0;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.pisa-burger.is-open .pisa-burger-icon span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.pisa-burger.is-open .pisa-burger-icon span:nth-child(2) {
		opacity: 0;
	}

	.pisa-burger.is-open .pisa-burger-icon span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* Wie Produktion: kein Suchfeld im mobilen Header */
	.pisa-mainbar .pisa-suche {
		display: none;
	}

	.pisa-nav-suche {
		width: 100%;
	}

	.pisa-navwrap {
		display: none;
		background: #222;
	}

	/* Overlay statt Layout-Schieben: hängt unter dem grünen Balken,
	 * Inhalt bleibt stehen; bei langen Menüs scrollt das Panel selbst */
	.pisa-navwrap.is-open {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 80;
		max-height: calc(100vh - 160px);
		overflow-y: auto;
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
	}

	/* Hauptmenü vertikal; Untermenüs als Accordion (wie Produktion):
	 * zu, Pfeil-Button klappt auf */
	.pisa-mainnav .pisa-menu,
	.pisa-mobil-extra .pisa-menu {
		flex-direction: column;
		justify-content: flex-start;
	}

	#pisa-mobilnav .menu-item-has-children > a::after {
		display: none;
	}

	#pisa-mobilnav li {
		position: relative;
	}

	#pisa-mobilnav .sub-menu {
		display: none;
		position: static;
		background: transparent;
		box-shadow: none;
		min-width: 0;
		padding: 0;
		list-style: none;
		margin: 0;
	}

	#pisa-mobilnav li.is-open > .sub-menu {
		display: block;
	}

	#pisa-mobilnav .sub-menu a {
		color: #ccc;
		font-weight: 400;
		padding: 8px 16px 8px 34px;
	}

	#pisa-mobilnav .sub-menu a:hover {
		color: var(--wp--preset--color--weiss);
	}

	/* Pfeil-Toggle pro Item mit Untermenü */
	.pisa-subtoggle {
		display: block;
		position: absolute;
		top: 4px;
		right: 8px;
		width: 44px;
		height: 40px;
		background: transparent;
		border: none;
		cursor: pointer;
	}

	.pisa-subtoggle::after {
		content: "";
		display: inline-block;
		width: 9px;
		height: 9px;
		border-right: 2px solid var(--wp--preset--color--weiss);
		border-bottom: 2px solid var(--wp--preset--color--weiss);
		transform: rotate(45deg);
		transition: transform 0.2s ease;
	}

	#pisa-mobilnav li.is-open > .pisa-subtoggle::after {
		transform: rotate(-135deg);
	}

	#pisa-mobilnav .menu-item-has-children > a {
		padding-right: 56px;
	}

	/* Sprachwechsel als Menüpunkt «DE» (Untermenü FR/IT), wie Produktion */
	.pisa-mobil-extra {
		display: block;
	}

	.pisa-mobil-extra .pisa-menu {
		list-style: none;
		margin: 0;
		padding: 0;
		display: block;
	}

	.pisa-mobil-extra a {
		display: block;
		padding: 12px 16px;
		font-size: 16px;
		font-weight: 700;
	}
}

/* Suchformular: 350px, kompakt, dunkler Rand (wie Ivory-Setup) */

.pisa-suche {
	max-width: 350px;
}

.pisa-suche .wp-block-search__input {
	max-height: 34px;
	font-size: 16px;
	border-color: #222;
	background: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--schwarz);
	padding: 4px 8px;
}

.pisa-suche .wp-block-search__button {
	background: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--schwarz);
	border: none;
	padding: 4px 8px;
}

/* -------- Layout: Sektions-Sidebar links + Inhalt -------- */

.pisa-layout {
	display: flex;
	max-width: 1700px;
	margin: 0 auto;
	width: 100%;
	align-items: stretch;
}

.pisa-layout > * {
	margin-block-start: 0;
}

.pisa-content {
	flex: 1;
	min-width: 0;
	padding: clamp(16px, 1.4vw, 25px) clamp(16px, 2.8vw, 48px) 60px;
}

/* Post-Content ist flow-root (kein Margin-Collapsing): den 24px-Flow-Gap
 * neutralisieren, damit der Abstand Breadcrumb→H1 allein aus dem H1-Margin
 * kommt und die Sidebar-Oberkanten-Rechnung aufgeht */
.pisa-content .entry-content {
	margin-block-start: 0;
}

.pisa-sidebar {
	flex-shrink: 0;
	width: min(400px, 30%);
	background: var(--wp--preset--color--schwarz);
	color: var(--wp--preset--color--weiss);
	/* Oberkante auf H1-Höhe: Content-Padding + Breadcrumb (20px) + H1-Margin (50px) */
	padding: calc(clamp(16px, 1.4vw, 25px) + 70px) clamp(16px, 2.8vw, 48px) clamp(18px, 4.7vw, 80px);
}

/* Klasse verdoppelt: schlägt das GB-Inline-CSS der gp_elements
 * (h3.gb-headline-XXXX { margin-top: 65px }), das nach pisa.css lädt */
.pisa-sidebar.pisa-sidebar h3 {
	color: var(--wp--preset--color--weiss);
	margin-top: 0;
}

/* Inhalt scrollt mit: sticky nur im Desktop-Layout (mobil liegt die
 * Sidebar unter dem Inhalt, dort gibt es nichts zu sticken) */
@media (min-width: 1025px) {
	.pisa-sidebar-inner {
		position: sticky;
		top: 20px;
	}
}

.pisa-sidebar h3 + p {
	margin-top: 0.5em;
}

.pisa-sidebar h3:not(:first-child) {
	margin-top: 65px;
}

.pisa-sidebar p {
	color: var(--wp--preset--color--weiss);
	font-size: 1rem;
}

.pisa-sidebar a {
	color: var(--wp--preset--color--weiss);
	text-decoration: underline;
}

.pisa-sidebar a:hover {
	color: #969696;
}

@media (max-width: 1024px) {
	.pisa-layout {
		flex-direction: column;
	}

	.pisa-content {
		order: 1;
	}

	.pisa-sidebar {
		order: 2;
		width: 100%;
		/* border-box, sonst ragt 100% + Seitenpadding rechts über den Rand */
		box-sizing: border-box;
		padding-top: 32px;
	}
}

/* -------- Block Styles: Hinweis, Zwischentitel, Kachel-Grid, Kachel --------
 * Im Editor per Stil-Panel wählbar (register_block_style) – keine
 * Custom-CSS-Klassen mehr nötig. Im Kachel-Grid wird jeder Absatz mit Link
 * automatisch zur Kachel; einzelne Kacheln über den Stil «PISA Kachel».
 */

.is-style-pisa-notice {
	font-weight: 700;
	font-style: italic;
}

.is-style-pisa-h-small {
	font-size: 1.25rem;
	margin-top: 2em;
	margin-bottom: 0;
}

.is-style-pisa-linkgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 20px;
	margin: 25px 0 15px;
}


.is-style-pisa-linkgrid > p,
p.is-style-pisa-linkbox {
	margin: 0;
	display: flex;
}

.is-style-pisa-linkgrid > p > a,
p.is-style-pisa-linkbox > a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	position: relative;
	width: 100%;
	min-height: 150px;
	background: var(--wp--preset--color--weiss);
	border: 2px solid var(--wp--preset--color--gruen-100);
	border-bottom: 6px solid var(--wp--preset--color--schwarz);
	padding: 22px 24px 30px;
	font-weight: 600;
	/* wächst responsive bis 1.3rem, mobil moderat kleiner */
	font-size: clamp(1.1rem, 1.3vw, 1.3rem);
	text-align: center;
	color: var(--wp--preset--color--schwarz);
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

.is-style-pisa-linkgrid > p > a,
.is-style-pisa-linkgrid > p > a:hover,
.is-style-pisa-linkgrid > p > a:focus-visible,
p.is-style-pisa-linkbox > a,
p.is-style-pisa-linkbox > a:hover,
p.is-style-pisa-linkbox > a:focus-visible {
	/* !important nötig, solange das alte WPCodeBox-1.css (p a … !important) noch lädt */
	color: var(--wp--preset--color--schwarz) !important;
	text-decoration: none !important;
}

/* Pfeil (Lucide move-right) unten rechts, rein dekorativ — Screenreader
   lesen nur den Kacheltitel als Linktext. */

.is-style-pisa-linkgrid > p > a::after,
p.is-style-pisa-linkbox > a::after {
	content: "";
	position: absolute;
	right: 14px;
	bottom: 10px;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8L22 12L18 16'/%3E%3Cpath d='M2 12H22'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: background-image 0.2s ease-in-out;
}

/* Hover: Grün-40-Fläche, leichter Scale (Wert wie Produktion), Pfeil grün —
   die schwarze Unterkante BLEIBT schwarz */
.is-style-pisa-linkgrid > p > a:hover,
.is-style-pisa-linkgrid > p > a:focus-visible,
p.is-style-pisa-linkbox > a:hover,
p.is-style-pisa-linkbox > a:focus-visible {
	background: var(--wp--preset--color--gruen-40);
	transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
	.is-style-pisa-linkgrid > p > a:hover,
	.is-style-pisa-linkgrid > p > a:focus-visible,
	p.is-style-pisa-linkbox > a:hover,
	p.is-style-pisa-linkbox > a:focus-visible {
		transform: none;
	}
}

.is-style-pisa-linkgrid > p > a:hover::after,
.is-style-pisa-linkgrid > p > a:focus-visible::after,
p.is-style-pisa-linkbox > a:hover::after,
p.is-style-pisa-linkbox > a:focus-visible::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A744D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8L22 12L18 16'/%3E%3Cpath d='M2 12H22'/%3E%3C/svg%3E");
}

/* Mobile: Kachel-Grid zweispaltig mit kompakteren Kacheln (nach den
 * Basisregeln platziert, damit die Überschreibung greift) */
@media (max-width: 700px) {
	.is-style-pisa-linkgrid {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.is-style-pisa-linkgrid > p > a,
	p.is-style-pisa-linkbox > a {
		min-height: 110px;
		padding: 14px 12px 26px;
		font-size: 1rem;
		/* lange Wörter (Ergebnisberichterstattung …) dürfen mobil trennen */
		-webkit-hyphens: auto;
		hyphens: auto;
	}

	.is-style-pisa-linkgrid > p > a::after,
	p.is-style-pisa-linkbox > a::after {
		width: 16px;
		height: 16px;
		right: 10px;
		bottom: 8px;
	}
}

/* -------- Banner-Button (Block Style «PISA Banner», volle Breite, Buch-Icon) -------- */

.wp-block-buttons:has(> .is-style-pisa-banner) {
	margin-top: 40px;
}

.wp-block-button.is-style-pisa-banner {
	width: 100%;
}

/* Buttons generell im Original-Stil: 2px Grün-Rahmen, Hover Grün-20 + dunkler Text */

.wp-block-button__link {
	border: 2px solid var(--wp--preset--color--gruen-100);
	transition: all 0.3s ease-in-out;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--gruen-20);
	color: var(--wp--preset--color--schwarz);
}

.is-style-pisa-banner .wp-block-button__link {
	width: 100%;
	padding: 0.8em 0.4em;
	font-weight: 600;
	font-size: 1.125rem;
}

.is-style-pisa-banner .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 10px;
	vertical-align: -3px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* -------- Breadcrumb -------- */

.pisa-breadcrumb {
	font-size: 0.9rem;
	color: #555;
	margin: 0;
}

.pisa-breadcrumb a {
	color: var(--wp--preset--color--gruen-100);
	text-decoration: none;
}

.pisa-breadcrumb a:hover {
	text-decoration: underline;
}

.pisa-breadcrumb .sep {
	color: #999;
	margin: 0 2px;
}

/* -------- Akkordeon (core/accordion im aktuellen Grün-Design) -------- */

.wp-block-accordion-item {
	margin-top: 10px;
	border: none;
}

.wp-block-accordion-heading {
	margin: 0;
	font-size: clamp(1rem, 1vw, 1.125rem);
}

.wp-block-accordion-heading__toggle {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	background: var(--wp--preset--color--weiss);
	border: 2px solid var(--wp--preset--color--gruen-100);
	border-radius: 0;
	color: #02111B;
	font-family: inherit;
	font-size: clamp(1rem, 1vw, 1.125rem);
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	padding: clamp(8px, 0.5vw, 10px) 16px;
	cursor: pointer;
	transition: background 0.2s ease-in-out;
}

.wp-block-accordion-heading__toggle:hover,
.wp-block-accordion-heading__toggle:focus-visible,
.wp-block-accordion-heading__toggle[aria-expanded="true"] {
	background: var(--wp--preset--color--gruen-20);
	color: #02111B;
}

.wp-block-accordion-heading__toggle:hover,
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title,
.wp-block-accordion-heading__toggle:focus-visible .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

/* «+»-Icon des Core-Blocks durch Chevron ersetzen */

.wp-block-accordion-heading__toggle-icon {
	font-size: 0;
	line-height: 0;
	width: 14px;
	height: 14px;
	position: relative;
	flex-shrink: 0;
	transition: transform 0.2s ease-in-out;
}

.wp-block-accordion-heading__toggle-icon::after {
	content: "";
	position: absolute;
	left: 1px;
	top: 0;
	width: 10px;
	height: 10px;
	border-right: 2px solid #02111B;
	border-bottom: 2px solid #02111B;
	transform: rotate(45deg);
}

/* Offen: ganzes Icon 180° drehen → Chevron zeigt nach oben.
   Muss Core's .is-open-Regel (rotate(45deg) für Plus→X) überstimmen. */

.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon.wp-block-accordion-heading__toggle-icon,
.wp-block-accordion-heading__toggle[aria-expanded="true"] .wp-block-accordion-heading__toggle-icon.wp-block-accordion-heading__toggle-icon {
	transform: rotate(180deg);
}

.wp-block-accordion-panel {
	background: var(--wp--preset--color--weiss);
	padding: 20px 0;
	border: none;
}

/* Offenes Panel näher an den Button: Flow-Gap (24px) entfernen */

.wp-block-accordion-item > .wp-block-accordion-panel {
	margin-block-start: 0;
}

/* Zugeklappt (hidden until-found) behält das Panel seine Box – Padding nullen */

.wp-block-accordion-panel[hidden] {
	padding: 0;
}

/* -------- Tabs (core/tabs im Original-Look) -------- */

.wp-block-tab-list {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0 0 5px;
	padding: 0;
	border: none;
	box-shadow: none;
}

.wp-block-tab-list button[role="tab"] {
	background: var(--wp--preset--color--gruen-20);
	color: var(--wp--preset--color--schwarz);
	border: 2px solid var(--wp--preset--color--gruen-100);
	border-radius: 0;
	padding: clamp(8px, 0.5vw, 10px) clamp(10px, 0.7vw, 12px);
	font-family: inherit;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
}

.wp-block-tab-list button[role="tab"]:hover,
.wp-block-tab-list button[role="tab"]:focus-visible,
.wp-block-tab-list button[role="tab"][aria-selected="true"] {
	background: var(--wp--preset--color--gruen-100);
	color: var(--wp--preset--color--weiss);
}

.wp-block-tab-panel {
	border: 2px solid #dee2e6;
	padding: 20px;
}

/* -------- Suchresultate: 4-spaltiges Raster mit Highlights -------- */

.pisa-suche-anzahl {
	color: #555;
	font-size: 0.9rem;
}

.pisa-suche-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin: 20px 0 30px;
}

@media (max-width: 1215px) {
	.pisa-suche-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 900px) {
	.pisa-suche-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.pisa-suche-grid {
		grid-template-columns: 1fr;
	}
}

.pisa-suche-card {
	position: relative; /* Anker für den Stretched-Link */
	border: 2px solid var(--wp--preset--color--gruen-100);
	border-bottom: 6px solid var(--wp--preset--color--schwarz);
	padding: 16px 18px;
	background: var(--wp--preset--color--weiss);
	transition: background 0.2s ease-in-out;
}

.pisa-suche-card:hover,
.pisa-suche-card:focus-within {
	background: var(--wp--preset--color--gruen-20);
}

.pisa-suche-card a {
	color: var(--wp--preset--color--schwarz) !important; /* gegen 1.css p a */
	text-decoration: none !important;
}

/* Stretched-Link: ganze Karte klickbar, ohne Block-Markup im <a> */
.pisa-suche-card h2 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pisa-suche-card h2 {
	font-size: 1.05rem;
	line-height: 1.3;
	margin: 0 0 8px;
}

.pisa-suche-card p {
	font-size: 0.9rem;
	color: #444;
	margin: 0;
}

.pisa-suche-card mark,
.pisa-suche-keine mark {
	background: var(--wp--preset--color--accent);
	padding: 0 1px;
}

.pisa-suche-pagination {
	margin: 0 0 40px;
}

.pisa-suche-pagination .page-numbers {
	display: inline-block;
	padding: 6px 12px;
	margin-right: 6px;
	border: 2px solid var(--wp--preset--color--gruen-100);
	color: var(--wp--preset--color--schwarz);
	text-decoration: none;
}

.pisa-suche-pagination .page-numbers.current {
	background: var(--wp--preset--color--gruen-100);
	color: var(--wp--preset--color--weiss);
}

.pisa-suche-pagination a.page-numbers:hover {
	background: var(--wp--preset--color--gruen-20);
}

/* -------- Publikationsliste (statt Ninja Tables) -------- */

.pisa-publikationen {
	margin: 30px 0;
	border: 1px solid #e2e2e2; /* feiner Rahmen ums ganze Element (Filterbalken + Tabelle) */
}

/* Nur die Tabelle (grüner Header + Zeilen) scrollt horizontal —
 * der schwarze Filterbalken darüber bleibt stehen. */
.pisa-pub-scroll {
	overflow-x: auto;
}

/* Filterleiste: dunkler Streifen wie die Hauptnavigation. Links das Total,
 * rechts die Controls auf fixen 50% Breite; Dropdowns und Suche skalieren
 * über flex-basis 0 (NICHT nach Inhalt) — dadurch in allen Sprachen gleich
 * breit, nichts springt. */

.pisa-pub-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-bottom: 0; /* schliesst bündig an den grünen Tabellenkopf an */
	background: #222;
	padding: 10px 14px;
}

.pisa-pub-count {
	flex: 1;
	color: var(--wp--preset--color--weiss);
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
}

.pisa-pub-controls {
	display: flex;
	gap: 8px;
	width: 50%;
	min-width: 480px;
	justify-content: flex-end;
}

.pisa-pub-controls input[type="search"],
.pisa-pub-controls select,
.pisa-pub-controls .pisa-pub-reset {
	padding: 10px 12px;
	border: none;
	border-radius: 0;
	background: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--schwarz);
	font-family: inherit;
	font-size: 1rem;
}

/* Maus-Fokus ohne Outline (Klasse setzt das Filter-JS per pointerdown);
 * Tastatur-Fokus behält die :focus-visible-Outline. !important nötig
 * gegen das *:focus-visible-!important aus dem WPCodeBox-1.css. */
.pisa-pub-controls .pisa-maus:focus {
	outline: none !important;
}

/* Fixe Breiten (195px fasst das längste Label «Alle Erhebungsjahre»):
 * Dropdowns in allen Sprachen identisch, die Suche füllt den Rest der
 * 50%-Leiste — konstant pro Viewport, springt nicht nach Inhalt. */
.pisa-pub-controls select {
	flex: 0 0 195px;
}

.pisa-pub-controls input[type="search"] {
	flex: 1 1 0;
	min-width: 0;
}

.pisa-pub-controls .pisa-pub-reset {
	flex: 0 0 145px;
	cursor: pointer;
	font-size: 0.9rem;
	background: var(--wp--preset--color--gruen-20);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pisa-pub-controls .pisa-pub-reset:hover,
.pisa-pub-controls .pisa-pub-reset:focus-visible {
	background: var(--wp--preset--color--gruen-100);
	color: var(--wp--preset--color--weiss);
}

@media (max-width: 1400px) {
	.pisa-pub-controls {
		width: 100%;
		min-width: 0;
	}
}

/* Titel-Spalte existiert nur fürs Mobile-Accordion */
.pisa-publikationen th.pisa-pub-titel,
.pisa-publikationen td.pisa-pub-titel {
	display: none;
}

@media (max-width: 700px) {
	.pisa-pub-controls {
		flex-wrap: wrap;
	}

	.pisa-pub-controls select {
		flex: 1 1 45%;
	}

	.pisa-pub-controls input[type="search"] {
		flex: 1 1 100%;
	}

	/* -------- Mobile: Zeilen als Accordions (wie Produktion/footable) --------
	 * Zu sehen: Titel + Sprache; Aufklappen zeigt Zitation, Jahr, Download. */
	.pisa-publikationen thead {
		display: none;
	}

	.pisa-publikationen tbody tr {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: start;
		padding: 4px 0;
		border-bottom: 1px solid #e2e2e2;
	}

	.pisa-publikationen tbody td {
		border: none; /* auch die Spalten-Trenner — mobil sind die Zeilen Cards */
	}

	.pisa-publikationen td.pisa-pub-titel {
		display: block;
		grid-column: 1;
		cursor: pointer;
		font-weight: 600;
		padding: 10px 12px 10px 34px;
		position: relative;
	}

	.pisa-publikationen td.pisa-pub-titel::before {
		content: "+";
		position: absolute;
		left: 12px;
		top: 8px;
		font-size: 1.2em;
		font-weight: 700;
		color: #767676;
	}

	.pisa-publikationen tr.is-open td.pisa-pub-titel::before {
		content: "−";
	}

	.pisa-publikationen td.pisa-pub-sprachen {
		grid-column: 2;
		grid-row: 1; /* bleibt oben neben dem Titel, auch aufgeklappt */
		padding: 10px 12px;
	}

	.pisa-publikationen td.pisa-pub-zitation,
	.pisa-publikationen td.pisa-pub-jahre,
	.pisa-publikationen td.pisa-pub-download {
		display: none;
		grid-column: 1 / -1;
	}

	.pisa-publikationen tr.is-open td.pisa-pub-zitation {
		display: block;
		padding: 4px 12px 8px;
	}

	.pisa-publikationen tr.is-open td.pisa-pub-jahre,
	.pisa-publikationen tr.is-open td.pisa-pub-download {
		display: block;
		text-align: center;
		padding: 6px 12px;
		width: auto; /* hebt das Desktop width:1% der Download-Spalte auf */
	}
}

.pisa-pub-leer {
	padding: 12px 14px;
}

.pisa-publikationen table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
}

.pisa-publikationen th {
	background: var(--wp--preset--color--gruen-100);
	color: var(--wp--preset--color--weiss);
	text-align: left;
	padding: 12px 14px;
	font-weight: 600;
}

.pisa-publikationen td {
	padding: 12px 14px;
	border-bottom: 1px solid #e2e2e2;
	vertical-align: top;
}

/* Feine Spalten-Trenner; im grünen Kopf halbtransparent weiss */
.pisa-publikationen td + td {
	border-left: 1px solid #e2e2e2;
}

.pisa-publikationen th + th {
	border-left: 1px solid rgba(255, 255, 255, 0.3);
}

/* Zebra: ohne JS per nth-child; mit Filter-JS (.pisa-js) zählt die
 * pisa-alt-Klasse nur die SICHTBAREN Zeilen — bleibt beim Filtern sauber. */
.pisa-publikationen tbody tr:nth-child(even) {
	background: #f6f9f8;
}

.pisa-publikationen.pisa-js tbody tr:nth-child(even) {
	background: transparent;
}

.pisa-publikationen.pisa-js tbody tr.pisa-alt {
	background: #f6f9f8;
}

.pisa-publikationen .pisa-pub-jahre,
.pisa-publikationen .pisa-pub-sprachen {
	white-space: nowrap;
}

/* Download-Spalte: Lucide-download-Icon, zentriert */
.pisa-publikationen th.pisa-pub-download,
.pisa-publikationen td.pisa-pub-download {
	text-align: center;
	white-space: nowrap;
	width: 1%;
}

.pisa-pub-dl {
	display: inline-block;
	width: 22px;
	height: 22px;
	vertical-align: middle;
	background-color: var(--wp--preset--color--gruen-100);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
}

.pisa-pub-dl:hover,
.pisa-pub-dl:focus-visible {
	background-color: var(--wp--preset--color--beere);
}

/* Zitation: Click-to-copy */
.pisa-pub-copy {
	cursor: pointer;
}

.pisa-pub-copy:hover,
.pisa-pub-copy:focus-visible {
	background: var(--wp--preset--color--gruen-20);
}

.pisa-pub-copied {
	margin-left: 6px;
	color: var(--wp--preset--color--gruen-100);
	font-size: 0.85em;
	font-weight: 700;
	white-space: nowrap;
}

.pisa-pub-copied[hidden] {
	display: none;
}

.pisa-pub-copied::after {
	content: attr(data-label);
}

/* -------- Footer: boxed, Anthrazit-Block + grüner Balken darunter -------- */

.pisa-footer p,
.pisa-footer p a {
	font-size: clamp(1rem, 1vw, 1.125rem);
	color: var(--wp--preset--color--weiss);
}

.pisa-footer h3 {
	font-size: clamp(1.25rem, 1.4vw, 1.5rem);
	font-weight: 700;
	color: var(--wp--preset--color--weiss);
	margin-top: 0;
}

.pisa-footer a,
.pisa-footernav a {
	color: var(--wp--preset--color--weiss);
	text-decoration: underline;
}

.pisa-footer a:hover,
.pisa-footernav a:hover {
	color: var(--wp--preset--color--beere);
}

.pisa-footer-main {
	padding: 40px clamp(16px, 2.8vw, 48px);
}

.pisa-footer-bar {
	padding: 14px clamp(16px, 2.8vw, 48px);
	margin-block-start: 0;
}

.pisa-footer-bar p {
	margin-bottom: 0;
	font-size: 1rem;
}

.pisa-footernav .pisa-menu {
	list-style: none;
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0;
	font-size: 1rem;
}

/* -------- Accessibility -------- */

:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}