/* Schnellstart-Wegweiser – Child-Theme css/schnellstart.css (gehört zu js/schnellstart.js) */

/* Auslöser unter den Hero-Buttons */
a.brwk-qs-trigger {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	flex-wrap: wrap;
	padding: 6px 18px;
	border: 1px dashed rgba(216, 121, 231, .55);
	border-radius: 999px;
	background: rgba(13, 13, 20, .45);
	color: #f4f4fd;
	font-size: 15px;
	line-height: 1.6;
	letter-spacing: .5px;
	text-decoration: none;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: border-color .2s, background-color .2s;
}
a.brwk-qs-trigger strong {
	color: #d879e7;
	font-weight: inherit;
}
a.brwk-qs-trigger:hover,
a.brwk-qs-trigger:focus-visible {
	border-style: solid;
	border-color: #d879e7;
	background: rgba(156, 63, 171, .25);
}

/* Seite hinter dem Dialog nicht scrollen */
html.brwk-qs-lock,
html.brwk-qs-lock body {
	overflow: hidden;
}

/* Dialog */
dialog.brwk-qs {
	box-sizing: border-box;
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100dvh - 48px);
	margin: auto;
	padding: 40px 36px 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid rgba(156, 63, 171, .6);
	border-radius: 16px;
	background: #14141d;
	color: #e8e6f0;
	font-family: "Sans Flex Regular", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
}
dialog.brwk-qs::backdrop {
	background: rgba(8, 8, 12, .82);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
dialog.brwk-qs[open] {
	animation: brwk-qs-in .25s ease-out;
}
dialog.brwk-qs.is-step .brwk-qs-body {
	animation: brwk-qs-step .25s ease-out;
}
@keyframes brwk-qs-in {
	from { opacity: 0; transform: translateY(12px) scale(.98); }
	to { opacity: 1; transform: none; }
}
@keyframes brwk-qs-step {
	from { opacity: 0; transform: translateX(10px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	dialog.brwk-qs[open],
	dialog.brwk-qs.is-step .brwk-qs-body { animation: none; }
}

.brwk-qs *,
.brwk-qs *::before,
.brwk-qs *::after { box-sizing: border-box; }

.brwk-qs-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #b9b5c8;
	font-size: 28px;
	line-height: 40px;
	cursor: pointer;
}
.brwk-qs-close:hover,
.brwk-qs-close:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; }

.brwk-qs-eyebrow {
	margin: 0 0 6px;
	padding: 0;
	color: #d879e7;
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.brwk-qs-title {
	margin: 0 0 8px;
	padding: 0;
	color: #fff;
	font-family: "Sans Flex Regular", sans-serif;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.25;
	outline: none;
}
.brwk-qs-intro,
.brwk-qs-text {
	margin: 0 0 14px;
	padding: 0;
	color: #cfcbdc;
}
.brwk-qs-intro { margin-bottom: 20px; }

/* Antwort-Kacheln */
.brwk-qs-options {
	display: grid;
	gap: 10px;
	margin-top: 18px;
}
.brwk-qs-options--grid { grid-template-columns: 1fr 1fr; }
.brwk-qs-option {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	width: 100%;
	padding: 14px 18px;
	border: 1px solid rgba(156, 63, 171, .45);
	border-radius: 12px;
	background: rgba(156, 63, 171, .08);
	color: #f4f4fd;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s, background-color .15s, transform .15s;
}
.brwk-qs-option:hover,
.brwk-qs-option:focus-visible {
	border-color: #d879e7;
	background: rgba(156, 63, 171, .22);
	outline: none;
	transform: translateX(3px);
}
.brwk-qs-option-label { font-size: 17px; line-height: 1.35; }
.brwk-qs-option-hint { color: #a9a4bb; font-size: 14px; line-height: 1.4; }

/* Termin-Karte */
.brwk-qs-events {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.brwk-qs-event {
	margin: 6px 0 16px;
	padding: 16px 18px;
	border-left: 3px solid #9c3fab;
	border-radius: 0 12px 12px 0;
	background: rgba(156, 63, 171, .1);
}
.brwk-qs-events .brwk-qs-event { margin: 6px 0 12px; }
.brwk-qs-event p { margin: 0; padding: 0; }
.brwk-qs-event-label {
	color: #d879e7;
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.brwk-qs-event-date { color: #fff; font-size: 19px; line-height: 1.4; }
.brwk-qs-event-name { margin-bottom: 12px !important; color: #b9b5c8; font-size: 14px; }

/* Buttons */
.brwk-qs-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 6px 0 4px;
}
.brwk-qs-btn {
	display: inline-block;
	padding: 6px 20px;
	border: 1px solid #9c3fab;
	border-radius: 24px;
	background: transparent;
	color: #f4f4fd !important;
	font: inherit;
	font-size: 15px;
	line-height: 1.8;
	letter-spacing: 1px;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color .15s;
}
.brwk-qs-btn:hover,
.brwk-qs-btn:focus-visible { background: rgba(156, 63, 171, .3); }
.brwk-qs-btn--primary {
	background: linear-gradient(110deg, #9c3fab 0%, #9c3fab 48%, #f2a1ff 100%);
	background-size: 200% 100%;
}
.brwk-qs-btn--primary:hover,
.brwk-qs-btn--primary:focus-visible { background-position: 100% 0; background-color: #9c3fab; }

.brwk-qs-first {
	display: inline-block;
	margin-top: 14px;
	color: #d879e7 !important;
	font-size: 15px;
}

.brwk-qs-nav {
	display: flex;
	justify-content: space-between;
	margin-top: 18px;
}
.brwk-qs-back {
	padding: 4px 0;
	border: 0;
	background: none;
	color: #a9a4bb;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}
.brwk-qs-back::before { content: "← "; }
.brwk-qs-back.brwk-qs-restart { margin-left: auto; }
.brwk-qs-back.brwk-qs-restart::before { content: "↺ "; }
.brwk-qs-back:hover,
.brwk-qs-back:focus-visible { color: #fff; }

.brwk-qs-foot {
	margin: 22px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .08);
	color: #a9a4bb;
	font-size: 14px;
	text-align: center;
}
.brwk-qs-foot a { color: #d879e7 !important; }

/* Mobil: bildschirmfüllend */
@media (max-width: 600px) {
	dialog.brwk-qs {
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		margin: 0;
		padding: 56px 20px 20px;
		border: 0;
		border-radius: 0;
	}
	.brwk-qs-title { font-size: 23px; }
	.brwk-qs-options--grid,
	.brwk-qs-events { grid-template-columns: 1fr; }
	a.brwk-qs-trigger { font-size: 14px; border-radius: 14px; gap: 0 .5em; }
}