/**
 * plate_modals — Frontend-Stylesheet
 * =============================================================================
 * Gestaltet das Markup aus EXT:plate_modals/Resources/Private/Partials/Modal/*.
 *
 * GELTUNGSBEREICH (harte Regel): Jede Regel dieser Datei ist auf `atomic-modal`
 * bzw. `.plate-modal…` gescopet. KEINE Regel auf `body`, `.frame`, Header, Nav
 * oder auf `h1`–`h6` ausserhalb des Modals — ein Modal ist kein Inhaltselement
 * und fasst das Frame-System nicht an.
 *
 * PRO-DATENSATZ-WERTE kommen ausschliesslich als Custom Properties im
 * style-Attribut des <dialog> (vom PHP-Style-Builder validiert):
 *
 *   --am-bg              Grundflaeche                      (#1c1f1e)
 *   --am-overlay         Deckfarbe ueber Textur/Bild        (transparent)
 *   --am-color           Textfarbe                          (#fff)
 *   --am-accent          Akzent: CTA-Flaeche, RTE-Links     (var(--bs-primary))
 *   --am-font-headline   Font-Stack der Headline            (Theme-h2 → Body)
 *   --am-font-text       Font-Stack des Fliesstextes        (Theme-Body)
 *   --am-headline-size   Headline-Grundgroesse MIT Einheit  (2.25rem)
 *   --am-text-size       Text-Grundgroesse MIT Einheit      (1.0625rem)
 *
 * Wichtig fuer den Style-Builder: Groessen IMMER mit Einheit ausgeben
 * (`--am-headline-size:34px`), sonst ist der clamp()-Ausdruck ungueltig und die
 * Deklaration faellt lautlos auf den Fallback zurueck.
 *
 * Weitere, optionale Slots (nicht im TCA, fuer Theme-Feinschliff):
 *   --am-backdrop, --am-radius, --am-shadow, --am-pad, --am-edge,
 *   --am-width, --am-z-index, --am-duration,
 *   --am-accent-contrast, --am-headline-transform, --am-headline-spacing
 *
 * Fallbacks zeigen bewusst auf die plate_bootstrap-Slots
 * (`--bs-body-font-family`, `--bs-h2-font-family`, `--bs-primary`, …) — ein
 * ungepflegtes Modal sieht damit aus wie der Rest der Site. Werte, fuer die es
 * einen Settings-Slot gibt, werden hier NICHT wiederholt.
 *
 * Medienabfragen statt Container-Queries: Die Groesse eines Modals haengt am
 * VIEWPORT (Top-Layer), nicht an einem Eltern-Container — ein `container-type`
 * im Vorfahren wuerde zudem den Bezugsrahmen fuer `position: fixed` kapern
 * (Skill `javascript`, Abschnitt 6).
 */

/* ---------------------------------------------------------------- Host ---- */

atomic-modal {
	display: contents;
}

/* -------------------------------------------------------------- Dialog ---- */

.plate-modal {
	/* Tokens (intern, aus den --am-*-Werten abgeleitet) */
	--pm-edge: var(--am-edge, clamp(0.75rem, 3vw, 1.5rem));
	--pm-pad: var(--am-pad, clamp(1.5rem, 4.5vw, 2.5rem));
	--pm-radius: var(--am-radius, var(--bs-border-radius-lg, 0.5rem));
	--pm-duration: var(--am-duration, 0.32s);
	--pm-slide: 2rem;
	--pm-width: 34rem;
	--pm-headline-size: var(--am-headline-size, 2.25rem);
	--pm-text-size: var(--am-text-size, 1.0625rem);
	--pm-accent: var(--am-accent, var(--bs-primary, #d7262b));
	--pm-border-color: var(--am-border-color, currentColor);
	--pm-shadow-frame: 0 0 0 0 transparent;
	--pm-shadow-drop: 0 1.5rem 3rem rgba(0, 0, 0, 0.45);

	position: fixed;
	/*
	 * PFLICHT, nicht Kosmetik: Das UA-Stylesheet setzt an <dialog> `left: 0`
	 * UND `right: 0`. Ohne diesen Reset ist jede rechts verankerte Position
	 * ueberbestimmt — in LTR gewinnt `left`, und ein `top-right`/`bottom-right`
	 * landet am LINKEN Rand (gemessen 09/2026 bei 1440px).
	 */
	inset: auto;
	z-index: var(--am-z-index, 10000010); /* ueber Sticky-Header (plate_layoutces nutzt bis 9999999) */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: min(var(--am-width, var(--pm-width)), calc(100vw - 2 * var(--pm-edge)));
	max-width: none;
	max-height: calc(100dvh - 2 * var(--pm-edge));
	margin: 0;
	padding: 0;
	overflow: hidden;
	/* Rahmen: Breite 0 = keiner. Die Flaechen-Ebenen (__bg/__overlay) liegen in der
	   Padding-Box, der Rahmen also sauber aussen um Textur/Bild herum. */
	border: var(--am-border-width, 0px) solid var(--pm-border-color);
	border-radius: var(--pm-radius);
	background-color: var(--am-bg, #1c1f1e);
	/* Zwei Schichten: Haarlinien des Rahmen-Stils + Schlagschatten der Variante.
	   `--am-shadow` (Theme-Slot) ersetzt weiterhin den Schlagschatten komplett. */
	box-shadow: var(--pm-shadow-frame), var(--am-shadow, var(--pm-shadow-drop));
	color: var(--am-color, #fff);
	font-family: var(--am-font-text, var(--bs-body-font-family, system-ui, sans-serif));
}

.plate-modal:not([open]) {
	display: none;
}

/*
 * Der Dialog bekommt beim Oeffnen programmatisch den Fokus (damit Screenreader
 * ihn ansagen und TAB im Inhalt startet). Chromium wertet diesen Fokus als
 * :focus-visible und malte einen Rahmen um das ganze Modal — der Dialog ist
 * aber kein Bedienelement. Sichtbare Fokusringe tragen Close-Button, CTA und
 * Links im Inhalt.
 */
.plate-modal:focus,
.plate-modal:focus-visible {
	outline: none;
}

/* --------------------------------------------------------------- Groesse --- */

.plate-modal--size-sm { --pm-width: 24rem; }
.plate-modal--size-md { --pm-width: 34rem; }
.plate-modal--size-lg { --pm-width: 48rem; }

/* ------------------------------------------------------------- Position --- */

.plate-modal--pos-center {
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
}

.plate-modal--pos-top {
	inset-block-start: var(--pm-edge);
	inset-inline-start: 50%;
	translate: -50% 0;
}

.plate-modal--pos-bottom {
	inset-block-end: var(--pm-edge);
	inset-inline-start: 50%;
	translate: -50% 0;
}

.plate-modal--pos-top-left {
	inset-block-start: var(--pm-edge);
	inset-inline-start: var(--pm-edge);
}

.plate-modal--pos-top-right {
	inset-block-start: var(--pm-edge);
	inset-inline-end: var(--pm-edge);
}

.plate-modal--pos-bottom-left {
	inset-block-end: var(--pm-edge);
	inset-inline-start: var(--pm-edge);
}

.plate-modal--pos-bottom-right {
	inset-block-end: var(--pm-edge);
	inset-inline-end: var(--pm-edge);
}

/* Randpositionen wirken groesser, wenn sie etwas weiter einfahren. */
.plate-modal--pos-top,
.plate-modal--pos-bottom,
.plate-modal--pos-top-left,
.plate-modal--pos-top-right,
.plate-modal--pos-bottom-left,
.plate-modal--pos-bottom-right {
	--pm-slide: 3rem;
}

/* --------------------------------------------------------------- Mobil ---- */
/* Unter 576px werden Ecken-Positionen zu vollbreiten Bannern oben bzw. unten. */

@media (max-width: 575.98px) {
	.plate-modal {
		--pm-pad: var(--am-pad, 1.25rem);
		width: calc(100vw - 2 * var(--pm-edge));
		inset-inline: var(--pm-edge);
		translate: none;
	}

	.plate-modal--pos-top,
	.plate-modal--pos-top-left,
	.plate-modal--pos-top-right {
		inset-block: var(--pm-edge) auto;
	}

	.plate-modal--pos-bottom,
	.plate-modal--pos-bottom-left,
	.plate-modal--pos-bottom-right {
		inset-block: auto var(--pm-edge);
	}

	.plate-modal--pos-center {
		inset-block-start: 50%;
		translate: 0 -50%;
	}
}

/* -------------------------------------------------------------- Ebenen ---- */
/*
 * 0 Flaeche/Bild  1 Overlay  2 Inhalt  3 Stretched-Link  4 Links/CTA  5 Close
 * Der Stretched-Link liegt UEBER dem Inhalt (sonst waere „ganzes Modal
 * verlinkt" nur am Rand klickbar); RTE-Links, CTA und Schliessen-Button holen
 * sich per z-index die Klickbarkeit zurueck.
 */

.plate-modal__bg,
.plate-modal__overlay,
.plate-modal__stretch {
	position: absolute;
	inset: 0;
}

.plate-modal__bg {
	z-index: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}

.plate-modal__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.plate-modal--texture-chalkboard .plate-modal__bg {
	background-image: url("../Images/Textures/chalkboard.webp");
	background-position: center;
	background-size: cover;
}

.plate-modal__overlay {
	z-index: 1;
	background: var(--am-overlay, transparent);
	pointer-events: none;
}

.plate-modal__body {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--pm-pad);
}

/*
 * Platz fuer den Schliessknopf: NICHT ueber ein pauschal groesseres
 * padding-top (das reisst auf schmalen Viewports ein sichtbares Loch), sondern
 * nur am ersten Kind — dann bleibt der Innenabstand rundum gleich.
 */
.plate-modal__body > :first-child {
	padding-inline-end: 3rem;
}

.plate-modal--align-center .plate-modal__body > :first-child {
	padding-inline: 3rem;
}

.plate-modal__stretch {
	z-index: 3;
	border-radius: inherit;
}

.plate-modal--align-center .plate-modal__body {
	text-align: center;
}

/* ---------------------------------------------------------- Typografie ---- */
/*
 * Headline ist semantisch ein <h2>, bekommt Groesse/Schnitt/Farbe aber
 * ausschliesslich aus den --am-*-Werten: die Klassenregel (0,1,0) schlaegt die
 * Elementregeln aus atomic-bootstrap/base.css und plate_bootstrap/_header.scss
 * (je 0,0,1) unabhaengig von der Ladereihenfolge. text-transform/letter-spacing
 * werden bewusst neutralisiert, damit eine Theme-Versalregel fuer h2 nicht in
 * die Tafel-Optik durchschlaegt; beides bleibt ueber eigene Slots setzbar.
 * Die Groessen sind proportional zum Redakteurswert responsiv — dadurch ist der
 * clamp()-Ausdruck fuer JEDEN Wert gueltig (Minimum kann nie ueber das Maximum
 * steigen).
 */

.plate-modal .plate-modal__headline {
	margin: 0 0 0.6em;
	color: var(--am-color, #fff);
	font-size: clamp(
		calc(var(--pm-headline-size) * 0.62),
		calc(var(--pm-headline-size) * 0.45 + 3.2vw),
		var(--pm-headline-size)
	);
	line-height: 1.14;
	letter-spacing: var(--am-headline-spacing, normal);
	text-transform: var(--am-headline-transform, none);
	text-wrap: balance;
}

/*
 * Schrift der Headline. „Theme-Ueberschrift" laesst sich NICHT als Variable
 * ausdruecken: plate_bootstrap deklariert `--bs-h2-font-family` nirgends, es
 * LIEST sie nur (`h2 { font-family: var(--bs-h2-font-family, <Setting>) }`) —
 * der Settings-Wert steckt im kompilierten Fallback der h2-Regel. Eine eigene
 * font-family hier wuerde diese Regel ueberstimmen und mit der leeren Variable
 * auf die Body-Schrift fallen (gemessen 09/2026: Seite Cormorant, Modal DM Sans).
 * Deshalb: bei `theme-heading` Familie UND Gewicht NICHT setzen — die Headline
 * ist ein <h2>, die Theme-Regel greift von selbst.
 */
.plate-modal:not(.plate-modal--hfont-theme-heading) .plate-modal__headline {
	font-family: var(--am-font-headline, var(--bs-body-font-family, system-ui, sans-serif));
	font-weight: var(--am-headline-weight, 700);
}

.plate-modal__text {
	color: var(--am-color, #fff);
	font-family: var(--am-font-text, var(--bs-body-font-family, system-ui, sans-serif));
	font-size: clamp(
		calc(var(--pm-text-size) * 0.85),
		calc(var(--pm-text-size) * 0.72 + 0.9vw),
		var(--pm-text-size)
	);
	line-height: 1.55;
}

/* Kurze, oft zentrierte Hinweistexte: eine vom Theme geerbte automatische
   Silbentrennung ("Septem-ber") stoert hier mehr, als sie nuetzt. Lange Woerter
   brechen notfalls um, statt den Dialog zu sprengen. Ueberschreibbar. */
/* Auch auf den Kindern: Themes setzen `hyphens: auto` gern direkt auf `p`, und
   eine geerbte Eigenschaft verliert gegen jede direkte Regel. */
.plate-modal__headline,
.plate-modal__text,
.plate-modal__text * {
	hyphens: var(--am-hyphens, manual);
	overflow-wrap: break-word;
}

/* Kein einzelnes Wort in der letzten Zeile (wo der Browser es kann). */
.plate-modal__text p {
	text-wrap: pretty;
}

.plate-modal__text > :last-child {
	margin-bottom: 0;
}

.plate-modal__text p {
	margin: 0 0 0.75em;
}

/*
 * RTE-Links: Farbe bleibt die Textfarbe, der Akzent sitzt in der Unterstreichung.
 * Ein Akzentton als Linkfarbe reisst auf dunkler Flaeche regelmaessig unter
 * 4.5:1 (gemessen: #d7262b auf #14181a = 3.4:1). Wer den Akzent als Linkfarbe
 * will, setzt --am-link-color bewusst.
 */
.plate-modal__text a {
	position: relative;
	z-index: 4;
	color: var(--am-link-color, inherit);
	text-decoration: underline;
	text-decoration-color: var(--pm-accent);
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.2em;
}

.plate-modal__text a:hover,
.plate-modal__text a:focus-visible {
	text-decoration-thickness: 0.2em;
}

/* ------------------------------------------------------------------ CTA --- */
/*
 * Form/Radius/Padding kommen aus der Bootstrap-Klasse `.btn` (plate_bootstrap).
 * Hier werden nur die --bs-btn-*-Variablen umgelegt — nicht die Eigenschaften,
 * sonst waere die Button-Optik des Themes ausgehebelt.
 */

.plate-modal__actions {
	margin-top: 1.5rem;
}

.plate-modal .plate-modal__cta {
	position: relative;
	z-index: 4;
	--bs-btn-color: var(--am-accent-contrast, #fff);
	--bs-btn-bg: var(--pm-accent);
	--bs-btn-border-color: var(--pm-accent);
	--bs-btn-hover-color: var(--am-accent-contrast, #fff);
	--bs-btn-hover-bg: color-mix(in srgb, var(--pm-accent) 85%, #000);
	--bs-btn-hover-border-color: color-mix(in srgb, var(--pm-accent) 85%, #000);
	--bs-btn-active-color: var(--am-accent-contrast, #fff);
	--bs-btn-active-bg: color-mix(in srgb, var(--pm-accent) 75%, #000);
	--bs-btn-active-border-color: color-mix(in srgb, var(--pm-accent) 75%, #000);
	--bs-btn-focus-shadow-rgb: 255, 255, 255;
	max-width: 100%;
}

.plate-modal__cta--inactive {
	cursor: default;
}

/* -------------------------------------------------------------- Close ----- */

.plate-modal__close {
	position: absolute;
	z-index: 5;
	inset-block-start: 0.25rem;
	inset-inline-end: 0.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	line-height: 1;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.plate-modal__close:hover,
.plate-modal__close:focus-visible {
	background: rgba(127, 127, 127, 0.28);
}

.plate-modal__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.plate-modal__close-icon {
	width: 22px;
	height: 22px;
	pointer-events: none;
}

/* ------------------------------------------------- Rahmen & Schatten ---- */

.plate-modal--shadow-none   { --pm-shadow-drop: 0 0 0 0 transparent; }
.plate-modal--shadow-strong { --pm-shadow-drop: 0 2.25rem 4.5rem rgba(0, 0, 0, 0.62), 0 0.6rem 1.25rem rgba(0, 0, 0, 0.45); }

/*
 * Plastischer Rahmen (Tafel-/Bilderrahmen): Das Licht kommt von oben links —
 * obere/linke Kante heller, untere/rechte dunkler, alles aus der EINEN
 * Rahmenfarbe gemischt. Aussen eine dunkle Haarlinie (der Rahmen loest sich vom
 * Untergrund), innen wirft der Rahmen einen Schatten auf die vertieft liegende
 * Flaeche. Der Innenschatten sitzt auf __overlay: ein `inset` am <dialog> selbst
 * laege UNTER Textur/Bild und waere unsichtbar.
 */
.plate-modal--frame-raised {
	border-top-color: color-mix(in srgb, var(--pm-border-color) 74%, #fff);
	border-left-color: color-mix(in srgb, var(--pm-border-color) 88%, #fff);
	border-right-color: color-mix(in srgb, var(--pm-border-color) 80%, #000);
	border-bottom-color: color-mix(in srgb, var(--pm-border-color) 62%, #000);
	--pm-shadow-frame: 0 0 0 1px rgba(0, 0, 0, 0.55);
}

.plate-modal--frame-raised .plate-modal__overlay {
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.6),
		inset 0 4px 10px rgba(0, 0, 0, 0.55),
		inset 4px 0 8px rgba(0, 0, 0, 0.3),
		inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}

.plate-modal--hshadow-soft .plate-modal__headline {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.plate-modal--hshadow-strong .plate-modal__headline {
	text-shadow: 0 2px 3px rgba(0, 0, 0, 0.8), 0 0 1.1em rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------ Backdrop ---- */

.plate-modal::backdrop {
	background: var(--am-backdrop, rgba(12, 14, 13, 0.62));
	-webkit-backdrop-filter: blur(var(--am-backdrop-blur, 2px));
	backdrop-filter: blur(var(--am-backdrop-blur, 2px));
}

/* ------------------------------------------------------------- Effekte ---- */
/*
 * Die Ein-Animation laeuft ueber das native [open]-Attribut; die Aus-Animation
 * schaltet die Komponente per [data-state="closing"] und ruft dialog.close()
 * erst danach auf.
 */

@keyframes pm-fade-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes pm-fade-out   { from { opacity: 1; } to { opacity: 0; } }
@keyframes pm-zoom-in    { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes pm-zoom-out   { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.96); } }
@keyframes pm-up-in      { from { opacity: 0; transform: translateY(var(--pm-slide)); } to { opacity: 1; transform: translateY(0); } }
@keyframes pm-up-out     { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(var(--pm-slide)); } }
@keyframes pm-down-in    { from { opacity: 0; transform: translateY(calc(-1 * var(--pm-slide))); } to { opacity: 1; transform: translateY(0); } }
@keyframes pm-down-out   { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(calc(-1 * var(--pm-slide))); } }
@keyframes pm-backdrop-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pm-backdrop-out { from { opacity: 1; } to { opacity: 0; } }

atomic-modal[effect="fade"] .plate-modal[open]:not([data-state="closing"]) { animation: pm-fade-in var(--pm-duration) ease-out; }
atomic-modal[effect="fade"] .plate-modal[data-state="closing"]             { animation: pm-fade-out var(--pm-duration) ease-in forwards; }

atomic-modal[effect="zoom"] .plate-modal[open]:not([data-state="closing"]) { animation: pm-zoom-in var(--pm-duration) cubic-bezier(0.22, 1, 0.36, 1); }
atomic-modal[effect="zoom"] .plate-modal[data-state="closing"]             { animation: pm-zoom-out var(--pm-duration) ease-in forwards; }

atomic-modal[effect="slide-up"] .plate-modal[open]:not([data-state="closing"]) { animation: pm-up-in var(--pm-duration) cubic-bezier(0.22, 1, 0.36, 1); }
atomic-modal[effect="slide-up"] .plate-modal[data-state="closing"]             { animation: pm-up-out var(--pm-duration) ease-in forwards; }

atomic-modal[effect="slide-down"] .plate-modal[open]:not([data-state="closing"]) { animation: pm-down-in var(--pm-duration) cubic-bezier(0.22, 1, 0.36, 1); }
atomic-modal[effect="slide-down"] .plate-modal[data-state="closing"]             { animation: pm-down-out var(--pm-duration) ease-in forwards; }

/* ::backdrop erbt die Custom Properties erst in neueren Engines vom Dialog —
   deshalb hier ein var()-Fallback, sonst faellt die ganze Deklaration aus. */
atomic-modal:not([effect="none"]) .plate-modal[open]:not([data-state="closing"])::backdrop { animation: pm-backdrop-in var(--pm-duration, 0.32s) ease-out; }
atomic-modal:not([effect="none"]) .plate-modal[data-state="closing"]::backdrop             { animation: pm-backdrop-out var(--pm-duration, 0.32s) ease-in forwards; }

@media (prefers-reduced-motion: reduce) {
	.plate-modal,
	.plate-modal::backdrop,
	.plate-modal__close {
		animation: none !important;
		transition: none !important;
	}
}