/* ============================================================
   CLOSING.CSS — CTA + Footer ("Closing Experience")
   Lädt für: alle Templates (immer eingebunden via head.php)
   Konsumiert: --pw-* aus global.css (keine eigenen Tokens).

   Aufbau:
   1. Shared .pw-closing-Frame (Gradient-Hintergrund, immer dunkel)
   2. .pw-cta — Final-CTA-Block (conditional via $page->hidecta())
   3. .pw-footer — Newsletter-Band + 4-Spalten-Grid + Legal-Bar
   4. Responsive-Breakpoints
   ============================================================ */


/* ============================================================
   1. PW CLOSING EXPERIENCE — shared base
   ============================================================ */
.pw-closing {
	position: relative;
	color: var(--pw-fg);
	background:
		radial-gradient(1000px 600px at 85% 0%, rgba(var(--pw-accent-rgb),0.12), transparent 60%),
		radial-gradient(800px 500px at 10% 100%, rgba(var(--pw-brand-rgb),0.10), transparent 60%),
		var(--pw-bg-dark-gradient);
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Source Sans Pro", system-ui, sans-serif;
}
.pw-closing::before {
	content: "";
	position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
	background-size: 24px 24px;
	pointer-events: none;
}
.pw-closing a { color: inherit; text-decoration: none; }
.pw-closing h2, .pw-closing h3, .pw-closing p { margin: 0; }
.pw-closing__container {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--pw-space-xl);
	z-index: 1;
}


/* ============================================================
   2. PW CTA — final conversion block
   Layout: text block at left (2/3 width), product image layered
   behind on the right edge. The image bleeds past the container
   so the Mac sits half-off the right edge of the viewport.
   ============================================================ */
.pw-cta { padding: 120px 0 var(--pw-space-2xl); position: relative; z-index: 10; }
.pw-cta__body-wrap {
	position: relative;
	z-index: 1;
	max-width: 66.666%;
}
.pw-cta__bg-image {
	position: absolute;
	top: 62%;
	left: 44%;
	right: auto;
	width: 880px;
	transform: translateY(-50%) translateZ(0);
	z-index: 20;
	pointer-events: none;
	user-select: none;
	filter: drop-shadow(0 40px 60px rgba(0,0,0,0.5));
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform;
}
.pw-cta__bg-image img {
	width: 100%;
	height: auto;
	display: block;
}
.pw-closing .pw-cta__title {
	font-size: clamp(36px, 5vw, 56px);
	font-weight: 700; line-height: 1.05; letter-spacing: -0.035em;
	margin: 0 0 var(--pw-space-lg); color: #fff;
}
.pw-cta__title-line {
	display: block;
}
.pw-cta__title-line--accent {
	background: linear-gradient(90deg, var(--pw-brand-hover), var(--pw-brand));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.pw-closing .pw-cta__sub {
	font-size: 19px; line-height: 1.5; color: var(--pw-fg-muted);
	margin: 0 0 var(--pw-space-lg); max-width: 560px;
	white-space: nowrap;
}
@media (max-width: 820px) {
	.pw-closing .pw-cta__sub { white-space: normal; }
}
.pw-closing .pw-cta__btns { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 var(--pw-space-lg); }
.pw-cta .pw-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: var(--pw-space-md) 28px; border-radius: 12px;
	font-size: 16px; font-weight: 600;
	transition: transform 0.15s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
	white-space: nowrap; text-decoration: none;
}
.pw-cta .pw-btn:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 3px; }
.pw-cta .pw-btn--primary {
	background: var(--pw-brand); color: #fff;
	box-shadow: 0 12px 30px rgba(var(--pw-brand-rgb),0.3), 0 2px 0 rgba(255,255,255,0.1) inset;
}
.pw-cta .pw-btn--primary:hover {
	background: var(--pw-brand-hover); transform: translateY(-1px); color: #fff;
	box-shadow: 0 16px 36px rgba(var(--pw-brand-rgb),0.36), 0 2px 0 rgba(255,255,255,0.1) inset;
}
.pw-cta .pw-btn--ghost {
	background: transparent; color: #fff;
	border: 1px solid rgba(255,255,255,0.22);
}
.pw-cta .pw-btn--ghost:hover {
	background: rgba(255,255,255,0.06);
	border-color: rgba(255,255,255,0.4); transform: translateY(-1px); color: #fff;
}
.pw-cta .pw-btn svg { width: 16px; height: 16px; }

/* Minimal review tiles below the CTAs — stars + source, nothing else */
.pw-cta__reviews {
	display: flex; flex-wrap: wrap; gap: 50px;
	margin: 0;
}
.pw-cta__review {
	display: inline-flex; flex-direction: column; gap: var(--pw-space-xs);
	text-decoration: none; cursor: pointer;
	line-height: 1.2;
}
.pw-cta__review:hover { text-decoration: none; }
.pw-cta__review-top {
	display: inline-flex; align-items: center; gap: var(--pw-space-sm);
}
.pw-cta__review-rating {
	font-size: 15px; font-weight: 700; color: #fff;
	font-variant-numeric: tabular-nums;
}
.pw-cta__review-stars { display: inline-flex; gap: 1px; color: #ffb95e; }
.pw-cta__review-stars svg { width: 12px; height: 12px; }
.pw-cta__review-source {
	font-size: 12px; color: var(--pw-fg-muted);
	letter-spacing: 0.02em;
}
.pw-review-star {
	font-size: 0.95em; vertical-align: 0.32em; line-height: 0;
	margin-left: 2px; opacity: 1;
}


/* ============================================================
   3. PW FOOTER — Newsletter + 4-Spalten-Grid + Legal-Bar
   ============================================================ */
footer.pw-footer {
	position: relative;
	z-index: 1;
	float: none !important;
	width: auto;
	background: transparent !important;
	padding: 0;
	margin-top: 64px;
}
/* Dark overlay layer — creates a clear "step down" from CTA to footer */
footer.pw-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.35) 20%, rgba(5,9,21,0.75) 100%);
	pointer-events: none;
}
footer.pw-footer > * { position: relative; z-index: 1; }
footer.pw-footer p { text-align: inherit; color: inherit; font-size: inherit; margin: 0; }
footer.pw-footer ul { float: none; width: auto; padding: 0; margin: 0; list-style: none; }

/* --- Newsletter band — full-bleed, strong visual weight --- */
.pw-newsletter {
	position: relative;
	padding: 72px 0;
	background:
		linear-gradient(135deg, rgba(var(--pw-accent-rgb),0.14) 0%, rgba(var(--pw-brand-rgb),0.10) 100%);
	border-top: 1px solid var(--pw-line);
	border-bottom: 1px solid var(--pw-line);
}
.pw-newsletter__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 64px; align-items: center;
}
#content .pw-newsletter h2, .pw-newsletter h2 {
	font-size: 32px; font-weight: 700; color: #fff;
	letter-spacing: -0.025em; line-height: 1.15;
	margin: 0 0 10px;
}
.pw-newsletter__body p {
	font-size: 16px; color: var(--pw-fg-muted);
	margin: 0; max-width: 540px; line-height: 1.55;
}
.pw-newsletter__form { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pw-newsletter__row { display: flex; gap: 10px; }
.pw-newsletter__input {
	flex: 1; min-width: 0;
	padding: var(--pw-space-md) 20px;
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 12px; color: #fff;
	font-size: 16px; font-family: inherit;
	transition: border-color 0.2s, background 0.2s;
}
.pw-newsletter__input::placeholder { color: rgba(255,255,255,0.5); }
.pw-newsletter__input:focus {
	outline: none;
	border-color: var(--pw-accent);
	background: rgba(255,255,255,0.12);
}
.pw-newsletter__submit {
	padding: var(--pw-space-md) 26px; background: var(--pw-brand); color: #fff;
	border: 0; border-radius: var(--pw-radius-md);
	font-weight: 600; font-size: 16px; font-family: inherit;
	cursor: pointer; white-space: nowrap;
	box-shadow: var(--pw-shadow-brand);
	transition: background var(--pw-duration-fast), transform var(--pw-duration-fast), box-shadow var(--pw-duration-fast);
}
.pw-newsletter__submit:hover { background: var(--pw-brand-hover); transform: translateY(-1px); box-shadow: var(--pw-shadow-brand-hover); }
.pw-newsletter__submit:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 3px; }
.pw-newsletter__status {
	font-size: 13px; line-height: 1.4; margin: 0;
	color: var(--pw-fg-muted);
}
.pw-newsletter__status--success { color: #6ad48a; }
.pw-newsletter__status--error   { color: #ff7e6b; }
.pw-newsletter__submit.is-loading { opacity: 0.7; cursor: progress; }
.pw-newsletter__legal {
	font-size: 12px; color: var(--pw-fg-dim);
	line-height: 1.5; margin: 0;
}
.pw-newsletter__legal a {
	color: var(--pw-fg-muted); text-decoration: underline;
	text-decoration-color: rgba(255,255,255,0.2);
}
.pw-newsletter__legal a:hover { color: #fff; }

/* --- Main footer grid --- */
.pw-foot-inner { padding: var(--pw-space-3xl) 0 40px; }
.pw-foot-main {
	display: grid;
	grid-template-columns: minmax(260px, 1.4fr) repeat(4, minmax(0, 1fr));
	gap: 56px;
	padding: 0 0 64px;
}
.pw-foot-brand { display: flex; flex-direction: column; gap: 20px; }
.pw-foot-logo {
	display: inline-flex; align-items: center; gap: 12px;
	color: #fff; text-decoration: none;
}
.pw-foot-logo img { height: 32px; width: auto; display: block; }
.pw-foot-tagline {
	font-size: 14px; color: var(--pw-fg-muted);
	line-height: 1.6; max-width: 280px; margin: 0;
}
.pw-foot-since {
	display: inline-flex; align-items: center; gap: var(--pw-space-sm);
	font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--pw-fg-dim);
}
.pw-foot-since::before { content: ""; width: 24px; height: 1px; background: var(--pw-fg-dim); }
.pw-foot-social { display: flex; gap: 10px; margin-top: var(--pw-space-xs); }
.pw-foot-social a {
	display: grid; place-items: center;
	width: 40px; height: 40px;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: var(--pw-radius-sm);
	color: var(--pw-fg-muted);
	transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}
.pw-foot-social a:hover {
	color: #fff; background: rgba(255,255,255,0.09);
	border-color: rgba(255,255,255,0.25); transform: translateY(-1px);
}
.pw-foot-social svg { width: 18px; height: 18px; }

#content .pw-foot-col h3, .pw-foot-col h3 {
	font-size: 11px; font-weight: 900;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--pw-fg-dim);
	margin: 0 0 18px; padding: 0;
}
.pw-foot-col ul { display: flex; flex-direction: column; gap: 12px; }
.pw-foot-col a {
	font-size: 14px; color: var(--pw-fg-muted);
	position: relative; text-decoration: none;
	transition: color 0.15s;
}
.pw-foot-col a::after {
	content: ""; position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 1px; background: currentColor;
	transform: scaleX(0); transform-origin: left center;
	transition: transform 0.2s ease;
}
.pw-foot-col a:hover { color: #fff; text-decoration: none; }
.pw-foot-col a:hover::after { transform: scaleX(1); }
.pw-foot-col a:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 3px; border-radius: 2px; }
.pw-foot-col details > summary { list-style: none; cursor: pointer; }
.pw-foot-col details > summary::-webkit-details-marker { display: none; }

/* --- Legal bar --- */
.pw-legal {
	padding: 28px 0;
	border-top: 1px solid var(--pw-line);
	display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
	gap: 20px; font-size: 12px; color: var(--pw-fg-dim);
}
.pw-legal__copy { display: flex; flex-direction: column; gap: var(--pw-space-sm); max-width: 820px; }
.pw-legal__links { display: flex; flex-wrap: wrap; gap: var(--pw-space-lg); }
.pw-legal__links a { color: var(--pw-fg-muted); text-decoration: none; }
.pw-legal__links a:hover { color: #fff; }
footer p.pw-legal__trademark {
	padding: 0;
	font-size: 10px; line-height: 1.5;
	color: rgba(111,120,146,0.55);
	border: 0;
	margin: 0;
}
footer .pw-legal__trademark a { color: rgba(154,163,180,0.6); }
footer .pw-legal__trademark a:hover { color: rgba(255,255,255,0.85); }
footer p.pw-legal__reviews-note {
	padding: 0;
	font-size: 11px; line-height: 1.5;
	color: rgba(111,120,146,0.7);
	border: 0;
	margin: 6px 0 0;
}


/* ============================================================
   4. Responsive
   ============================================================ */
@media (max-width: 1200px) {
	footer.pw-footer { margin-top: var(--pw-space-2xl); }
	.pw-foot-inner { padding-top: 64px; }
	.pw-foot-main { grid-template-columns: 1fr; gap: 0; padding-bottom: 40px; }
	.pw-foot-brand { flex-direction: column; margin-bottom: var(--pw-space-lg); padding-bottom: var(--pw-space-xl); border-bottom: 1px solid var(--pw-line); }
	.pw-foot-col { border-bottom: 1px solid var(--pw-line); }
	.pw-foot-col:last-child { border-bottom: none; }
	.pw-foot-col details > summary {
		display: flex; align-items: center; justify-content: space-between;
		padding: 18px 0; font-size: 11px; font-weight: 700;
		letter-spacing: 0.14em; text-transform: uppercase; color: var(--pw-fg-dim);
	}
	.pw-foot-col details > summary::after {
		content: "+"; font-size: 20px; color: var(--pw-fg-muted);
		transition: transform 0.2s;
	}
	.pw-foot-col details[open] > summary::after { content: "–"; }
	.pw-foot-col details > summary h3 { font-size: inherit; margin: 0; padding: 0; color: inherit; }
	#content .pw-foot-col h3, .pw-foot-col h3 { font-size: inherit; margin: 0; padding: 0; color: inherit; }
	.pw-foot-col ul { padding: var(--pw-space-xs) 0 var(--pw-space-xl); }
	.pw-legal { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 1200px) {
	.pw-cta__body-wrap { max-width: 70%; }
	.pw-cta__bg-image { top: 52%; left: 48%; width: 800px; opacity: 0.9; }
}
@media (max-width: 1024px) {
	.pw-cta__body-wrap { max-width: 100%; }
	.pw-cta__bg-image {
		position: relative; top: auto; left: auto; right: auto;
		transform: none; margin: 56px 0 0; opacity: 1;
		width: 100%; max-width: 900px; margin-left: auto; margin-right: auto;
	}
}
@media (max-width: 960px) {
	.pw-newsletter__inner { grid-template-columns: 1fr; gap: 28px; }
	.pw-newsletter { padding: 56px 0; }
	#content .pw-newsletter h2, .pw-newsletter h2 { font-size: 26px; }
}
@media (max-width: 768px) {
	.pw-cta { padding: 88px 0 var(--pw-space-xl); }
	.pw-cta__btns { flex-direction: column; align-items: stretch; }
	.pw-cta .pw-btn { width: 100%; }
	.pw-cta__reviews { flex-direction: column; gap: 10px; }
	.pw-cta__bg-image { display: none; }
}