/*
 * Landingpage „Jahreskalender 2027 – Werbepartner“ (Stefan 09.11.2026) – /kalender2027/, inc/aktion-kalender2027.php.
 * Ergänzt das Aktionsseiten-Muster (assets/aktion-weihnachten.css): Paketkarten wie Seite 1 der Verkaufsunterlage,
 * „Print trifft online“ mit Innenseite, Vorteile / Schritte / Termine dreispaltig. Nur Klassen .swk-*.
 */
.swk-pink { color: var(--swx-pink); }

/* Kopf: Mockup ist bereits schräg fotografiert – keine zusätzliche Drehung */
.swk-mockup img { transform: none; filter: none; }
.swk .swx-schild__hier { top: calc(100% + 33px); } /* abstand-ok: Stefan 09.11.2026 – 15 px mehr Luft unter dem Haltestellenschild (vorher 18 px) */
.swk .swx-linien--kopf { margin-bottom: 142px; } /* abstand-ok: Stefan 09.11.2026 – unter „Zu den Paketen“ 15 px mehr als ursprünglich (Knopf 15 px tiefer + 15 px) */
.swk-mockup figcaption { margin-top: 8px; font-family: var(--sw-font-ui); font-size: 14px; color: rgba(255, 255, 255, .72); text-align: right; }

/* Abschnitte auf Papier: nur oben Innenabstand (gleichfarbige Nachbarn = ein Abstand) */
.swk-sektion { padding: 112px var(--sw-pad) 0; /* abstand-ok: Abschnittsabstand der Aktionsseiten-Grundlage (.swx-raster 112 px) */ }
.swk-kopfzeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px 64px; align-items: end; margin-bottom: 48px; }
.swk-kopfzeile .swx-h2 { margin-bottom: 0; }
.swk .swx-h2 { font-size: clamp(34px, 3.4vw, 52px); }
.swk-intro { font-size: 19px; line-height: 1.55; color: var(--sw-ink); }
.swk-adresse { color: inherit !important; font-weight: 700; text-decoration: underline; text-decoration-color: var(--swx-pink); text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }
.swk-adresse:hover, .swk-adresse:focus-visible { color: #B70074 !important; }

/* Pakete */
.swk-pakete__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.swk-paket { position: relative; display: flex; flex-direction: column; padding: 32px; background: #FFFFFF; border: 2px solid var(--swx-tinte); }
.swk-paket--empfehlung { background: var(--swx-tinte); color: #FFFFFF; border-color: var(--swx-tinte); }
.swk-paket__marke { position: absolute; top: 0; left: 30px; transform: translateY(-50%); padding: 8px 16px; background: var(--swx-pink); color: #FFFFFF; font-family: var(--sw-font-ui); font-weight: 800; font-size: 13px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; }
.swk-paket__name { margin: 0; font-family: var(--sw-font-display); font-weight: 400; font-synthesis: none; font-size: clamp(26px, 2.1vw, 32px); line-height: 1; text-transform: uppercase; color: inherit; }
.swk-paket__preis { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 24px !important; padding-bottom: 24px; border-bottom: 1.5px solid #D8D0C4; }
.swk-paket--empfehlung .swk-paket__preis { border-bottom-color: rgba(255, 255, 255, .22); }
.swk-paket__preis b { font-family: var(--sw-font-display); font-weight: 400; font-size: clamp(64px, 5.6vw, 88px); line-height: .9; }
.swk-paket__preis span { font-family: var(--sw-font-display); font-size: 32px; line-height: 1; }
.swk-paket__preis small { margin-left: auto; font-family: var(--sw-font-ui); font-size: 13px; letter-spacing: .04em; color: var(--sw-text-2); white-space: nowrap; }
.swk-paket--empfehlung .swk-paket__preis small { color: rgba(255, 255, 255, .72); }
.swk-paket .swk-haken { margin-bottom: 32px; }
.swk-paket .swk-knopf { margin-top: auto; align-self: flex-start; }
.swk-fussnote { margin-top: 24px !important; font-size: 15px; color: var(--sw-text-2); }

/* Haken-Liste wie in der Verkaufsunterlage */
.swk-haken { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.swk-haken li { position: relative; padding-left: 32px; font-size: 17px; line-height: 1.5; }
.swk-haken li::before { content: ""; position: absolute; left: 3px; top: .28em; width: 7px; height: 13px; border: solid var(--swx-pink); border-width: 0 3px 3px 0; transform: rotate(42deg); }
.swk-haken b { font-weight: 700; }

/* Knopf auf Papier: Passer-Versatz nach Style Guide (Pink → Gelb), Fläche und Schrift bleiben */
.swk-knopf:hover, .swk-knopf:focus-visible { background: var(--swx-pink); color: #FFFFFF !important; border-color: var(--swx-pink); transform: translate(-4px, -4px); box-shadow: 4px 4px 0 var(--swx-gelb); }
.swk-paket:not(.swk-paket--empfehlung) .swk-knopf:focus-visible { outline-color: var(--swx-tinte); }
.swk-knopf { transition: transform .15s, box-shadow .15s; }

/* Print trifft online */
.swk-innenseite { margin: 0 auto; max-width: 1200px; }
.swk-innenseite img { display: block; width: 100%; height: auto; }
.swk-innenseite figcaption { margin-top: 16px; font-size: 15px; color: var(--sw-text-2); }

/* Vorteile · Schritte · Termine */
.swk-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px; padding-bottom: 112px; /* abstand-ok: Abschnittsabstand der Aktionsseiten-Grundlage (.swx-raster 112 px) */ }
.swk-raster .swx-h2 { font-size: clamp(30px, 2.6vw, 40px); }
.swk-schritte { margin: 0; padding: 0; list-style: none; counter-reset: swk; }
.swk-schritte li { position: relative; counter-increment: swk; padding: 0 0 24px 56px; /* abstand-ok: Ring 38 px + 18 px Luft, optischer Ausgleich zur Textzeile */ font-size: 17px; line-height: 1.5; }
.swk-schritte li::before { content: counter(swk); position: absolute; left: 0; top: -4px; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #FFFFFF; border: 4px solid var(--swx-tinte); box-sizing: border-box; font-family: var(--sw-font-display); font-size: 19px; line-height: 1; color: var(--swx-tinte); }
.swk-schritte li::after { content: ""; position: absolute; left: 16px; top: 4px; bottom: -4px; width: 6px; background: var(--swx-pink); }
.swk-schritte li:last-child { padding-bottom: 0; }
.swk-schritte li:last-child::after { display: none; }
.swk-schritte b { font-weight: 700; }

/* Termine-Linie (Stefan 09.11.2026): Punkt, Datum und Text auf einer gemeinsamen Mittelachse – bei mehrzeiligem Text zählt die Mitte des Textblocks.
   Anton 26/26: Versalmitte 12,75 px ≈ Boxmitte 13 px, daher reicht die Zentrierung der Boxen. */
.swk .swx-termine--linie div { align-items: center; grid-template-columns: 34px 96px minmax(0, 1fr); }
.swk .swx-termine--linie dt { line-height: 26px; }
.swk .swx-termine--linie div::before { align-self: center; }
.swk .swx-termine--linie div { padding: 24px 0; } /* mehr Abstand zwischen den Haltestellen (Stefan 09.11.2026, vorher 14 px) */
.swk .swx-termine--linie div:first-child { padding-top: 16px; }
.swk .swx-termine--linie div:last-child { padding-bottom: 16px; }

/* Abschluss */
.swk .swx-cta__h { font-size: clamp(40px, 3.9vw, 60px); }
.swk-cta__dach { margin-bottom: 16px !important; font-family: var(--sw-font-ui); font-weight: 800; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--swx-gelb); }
.swk-personen li { gap: 8px; }
.swk-personen .swk-mail { font-size: 16px; white-space: nowrap; }

@media (max-width: 1199px) {
	.swk-pakete__raster { grid-template-columns: minmax(0, 1fr); max-width: 620px; gap: 48px; }
	.swk-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.swk-raster > :last-child { grid-column: 1 / -1; max-width: 620px; }
	.swk-kopfzeile { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.swk-sektion { padding-top: 80px; /* abstand-ok: mobiler Abschnittsabstand der Aktionsseiten-Grundlage (.swx-raster 80 px) */ }
	.swk-kopfzeile { margin-bottom: 32px; }
	.swk-intro { font-size: 17px; }
	.swk-paket { padding: 32px 24px 24px; }
	.swk-paket__marke { left: 20px; }
	.swk-paket__preis small { margin-left: 4px; }
	.swk-raster { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-bottom: 80px; /* abstand-ok: mobiler Abschnittsabstand der Aktionsseiten-Grundlage (.swx-raster 80 px) */ }
	.swk-mockup figcaption { text-align: left; }
	.swk .swx-termine--linie dt { font-size: 26px; } /* mobil gleiche Datumsgröße, damit die Achse dieselbe bleibt */
	.swk .swx-linien--kopf { margin-bottom: 126px; } /* abstand-ok: Stefan 09.11.2026 – mobil ebenfalls +30 px (Grundlage 96 px) */
	.swk-personen .swk-mail { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .swk-knopf { transition: none; } .swk-knopf:hover, .swk-knopf:focus-visible { transform: none; } }