/* ============================================================
   Tabreiter-Block (vitalpilze/tabs) – Frontend
   Design-System: Army Green --basic-color-1, Zen Beige --basic-color-5
   ============================================================ */

.vp-tabs {
	margin: 1.5em 0;
}

.vp-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em;
	list-style: none;
	margin: 0 0 0 0;
	padding: 0;
	border-bottom: 2px solid var(--basic-color-1, #6B722F);
}

.vp-tabs__nav-item {
	margin: 0;
}

.vp-tabs__nav-link {
	display: block;
	margin: 0;
	padding: 0.6em 1.2em;
	border: 2px solid transparent;
	border-bottom: none;
	border-radius: 6px 6px 0 0;
	background: var(--basic-color-5, #DBDCD2);
	color: var(--basic-color-1, #6B722F);
	font-family: var(--font-1, "Raleway", sans-serif);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.vp-tabs__nav-link:hover,
.vp-tabs__nav-link:focus-visible {
	background: var(--basic-color-2, rgba(170, 176, 104, 1));
	color: #fff;
	outline: none;
}

.vp-tabs__nav-link.is-active {
	background: var(--basic-color-1, #6B722F);
	color: #fff;
}

.vp-tabs__panel {
	padding: 1.5em 0;
}

.vp-tabs__panel[hidden] {
	display: none;
}

.vp-tabs__panel > :first-child {
	margin-top: 0;
}

/* ------------------------------------------------------------
   Stil-Variante „Pills“ – runde Reiter ohne Unterstrich-Leiste
   (z. B. die Lieferantenliste nach Ländern)
   ------------------------------------------------------------ */

.vp-tabs.is-style-pills .vp-tabs__nav {
	border-bottom: none;
	gap: 0.5em;
}

.vp-tabs.is-style-pills .vp-tabs__nav-link {
	border: 2px solid var(--basic-color-5, #DBDCD2);
	border-radius: 999px;
}

.vp-tabs.is-style-pills .vp-tabs__nav-link:hover,
.vp-tabs.is-style-pills .vp-tabs__nav-link:focus-visible {
	border-color: var(--basic-color-2, rgba(170, 176, 104, 1));
}

.vp-tabs.is-style-pills .vp-tabs__nav-link.is-active {
	border-color: var(--basic-color-1, #6B722F);
}

/* ============================================================
   Editor-Ansicht: echte Reiter-Leiste, nur aktiver Reiter sichtbar
   ============================================================ */

/* Reiter-Leiste (wie im Frontend) */
.vp-tabs-edit__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em;
	list-style: none;
	margin: 0 0 0;
	padding: 0;
	border-bottom: 2px solid var(--basic-color-1, #6B722F);
}

.vp-tabs-edit__nav-item {
	margin: 0;
}

.vp-tabs-edit__nav-link,
.vp-tabs-edit__add {
	display: block;
	margin: 0;
	padding: 0.5em 1em;
	border: 2px solid transparent;
	border-bottom: none;
	border-radius: 6px 6px 0 0;
	background: var(--basic-color-5, #DBDCD2);
	color: var(--basic-color-1, #6B722F);
	font-family: var(--font-1, "Raleway", sans-serif);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.2;
	cursor: pointer;
}

/* Lasche = editierbares Titelfeld: Text-Cursor + klickbare Mindestbreite (auch wenn leer). */
.vp-tabs-edit__nav-link {
	min-width: 3em;
	cursor: text;
	white-space: nowrap;
}

.vp-tabs-edit__nav-link:hover,
.vp-tabs-edit__add:hover {
	background: var(--basic-color-2, rgba(170, 176, 104, 1));
	color: #fff;
}

.vp-tabs-edit__nav-link.is-active {
	background: var(--basic-color-1, #6B722F);
	color: #fff;
}

.vp-tabs-edit__add {
	font-weight: 700;
}

/* Reiter-Verwaltung im Block-Inspektor (rechte Seitenleiste) */
.vp-tabs-panel__hint {
	font-size: 0.85em;
	color: #757575;
	margin: 0 0 0.6em;
}

.vp-tabs-panel__list {
	margin: 0 0 0.8em;
	padding: 0;
	list-style: none;
}

.vp-tabs-panel__item {
	display: flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.4em 0.5em;
	margin: 0 0 0.3em;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	background: #fff;
	cursor: grab;
}

.vp-tabs-panel__item.is-active {
	border-color: var(--basic-color-1, #6B722F);
	box-shadow: inset 3px 0 0 var(--basic-color-1, #6B722F);
}

.vp-tabs-panel__item.is-dragover {
	border-style: dashed;
	border-color: var(--basic-color-1, #6B722F);
	background: var(--basic-color-5, #DBDCD2);
}

.vp-tabs-panel__grip {
	color: #999;
	font-size: 1.1em;
	line-height: 1;
}

.vp-tabs-panel__title {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.9em;
}

.vp-tabs-panel__del {
	flex: 0 0 auto;
	width: 1.7em;
	height: 1.7em;
	line-height: 1;
	border: none;
	border-radius: 3px;
	background: transparent;
	color: #a01919;
	cursor: pointer;
	font-size: 1.15em;
}

.vp-tabs-panel__del:hover {
	background: #a01919;
	color: #fff;
}

.vp-tabs-panel__add {
	width: 100%;
	justify-content: center;
}

/* Panels: standardmäßig alle ausblenden, nur den aktiven (nth-child) zeigen.
   data-active spiegelt den im Editor gewählten Reiter (0-basiert). */
.vp-tabs-edit__panels > .vp-tab-edit {
	display: none;
}
.vp-tabs-edit[data-active="0"]  .vp-tabs-edit__panels > .vp-tab-edit:nth-child(1),
.vp-tabs-edit[data-active="1"]  .vp-tabs-edit__panels > .vp-tab-edit:nth-child(2),
.vp-tabs-edit[data-active="2"]  .vp-tabs-edit__panels > .vp-tab-edit:nth-child(3),
.vp-tabs-edit[data-active="3"]  .vp-tabs-edit__panels > .vp-tab-edit:nth-child(4),
.vp-tabs-edit[data-active="4"]  .vp-tabs-edit__panels > .vp-tab-edit:nth-child(5),
.vp-tabs-edit[data-active="5"]  .vp-tabs-edit__panels > .vp-tab-edit:nth-child(6),
.vp-tabs-edit[data-active="6"]  .vp-tabs-edit__panels > .vp-tab-edit:nth-child(7),
.vp-tabs-edit[data-active="7"]  .vp-tabs-edit__panels > .vp-tab-edit:nth-child(8),
.vp-tabs-edit[data-active="8"]  .vp-tabs-edit__panels > .vp-tab-edit:nth-child(9),
.vp-tabs-edit[data-active="9"]  .vp-tabs-edit__panels > .vp-tab-edit:nth-child(10),
.vp-tabs-edit[data-active="10"] .vp-tabs-edit__panels > .vp-tab-edit:nth-child(11),
.vp-tabs-edit[data-active="11"] .vp-tabs-edit__panels > .vp-tab-edit:nth-child(12) {
	display: block;
}

/* Panel-Inhalt */
.vp-tab-edit {
	padding: 1em 0;
}

/* Editor: Inhaltsblöcke im Tab-Panel nutzen die volle Breite. Gutenberg begrenzt sonst jeden
   Block (auch verschachtelte) auf die globale „Inhaltsbreite" – im Tabreiter unerwünscht. */
.vp-tabs-edit .vp-tab-edit,
.vp-tab-edit__content,
.vp-tab-edit__content .block-editor-block-list__layout > * {
	max-width: none;
}

/* ============================================================
   Akkordeon-Block (vitalpilze/accordion) – Frontend
   ============================================================ */

.vp-accordion {
	margin: 1.5em 0;
}

.vp-accordion__item {
	border: 1px solid var(--basic-color-5, #DBDCD2);
	border-radius: 6px;
	margin: 0 0 0.5em;
	background: #fff;
}

.vp-accordion__title {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.8em 1.1em;
	cursor: pointer;
	font-family: var(--font-1, "Raleway", sans-serif);
	font-weight: 600;
	color: var(--basic-color-1, #6B722F);
	list-style: none;
	transition: background 0.15s ease, color 0.15s ease;
}

/* Standard-Marker (Dreieck) ausblenden – wir nutzen ein eigenes +/− */
.vp-accordion__title::-webkit-details-marker {
	display: none;
}

.vp-accordion__title::before {
	content: "+";
	flex: 0 0 auto;
	width: 1.2em;
	font-weight: 700;
	font-size: 1.2em;
	line-height: 1;
	color: var(--basic-color-1, #6B722F);
}

.vp-accordion__item[open] > .vp-accordion__title::before {
	content: "\2212"; /* − */
}

.vp-accordion__title:hover,
.vp-accordion__item[open] > .vp-accordion__title {
	background: var(--basic-color-5, #DBDCD2);
}

.vp-accordion__content {
	padding: 0.2em 1.1em 1.1em;
}

.vp-accordion__content > :first-child {
	margin-top: 0;
}

/* Editor-Ansicht: Einträge als aufgeklappte Karten */
.vp-accordion-item-edit {
	border: 1px solid var(--basic-color-5, #DBDCD2);
	border-radius: 6px;
	margin: 0 0 0.5em;
	background: #fff;
}

.vp-accordion-item-edit__title {
	padding: 0.7em 1.1em;
	font-family: var(--font-1, "Raleway", sans-serif);
	font-weight: 600;
	color: var(--basic-color-1, #6B722F);
	border-bottom: 1px solid var(--basic-color-5, #DBDCD2);
}

.vp-accordion-item-edit__content {
	padding: 0.5em 1.1em 0.8em;
}

/* ============================================================
   Bild-Box (vitalpilze/image-box) – Frontend
   ============================================================ */

.vp-image-box,
.vp-image-box-edit {
	display: flex;
	gap: 1.5em;
	align-items: center;
	margin: 1.5em 0;
}

.vp-image-box.is-layout-left,
.vp-image-box-edit.is-layout-left {
	flex-direction: row;
}

.vp-image-box.is-layout-right,
.vp-image-box-edit.is-layout-right {
	flex-direction: row-reverse;
}

.vp-image-box.is-layout-top,
.vp-image-box-edit.is-layout-top {
	flex-direction: column;
	align-items: stretch;
}

.vp-image-box__media {
	margin: 0;
	flex: 0 1 45%;
}

.vp-image-box.is-layout-top .vp-image-box__media {
	flex: none;
}

.vp-image-box__image,
.vp-image-box__media img {
	display: block;
	width: 100%;
	height: auto;
}

.vp-image-box__content {
	flex: 1 1 0;
	min-width: 0;
}

.vp-image-box__content > :first-child {
	margin-top: 0;
}

/* Auf schmalen Viewports immer untereinander */
@media ( max-width: 600px ) {
	.vp-image-box,
	.vp-image-box-edit {
		flex-direction: column;
		align-items: stretch;
	}
}