/* v6.31 homepage extras: showreel player, "Über mich", client voices, FAQ.
 * Sections are inserted by inc/home-extras.php only when they have content. */

/* Showreel button in the hero */
.sw-motion-v591 .hero-actions .sw-reel-open {
	grid-column: 1 / -1;
	gap: 12px;
}
.sw-reel-play {
	position: relative;
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--red, #e20816);
}
.sw-reel-play::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: 2px;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent #fff;
}

/* Showreel player */
.sw-reel {
	position: fixed;
	inset: 0;
	z-index: 500;
	display: grid;
	place-items: center;
	padding: clamp(16px, 4vw, 56px);
}
.sw-reel[hidden] { display: none; }
.sw-reel__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4, 4, 5, .94);
	opacity: 0;
	transition: opacity 260ms cubic-bezier(0.23, 1, 0.32, 1);
}
.sw-reel__frame {
	position: relative;
	z-index: 1;
	width: min(1600px, 100%);
	aspect-ratio: 16 / 9;
	max-height: calc(100dvh - 2 * clamp(16px, 4vw, 56px));
	overflow: hidden;
	border-radius: 18px;
	background: #000;
	opacity: 0;
	transform: scale(.96);
	transition: opacity 260ms cubic-bezier(0.23, 1, 0.32, 1), transform 320ms cubic-bezier(0.23, 1, 0.32, 1);
}
.sw-reel__video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.sw-reel__close {
	position: absolute;
	z-index: 2;
	top: max(14px, env(safe-area-inset-top));
	right: 14px;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f4f4f1;
	color: #0a0a0b;
	cursor: pointer;
	transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.sw-reel__close:active { transform: scale(.94); }
.sw-reel__close:focus-visible { outline: 2px solid var(--red, #e20816); outline-offset: 3px; }
.sw-reel.is-open .sw-reel__backdrop { opacity: 1; }
.sw-reel.is-open .sw-reel__frame { opacity: 1; transform: none; }

/* "Über mich" */
.sw-motion-v591 .sw-person { background: var(--paper, #f4f4f1); color: var(--ink, #0a0a0b); }
.sw-person__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(32px, 6vw, 110px);
	align-items: center;
}
.sw-person__media {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: 24px;
	background: #e3e3de;
}
.sw-person__media > img,
.sw-person__media > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sw-person__placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: #111114; }
.sw-person__placeholder img { width: 38%; opacity: .9; }
.sw-person__copy .h2 { max-width: 12ch; }
.sw-person__text { max-width: 58ch; margin-top: clamp(22px, 3vw, 34px); }
.sw-person__text p { margin: 0 0 1em; color: var(--muted, #6c6c67); font-size: clamp(1.05rem, 1.3vw, 1.22rem); line-height: 1.65; text-wrap: pretty; }
.sw-person__sign { display: grid; gap: 4px; margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--line, rgba(10, 10, 11, .13)); }
.sw-person__sign strong { font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; }
.sw-person__sign span { color: var(--muted, #6c6c67); font-size: .92rem; }

/* Client voices */
.sw-motion-v591 .sw-voices { background: #fff; color: var(--ink, #0a0a0b); }
.sw-voices__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 4vw, 64px) clamp(32px, 5vw, 90px);
	margin-top: clamp(36px, 5vw, 70px);
}
.sw-voice { margin: 0; padding-top: 24px; border-top: 1px solid var(--line, rgba(10, 10, 11, .13)); }
.sw-voice blockquote { margin: 0; }
.sw-voice blockquote p {
	margin: 0;
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	font-weight: 500;
	line-height: 1.38;
	letter-spacing: -.02em;
	text-wrap: pretty;
}
.sw-voice blockquote p::before { content: "„"; }
.sw-voice blockquote p::after { content: "“"; }
.sw-voice figcaption { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.sw-voice__who { display: grid; gap: 2px; }
.sw-voice__who strong { font-size: .98rem; font-weight: 600; }
.sw-voice__who span { color: var(--muted, #6c6c67); font-size: .9rem; }
/* 7.5 stars, avatar, Google mark and overall rating */
.sw-stars { display: inline-flex; gap: 3px; margin-bottom: 14px; }
.sw-stars svg { width: 18px; height: 18px; fill: rgba(10, 10, 11, .14); }
.sw-stars svg.is-on { fill: #f5b301; }
.sw-stars svg.is-half { fill: #f5b301; opacity: .55; }
.sw-voice__avatar { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.sw-voice__avatar--ini { display: grid; place-items: center; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -.02em; background: linear-gradient(135deg, #2a2a2a, #0c0c0c); }
.sw-voice__avatar--ini.is-t1 { background: linear-gradient(135deg, #ec2a32, #b8121b); }
.sw-voice__avatar--ini.is-t2 { background: linear-gradient(135deg, #3a3836, #181716); }
.sw-voice__avatar--ini.is-t3 { background: linear-gradient(135deg, #a8161e, #68090e); }
.sw-voice__src { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 10px; border: 1px solid var(--line, rgba(10, 10, 11, .13)); border-radius: 999px; font-size: .78rem; color: var(--muted, #6c6c67); }
.sw-voice__src svg { width: 14px; height: 14px; }
.sw-voices__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.sw-voices__head .h2 { margin-bottom: 0; }
.sw-voices__score { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 14px; padding: 16px 20px; border: 1px solid var(--line, rgba(10, 10, 11, .13)); border-radius: 18px; color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
a.sw-voices__score:hover { border-color: currentColor; transform: translateY(-2px); }
.sw-voices__score b { grid-row: span 2; font-size: clamp(36px, 4vw, 52px); line-height: 1; font-weight: 700; letter-spacing: -.04em; }
.sw-voices__score .sw-stars { margin: 0; }
.sw-voices__score > span { font-size: .85rem; color: var(--muted, #6c6c67); }

/* FAQ */
.sw-motion-v591 .sw-faq { background: var(--paper, #f4f4f1); color: var(--ink, #0a0a0b); }
.sw-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(32px, 6vw, 110px);
	align-items: start;
}
.sw-faq__head { position: sticky; top: 120px; }
.sw-faq__head .lead { max-width: 40ch; margin-top: 22px; color: var(--muted, #6c6c67); }
.sw-faq__list { border-top: 1px solid var(--line, rgba(10, 10, 11, .13)); }
.sw-faq__item { border-bottom: 1px solid var(--line, rgba(10, 10, 11, .13)); }
.sw-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 64px;
	padding: 20px 0;
	list-style: none;
	cursor: pointer;
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1.35;
}
.sw-faq__item summary::-webkit-details-marker { display: none; }
.sw-faq__item summary:focus-visible { outline: 2px solid var(--red, #e20816); outline-offset: 4px; border-radius: 4px; }
.sw-faq__item summary i {
	position: relative;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
	transition: background-color 180ms ease, transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
.sw-faq__item summary i::before,
.sw-faq__item summary i::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 1.8px;
	margin: -.9px 0 0 -6px;
	border-radius: 2px;
	background: var(--ink, #0a0a0b);
	transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
.sw-faq__item summary i::after { transform: rotate(90deg); }
.sw-faq__item[open] summary i { background: var(--red, #e20816); }
.sw-faq__item[open] summary i::before,
.sw-faq__item[open] summary i::after { background: #fff; }
.sw-faq__item[open] summary i::after { transform: rotate(0deg); }
@media (hover: hover) and (pointer: fine) {
	.sw-faq__item:not([open]) summary:hover i { transform: scale(1.06); }
}
.sw-faq__answer { padding: 0 52px 22px 0; }
.sw-faq__answer p { margin: 0 0 .8em; max-width: 62ch; color: var(--muted, #6c6c67); font-size: 1rem; line-height: 1.65; }
/* Smooth open/close where the browser supports animating details content. */
@supports (interpolate-size: allow-keywords) {
	.sw-faq__list { interpolate-size: allow-keywords; }
	.sw-faq__item::details-content {
		block-size: 0;
		overflow: hidden;
		opacity: 0;
		transition: block-size 320ms cubic-bezier(0.23, 1, 0.32, 1), opacity 220ms ease, content-visibility 320ms allow-discrete;
	}
	.sw-faq__item[open]::details-content { block-size: auto; opacity: 1; }
}

@media (max-width: 860px) {
	.sw-person__grid,
	.sw-faq__grid,
	.sw-voices__grid { grid-template-columns: 1fr; }
	.sw-person__media { max-width: 440px; }
	.sw-faq__head { position: static; }
	.sw-faq__answer { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.sw-reel__backdrop,
	.sw-reel__frame { transition: opacity 120ms ease; transform: none; }
	.sw-faq__item summary i,
	.sw-faq__item summary i::before,
	.sw-faq__item summary i::after { transition: none; }
	.sw-faq__item::details-content { transition: none; }
}