/* ==========================================================================
   Berau Popup (TYPO3 Content-Element)
   --------------------------------------------------------------------------
   Markup:  <dialog class="berau-popup berau-popup--layout-a|b berau-popup--hell|dunkel|gruen"
                    data-popup-delay="5" data-popup-id="…" data-popup-repeat="session">
   Schriftgrößen bewusst in px (fix) – unabhängig von der rem/vw-Skalierung
   des Templates. Nur zwei Breakpoints: ab 768px Bild links / Text rechts,
   darunter gestapelt.

   Abgeleitet aus dem Canva-Layout (Bild 641px @300dpi -> 336px, Faktor ~0,52):
   Button-Text 14px  -> Fließtext 14px, Headline 40px (= .headline-md),
   Überzeile 18px. Event-Boxen (Inline-Datensätze) größer als im Layout:
   Titel 20px, Detailzeile 13px statt ~9px.
   ========================================================================== */

/* ---------- Farbvarianten (im Backend wählbar) ---------- */
.berau-popup {
	/* Default = hell */
	--popup-bg: var(--greens200, #f4ffd4);
	--popup-text: var(--greens500, #526c48);
	--popup-headline: var(--greens500, #526c48);
	/* Hinweis: #ff6200 auf hellem Grund = 2,9:1 (WCAG AA verlangt 4,5:1) – bewusst so gewählt */
	--popup-overline: var(--orange200, #ff6200);
	--popup-event-border: var(--greens500, #526c48);
	--popup-close-bg: rgba(82, 108, 72, 0.45);
	--popup-close-icon: var(--greens700, #2c3529);
	--popup-focus: var(--greens700, #2c3529);
}
.berau-popup--dunkel {
	--popup-bg: var(--greens700, #2c3529);
	--popup-text: var(--greens200, #f4ffd4);
	--popup-headline: var(--orange200, #ff6200);   /* 4,25:1 – ok für große Schrift */
	--popup-overline: var(--greens200, #f4ffd4);
	--popup-event-border: var(--orange200, #ff6200);
	--popup-close-bg: rgba(244, 255, 212, 0.12);
	--popup-close-icon: var(--orange200, #ff6200);
	--popup-focus: var(--greens200, #f4ffd4);
}
.berau-popup--gruen {
	--popup-bg: var(--greens500, #526c48);
	--popup-text: var(--greens200, #f4ffd4);
	/* Orange auf Grün hätte nur 1,95:1 -> Headline & Überzeile hell */
	--popup-headline: var(--greens200, #f4ffd4);
	--popup-overline: var(--greens200, #f4ffd4);
	--popup-event-border: var(--greens200, #f4ffd4);
	--popup-close-bg: var(--greens600, #42533c);
	--popup-close-icon: var(--greens200, #f4ffd4);
	--popup-focus: var(--greens200, #f4ffd4);
}

/* ---------- Dialog ---------- */
dialog.berau-popup {
	box-sizing: border-box;
	width: calc(100% - 32px);
	max-width: 840px;
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 24px;
	background: var(--popup-bg);
	color: var(--popup-text);
	overflow: auto;
	overscroll-behavior: contain;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.4s ease, transform 0.4s ease, overlay 0.4s ease allow-discrete, display 0.4s ease allow-discrete;
}
dialog.berau-popup:not([open]) {
	display: none;
}
dialog.berau-popup[open] {
	opacity: 1;
	transform: none;
}
@starting-style {
	dialog.berau-popup[open] {
		opacity: 0;
		transform: translateY(16px);
	}
}
dialog.berau-popup::backdrop {
	background: rgba(0, 0, 0, 0);
	transition: background-color 0.4s ease, overlay 0.4s ease allow-discrete, display 0.4s ease allow-discrete;
}
dialog.berau-popup[open]::backdrop {
	background: rgba(0, 0, 0, 0.55);
}
@starting-style {
	dialog.berau-popup[open]::backdrop {
		background: rgba(0, 0, 0, 0);
	}
}
html.berau-popup-open {
	overflow: hidden;
}

.berau-popup *,
.berau-popup *::before,
.berau-popup *::after {
	box-sizing: border-box;
}

.berau-popup__inner {
	display: flex;
	align-items: stretch;
	gap: 24px;
	padding: 24px;
}

/* ---------- Bild ---------- */
.berau-popup__media {
	flex: 0 0 336px;
	width: 336px;
	min-height: 400px;
	margin: 0;
	border-radius: 24px;
	overflow: hidden;
	position: relative;
}
.berau-popup__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ---------- Textbereich (RTE) ---------- */
.berau-popup__content {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 8px 8px 8px 0;
}
.berau-popup__rte {
	font-family: var(--fontfamily, 'Lexend'), sans-serif;
	font-feature-settings: 'ss01' on;
	color: var(--popup-text);
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.04em;
}
.berau-popup__rte > * {
	margin: 0;
	padding: 0;
}
.berau-popup__rte > * + * {
	margin-top: 12px;
}

/* Fließtext – Standard-Absatz im RTE */
.berau-popup__rte p,
.berau-popup__rte li {
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.04em;
}
.berau-popup__rte strong,
.berau-popup__rte b {
	font-weight: 600;
}
.berau-popup__rte a:not(.button) {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.berau-popup__rte a:not(.button)::after {
	display: none;
}

/* Überzeile – RTE-Absatzstil "Popup: Überzeile" */
.berau-popup__rte .popup-overline {
	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--popup-overline);
	padding-right: 48px; /* Platz für den Schließen-Button */
}

/* Headline – H2 im RTE (optional h3) */
.berau-popup__rte h2,
.berau-popup__rte h3,
.berau-popup__rte .headline-md {
	font-family: var(--fontfamilyneco, 'Neco Variable'), serif;
	font-weight: 500;
	font-size: 40px;
	line-height: 42px;
	letter-spacing: 0.02em;
	color: var(--popup-headline);
	text-transform: none;
}
.berau-popup__rte .popup-overline + h2,
.berau-popup__rte .popup-overline + h3 {
	margin-top: 8px;
}
.berau-popup__rte h2 + *,
.berau-popup__rte h3 + * {
	margin-top: 16px;
}
/* Headline ohne Überzeile: Platz für Schließen-Button */
.berau-popup__rte > h2:first-child,
.berau-popup__rte > h3:first-child {
	padding-right: 48px;
}

/* ---------- Events (Inline-Datensätze, kein RTE) ----------
   <ul class="berau-popup__events">
     <li class="berau-popup__event">
       <img class="berau-popup__event-icon" src="…" alt="" width="32" height="32">   (optional)
       <div class="berau-popup__event-text">
         <h3 class="berau-popup__event-title">[<a class="berau-popup__event-link" href="…">]Titel[</a>]</h3>
         <p class="berau-popup__event-detail">Detailzeile</p>
       </div>
     </li>
   </ul>
   Icon: SVG/PNG in der passenden Farbe, wird 1:1 angezeigt. */
.berau-popup__events {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.berau-popup__rte + .berau-popup__events {
	margin-top: 16px;
}
.berau-popup__events:first-child {
	margin-top: 0;
}
.berau-popup__event {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 64px;
	margin: 0;
	padding: 10px 16px 11px;
	border: 1.5px solid var(--popup-event-border);
	border-radius: 12px;
	color: var(--popup-text);
	font-family: var(--fontfamily, 'Lexend'), sans-serif;
	font-feature-settings: 'ss01' on;
}
.berau-popup__event::before,
.berau-popup__event::marker {
	content: none;
}
/* Nur die Breite ist fix – Höhe ergibt sich aus dem Seitenverhältnis
   (quadratische oder leicht hochformatige Icons) */
.berau-popup__event-icon {
	flex: 0 0 32px;
	width: 32px;
	height: auto;
	display: block;
}
.berau-popup__event-text {
	flex: 1 1 auto;
	min-width: 0;
}
.berau-popup__event-title {
	margin: 0;
	padding: 0;
	font-family: var(--fontfamilyneco, 'Neco Variable'), serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: 0.01em;
	color: inherit;
	text-transform: none;
}
.berau-popup__event-detail {
	margin: 2px 0 0;
	padding: 0;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: 0.03em;
}

/* Optionaler Link: ganze Box klickbar, Linktext = Titel */
.berau-popup__event-link,
.berau-popup__event-link:link,
.berau-popup__event-link:visited {
	color: inherit;
	text-decoration: none;
}
.berau-popup__event-link::after {
	content: '';
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	border-radius: 12px;
	background: none;
	transform: none;
	transition: none;
}
.berau-popup__event:has(.berau-popup__event-link) {
	transition: box-shadow 0.15s ease;
}
.berau-popup__event:has(.berau-popup__event-link):hover {
	box-shadow: inset 0 0 0 1.5px var(--popup-event-border);
}
.berau-popup__event:has(.berau-popup__event-link):hover .berau-popup__event-title {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
/* Fokusrahmen um die ganze Box statt nur um den Titel */
@supports selector(:has(*)) {
	.berau-popup .berau-popup__event-link:focus-visible {
		outline: none;
	}
	.berau-popup__event:has(.berau-popup__event-link:focus-visible) {
		outline: 3px dashed var(--popup-focus);
		outline-offset: 3px;
	}
}

.berau-popup__events + .berau-popup__rte {
	margin-top: 16px;
}

/* Buttons – Link-Stil "button" aus dem Template */
.berau-popup__rte p:has(> a.button) {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin-top: 16px;
}
.berau-popup__rte a.button {
	display: inline-block;
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	padding: 13px 20px;
	border-radius: 24px;
	letter-spacing: 0.14em;
	white-space: nowrap;
}

/* ---------- Schließen-Button ---------- */
.berau-popup__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--popup-close-bg);
	color: var(--popup-close-icon);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.berau-popup__close svg {
	width: 22px;
	height: 22px;
	display: block;
}
.berau-popup__close:hover {
	transform: scale(1.06);
}

/* Fokus sichtbar – Farbe je Variante */
.berau-popup :focus-visible,
.berau-popup__close:focus-visible {
	outline: 3px dashed var(--popup-focus);
	outline-offset: 3px;
}
.berau-popup__rte a.button:focus-visible {
	outline: 3px dashed var(--popup-focus);
	outline-offset: 3px;
}
dialog.berau-popup:focus,
dialog.berau-popup:focus-visible {
	outline: none; /* Dialog selbst erhält beim Öffnen den Fokus */
}

/* ---------- Layout B (Silvester): Inhalt oben ausrichten ---------- */
.berau-popup--layout-b .berau-popup__content {
	justify-content: flex-start;
	padding-top: 4px;
}

/* ---------- Breakpoint: gestapelt unter 768px ---------- */
@media (max-width: 767px) {
	dialog.berau-popup {
		width: calc(100% - 24px);
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
		border-radius: 20px;
	}
	.berau-popup__inner {
		flex-direction: column;
		gap: 20px;
		padding: 16px 16px 20px;
	}
	.berau-popup__media {
		flex: 0 0 auto;
		width: 100%;
		min-height: 0;
		aspect-ratio: 16 / 10;
		max-height: 34vh;
		border-radius: 16px;
	}
	.berau-popup__content {
		padding: 0;
	}
	.berau-popup__close {
		top: 24px;
		right: 24px;
		background: var(--popup-bg);
	}
	.berau-popup__rte .popup-overline {
		font-size: 16px;
		line-height: 22px;
		padding-right: 0;
	}
	.berau-popup__rte > h2:first-child,
	.berau-popup__rte > h3:first-child {
		padding-right: 0;
	}
	.berau-popup__rte h2,
	.berau-popup__rte h3,
	.berau-popup__rte .headline-md {
		font-size: 32px;
		line-height: 34px;
	}
	.berau-popup__rte p,
	.berau-popup__rte li {
		font-size: 15px;
		line-height: 22px;
	}
	.berau-popup__event {
		gap: 12px;
		padding: 10px 12px 11px;
	}
	.berau-popup__event-title {
		font-size: 19px;
		line-height: 23px;
	}
	.berau-popup__event-detail {
		font-size: 14px;
	}
}

/* ---------- Barrierefreiheits-Modi des Templates ---------- */
/* "Schriftgröße erhöhen" */
html.textsize .berau-popup__rte p,
html.textsize .berau-popup__rte li,
html.textsize .berau-popup__event-detail {
	font-size: 17px;
	line-height: 26px;
}
html.textsize .berau-popup__rte .popup-overline {
	font-size: 20px;
	line-height: 28px;
}
html.textsize .berau-popup__event-title {
	font-size: 22px;
	line-height: 28px;
}
html.textsize .berau-popup__rte a.button {
	font-size: 16px;
	line-height: 24px;
}

/* "Kontrastmodus" des Templates + Systemeinstellung "mehr Kontrast" */
html.schwarzweiss .berau-popup {
	--popup-bg: #ffffff;
	--popup-text: #000000;
	--popup-headline: #000000;
	--popup-overline: #000000;
	--popup-event-border: #000000;
	--popup-close-bg: #ffffff;
	--popup-close-icon: #000000;
	--popup-focus: #000000;
}
html.schwarzweiss .berau-popup__close {
	border: 2px solid #000000;
}
@media (prefers-contrast: more) {
	.berau-popup {
		--popup-bg: #ffffff;
		--popup-text: #000000;
		--popup-headline: #000000;
		--popup-overline: #000000;
		--popup-event-border: #000000;
		--popup-close-bg: #ffffff;
		--popup-close-icon: #000000;
		--popup-focus: #000000;
	}
	.berau-popup__close {
		border: 2px solid #000000;
	}
	.berau-popup__rte a.button {
		background: #000000;
		border-color: #000000;
		color: #ffffff;
	}
}
@media (forced-colors: active) {
	dialog.berau-popup {
		border: 2px solid CanvasText;
	}
	.berau-popup__event {
		border-color: CanvasText;
	}
	.berau-popup__close {
		border: 2px solid ButtonText;
	}
}

/* "Animationen stoppen" + Systemeinstellung reduzierte Bewegung */
html.noanimation dialog.berau-popup,
html.noanimation dialog.berau-popup::backdrop,
html.noanimation .berau-popup__close {
	transition: none;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	dialog.berau-popup,
	dialog.berau-popup::backdrop,
	.berau-popup__close {
		transition: none;
		transform: none;
	}
}