/* ==========================================================================
   Reselling: Konditionen, Preiskalkulator und Bestellablauf
   Ergaenzt download.css (Hero, Waehrungsumschalter und FAQ kommen von dort).
   Tokens werden nur konsumiert, nie ueberschrieben.
   ========================================================================== */

/* Sprungziel des Chevron-Links: etwas Luft ueber der Kalkulator-Ueberschrift */
#calculator { scroll-margin-top: var(--pw-space-lg); }

/* --- Sektions-Baender --- */
/* Der Hintergrund laeuft ueber die volle Breite, der pw-container sitzt innen.
   Die vertikalen Abstaende gehoeren deshalb ans Band, nicht mehr an die
   einzelnen Sektionen: sonst entstuenden Streifen in der falschen Farbe. */
.rs-band { padding: var(--pw-section-standard); }
.rs-band--alt { background: var(--pw-bg-alt); }
/* Das erste Band traegt den Hero und beginnt direkt unter der Topbar */
.rs-band:first-child { padding-top: 0; }
/* Auf farbigem Grund kehrt sich das Kalkulator-Panel um, sonst verschwindet es */
.rs-band--alt .rs-calc__panel { background: var(--pw-bg); }
/* Das letzte Band laeuft bis zum Footer durch */
#content.reselling { padding-bottom: 0; }

.reselling .rs-section__title {
	font-size: clamp(22px, 3vw, 28px);
	text-align: center;
	margin: 0 0 var(--pw-space-2xl);
}
/* Folgt ein Intro, ruecken Titel und Intro wieder zusammen */
.reselling .rs-section__title + .rs-section__intro { margin-top: calc(var(--pw-space-2xl) * -1 + var(--pw-space-sm)); }
.reselling .rs-section__intro {
	max-width: 640px;
	margin: 0 auto var(--pw-space-xl);
	text-align: center;
	color: var(--pw-text-secondary);
}

/* --- Hero --- */
.rs-hero { padding: var(--pw-space-3xl) 0 var(--pw-space-2xl); }
.rs-hero__eyebrow {
	font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--pw-brand); margin: 0 0 var(--pw-space-sm);
}
.rs-hero__lead {
	max-width: 620px; margin: var(--pw-space-md) auto 0;
	font-size: 18px; color: var(--pw-text-secondary);
}

/* --- Kalkulator --- */
.rs-calc { margin: 0; }
.rs-calc__panel {
	max-width: 640px; margin: 0 auto;
	background: var(--pw-bg-alt);
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius-lg);
	padding: var(--pw-space-xl);
}
.rs-calc__controls {
	display: flex; flex-wrap: wrap; gap: var(--pw-space-lg);
	margin: 0 0 var(--pw-space-xl);
}
.rs-calc__field { flex: 1 1 220px; display: flex; flex-direction: column; gap: var(--pw-space-sm); }
.rs-calc__label { font-size: 13px; font-weight: 600; color: var(--pw-text-muted); }

/* Beide Bedienelemente teilen sich eine feste Hoehe, damit sie nebeneinander
   auf einer Linie liegen, unabhaengig von Schriftgroesse und Zeilenhoehe. */
.rs-calc__segment,
.rs-calc__number { height: 44px; box-sizing: border-box; }
.rs-calc__segment {
	display: inline-flex; padding: 3px; gap: 3px;
	background: var(--pw-bg-alt); border: 1px solid var(--pw-border); border-radius: var(--pw-radius-md);
}
.rs-calc__segment-option { flex: 1; }
.rs-calc__segment-option input {
	position: absolute; opacity: 0; width: 1px; height: 1px;
}
.rs-calc__segment-option span {
	display: flex; align-items: center; justify-content: center; height: 100%;
	cursor: pointer;
	padding: 0 var(--pw-space-md); border-radius: var(--pw-radius-sm);
	font-size: 15px; font-weight: 600; color: var(--pw-text-secondary);
	transition: background 0.15s, color 0.15s;
}
/* Aktiv als helle Pille auf getoentem Grund statt als schwarzer Block */
.rs-calc__segment-option input:checked + span {
	background: var(--pw-bg); color: var(--pw-text);
	box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.rs-calc__segment-option input:focus-visible + span { outline: 2px solid var(--pw-brand); outline-offset: 2px; }

.rs-calc__number {
	width: 100%;
	padding: 0 var(--pw-space-md);
	font-family: inherit; font-size: 16px; font-weight: 600; color: var(--pw-text);
	background: var(--pw-bg);
	border: 1px solid var(--pw-border); border-radius: var(--pw-radius-md);
}
.rs-calc__number:focus-visible { outline: 2px solid var(--pw-brand); outline-offset: 1px; }

.rs-calc__table { width: 100%; border-collapse: collapse; }
.rs-calc__table th,
.rs-calc__table td {
	padding: 12px 0; text-align: left;
	border-bottom: 1px solid var(--pw-border);
	font-size: 16px;
}
.rs-calc__table th { font-weight: 400; color: var(--pw-text-secondary); }
.rs-calc__table td { text-align: right; font-weight: 600; color: var(--pw-text); font-variant-numeric: tabular-nums; }
.rs-calc__row--discount td { color: var(--pw-text-secondary); }
.rs-calc__row--total th { font-weight: 700; color: var(--pw-text); }
.rs-calc__row--total th,
.rs-calc__row--total td { border-bottom: none; font-size: 20px; padding-top: var(--pw-space-md); }

.rs-calc__badge {
	display: inline-block; margin-left: var(--pw-space-sm);
	padding: 2px 8px; border-radius: 10px;
	background: var(--pw-border); color: var(--pw-text-secondary);
	font-size: 12px; font-weight: 700;
}
.rs-calc__note { margin: var(--pw-space-md) 0 0; font-size: 13px; color: var(--pw-text-muted); }
.rs-calc__note--volume { margin-top: var(--pw-space-xs); }
.rs-calc__cta { display: inline-flex; margin-top: var(--pw-space-lg); }
/* Der Button steht mittig, deshalb bekommt sein Umfeld die Zentrierung */
.rs-calc__actions { text-align: center; }

/* --- Laufzeit-Kacheln (erben pricing-card aus download.css) --- */
.rs-terms { margin: 0; }
.rs-terms .pricing-currencies { padding-top: 0; }
/* Rechtstext direkt unter den Kacheln, auf deren Breite. Ohne die Trennlinie
   von .pricing-disclaimer, die hier keinen Abschnitt mehr abschliesst. */
.rs-terms__legal {
	max-width: 760px; margin: var(--pw-space-lg) auto 0;
	text-align: center;
}
#content .rs-terms__legal p { font-size: 13px; line-height: 1.7; color: var(--pw-text-muted); margin: 0; }
#content .rs-terms__legal a { color: var(--pw-brand); }
.rs-terms__cta { margin-top: var(--pw-space-xl); text-align: center; }
/* Sprung zum Kalkulator statt eines zweiten gefuellten Buttons. Gleiche Form
   wie .dl-hero__compare auf der Download-Seite. */
.rs-terms__jump {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 15px; font-weight: 600;
	color: var(--pw-brand); text-decoration: none;
	transition: opacity 0.15s ease;
}
.rs-terms__jump:hover { opacity: 0.7; }
.rs-terms__jump svg { width: 15px; height: 15px; }
/* Zwei statt drei Spalten, dafuer breiter als auf der Download-Seite */
.rs-cards { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
.rs-card { text-align: center; }
#content h2.pricing-card__name { font-size: 20px; margin: 0 0 var(--pw-space-sm); }
/* Rabatt-Hervorhebung: gruenes Badge plus durchgestrichener Listenpreis */
#content .rs-card__saving {
	display: flex; align-items: center; justify-content: center;
	flex-wrap: wrap; gap: var(--pw-space-sm);
	margin: 0 0 var(--pw-space-lg);
	font-size: 15px; color: var(--pw-text-muted);
}
.rs-card__saving-badge {
	background: var(--pw-border); color: var(--pw-text-secondary);
	font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
	padding: 4px 10px; border-radius: 12px;
	white-space: nowrap;
}
.rs-card__saving s { text-decoration-thickness: 1px; }
.rs-card__saving s[hidden] { display: none; }
.pricing-card__badge .rs-terms__amount[hidden] { display: none; }
/* --- Bestellablauf --- */
.rs-order { margin: 0; }
/* Mittige Timeline: Nummer in der Titelzeile, dazwischen eine kurze Linie. */
.rs-order__steps {
	list-style: none; margin: 0 auto; padding: 0;
	max-width: 560px; text-align: center;
}
.rs-order__step { position: relative; }
/* Verbindungslinie zum naechsten Schritt, am letzten entfaellt sie */
.rs-order__step + .rs-order__step { margin-top: 44px; }
.rs-order__step + .rs-order__step::before {
	content: ""; position: absolute; left: 50%; top: -30px;
	width: 1px; height: 20px; background: var(--pw-border-light);
}
.rs-order__step-title {
	display: flex; align-items: center; justify-content: center; gap: var(--pw-space-sm);
	margin: 0 0 var(--pw-space-xs); font-size: 17px;
}
.rs-order__num {
	flex: 0 0 26px; width: 26px; height: 26px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--pw-brand); color: #fff;
	font-size: 13px; font-weight: 700;
}
.rs-order__step p { margin: 0; color: var(--pw-text-secondary); }

.rs-order__cta { text-align: center; }
.rs-order__cta p { margin: var(--pw-space-md) 0 0; font-size: 14px; color: var(--pw-text-muted); }
/* Nur der mailto-Link im Hinweis, nicht der Button darueber */
.rs-order__cta p a { color: var(--pw-brand); }

/* --- FAQ (erbt dl-faq aus download.css) --- */
.rs-faq { margin-bottom: var(--pw-space-2xl); }
.rs-faq .dl-faq__answer { padding-right: var(--pw-space-xl); margin-bottom: 20px; }
.rs-faq .dl-faq__answer p { font-size: 16px; line-height: 1.6; color: var(--pw-text-secondary); margin: 0 0 12px; }
.rs-faq .dl-faq__answer p:last-child { margin-bottom: 0; }
.rs-faq .dl-faq__answer a { color: var(--pw-brand); }

/* Im Dark Mode traegt der Schatten zu wenig: eine feine Kante zeichnet den
   aktiven Zustand des Toggles nach. */
@media (prefers-color-scheme: dark) {
	.rs-calc__segment-option input:checked + span { box-shadow: 0 0 0 1px var(--pw-border-light); }
}

@media (max-width: 720px) {
	.rs-cards { grid-template-columns: 1fr; max-width: 400px; }
}

@media (max-width: 600px) {
	.rs-band { padding: var(--pw-section-compact); }
	.rs-calc__panel { padding: var(--pw-space-lg); }
	.rs-calc__controls { gap: var(--pw-space-md); }
	.rs-calc__row--total th,
	.rs-calc__row--total td { font-size: 18px; }
}