.page-node-type-landing-page {

	.paragraph-preview-grid {
	  display: grid;
	  grid-template-columns: minmax(0, 1fr) 450px;
	  gap: 1.5rem;
	  align-items: start;
	  padding: var(--gin-spacing-m) 0;
	}

	.paragraph-preview-grid__description {
	  color: #666;
	  font-size: .95rem;
	  line-height: 1.5;
	}

	.paragraph-preview-grid__preview {
		min-width: 0;

		p {
			font-size: .875rem;
			line-height: 1.25;
		}

		img {
			/* Fill the 450px track on desktop, scale down on narrow viewports. */
			width: 100%;
			height: auto;
			display: block;
		}
	}

	/* On narrow viewports: stack the columns and let the thumbnail scale
	   down to the available width instead of forcing 450px. */
	@media (max-width: 768px) {
		.paragraph-preview-grid {
			grid-template-columns: minmax(0, 1fr);
			gap: var(--gin-spacing-s);
		}
	}

	h2.preview-title {
		font-size: 1rem;
		font-weight: var(--gin-font-weight-bold);
	}

	tr {
		td:has(.paragraph-preview) {
			width: 100%;
			max-height: 200px;
			overflow: hidden;
		}

/* deactivated paragraphs */
		&:has(.paragraphs-icon) {
			box-shadow: none!important; /* gs: hotfix */
			border: 1px solid rgba(0, 0, 0, .05)!important;
		}

		.paragraph-type-label {
			font-size: var(--gin-font-size-l);
			font-weight: var(--gin-font-weight-semibold) !important; /* hotfix */
			line-height: normal;
			text-transform: uppercase;
		}

		.paragraphs-icon-view {
			width: 22px;
			height: 22px;
			margin-inline-start: 12px;
			background-size: 22px 22px;
			background-image: url("/modules/custom/uv_admin/icons/visibility-hidden.svg");
		}
	}

	.field--name-field-sections .paragraph-top {
		justify-items: flex-end;
		border-bottom: 1px solid var(--gin-border-color-table);

		.field--name-status {
			grid-column-start: 3;
			grid-row-start: 1;
			margin: 0 24px 0 0;

			.form-item {
				margin: 0;
			}
		}
	}
}

	/* Home / Slogan */
.page-node-type-landing-page .paragraph-type--landingpage-slogan {
	display: flex;
	position: relative;
	flex-wrap: nowrap;
	flex-direction: row;
	padding: var(--gin-spacing-m) var(--gin-spacing-l) var(--gin-spacing-m) var(--gin-spacing-xs);
	margin-block-start: var(--gin-spacing-m);
	border: 1px solid var(--gin-border-color-table);
	border-radius: var(--gin-border-m);

	/* Collapsed state only */
	&:not(:has(.paragraphs-subform)) {
		/* max-height: 260px; */
		overflow: hidden;
	}

	&:has(img) {
		min-height: 260px;
	}

	td:nth-child(2) {
		width: 99%;
	}
	
	td:has(div.paragraph-preview.stage):has(img) {
		width: 100%;
		max-height: 300px;
		overflow: hidden;
	}

	.paragraph-preview:has(img) h2 {
		margin: 0;
		font-size: 1.15rem;
		font-weight: 700;
		color: #fff;

		span {
			font-size: .9rem;
		}
	}

	.paragraph-preview {
		@media (min-width: 768px) {
			display: grid;
		}

		&> div:first-child {
			grid-area: 1 / 1;
			width: 550px;
			height: 220px;
		}
	}

	.slogan-wrapper {
		grid-area: 1 / 1;
		align-self: end;
		margin: 25px;
	}

	/* Slightly wider preview container for the slogan paragraph */
	/* .paragraph-preview-grid {
		grid-template-columns: 1fr 550px;
	}

	.paragraph-preview-grid__preview svg {
		width: 550px;
		height: 220px;
	} */

}

.about-preview__image-fallback {
	width: 260px;
	height: 160px;
	background: #ebebeb;
	border-radius: 10px;
}


/* LP Topics topic */
.page-node-type-landing-page {

	.field--name-field-themen {
		.form-element.chosen-container-single {
			min-width: 300px;
		}

		.chosen-drop {
			margin-left: 0;

		}

		.paragraph-top .paragraph-summary {
			grid-column: 2 / 3;
			white-space: normal;
		}

		.paragraphs-description .summary-content {
			color: #666;
		}
	}
}


/* Configure Menu Page */
.js-form-wrapper:has(> [id^="custom_menu_link_item_form_wrapper_"]) {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
}

.js-form-wrapper:has(> [id^="custom_menu_link_item_form_wrapper_"]) > [id^="custom_menu_link_item_form_wrapper_"] {
  order: 1;
  flex: 1;
  min-width: 0;
}

.js-form-wrapper:has(> [id^="custom_menu_link_item_form_wrapper_"]) > .paragraph-type-top {
  order: 2;
  flex-shrink: 0;
}

.paragraphs-dropbutton-wrapper {
  margin-bottom: 12px;
}

.js-form-wrapper:has(> [id^="custom_menu_link_item_form_wrapper_"]) .paragraph-type-title {
  display: none;
}

.page-node-type-landing-page .field--widget-entity-reference-paragraphs .field-multiple-drag {
  vertical-align: middle !important;
}

.paragraphs-subform:has(.menu-item-link-type),
[id^="custom_menu_link_item_form_wrapper_"] .paragraphs-subform {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
}

.paragraphs-subform:has(.menu-item-link-type) { flex-wrap: nowrap; }

.menu-item-link-type { flex: 4; min-width: 400px; }
.menu-item-link-type select,
.menu-item-link-type .chosen-container {
  min-width: 400px;
}
.menu-item-title,
.menu-item-anchor,
.paragraphs-subform:has(.menu-item-link-type) > .form-wrapper:not(.menu-item-link-type):not(.menu-item-title) {
  flex: 1;
  min-width: 0;
}

[id^="custom_menu_link_item_form_wrapper_"] .paragraphs-subform {
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

[id^="custom_menu_link_item_form_wrapper_"] .paragraphs-subform > .form-wrapper {
  flex: 0 0 300px;
  max-width: 300px;
}

.paragraphs-subform select,
.paragraphs-subform input[type="text"],
.paragraphs-subform .chosen-container {
  width: 100%
}

/* Werdegang */
.paragraph-type--landingpage-werdegang {
	.form-type--number {
		max-width: 100px;
	}
}

/* Newsletter */
.paragraph-type--landingpage-newsletter {
	.chosen-container-single {
		min-width: 50%;
	}
}


/* Landingpage Image Field */
.paragraph-type--landingpage-about .field--name-field-bild-uber-mich .image-widget,
.paragraph-type--landingpage-slogan .field--name-field-bild .image-widget,
.field--name-field-bild-uber-mich .image-widget {

	.image-preview__img-wrapper {
		box-shadow: none;
	}

	/* Drag & Drop Area */
	&.no-value {
		position: relative;
		display: flex;
		flex-direction: column;
		min-height: 160px;
		max-width: 300px;
		border-radius: var(--gin-border-m);
		padding: 1.25rem 1.5rem;
		background: #fafafa;
		text-align: center;
		transition: border-color .2s, background-color .2s, box-shadow .2s, transform .15s;
		overflow: hidden;
		border: 2px dashed var(--gin-border-color);
		cursor: pointer;

		&::before {
			content: "";
			display: block;
			width: 75px;
			height: 75px;
			background-image: url("../icons/image-placeholder.svg");
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			opacity: .85;
			margin: 20px auto 10px auto;
		}

		/* Image upload Button */
		&::after {
			content: "Datei auswählen";
			display: inline-block;
			background: var(--gin-color-primary);
			color: var(--gin-color-button-text);
			border-radius: var(--gin-border-m);
			cursor: pointer;
			max-width: 150px;
			padding: 10px 12px;
			margin: 0 auto;
			transition: var(--gin-transition);
			margin-top: 2rem;
			color: #F8F9F9;
			font-family: Inter;
			font-size: 14px;
			font-weight: 500;
			line-height: normal;
		}

		input[type="file"] {
			position: absolute;
			inset: 0;
			width: auto;
			opacity: 0;
			cursor: pointer;
		}

		&:hover {
			border-color: var(--gin-color-primary);
			background: #f5f0f6;
		}

		&:hover::after {
			background-color: var(--gin-color-primary-hover);
		}
	}

	/* Hide focal point field when no image is uploaded (also covers upload error state) */
	&.no-value .focal-point-wrapper {
		display: none !important;
	}
}

/* Image uploaded state - Grid layout */
.image-widget.js-form-managed-file.form-managed-file.form-managed-file--image.is-single.no-upload.has-value.has-meta {
	display: grid !important;
	grid-template-columns: 300px 1fr;
	grid-template-rows: auto auto auto;
	align-items: start;
	gap: 0px 24px;
}

.image-widget.js-form-managed-file.form-managed-file.form-managed-file--image.is-single.no-upload.has-value.has-meta > .form-managed-file__main {
	grid-row: 4;
	grid-column: 1;
	margin: -30px 0 0 0;
}

.image-widget.js-form-managed-file.form-managed-file.form-managed-file--image.is-single.no-upload.has-value.has-meta .form-managed-file__main .file,
.image-widget.js-form-managed-file.form-managed-file.form-managed-file--image.is-single.no-upload.has-value.has-meta .form-managed-file__main .file a {
	font-size: var(--gin-font-size-xs);
	color: var(--gin-color-text-light);
}

/* Hide size description when an image is uploaded */
.page-node-type-landing-page .form-type--managed-file:has(.form-managed-file.has-value) > .form-item__description {
	display: none;
}

/* Flatten nested wrappers so image-preview and meta-items participate in the grid */
.image-widget.js-form-managed-file.form-managed-file.form-managed-file--image.is-single.no-upload.has-value.has-meta > .form-managed-file__meta-wrapper {
	display: contents;
}

.image-widget.js-form-managed-file.form-managed-file.form-managed-file--image.is-single.no-upload.has-value.has-meta .form-managed-file__meta {
	display: contents;
}

/* Image preview: left column, spans 2 rows */
.image-widget.js-form-managed-file.form-managed-file.form-managed-file--image.is-single.no-upload.has-value.has-meta .form-managed-file__image-preview {
	grid-column: 1;
	grid-row: 2 / 4;
}

/* Help text: right column top */
.image-widget.js-form-managed-file.form-managed-file.form-managed-file--image.is-single.no-upload.has-value.has-meta > .focal-point-help-text {
	grid-column: 2;
	grid-row: 2;
	align-self: center;
	margin: 0;

	hr {
		margin: var(--gin-spacing-m) 0 var(--gin-spacing-s);
		border-top: 1px solid var(--gin-border-color);
		border: none;
		max-width: 32rem;
		width: 100%;
	}
}

/* Alt text: right column bottom */
.image-widget.js-form-managed-file.form-managed-file.form-managed-file--image.is-single.no-upload.has-value.has-meta .form-managed-file__meta-items {
	grid-column: 2;
	grid-row: 3;
}

/* Thumbnail: 16:10 aspect ratio */
.page-node-type-landing-page .form-managed-file__image-preview img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 400px;
	height: auto;
}

.page-node-type-landing-page .form-managed-file .button.remove-button {
	font-size: 0;
	position: relative;
	width: 16px;
	height: 16px;
	padding: 0;
	background: url('/modules/custom/uv_admin/icons/trash.svg') center / 16px 16px no-repeat;
	background-color: transparent;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none;
	order: -1;
	margin: 0;
	margin-right: var(--gin-spacing-xs);
	color: transparent;

	&:hover, &:active, &:focus, &:disabled, &.is-disabled {
		background-color: transparent;
		border: 0 !important;
		color: transparent;
	}
}

/* Focal point crosshair */
.focal-point-indicator::after {
	color: #ff299f !important;
	text-shadow: 0 0 2px #fff !important;
	font-size: 2.5em !important;
	font-weight: 270 !important;
}

.focal-point-help-text {
	font-family: Inter;
	font-size: var(--label-font-size, 14px);
}

.form-item__label,
.focal-point-help-text h3 {
	color: var(--gin-color-title);
	font-size: var(--gin-font-size-h3);
	font-weight: var(--gin-font-weight-heavy);
	line-height: var(--label-line-height);
}

.focal-point-help-text span {
	display: block;
	color: var(--gin-color-text-light);
}

.focal-point-help-text .focal-point-preview-link {
	color: var(--gin-color-primary-hover);
	margin-top: 15px;
}

/* Focal point preview dialog – single centered derivative preview */
.ui-dialog.popup-dialog-class:has(#focal-point-preview) {
	max-width: 60vw !important;
	width: 60vw !important;
	max-height: 60vh !important;
	height: 60vh !important;
	margin: auto;
}

.ui-dialog.popup-dialog-class:has(#focal-point-preview) .ui-dialog-content {
	max-height: calc(60vh - 54px) !important;
	height: calc(60vh - 54px) !important;
	overflow: hidden !important;
}

#focal-point-preview-wrapper {
	padding: 10px 20px 20px 20px;
	height: 100%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

#focal-point-preview-wrapper #focal-point-derivatives {
	display: flex;
	justify-content: center;
	margin: 0;
	flex: 1;
	min-height: 0;
}

#focal-point-preview-wrapper .focal-point-derivative-preview {
	width: 100%;
	height: 100%;
	background: transparent;
	border: none;
	display: flex;
	justify-content: center;
	align-items: center;
}

#focal-point-preview-wrapper .focal-point-derivative-preview-label {
	display: none;
}

#focal-point-preview-wrapper .focal-point-derivative-preview-image {
	display: block;
	max-width: 75%;
	max-height: 75%;
	width: auto;
	height: auto;
	object-fit: contain;
	cursor: default;
}

#focal-point-preview-wrapper .preview-note {
	text-align: left !important;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	flex-shrink: 0;
}

#focal-point-derivatives {
	overflow-x: unset !important;
	overflow-y: unset !important;
	height: auto !important;
	white-space: unset !important;
}

/* Prevent shadow from disappearing on click inside the preview */
.ui-dialog.popup-dialog-class:has(#focal-point-preview) {
	pointer-events: none;
}
.ui-dialog.popup-dialog-class:has(#focal-point-preview) .ui-dialog-titlebar,
.ui-dialog.popup-dialog-class:has(#focal-point-preview) .ui-dialog-titlebar-close {
	pointer-events: auto;
}

.ui-dialog .ui-dialog-titlebar {
	background: transparent !important;
}

.ui-dialog .ui-dialog-title {
	color: #333 !important;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick {
	background-color: #E5007D !important;
	background-image: none !important;
	-webkit-mask-image: url('/modules/custom/uv_admin/icons/close_focal.svg') !important;
	mask-image: url('/modules/custom/uv_admin/icons/close_focal.svg') !important;
	-webkit-mask-size: var(--gin-icon-size-close) var(--gin-icon-size-close) !important;
	mask-size: var(--gin-icon-size-close) var(--gin-icon-size-close) !important;
	-webkit-mask-repeat: no-repeat !important;
	mask-repeat: no-repeat !important;
	-webkit-mask-position: center center !important;
	mask-position: center center !important;
}

.ui-dialog.popup-dialog-class.ui-widget.ui-widget-content.ui-front {
	border-radius: 10px;
	border: 1px solid #DDD;
	background: #FFF;
	box-shadow: 0 4px 34.6px 28px rgba(0, 0, 0, 0.07);
}

.field--name-field-landingpage-name .form-item__description {
	max-width: none;
}

.landingpage-name-display {
	font-size: var(--gin-font-size-h2);
}

[class*="form-item--field-sections-"][class*="-subform-field-bild-"] {
	margin-top: 0;
}

.focal-point-help-text h3 {
	margin: 0 0 0 0;
}

.focal-point-help-text span {
	margin: 6px 0 0 0;
}

.fieldset[data-drupal-selector*="subform-field-media-type"] {
	margin: 0 0 0 0 !important;
}