/* =====================================================================
   WIENINGER · Altersnachfrage  —  wgn-agegate.css
   Vollflächiges Overlay (dunkles Wein-Braun), zentriertes Panel im
   Papier-Ton. Editor-Modus (.is-editor): statisch, kein Overlay.
   Tokens/Buttons aus wgn-ui.css. rem/em/%/clamp · Safari-gehärtet.
   ===================================================================== */

.wgn-agegate {
	position: fixed; inset: 0; z-index: 99999;
	display: flex; align-items: center; justify-content: center;
	padding: clamp(1rem, 4vw, 2.5rem);
	background: rgba(41, 18, 14, .95); /* Fallback ältere Browser */
	background: color-mix(in srgb, var(--wgn-dark) 88%, black);
	font-family: var(--wgn-sans);
	-webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.wgn-agegate * { box-sizing: border-box; }
/* Einblenden als Animation (nicht Transition): Endzustand = sichtbar, auch wenn
   der Browser Frames drosselt (Hintergrund-Tab) – die Animation ist nur Deko. */
.wgn-agegate.is-open { animation: wgn-agegate-in .35s var(--wgn-ease); }
.wgn-agegate.is-open .wgn-agegate__panel { animation: wgn-agegate-up .35s var(--wgn-ease); }
.wgn-agegate.is-closing { opacity: 0; transition: opacity .35s var(--wgn-ease); }
.wgn-agegate[hidden] { display: none; }
@keyframes wgn-agegate-in { from { opacity: 0; } }
@keyframes wgn-agegate-up { from { transform: translateY(.75rem); } }

/* Seite hinter dem Gate nicht scrollbar */
html.wgn-agegate-lock, html.wgn-agegate-lock body { overflow: hidden; }

.wgn-agegate__panel {
	width: min(30rem, 100%);
	max-height: min(90svh, 90vh); overflow-y: auto; -webkit-overflow-scrolling: touch;
	background: var(--wgn-paper); border-radius: .4rem; box-shadow: var(--wgn-shadow);
	padding: clamp(1.75rem, 5vw, 3rem);
	text-align: center;
}

.wgn-agegate__logo { max-width: min(11rem, 60%); height: auto; margin: 0 auto 1.25rem; display: block; }
.wgn-agegate__title { font-family: var(--wgn-serif); font-weight: 500; letter-spacing: -.01em; line-height: 1.15; font-size: clamp(1.4rem, 3.5vw, 1.9rem); margin: 0 0 .75rem; color: var(--wgn-ink); }
.wgn-agegate__text { margin: 0 0 1.5rem; color: var(--wgn-ink-soft); font-size: .98rem; line-height: 1.6; }

.wgn-agegate__actions { display: flex; flex-direction: column; gap: .6rem; }
/* Die Buttons sind echte <button> → Elementor-Kit-Globalstyles (z. B.
   `.elementor-kit-N button`) überstylen .wgn-btn. Hier scoped re-deklarieren. */
.wgn-agegate__actions .wgn-btn {
	font-family: var(--wgn-sans); font-weight: 600; font-size: .82rem; line-height: 1.1;
	letter-spacing: .1em; text-transform: uppercase;
	padding: .95em 1.9em; border-radius: .2rem; border: 1.5px solid transparent;
}
.wgn-agegate__actions .wgn-btn--primary { background: var(--wgn-red); color: #fff; border-color: var(--wgn-red); }
.wgn-agegate__actions .wgn-btn--primary:hover { background: var(--wgn-red-hover); border-color: var(--wgn-red-hover); color: #fff; }
/* Ghost-Button steht hier auf hellem Grund → dunkle Variante */
.wgn-agegate__actions .wgn-btn--ghost { background: transparent; color: var(--wgn-ink); border-color: var(--wgn-line); }
.wgn-agegate__actions .wgn-btn--ghost:hover { background: var(--wgn-ink); color: #fff; border-color: var(--wgn-ink); }
@media (min-width: 560px) {
	.wgn-agegate__actions { flex-direction: row; justify-content: center; }
}

.wgn-agegate__note { margin: 1.25rem 0 0; font-size: .74rem; letter-spacing: .04em; color: var(--wgn-ink-soft); }

/* ---------- Editor-/Vorschau-Modus: statisch statt Overlay ---------- */
.wgn-agegate.is-editor {
	position: static; opacity: 1; background: var(--wgn-dark);
	border-radius: .4rem; padding: clamp(1.5rem, 4vw, 2.5rem);
}
.wgn-agegate.is-editor .wgn-agegate__panel { transform: none; }
.wgn-agegate__editorhint { margin: .5rem 0 0; font-size: .78rem; color: var(--wgn-ink-soft); font-family: var(--wgn-sans); }

@media (prefers-reduced-motion: reduce) {
	.wgn-agegate, .wgn-agegate__panel { animation: none !important; transition: none !important; }
}