/*
 * Homepage (Task P4-26 / V2 Website light system, Overnight-Alpha §14).
 * Bewusst minimal/scoped, kein globales CSS. Konsumiert ausschließlich die
 * Tokens aus v2-tokens.css (Dependency, siehe HomepageRenderer::enqueue_assets()) --
 * KEINE re-deklarierten Hex-Werte für Farben, die dort bereits existieren.
 *
 * MOBILE-FIRST-REIHENFOLGE (§14, MANDATORY OWNER DECISION): Logo/Nav (Theme)
 * -> H1 "Anbieter suchen, auswählen, kündigen" -> Sucheingabe UNMITTELBAR
 * darunter. Kein großer dunkler Hero-Block mehr vor der Suche.
 */


.abostopp-homepage {
	background: var(--as-bg);
	color: var(--as-text);
	font-family: var(--as-font-body);
}

.abostopp-homepage section {
	max-width: var(--as-maxw);
	margin: 0 auto;
	padding: clamp(56px, 7vw, 104px) clamp(16px, 3vw, 32px);
}

.abostopp-homepage p {
	line-height: 1.7;
}

/* Homepage ist eine der drei TitleSuppression-Views (Config::HOMEPAGE_POST_ID)
 * -- die theme-eigene entry-title ist bereits unterdrückt. Zusätzlich wird
 * hier, analog zum bereits bestehenden Muster in provider-template.css für
 * `body.single-anbieter`, der GeneratePress-Content-Wrapper-Abstand auf der
 * Startseite auf 0 gesetzt, damit die Sucheingabe wirklich UNMITTELBAR unter
 * dem Header sitzt und nicht durch Theme-Padding nach unten gedrückt wird. */
body.page-id-16 .site-content,
body.page-id-16 #content,
body.page-id-16 .content-area,
body.page-id-16 main.site-main,
body.page-id-16 .inside-article,
body.page-id-16 .entry-content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

body.page-id-16 {
	background: var(--as-bg);
}

/* GeneratePress still assigns `right-sidebar` to the homepage even when no
 * sidebar widget is rendered. Its desktop layout therefore reserves an empty
 * column and squeezes the entire prototype into roughly two thirds of the
 * theme container. The homepage owns its own section widths, so release that
 * phantom column here and let the page background span the viewport. */
body.page-id-16 #page {
	max-width: 100%;
}

body.page-id-16 .site-content {
	display: block;
}

body.page-id-16 .content-area {
	float: none;
	width: 100%;
}

body.page-id-16 main.site-main {
	margin: 0;
}

body.page-id-16 .inside-article {
	padding-right: 0;
	padding-left: 0;
}

.abostopp-homepage section.abostopp-homepage__hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.85fr);
	gap: clamp(36px, 6vw, 88px);
	align-items: center;
	max-width: var(--as-maxw);
	min-height: 580px;
	background: var(--as-surface);
	border: 2px solid var(--as-border-strong);
	border-radius: 32px;
	box-shadow: var(--as-shadow-hero);
	color: var(--as-text);
	text-align: left;
	padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 48px);
}

.abostopp-homepage__h1 {
	font-size: clamp(2.65rem, 1.8rem + 3.8vw, 5rem);
	line-height: 1.02;
	letter-spacing: -0.045em;
	margin: 0 0 clamp(20px, 2.5vw, 30px);
	color: var(--as-text);
	font-family: var(--as-font-heading);
	font-weight: 800;
}

.abostopp-homepage__eyebrow {
	display: inline-flex;
	margin-bottom: 18px;
	padding: 7px 12px;
	border-radius: 999px;
	background: var(--as-green-soft);
	color: var(--as-green);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.abostopp-homepage__hero-sub {
	max-width: 62ch;
	margin: 0;
	font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
	line-height: 1.7;
	color: var(--as-text-secondary);
}

@media (max-width: 899px) {
	.abostopp-homepage section.abostopp-homepage__hero {
		grid-template-columns: 1fr;
		min-height: 0;
		padding: clamp(28px, 7vw, 44px) clamp(20px, 5vw, 32px);
	}
}

.abostopp-homepage__trust-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	text-align: center;
}

.abostopp-homepage__trust-list li {
	position: relative;
	padding: 20px 18px 20px 50px;
	background: var(--as-surface);
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius);
	color: var(--as-text);
	text-align: left;
	box-shadow: var(--as-shadow-card);
}

.abostopp-homepage__trust-list li::before {
	content: "✓";
	position: absolute;
	top: 19px;
	left: 18px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--as-green-soft);
	color: var(--as-green);
	font-weight: 800;
}

.abostopp-homepage__trust-list strong {
	display: block;
	margin-bottom: 6px;
}

.abostopp-homepage__how,
.abostopp-homepage__popular,
.abostopp-homepage__why,
.abostopp-homepage__research,
.abostopp-homepage__ratgeber,
.abostopp-homepage__faq,
.abostopp-homepage__company {
	text-align: center;
}

.abostopp-homepage section > h2 {
	font-size: clamp(2rem, 1.55rem + 1.8vw, 3.25rem);
	line-height: 1.12;
	letter-spacing: -0.025em;
	margin: 0 0 clamp(24px, 3vw, 40px);
	color: var(--as-text);
	font-family: var(--as-font-heading);
	font-weight: 700;
}

.abostopp-homepage section h3 {
	font-family: var(--as-font-heading);
	font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.35rem);
	line-height: 1.25;
	font-weight: 700;
}

.abostopp-homepage__section-label {
	display: block;
	margin-bottom: 8px;
	color: var(--as-green);
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.abostopp-homepage__category-price {
	display: block;
	margin-bottom: 14px;
	color: var(--as-green);
}

.abostopp-homepage__how-list {
	counter-reset: abostopp-step;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: center;
}

.abostopp-homepage__how-list li {
	counter-increment: abostopp-step;
	position: relative;
	flex: 1 1 240px;
	max-width: 320px;
	min-height: 180px;
	padding: 54px 24px 24px;
	border: 1px solid var(--as-border-strong);
	border-radius: var(--as-radius);
	background: var(--as-dark-soft);
	color: var(--as-text-on-dark);
}

.abostopp-homepage__how-list li::before {
	content: counter(abostopp-step);
	position: absolute;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--as-green);
	color: var(--as-green-contrast);
	font-size: 0.82rem;
	font-weight: 800;
}

.abostopp-homepage__how-list li strong {
	display: block;
	margin-bottom: 8px;
	color: var(--as-text-on-dark);
	font-size: clamp(1rem, 0.96rem + 0.25vw, 1.15rem);
}

.abostopp-homepage__how-list li p {
	margin: 0;
	color: var(--as-text-on-dark-muted);
}

/* Full-width section rhythm. White stays reserved for cards and light bands;
 * Pine provides the two visual anchors. */
.abostopp-homepage__popular,
.abostopp-homepage__faq {
	background: var(--as-surface-muted);
	box-shadow: 0 0 0 100vmax var(--as-surface-muted);
	clip-path: inset(0 -100vmax);
}

.abostopp-homepage__why,
.abostopp-homepage__research,
.abostopp-homepage__ratgeber {
	background: var(--as-surface);
	box-shadow: 0 0 0 100vmax var(--as-surface);
	clip-path: inset(0 -100vmax);
}

.abostopp-homepage__band--dark {
	background: var(--as-dark);
	box-shadow: 0 0 0 100vmax var(--as-dark);
	clip-path: inset(0 -100vmax);
	color: var(--as-text-on-dark);
}

.abostopp-homepage__popular h2,
.abostopp-homepage__research h2,
.abostopp-homepage__ratgeber h2 {
	color: var(--as-text);
}

.abostopp-homepage section.abostopp-homepage__band--dark > h2 {
	color: var(--as-text-on-dark);
}

.abostopp-homepage__band--dark .abostopp-homepage__section-label {
	color: var(--as-text-on-dark-muted);
}

.abostopp-homepage__band--dark > p {
	color: var(--as-text-on-dark-muted);
}

.abostopp-homepage__band--dark .abostopp-homepage__section-intro {
	color: var(--as-text-on-dark-muted);
}

.abostopp-homepage__popular-list,
.abostopp-homepage__ratgeber-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.abostopp-homepage__popular-list a,
.abostopp-homepage__ratgeber-list a {
	display: inline-flex;
	align-items: center;
	min-height: var(--as-touch-min);
	padding: 8px 20px;
	background: var(--as-surface);
	border: 1px solid var(--as-border);
	border-radius: 20px;
	color: var(--as-text);
	text-decoration: none;
}

.abostopp-homepage__popular-list a:hover,
.abostopp-homepage__popular-list a:focus-visible,
.abostopp-homepage__ratgeber-list a:hover,
.abostopp-homepage__ratgeber-list a:focus-visible {
	border-color: var(--as-blue);
	color: var(--as-blue);
}

.abostopp-homepage__why ul,
.abostopp-homepage__faq-group {
	text-align: left;
	max-width: 70ch;
	margin: 0 auto;
}

.abostopp-homepage__why li {
	color: var(--as-text);
	margin-bottom: 8px;
}

.abostopp-homepage__faq-group + .abostopp-homepage__faq-group {
	margin-top: clamp(28px, 4vw, 44px);
}

.abostopp-homepage__faq-group h3 {
	margin: 0 0 12px;
	color: var(--as-text);
}

.abostopp-homepage__faq-list {
	display: grid;
	gap: 10px;
}

.abostopp-homepage__faq-item {
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius-sm);
	background: var(--as-surface);
	box-shadow: var(--as-shadow-card);
	color: var(--as-text);
}

.abostopp-homepage__faq-item summary {
	position: relative;
	min-height: var(--as-touch-min);
	padding: 16px 52px 16px 18px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.abostopp-homepage__faq-item summary::-webkit-details-marker {
	display: none;
}

.abostopp-homepage__faq-item summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
	color: var(--as-green);
	font-size: 1.4rem;
}

.abostopp-homepage__faq-item[open] summary::after {
	content: "−";
}

.abostopp-homepage__faq-item summary:focus-visible {
	border-radius: var(--as-radius-sm);
	outline: 3px solid var(--as-focus);
	outline-offset: 3px;
}

.abostopp-homepage__faq-answer {
	padding: 0 18px 18px;
	color: var(--as-text-secondary);
}

.abostopp-homepage__faq-answer > :first-child {
	margin-top: 0;
}

.abostopp-homepage__faq-answer > :last-child {
	margin-bottom: 0;
}

.abostopp-homepage__research p,
.abostopp-homepage__company p {
	max-width: 70ch;
	margin: 0 auto;
}

.abostopp-homepage__research p {
	color: var(--as-text-secondary);
}

.abostopp-homepage__section-intro {
	max-width: 70ch;
	margin: 0 auto clamp(32px, 4vw, 48px);
	color: var(--as-text-secondary);
	line-height: 1.7;
}

.abostopp-homepage__legal-note {
	max-width: 70ch;
	margin: clamp(28px, 4vw, 44px) auto 0;
	padding-top: 16px;
	border-top: 1px solid var(--as-border-strong);
	color: var(--as-text-on-dark-muted);
	font-size: clamp(0.84rem, 0.8rem + 0.18vw, 0.94rem);
}

.abostopp-homepage__popular-groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: clamp(14px, 2vw, 22px);
	text-align: left;
}

.abostopp-homepage__popular-group {
	background: var(--as-surface);
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius);
	padding: clamp(16px, 2vw, 22px);
	box-shadow: var(--as-shadow-card);
}

.abostopp-homepage__popular-group h3,
.abostopp-homepage__popular-group h3 a {
	color: var(--as-blue);
	margin-top: 0;
}

.abostopp-homepage__popular-group h3 {
	margin-bottom: 14px;
}

.abostopp-homepage__category-copy {
	margin: 0 0 14px;
	color: var(--as-text-secondary);
}

.abostopp-homepage__popular-group ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.abostopp-homepage__popular-group li a {
	display: inline-flex;
	align-items: center;
	min-height: var(--as-touch-min);
	padding: 5px 11px;
	border: 1px solid var(--as-border);
	border-radius: 999px;
	color: var(--as-text);
	font-size: 0.88rem;
	line-height: 1.25;
	text-decoration: none;
}

.abostopp-homepage__popular-group li a:hover,
.abostopp-homepage__popular-group li a:focus-visible {
	border-color: var(--as-blue);
	color: var(--as-blue);
	background: var(--as-green-soft);
}

@media (max-width: 720px) {
	.abostopp-homepage__popular-groups {
		grid-template-columns: 1fr;
	}
}

.abostopp-homepage .abostopp-site-footer {
	margin-top: 0;
}

/* Kategorien/Ratgeber-Spalten oberhalb des gemeinsamen FooterRenderer-
 * Footers (kein zweites <footer>-Element -- FooterRenderer::render()
 * liefert das einzige <footer> der Seite, siehe HomepageRenderer::render_footer()). */
.abostopp-homepage__footer-columns {
	max-width: var(--as-maxw);
	margin: 0 auto;
	padding: 32px 20px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: center;
	text-align: left;
	background: var(--as-bg);
}

.abostopp-homepage__footer-col {
	min-width: 200px;
}

.abostopp-homepage__footer-col h3 {
	color: var(--as-text);
	font-size: 1rem;
}

.abostopp-homepage__footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.abostopp-homepage__footer-col a {
	color: var(--as-text-secondary);
	display: inline-flex;
	align-items: center;
	min-height: var(--as-touch-min);
}

.abostopp-homepage__footer-col a:hover,
.abostopp-homepage__footer-col a:focus-visible {
	color: var(--as-blue);
}

/* Landingpage interactions: mobile first, progressively enhanced by
 * homepage-interactive.js. */
.abostopp-homepage section.abostopp-homepage__hero {
	grid-template-columns: 1fr;
	min-height: 0;
}

.abostopp-homepage__hero-copy {
	grid-row: auto;
	max-width: 780px;
}

.abostopp-homepage__hero-tools,
.abostopp-homepage__calculator-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.abostopp-homepage__price-finder,
.abostopp-homepage__letter,
.abostopp-homepage__slider,
.abostopp-homepage__calculator-result {
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius);
	background: var(--as-surface);
	box-shadow: var(--as-shadow-card);
}

.abostopp-homepage__price-finder,
.abostopp-homepage__letter {
	padding: clamp(20px, 4vw, 30px);
}

.abostopp-homepage__price-finder form > label,
.abostopp-homepage__slider label {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	color: var(--as-text);
	font-weight: 700;
}

.abostopp-homepage__price-finder form {
	margin: 0;
}

.abostopp-homepage__combobox {
	position: relative;
	margin-top: 12px;
}

.abostopp-homepage__combobox input {
	width: 100%;
	min-height: 52px;
	padding: 11px 14px;
	border: 2px solid var(--as-border);
	border-radius: var(--as-radius-sm);
	background: var(--as-bg);
	color: var(--as-text);
	font: inherit;
}

.abostopp-homepage__combobox input:focus-visible,
.abostopp-homepage__slider input:focus-visible {
	outline: 3px solid var(--as-focus);
	outline-offset: 3px;
}

.abostopp-homepage__finder-results {
	position: absolute;
	z-index: 4;
	top: calc(100% + 4px);
	right: 0;
	left: 0;
	max-height: 260px;
	overflow-y: auto;
	margin: 0;
	padding: 6px;
	list-style: none;
	border: 1px solid var(--as-border);
	border-radius: var(--as-radius-sm);
	background: var(--as-surface);
	box-shadow: var(--as-shadow-card);
}

.abostopp-homepage__finder-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: var(--as-touch-min);
	padding: 9px 10px;
	border-radius: 8px;
	cursor: pointer;
}

.abostopp-homepage__finder-option.is-active,
.abostopp-homepage__finder-option:hover {
	background: var(--as-green-soft);
}

.abostopp-homepage__finder-status {
	min-height: 1.6em;
	margin: 8px 0;
	color: var(--as-text-secondary);
	font-size: .88rem;
}



.abostopp-homepage__finder-price {
	display: grid;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--as-border);
}

.abostopp-homepage__finder-price p,
.abostopp-homepage__finder-price strong,

.abostopp-homepage__finder-price strong {
	font-family: var(--as-font-heading);
	font-size: 1.5rem;
}

.abostopp-homepage__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--as-touch-min);
	padding: 10px 18px;
	border: 2px solid var(--as-primary);
	border-radius: var(--as-radius-sm);
	background: var(--as-primary);
	color: var(--as-primary-contrast);
	font-weight: 800;
	text-decoration: none;
}

.abostopp-homepage__button:hover {
	border-color: var(--as-primary-hover);
	background: var(--as-primary-hover);
	color: var(--as-primary-contrast);
}

.abostopp-homepage__button:focus-visible,

.abostopp-homepage__letter-badge {
	display: inline-block;
	margin-bottom: 28px;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--as-orange-soft);
	color: var(--as-orange-ink);
	font-size: .78rem;
	font-weight: 800;
}

.abostopp-homepage__letter-watermark {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-24deg);
	color: var(--as-border);
	font-family: var(--as-font-heading);
	font-size: clamp(3rem, 10vw, 5rem);
	font-weight: 900;
	letter-spacing: .08em;
	pointer-events: none;
}

.abostopp-homepage__letter address,
.abostopp-homepage__letter p {
	position: relative;
	z-index: 1;
}

.abostopp-homepage__letter address {
	font-style: normal;
	line-height: 1.55;
}

.abostopp-homepage__letter-recipient {
	margin-top: 28px;
}

.abostopp-homepage__letter-subject {
	margin-top: 28px;
}

.abostopp-homepage__calculator {
	text-align: center;
}

.abostopp-homepage__calculator-grid,
.abostopp-homepage__calculator-result {
	max-width: 880px;
	margin: 0 auto;
}

.abostopp-homepage__slider {
	padding: 20px;
	text-align: left;
}

.abostopp-homepage__slider output {
	white-space: nowrap;
	color: var(--as-green);
}

.abostopp-homepage__slider input {
	width: 100%;
	min-height: var(--as-touch-min);
	margin-top: 16px;
	accent-color: var(--as-green);
}

.abostopp-homepage__calculator-result {
	display: grid;
	gap: 12px;
	margin-top: 20px;
	padding: 20px;
	text-align: left;
}

.abostopp-homepage__calculator-result p {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	margin: 0;
}

.abostopp-homepage__calculator-result strong {
	text-align: right;
}

.abostopp-homepage__calculator-note {
	max-width: 70ch;
	margin: 20px auto 0;
	color: var(--as-text-secondary);
}

.abostopp-homepage__how-list li {
	min-height: 0;
	padding: 0;
	overflow: hidden;
}

.abostopp-homepage__how-list li::before {
	content: none;
}

.abostopp-homepage__how-list button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 72px;
	padding: 14px 18px;
	border: 0;
	background: transparent;
	color: var(--as-text-on-dark);
	font: inherit;
	font-weight: 800;
	text-align: left;
	cursor: pointer;
}

.abostopp-homepage__how-list button span {
	display: grid;
	place-items: center;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--as-green);
	color: var(--as-green-contrast);
}

.abostopp-homepage__how-list [data-step-panel] {
	padding: 0 18px 18px;
	text-align: left;
}

.abostopp-homepage__how-list .is-active {
	border-color: var(--as-primary);
}

@media (min-width: 720px) {
	.abostopp-homepage__calculator-grid,
	.abostopp-homepage__calculator-result {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.abostopp-homepage__hero-tools {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
	}
}

@media (prefers-reduced-motion: reduce) {
	.abostopp-homepage *,
	.abostopp-homepage *::before,
	.abostopp-homepage *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* Das Ergebnis des Rechners ist die eigentliche Aussage der Seite: was
   weiterläuft, wenn nichts passiert. Es steht deshalb als Schild neben der
   Rechnung und nicht als weitere Zeile darunter. */
.abostopp-homepage__calculator-result {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	align-items: center;
	padding: clamp(18px, 3vw, 26px);
}

.abostopp-homepage__calculator-equation {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	color: var(--as-text-secondary);
}

.abostopp-homepage__calculator-equation strong {
	color: var(--as-text);
}

.abostopp-homepage__shield {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "mark label" "mark amount";
	gap: 2px 14px;
	align-items: center;
	padding: clamp(16px, 3vw, 22px) clamp(18px, 3vw, 26px);
	border: 2px solid var(--as-border-strong);
	border-radius: var(--as-radius);
	background: var(--as-orange-soft);
	color: var(--as-orange-ink);
}

.abostopp-homepage__shield-mark {
	grid-area: mark;
	width: 40px;
	height: 40px;
}

.abostopp-homepage__shield-label {
	grid-area: label;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .02em;
}

.abostopp-homepage__shield-amount {
	grid-area: amount;
	font-family: var(--as-font-heading);
	font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.9rem);
	font-weight: 900;
	line-height: 1.05;
}

@media (min-width: 720px) {
	.abostopp-homepage__calculator-result {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.abostopp-homepage__calculator-equation {
		display: block;
	}
}

/* Die Vorschau auf der Startseite und die erste Checkout-Seite zeigen
   dasselbe Dokument, also tragen sie denselben Rahmen: ein Blatt mit
   vollstaendigem Rand und ruhigem Innenabstand.

   Das Wasserzeichen wird weiterhin von der Karte selbst beschnitten. Ein
   Overlay waere hier wirkungslos: `overflow` beschneidet Nachfahren, keine
   Geschwister, das Wasserzeichen liefe also aus der Karte heraus. */
.abostopp-homepage__letter {
	overflow: hidden;
	isolation: isolate;
	padding: clamp(24px, 4vw, 44px);
	background: #FFFFFF;
	color: #1d1a16;
}

.abostopp-homepage__letter-watermark {
	z-index: 0;
	color: rgba(29, 26, 22, .07);
}

.abostopp-homepage__letter-badge {
	position: relative;
	z-index: 1;
}

.abostopp-homepage__letter address,
.abostopp-homepage__letter p {
	color: #1d1a16;
}

.abostopp-homepage__letter-subject {
	padding-top: 14px;
	border-top: 1px solid rgba(29, 26, 22, .16);
}

/* Der Rechner bekommt denselben Rahmen wie das Hero: er ist kein Beiwerk,
   sondern trägt die Aussage der Seite. */
.abostopp-homepage__card {
	max-width: var(--as-maxw);
	margin-inline: auto;
	padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 44px);
	border: 2px solid var(--as-border-strong);
	border-radius: 32px;
	background: var(--as-surface);
	box-shadow: var(--as-shadow-hero);
}