/* eventPIXX – Seiten-Komponenten
   Früher als <style>-Blöcke in den Routen-Dateien. Jeder Block ist mit
   :where(.page-…) auf seine Seite begrenzt; :where() hat Spezifität 0, die
   Kaskade bleibt damit wie vorher (main.css < pages.css < harmony.css).
   Die Body-Klasse page-… setzt index.php. */


/* === page-home (aus routes/default.php) === */
:where(.page-home) .product-preview {background:#fff;padding:60px 0}
:where(.page-home) .pp-moment {display:grid;grid-template-columns:minmax(0,1.45fr) minmax(240px,1fr);gap:36px 48px;align-items:center;margin:8px 0 48px}
:where(.page-home) .pp-moment-stage {position:relative;border-radius:18px;overflow:hidden;background:#0a0412;box-shadow:0 22px 50px rgba(26,10,32,.22)}
:where(.page-home) .pp-moment-player {display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#0a0412}
:where(.page-home) .pp-moment-beats {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
:where(.page-home) .pp-moment-beats li {display:flex;gap:14px;align-items:flex-start}
:where(.page-home) .pp-beat-num {flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--accent-color);color:#fff;font-weight:700;font-size:.85em;display:flex;align-items:center;justify-content:center;margin-top:2px}
:where(.page-home) .pp-moment-beats strong {display:block;font-size:1.12em;color:var(--heading-color);margin:0 0 4px}
:where(.page-home) .pp-moment-beats p {margin:0;font-size:.95em;line-height:1.55;color:#5a5a6a}
@media (max-width:991px) {
  :where(.page-home) .pp-moment {grid-template-columns:1fr;gap:28px;margin-bottom:40px}
}
:where(.page-home) .pp-cta-row {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 22px;margin-top:36px}
:where(.page-home) .product-preview .pp-cta-primary, :where(.page-home) .product-preview a.btn-hero.pp-cta-primary {margin-top:0}
:where(.page-home) .product-preview .pp-cta-primary:hover, :where(.page-home) .product-preview a.btn-hero.pp-cta-primary:hover {background:#5a1a58;color:#fff;transform:translateY(-2px);box-shadow:0 10px 26px rgba(116,35,114,.35)}
:where(.page-home) .pp-cta-secondary {display:inline-flex;align-items:center;gap:6px;color:var(--accent-color);font-weight:600;font-size:.95em;text-decoration:none;padding:10px 6px;transition:color .2s ease}
:where(.page-home) .pp-cta-secondary > span {text-decoration:underline;text-underline-offset:0.18em;text-decoration-thickness:1.5px}
:where(.page-home) .pp-cta-secondary:hover {color:#5a1a58}
:where(.page-home) .product-preview .pp-card {background:#faf8fb;border-radius:16px;padding:24px;height:100%;text-align:center;transition:transform .3s ease,box-shadow .3s ease;border:1px solid rgba(116,35,114,0.08)}
:where(.page-home) .product-preview .pp-card:hover {transform:translateY(-4px);box-shadow:0 12px 30px rgba(116,35,114,0.1)}
:where(.page-home) .product-preview .pp-mockup {margin:0 auto 18px;display:flex;align-items:center;justify-content:center;min-height:340px}
:where(.page-home) .product-preview .pp-title {font-size:1.15em;font-weight:700;color:var(--heading-color);margin:0 0 8px}
:where(.page-home) .product-preview .pp-desc {font-size:.92em;color:#5a5a6a;line-height:1.55;margin:0}
/* Real iPhone mockup (from real app screenshot) */
:where(.page-home) .pp-mockup-phone-real {display:flex;justify-content:center;filter:drop-shadow(0 18px 38px rgba(0,0,0,.22));transition:transform .35s ease}
:where(.page-home) .pp-mockup-phone-real img {display:block;height:auto;max-width:200px;width:100%}
:where(.page-home) .pp-card:hover .pp-mockup-phone-real {transform:translateY(-4px)}
/* Real slideshow TV mockup */
:where(.page-home) .pp-mockup-slideshow-real {display:flex;justify-content:center;width:100%;filter:drop-shadow(0 18px 38px rgba(0,0,0,.22));transition:transform .35s ease}
:where(.page-home) .pp-mockup-slideshow-real img {display:block;height:auto;max-width:340px;width:100%;border-radius:8px}
:where(.page-home) .pp-card:hover .pp-mockup-slideshow-real {transform:translateY(-4px)}

/* === page-home (aus routes/default.php) === */
:where(.page-home) .usp-system {padding:60px 0;background:#faf8fb;scroll-margin-top:96px}
:where(.page-home) .usp-hub {display:flex;align-items:stretch;justify-content:center;gap:18px;margin:8px auto 0;max-width:1000px}
:where(.page-home) .usp-lane {flex:1 1 0;display:flex;flex-direction:column;gap:12px;min-width:0}
:where(.page-home) .usp-lane-label {font-size:.72em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-color);text-align:center}
:where(.page-home) .usp-node {display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--accent-color);border-radius:14px;padding:14px 16px;box-shadow:0 4px 14px rgba(116,35,114,.06)}
:where(.page-home) .usp-node i {font-size:1.35em;color:var(--accent-color);flex:0 0 auto}
:where(.page-home) .usp-node strong {display:block;font-size:.95em;color:var(--heading-color);line-height:1.2}
:where(.page-home) .usp-node-addon {border-style:dashed;border-color:#c9a9c8;background:#fdfbfd}
:where(.page-home) .usp-node-addon i {opacity:.85}
:where(.page-home) .usp-tag {display:inline-block;margin-top:4px;font-size:.7em;font-weight:700;padding:2px 8px;border-radius:999px}
:where(.page-home) .usp-tag-core {background:rgba(116,35,114,.1);color:var(--accent-color)}
:where(.page-home) .usp-tag-addon {background:#f0e6ef;color:#8a5f8a}
:where(.page-home) .usp-core {flex:0 0 auto;align-self:center;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;padding:0 4px}
:where(.page-home) .usp-core-disc {width:96px;height:96px;border-radius:50%;background:var(--accent-color);color:#fff;display:flex;align-items:center;justify-content:center;font-size:2.4em;box-shadow:0 10px 28px rgba(116,35,114,.3);margin-bottom:6px}
:where(.page-home) .usp-core strong {font-size:1.05em;color:var(--heading-color)}
:where(.page-home) .usp-core span {font-size:.85em;color:#6a6a7a}
:where(.page-home) .usp-arrow {display:flex;align-items:center;color:#c9a9c8;font-size:1.5em;flex:0 0 auto}
:where(.page-home) .usp-standalone {max-width:760px;margin:30px auto 0;background:#fff;border:1px solid #e8e2ee;border-left:4px solid var(--accent-color);border-radius:12px;padding:16px 20px}
:where(.page-home) .usp-standalone p {margin:0;font-size:.95em;line-height:1.6;color:#3d3d4e}
:where(.page-home) .usp-standalone i {color:#1e7a1e;margin-right:4px}
:where(.page-home) .usp-quote {max-width:680px;margin:26px auto 0;text-align:center;font-size:1.15em;line-height:1.5;font-style:italic;color:var(--heading-color)}
:where(.page-home) .usp-quote cite {display:block;margin-top:10px;font-size:.72em;font-style:normal;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#8a8a9a}
@media (max-width:860px) {
  :where(.page-home) .usp-hub {flex-direction:column;align-items:stretch;gap:12px;max-width:420px}
  :where(.page-home) .usp-arrow {justify-content:center;transform:rotate(90deg)}
}

/* === page-home (aus routes/default.php) === */
:where(.page-home) .testimonials-home {padding:60px 0;background:#fff}
:where(.page-home) .th-card {background:#faf8fb;border-radius:16px;padding:26px 24px;height:100%;display:flex;flex-direction:column;gap:14px;border:1px solid rgba(116,35,114,.08);transition:transform .3s ease,box-shadow .3s ease}
:where(.page-home) .th-card:hover {transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
:where(.page-home) .th-stars {color:#ffb400;font-size:1em;letter-spacing:2px}
:where(.page-home) .th-card blockquote {margin:0;font-size:.98em;line-height:1.6;color:#3d3d4e;font-style:italic;flex:1}
:where(.page-home) .th-author {display:flex;align-items:center;gap:12px;margin-top:auto}
:where(.page-home) .th-avatar {width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9em;color:#fff;flex-shrink:0}
:where(.page-home) .th-avatar-1 {background:linear-gradient(135deg,#ffb6b6,#742372)}
:where(.page-home) .th-avatar-2 {background:linear-gradient(135deg,#a6caec,#2a4a7a)}
:where(.page-home) .th-avatar-3 {background:linear-gradient(135deg,#ffd36b,#b8740f)}
:where(.page-home) .th-name {font-weight:700;color:#1a1a2e;font-size:.95em}
:where(.page-home) .th-role {font-size:.82em;color:#8a8a9a}
:where(.page-home) .th-cta-row {text-align:center;margin-top:36px}
:where(.page-home) .th-google-link {display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px solid #e5e3eb;border-radius:999px;padding:10px 20px;text-decoration:none;color:#3d3d4e;box-shadow:0 4px 12px rgba(0,0,0,.06);transition:transform .2s ease,box-shadow .2s ease}
:where(.page-home) .th-google-link:hover {transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.1);color:#3d3d4e}
:where(.page-home) .th-google-link .bi-google {font-size:1.3em;background:linear-gradient(45deg,#4285F4,#EA4335 30%,#FBBC05 60%,#34A853);-webkit-background-clip:text;background-clip:text;color:transparent}
:where(.page-home) .th-google-link strong {color:var(--accent-color)}

/* === page-home (aus routes/default.php) === */
/* === Social-Proof-Strip enhancements === */
:where(.page-home) .social-proof-strip .proof-item-google {display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #e5e3eb;
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform .2s ease, box-shadow .2s ease;}
:where(.page-home) .social-proof-strip .proof-item-google:hover {transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);}
:where(.page-home) .proof-google-badge {width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;}
:where(.page-home) .proof-google-badge .bi-google {background: linear-gradient(45deg, #4285F4, #EA4335 30%, #FBBC05 60%, #34A853);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;}
:where(.page-home) .proof-google-content {display: flex;
  flex-direction: column;
  line-height: 1.1;}
:where(.page-home) .proof-google-stars {color: #ffb400;
  font-size: 12px;
  letter-spacing: 1px;}
:where(.page-home) .proof-google-text {font-size: 0.8em;
  font-weight: 600;
  color: #3d3d4e;}
:where(.page-home) .proof-item-cities {opacity: 0.85;
  font-size: 0.92em;}
/* === Hero v2 (Demo-Link + Trust-Rating Erweiterung) === */
:where(.page-home) .hero-v2-cta {align-items: center;}
:where(.page-home) .hero-v2-cta .btn-get-started {margin-top: 0;}
:where(.page-home) .hero-v2-demolink {color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95em;
  opacity: 0.92;
  transition: opacity .2s ease;
  display: inline-flex;
  align-items: center;
  align-self: center;
  line-height: 1;}
:where(.page-home) .hero-v2-demolink:hover {opacity: 1;
  color: #fff;}
:where(.page-home) .hero-trust-rating {display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ffd36b !important;
  font-weight: 500;}
:where(.page-home) .hero-trust-rating a {color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 0.92em;
  margin-left: 4px;}
:where(.page-home) #slideshow, :where(.page-home) #fotobox-section, :where(.page-home) #druckstation-section {scroll-margin-top: 96px;}
:where(.page-home) .product-overview .product-note {max-width:720px;margin:26px auto 0;text-align:center;font-size:.92em;color:#6a6a7a;line-height:1.55}
:where(.page-home) .product-overview .product-note i {color:var(--accent-color);margin-right:4px}
:where(.page-home) .product-system {background:var(--surface-muted,#f8f7fb);border:1px solid var(--border-color);border-radius:var(--radius-xl,20px);padding:26px 24px 30px}
:where(.page-home) .product-system-flow {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;margin:0 auto 26px;max-width:760px;text-align:center}
:where(.page-home) .product-system-flow .psf-item {display:inline-flex;align-items:center;background:#fff;border:1px solid var(--border-color);border-radius:999px;padding:6px 14px;font-size:.9em;font-weight:600;color:var(--heading-color)}
:where(.page-home) .product-system-flow .psf-base {border-color:var(--accent-color);color:var(--accent-color);box-shadow:0 2px 10px rgba(116,35,114,.12)}
:where(.page-home) .product-system-flow .psf-plus {color:#b09ab0;font-size:.85em}
:where(.page-home) .product-system-flow .psf-arrow {color:#c9a9c8;font-size:1.1em;margin:0 2px}
:where(.page-home) .product-system-flow .psf-target {display:inline-flex;align-items:center;gap:6px;background:var(--accent-color);color:#fff;border-radius:999px;padding:6px 16px;font-size:.9em;font-weight:700}
:where(.page-home) .product-system-flow .psf-target i {font-size:1.05em}
@media (max-width:575.98px) {
  :where(.page-home) .product-system {padding:18px 12px 22px}
  :where(.page-home) .product-system-flow {gap:6px 8px}
  :where(.page-home) .product-system-flow .psf-item, :where(.page-home) .product-system-flow .psf-target {padding:5px 12px;font-size:.82em}
  :where(.page-home) .product-system-flow .psf-arrow {width:100%;transform:rotate(90deg);margin:2px 0}
}

/* === page-home (aus routes/default.php) === */
/* Comparison */
:where(.page-home) .comparison-section {padding:60px 0;background:#faf8fb}
:where(.page-home) .comparison-wrap {overflow-x:auto;max-width:1080px;margin:0 auto}
:where(.page-home) .comparison-table {width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.08)}
:where(.page-home) .comparison-table th, :where(.page-home) .comparison-table td {padding:15px 18px;text-align:left;border-bottom:1px solid #f0eef3;font-size:.92em;vertical-align:middle;line-height:1.4}
:where(.page-home) .comparison-table th:first-child, :where(.page-home) .comparison-table td:first-child {width:26%}
:where(.page-home) .comparison-table th:not(:first-child), :where(.page-home) .comparison-table td:not(:first-child) {width:24.666%}
:where(.page-home) .comparison-table thead th {background:#faf8fb;font-weight:700;font-size:.95em;color:var(--heading-color);padding-top:18px;padding-bottom:18px}
:where(.page-home) .comparison-table thead th i {margin-right:8px;font-size:1.05em;vertical-align:-1px}
:where(.page-home) .comparison-table tbody tr:last-child td {border-bottom:none}
:where(.page-home) .comparison-table tbody td:first-child {font-weight:600;color:#1a1a2e;background:#fcfbfd}
:where(.page-home) .comparison-table .comp-us {background:rgba(116,35,114,.06);color:var(--accent-color);position:relative}
:where(.page-home) .comparison-table td.comp-us, :where(.page-home) .comparison-table tbody tr td:last-child {background:rgba(116,35,114,.04);border-left:2px solid rgba(116,35,114,.18)}
:where(.page-home) .comparison-table tbody tr:hover td {background:rgba(116,35,114,.02)}
:where(.page-home) .comparison-table tbody tr:hover td:last-child {background:rgba(116,35,114,.08)}
:where(.page-home) .comp-badge {display:inline-block;background:var(--accent-color);color:#fff;font-size:.68em;font-weight:700;padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px}
:where(.page-home) .comparison-table thead th.comp-us .comp-badge {display:block;width:fit-content;margin:0 0 6px}
:where(.page-home) .comp-us-name {display:block}
:where(.page-home) .comp-cell {display:flex;align-items:flex-start;gap:10px}
:where(.page-home) .comp-cell i {flex:0 0 16px;width:16px;margin-top:2px;font-size:.95em;line-height:1}
:where(.page-home) .comp-cell span {color:#5a5a6a;font-size:.92em;line-height:1.4}
:where(.page-home) .comp-yes {color:#1e7a1e;font-weight:700}
:where(.page-home) .comp-no {color:#c42c2c;font-weight:700}
:where(.page-home) .comp-meh {color:#d58600}
:where(.page-home) .comp-mobile {display:flex;flex-direction:column;gap:14px}
:where(.page-home) .comp-mobile-card {background:#fff;border-radius:14px;padding:18px 16px;box-shadow:0 4px 16px rgba(0,0,0,.06);border:1px solid #e5e3eb}
:where(.page-home) .comp-mobile-card.comp-mobile-us {border:2px solid var(--accent-color);background:rgba(116,35,114,.03);position:relative;padding-top:28px}
:where(.page-home) .comp-mobile-card.comp-mobile-us .comp-badge {position:absolute;top:-12px;left:16px}
:where(.page-home) .comp-mobile-card h4 {font-size:1em;font-weight:700;margin:0 0 10px;display:flex;align-items:center;gap:8px}
:where(.page-home) .comp-mobile-card ul {list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
:where(.page-home) .comp-mobile-card li {font-size:.88em;display:flex;gap:8px;align-items:flex-start;color:#3d3d4e}
:where(.page-home) .comp-footnote {text-align:center;margin:28px auto 0;max-width:700px;color:#5a5a6a;font-size:.95em}
:where(.page-home) .comp-footnote strong {color:var(--accent-color)}
:where(.page-home) .comp-fotobox {max-width:820px;margin:34px auto 0}
:where(.page-home) .comp-fotobox-title {text-align:center;font-size:1.15em;font-weight:700;color:var(--heading-color);margin:0 0 18px}
:where(.page-home) .comp-fotobox-grid {display:grid;grid-template-columns:1fr 1fr;gap:14px}
:where(.page-home) .comp-fb-card {background:#fff;border-radius:14px;padding:20px 18px;box-shadow:0 4px 16px rgba(0,0,0,.06);border:1px solid #e5e3eb}
:where(.page-home) .comp-fb-card.comp-fb-us {border:2px solid var(--accent-color);background:rgba(116,35,114,.03);position:relative;padding-top:28px}
:where(.page-home) .comp-fb-card.comp-fb-us .comp-badge {position:absolute;top:-12px;left:18px}
:where(.page-home) .comp-fb-card h4 {font-size:1em;font-weight:700;margin:0 0 12px;display:flex;align-items:center;gap:8px;color:var(--heading-color)}
:where(.page-home) .comp-fb-card h4 span {font-weight:500;color:#8a8a9a;font-size:.9em}
:where(.page-home) .comp-fb-card h4 .bi-box {color:#8a8a9a}
:where(.page-home) .comp-fb-card ul {list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
:where(.page-home) .comp-fb-card li {font-size:.9em;display:flex;gap:8px;align-items:flex-start;color:#3d3d4e;line-height:1.4}
:where(.page-home) .comp-fb-card li i {flex:0 0 16px;margin-top:2px}
@media (max-width:640px) {
  :where(.page-home) .comp-fotobox-grid {grid-template-columns:1fr}
}

/* === page-kaufen (aus routes/buy.php) === */
:where(.page-kaufen) .buy-hero-sub {color: var(--muted-color);
  font-size: 1.05rem;
  margin: 10px 0 0;}
:where(.page-kaufen) .buy-section-heading {color: var(--heading-color);
  font-weight: 800;
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  letter-spacing: -0.03em;
  text-wrap: pretty;}
:where(.page-kaufen) .buy-section-sub {max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  color: var(--muted-color);
  text-wrap: pretty;}
:where(.page-kaufen) #service-details.service-details {background: var(--surface-muted, #f8f7fb);}
:where(.page-kaufen) .buy-wizard-card.card {background: #fff;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-sm);}
/* Buy Progress Indicator */
:where(.page-kaufen) .buy-progress {list-style:none;padding:0;margin:0 auto 28px;display:flex;justify-content:center;gap:12px;max-width:760px;counter-reset:step}
:where(.page-kaufen) .buy-progress-step {flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;color:#aeadba;transition:color .3s ease}
:where(.page-kaufen) .buy-progress-step::after {content:"";position:absolute;top:17px;left:calc(50% + 22px);right:calc(-50% + 22px);height:2px;background:#e5e3eb;z-index:0}
:where(.page-kaufen) .buy-progress-step:last-child::after {display:none}
:where(.page-kaufen) .buy-progress-num {width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid #e5e3eb;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9em;color:#aeadba;z-index:1;transition:all .3s ease}
:where(.page-kaufen) .buy-progress-label {font-size:.82em;font-weight:600;text-align:center}
:where(.page-kaufen) .buy-progress-step.active {color:var(--accent-color)}
:where(.page-kaufen) .buy-progress-step.active .buy-progress-num {background:var(--accent-color);border-color:var(--accent-color);color:#fff;box-shadow:0 4px 12px rgba(116,35,114,.3)}
:where(.page-kaufen) .buy-progress-step.completed {color:var(--accent-color)}
:where(.page-kaufen) .buy-progress-step.completed .buy-progress-num {background:var(--accent-color);border-color:var(--accent-color);color:#fff}
:where(.page-kaufen) .buy-progress-step.completed .buy-progress-num::before {content:"\2713";font-size:1.1em}
:where(.page-kaufen) .buy-progress-step.completed .buy-progress-num>* {display:none}
:where(.page-kaufen) .buy-progress-step.completed::after {background:var(--accent-color)}
@media (max-width:576px) {
  :where(.page-kaufen) .buy-progress {gap:4px}
  :where(.page-kaufen) .buy-progress-label {font-size:.72em}
  :where(.page-kaufen) .buy-progress-num {width:28px;height:28px;font-size:.8em}
  :where(.page-kaufen) .buy-progress-step::after {top:14px}
}
/* Wizard Layout */
:where(.page-kaufen) .buy-wizard {display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
@media(min-width:992px) {
  :where(.page-kaufen) .buy-wizard {grid-template-columns:minmax(0,1fr) 320px}
}
:where(.page-kaufen) .buy-wizard-main {margin:0;min-width:0}
:where(.page-kaufen) .wizard-step {display:none;animation:wizardFade .3s ease}
:where(.page-kaufen) .wizard-step.is-active {display:block}
@keyframes wizardFade {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
:where(.page-kaufen) .wizard-nav {display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:28px;padding-top:20px;border-top:1px solid #ece9f1}
/* Bootstrap 5.3 faerbt .btn ueber --bs-btn-*. Sind die Variablen nicht gesetzt,
   faellt der Klick-Zustand (.btn:active) auf transparenten Hintergrund zurueck. */
:where(.page-kaufen) .wizard-nav .buy-wizard-next {--bs-btn-color:#fff;--bs-btn-bg:#742372;--bs-btn-border-color:#742372;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#5a1a58;--bs-btn-hover-border-color:#5a1a58;--bs-btn-active-color:#fff;--bs-btn-active-bg:#5a1a58;--bs-btn-active-border-color:#5a1a58;--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#742372;--bs-btn-disabled-border-color:#742372;margin-left:auto;background:var(--accent-color);color:#fff;border:none;border-radius:var(--radius-md,12px);padding:13px 26px;font-weight:600;font-size:1rem;transition:background .2s ease,transform .2s ease}
:where(.page-kaufen) .wizard-nav .buy-wizard-next:hover {background:#5a1a58;transform:translateY(-1px);color:#fff}
:where(.page-kaufen) .wizard-nav .buy-wizard-back {--bs-btn-color:#6b6b7a;--bs-btn-bg:transparent;--bs-btn-border-color:#d9d5e2;--bs-btn-hover-color:#1a1a2e;--bs-btn-hover-bg:#f3f0f7;--bs-btn-hover-border-color:#d9d5e2;--bs-btn-active-color:#1a1a2e;--bs-btn-active-bg:#e9e4f0;--bs-btn-active-border-color:#d9d5e2;background:transparent;color:#6b6b7a;border:1px solid #d9d5e2;border-radius:var(--radius-md,12px);padding:12px 22px;font-weight:600;font-size:.95rem;transition:all .2s ease}
:where(.page-kaufen) .wizard-nav .buy-wizard-back:hover {background:#f3f0f7;color:#1a1a2e}
:where(.page-kaufen) .wizard-nav-pay {flex-wrap:wrap}
:where(.page-kaufen) .wizard-nav-pay .d-grid {min-width:240px}
@media(max-width:575.98px) {
  :where(.page-kaufen) .wizard-nav-pay {flex-direction:column-reverse;align-items:stretch}
  :where(.page-kaufen) .wizard-nav-pay .buy-wizard-back {width:100%}
}
:where(.page-kaufen) .buy-progress-step {cursor:default}
:where(.page-kaufen) .buy-progress-step.is-clickable {cursor:pointer}
:where(.page-kaufen) .buy-essentials {max-width: 900px;
  margin: 0 auto 34px;
  text-align: center;}
:where(.page-kaufen) .buy-essentials-label {margin: 0 0 12px;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-color);}
/* Ein zusammenhängender Streifen statt vier Einzelkarten: die Essentials sind EIN
   Bundle ("in jedem Paket") und sollen nicht mit den Pricing-Karten darunter konkurrieren. */
:where(.page-kaufen) .buy-essentials-list {list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, #fdfcfe, #faf7fc);
  border: 1px solid rgba(116, 35, 114, 0.1);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 2px 10px rgba(20, 10, 30, 0.04);
  overflow: hidden;}
:where(.page-kaufen) .buy-essentials .buy-essentials-list li {display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 13px;
  row-gap: 2px;
  text-align: left;
  padding: 18px 16px 18px 20px;}
:where(.page-kaufen) .buy-essentials .buy-essentials-list li + li {border-left: 1px solid rgba(116, 35, 114, 0.08);}
:where(.page-kaufen) .buy-essentials-icon {grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(116, 35, 114, 0.13), rgba(116, 35, 114, 0.05));}
/* Icon-Fonts sitzen über die Font-Metrik (Ascent/Descent) leicht außermittig.
   Deshalb das Glyph metrik-unabhängig per Flex im i-Element zentrieren. */
:where(.page-kaufen) .buy-essentials-icon i {display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--accent-color);}
:where(.page-kaufen) .buy-essentials-icon i::before {display: block;
  line-height: 1;
  vertical-align: 0;}
:where(.page-kaufen) .buy-essentials .buy-essentials-list li strong {grid-column: 2;
  align-self: end;
  margin: 0;
  font-size: 0.86em;
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
  color: var(--heading-color);}
:where(.page-kaufen) .buy-essentials .buy-essentials-list li > span:last-child {grid-column: 2;
  align-self: start;
  font-size: 0.76em;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted-color);}
/* Unter 992px reicht der Platz nicht für 4 Spalten (Titel brechen 3-zeilig um) → 2×2 */
@media (max-width: 991.98px) {
  :where(.page-kaufen) .buy-essentials-list {grid-template-columns: 1fr 1fr;}
  :where(.page-kaufen) .buy-essentials .buy-essentials-list li + li {border-left: 0;}
  :where(.page-kaufen) .buy-essentials .buy-essentials-list li:nth-child(even) {border-left: 1px solid rgba(116, 35, 114, 0.08);}
  :where(.page-kaufen) .buy-essentials .buy-essentials-list li:nth-child(n+3) {border-top: 1px solid rgba(116, 35, 114, 0.08);}
}
@media (max-width: 767.98px) {
  :where(.page-kaufen) .buy-essentials {margin-bottom: 24px;}
  :where(.page-kaufen) .buy-essentials-label {margin-bottom: 10px;}
  :where(.page-kaufen) .buy-essentials .buy-essentials-list li {column-gap: 11px;
    padding: 14px 12px 14px 16px;}
  :where(.page-kaufen) .buy-essentials-icon {width: 40px;
    height: 40px;
    border-radius: 11px;}
  :where(.page-kaufen) .buy-essentials-icon i {font-size: 1.15rem;}
  :where(.page-kaufen) .buy-essentials .buy-essentials-list li strong {font-size: 0.8em;}
  :where(.page-kaufen) .buy-essentials .buy-essentials-list li > span:last-child {font-size: 0.72em;}
}
@media (max-width: 400px) {
  :where(.page-kaufen) .buy-essentials-list {grid-template-columns: 1fr;}
  :where(.page-kaufen) .buy-essentials .buy-essentials-list li:nth-child(even) {border-left: 0;}
  :where(.page-kaufen) .buy-essentials .buy-essentials-list li + li {border-top: 1px solid rgba(116, 35, 114, 0.08);}
}
/* Pricing Cards */
:where(.page-kaufen) .pricing-box {background: #fff;
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-sm);
  padding: 32px 28px;
  text-align: center;
  transition: transform var(--duration-normal, 0.25s) var(--ease-out, ease), box-shadow var(--duration-normal, 0.25s) var(--ease-out, ease), border-color var(--duration-normal, 0.25s) var(--ease-out, ease);
  cursor: pointer;
  border: 1px solid var(--border-color);
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;}
:where(.page-kaufen) .pricing-box:hover {transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(116, 35, 114, 0.16);}
:where(.page-kaufen) .pricing-box.selected {border: 2px solid var(--accent-color);
  background: linear-gradient(180deg, #fdf6fd 0%, #fff 42%);
  box-shadow: 0 0 0 4px rgba(116, 35, 114, 0.14), 0 12px 32px rgba(116, 35, 114, 0.16);
  transform: translateY(-3px);}
/* Deutliches "Ausgewählt"-Signal auf den beiden Standardkarten (S, M). */
:where(.page-kaufen) .pricing-box.selected:not(.pricing-pro-strip):not(.pricing-free-strip)::after {content: "\2713\00a0 Ausgew\00e4hlt";
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  background: var(--accent-color);
  color: #fff;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(116, 35, 114, 0.3);}
/* Streifen (FREE, PRO) behalten ihre Zeile – Auswahl über Rahmen + Button. */
:where(.page-kaufen) .pricing-pro-strip.selected, :where(.page-kaufen) .pricing-free-strip.selected {border: 2px solid var(--accent-color);
  background: linear-gradient(180deg, #fdf6fd 0%, #fff 60%);
  box-shadow: 0 0 0 4px rgba(116, 35, 114, 0.14), 0 12px 32px rgba(116, 35, 114, 0.16);
  transform: none;}
:where(.page-kaufen) .pricing-pro-strip.selected .pro-strip-select, :where(.page-kaufen) .pricing-free-strip.selected .pro-strip-select {background: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
  box-shadow: 0 4px 14px rgba(116, 35, 114, 0.28);}
:where(.page-kaufen) .pricing-pro-strip.selected .pro-strip-select::before, :where(.page-kaufen) .pricing-free-strip.selected .pro-strip-select::before {content: "\2713\00a0";
  font-weight: 700;}
/* Kurzes Aufleuchten, wenn per Link (?pkg= oder #PAKET) angesprungen. */
@keyframes pkgFlash {
  0%, 100% { box-shadow: 0 0 0 4px rgba(116, 35, 114, 0.14), 0 12px 32px rgba(116, 35, 114, 0.16); }
  30%      { box-shadow: 0 0 0 8px rgba(116, 35, 114, 0.28), 0 16px 40px rgba(116, 35, 114, 0.28); }
}
:where(.page-kaufen) .pricing-box.pkg-flash {animation: pkgFlash 1s ease;}
@media (prefers-reduced-motion: reduce) {
  :where(.page-kaufen) .pricing-box.pkg-flash {animation: none;}
}
:where(.page-kaufen) .pricing-badge {position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: #742372;
  color: #fff;
  font-size: 0.8em;
  font-weight: 600;
  padding: 5px 18px;
  border-radius: var(--radius-md);
  white-space: nowrap;}
:where(.page-kaufen) .pricing-header h3 {margin: 0 0 8px;
  font-size: 1.3em;
  color: var(--heading-color);}
:where(.page-kaufen) .pricing-accent {color: var(--accent-color);
  font-weight: 700;}
:where(.page-kaufen) .pricing-old-price {font-size: 1.15em;
  color: #b0a0b0;
  text-decoration: line-through;
  font-weight: 500;
  margin-bottom: 2px;}
:where(.page-kaufen) .pricing-price {font-size: 2.8em;
  font-weight: 700;
  color: var(--heading-color);
  line-height: 1.1;}
:where(.page-kaufen) .pricing-save {display: inline-block;
  background: rgba(116, 35, 114, 0.08);
  color: var(--accent-color);
  font-size: 0.78em;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: var(--radius-pill, 50px);
  margin-top: 6px;}
:where(.page-kaufen) .pricing-period {font-size: 0.9em;
  color: #6a6a7a;
  margin-bottom: 16px;
  margin-top: 4px;}
:where(.page-kaufen) .pricing-desc {font-size: 0.95em;
  color: var(--muted-color);
  margin-bottom: 12px;
  text-wrap: pretty;
  min-height: 3.1em;}
:where(.page-kaufen) .pricing-usecases {display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px;}
:where(.page-kaufen) .usecase-tag {display: inline-block;
  font-size: 0.78em;
  font-weight: 500;
  color: var(--accent-color);
  background: rgba(116, 35, 114, 0.07);
  border: 1px solid rgba(116, 35, 114, 0.15);
  padding: 4px 12px;
  border-radius: var(--radius-md);
  white-space: nowrap;}
:where(.page-kaufen) .pricing-features {list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;}
:where(.page-kaufen) .pricing-features li {display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0eef3;}
:where(.page-kaufen) .pricing-features li:last-child {border-bottom: none;}
:where(.page-kaufen) .pricing-features li i {color: var(--accent-color);
  font-size: 1em;
  flex-shrink: 0;
  margin-top: 2px;}
:where(.page-kaufen) .pricing-features li div {min-width: 0;}
:where(.page-kaufen) .pricing-features li strong {display: block;
  color: #1a1a2e;
  font-size: 0.93em;
  font-weight: 600;
  line-height: 1.4;}
:where(.page-kaufen) .feature-sub {display: block;
  font-size: 0.83em;
  color: #8a8a9a;
  line-height: 1.45;
  margin-top: 3px;}
:where(.page-kaufen) .pricing-pro {text-align: center;
  margin-top: 8px;}
:where(.page-kaufen) .pricing-pro-grid {display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: center;
  margin-top: 8px;}
:where(.page-kaufen) .pricing-pro-feature {background: #faf8fb;
  border-radius: 12px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;}
:where(.page-kaufen) .pro-feature-icon {width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(116, 35, 114, 0.08);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  margin-bottom: 4px;}
:where(.page-kaufen) .pricing-pro-feature strong {font-size: 0.9em;
  color: #1a1a2e;}
:where(.page-kaufen) .pricing-pro-feature span {font-size: 0.82em;
  color: #7a7a8a;
  line-height: 1.4;}
:where(.page-kaufen) .pricing-pro-hint {margin: 16px 0 0 0;
  font-size: 0.82em;
  color: #888;
  line-height: 1.5;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;}
:where(.page-kaufen) .pro-form-hint {background: linear-gradient(135deg, #faf5fb 0%, #f3ebf7 100%);
  border: 1px solid #e0d0e8;
  border-left: 4px solid var(--accent-color);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: 0.92em;
  color: #555;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 10px;}
:where(.page-kaufen) .pro-form-hint i {color: var(--accent-color);
  font-size: 1.2em;
  flex-shrink: 0;
  margin-top: 1px;}
@media (max-width: 768px) {
  :where(.page-kaufen) .pricing-pro-grid {grid-template-columns: repeat(2, 1fr);
    gap: 10px;}
  :where(.page-kaufen) .pricing-pro-feature {padding: 16px 12px;}
}
@media (max-width: 420px) {
  :where(.page-kaufen) .pricing-pro-grid {grid-template-columns: 1fr;}
}
/* New feature highlight */
:where(.page-kaufen) .pricing-new-tag {display: inline-block;
  font-size: 0.7em;
  font-weight: 700;
  color: #fff !important;
  background: var(--accent-color);
  padding: 3px 10px;
  border-radius: 20px;
  vertical-align: middle;
  margin-left: 6px;
  letter-spacing: 0.3px;
  line-height: 1.3;}
:where(.page-kaufen) .pricing-feature-new {background: linear-gradient(135deg, rgba(116,35,114,0.04), rgba(116,35,114,0.02));
  border-radius: 8px;
  margin: 0 -8px;
  padding-left: 20px !important;
  padding-right: 12px !important;}
:where(.page-kaufen) .pricing-pro-feature-new {grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  text-align: left;
  border: 1px solid rgba(116,35,114,0.15);
  background: linear-gradient(135deg, #fdf5fd, #f6ecf6);}
:where(.page-kaufen) .pricing-pro-feature-new .pro-feature-icon {flex-shrink: 0;}
:where(.page-kaufen) .pricing-pro-feature-new span {flex: 1;}
/* Promo / Partner-Code */
:where(.page-kaufen) .buy-promo {margin: 4px 0 20px;}
:where(.page-kaufen) .buy-promo-toggle {width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid #ece4f2;
  border-radius: 14px;
  background: #faf8fb;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;}
:where(.page-kaufen) .buy-promo-toggle:hover, :where(.page-kaufen) .buy-promo-toggle.is-open {border-color: rgba(116, 35, 114, 0.28);
  background: #fff;
  box-shadow: 0 4px 16px rgba(116, 35, 114, 0.06);}
:where(.page-kaufen) .buy-promo-icon {width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(116, 35, 114, 0.1);
  color: var(--accent-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  flex-shrink: 0;}
:where(.page-kaufen) .buy-promo-copy {display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;}
:where(.page-kaufen) .buy-promo-copy strong {font-size: 0.92em;
  font-weight: 700;
  color: #1a1a2e;}
:where(.page-kaufen) .buy-promo-copy small {font-size: 0.78em;
  color: #6b6b7a;
  line-height: 1.35;}
:where(.page-kaufen) .buy-promo-chevron {color: var(--accent-color);
  font-size: 0.95em;
  transition: transform .2s;}
:where(.page-kaufen) .buy-promo-toggle.is-open .buy-promo-chevron {transform: rotate(180deg);}
:where(.page-kaufen) .buy-promo-panel {margin-top: 10px;
  padding: 14px 14px 12px;
  border: 1px solid #ece4f2;
  border-radius: 14px;
  background: #fff;}
:where(.page-kaufen) .buy-promo-field {position: relative;}
:where(.page-kaufen) .buy-promo-field i {position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-color);
  font-size: 1.05em;
  pointer-events: none;}
:where(.page-kaufen) .buy-promo-field .form-control {border-radius: 12px;
  border: 1.5px solid #d8d0e0;
  padding: 12px 14px 12px 40px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;}
:where(.page-kaufen) .buy-promo-field .form-control:focus {border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(116, 35, 114, 0.12);}
:where(.page-kaufen) .buy-promo-hints {display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;}
:where(.page-kaufen) .buy-promo-hint {display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f6f0f7;
  color: #5a4a62;
  font-size: 0.76em;
  font-weight: 600;}
:where(.page-kaufen) .buy-promo-hint i {color: var(--accent-color);}
:where(.page-kaufen) .buy-promo.has-result .buy-promo-hints {display: none;}
/* FREE: schlanke Zustimmung im One-Click-Flow */
:where(.page-kaufen) .buy-free-consent {margin-top: 18px;}
:where(.page-kaufen) .buy-free-consent .form-check-input {width: 20px;
  height: 20px;
  border: 2px solid #c5c0d0;
  flex-shrink: 0;}
:where(.page-kaufen) .buy-free-consent .form-check-input:checked {background-color: var(--accent-color);
  border-color: var(--accent-color);}
:where(.page-kaufen) .buy-free-consent span {font-size: 0.92em; color: #3a3a4a; line-height: 1.5;}
:where(.page-kaufen) .buy-free-consent span a {color: var(--accent-color); font-weight: 600;}
:where(.page-kaufen) .buy-free-consent-note {margin: 10px 0 0;
  font-size: 0.82em;
  color: var(--muted-color);
  line-height: 1.5;}
/* Trust Strip above CTA */
:where(.page-kaufen) .buy-trust-strip {display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px 0;}
:where(.page-kaufen) .buy-trust-strip span {display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78em;
  font-weight: 600;
  color: #666;}
:where(.page-kaufen) .buy-trust-strip span i {color: var(--accent-color);
  font-size: 1em;}
/* Form Cards */
:where(.page-kaufen) .buy-form-card {border-radius: 16px !important;
  border: 1px solid #e2e0e8 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  background: #fff;}
:where(.page-kaufen) .buy-form-card h5 {color: var(--heading-color);
  font-size: 1.05rem;}
:where(.page-kaufen) .buy-form-card .form-label {font-weight: 500;
  color: var(--heading-color);
  font-size: 0.95rem;
  margin-bottom: 6px;}
:where(.page-kaufen) .buy-form-card .form-control {border-radius: 12px;
  border: 1.5px solid #d0cdd8;
  padding: 12px 16px;
  font-size: 1rem;
  color: #1a1a2e;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;}
:where(.page-kaufen) .buy-form-card .form-control:focus {border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(116, 35, 114, 0.12);
  outline: none;}
:where(.page-kaufen) .buy-form-card .form-control::placeholder {color: #9a96a6;}
:where(.page-kaufen) .buy-form-card .form-check-input {width: 20px;
  height: 20px;
  border: 2px solid #c5c0d0;
  flex-shrink: 0;}
:where(.page-kaufen) .buy-form-card .form-check-input:checked {background-color: var(--accent-color);
  border-color: var(--accent-color);}
:where(.page-kaufen) .buy-form-card .form-check-input:focus {box-shadow: 0 0 0 3px rgba(116, 35, 114, 0.15);}
/* Price Badge */
:where(.page-kaufen) .buy-price-badge {display: inline-block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-color);
  background: rgba(116, 35, 114, 0.08);
  padding: 14px 40px;
  border-radius: var(--radius-md);
  border: 2px solid rgba(116, 35, 114, 0.2);
  box-shadow: 0 4px 15px rgba(116, 35, 114, 0.1);}
/* Order Button */
:where(.page-kaufen) .buy-order-btn {/* Bootstrap 5.3 faerbt .btn ueber --bs-btn-*. Ohne Varianten-Klasse wie
     .btn-primary sind diese Variablen undefiniert, wodurch .btn:hover,
     :focus-visible und :active den Hintergrund auf transparent setzen. */
  --bs-btn-color: #fff;
  --bs-btn-bg: #742372;
  --bs-btn-border-color: #742372;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5a1a58;
  --bs-btn-hover-border-color: #5a1a58;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #5a1a58;
  --bs-btn-active-border-color: #5a1a58;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #742372;
  --bs-btn-disabled-border-color: #742372;
  background: #742372;
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 1.05em;
  padding: 14px 40px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(116, 35, 114, 0.25);}
:where(.page-kaufen) .buy-order-btn:hover, :where(.page-kaufen) .buy-order-btn:focus-visible {background: #5a1a58;
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(116, 35, 114, 0.35);
  color: #fff;}
/* Stripe Payment Element */
:where(.page-kaufen) .checkout-payment {width: 100%;
  max-width: 500px;
  margin: 20px auto 0;}
:where(.page-kaufen) .checkout-payment[hidden], :where(.page-kaufen) .checkout-waiting[hidden] {display: none;}
:where(.page-kaufen) .checkout-pay-btn {width: 100%;
  margin-top: 20px;}
:where(.page-kaufen) .checkout-pay-btn:disabled {opacity: 0.6;
  cursor: not-allowed;}
:where(.page-kaufen) .checkout-secure-note {text-align: center;
  font-size: 12px;
  color: #7a7a8a;
  margin: 12px 0 0;}
:where(.page-kaufen) .checkout-invoice-note {margin-top: 8px;
  line-height: 1.5;}
:where(.page-kaufen) .checkout-invoice-note a {color: inherit;
  text-decoration: underline;}
:where(.page-kaufen) .checkout-waiting {max-width: 500px;
  margin: 24px auto 0;
  padding: 20px;
  text-align: center;
  background: #f4f2f9;
  border-radius: 12px;}
:where(.page-kaufen) .checkout-waiting p {margin: 12px 0 0;
  font-size: 14px;
  color: #5a5a6a;
  line-height: 1.5;}
:where(.page-kaufen) .checkout-spinner {display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid #d8cde0;
  border-top-color: var(--accent-color);
  border-radius: 50%;
  animation: checkout-spin 0.8s linear infinite;}
@keyframes checkout-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  :where(.page-kaufen) .checkout-spinner {animation-duration: 2.4s;}
}
/* Kernunterschiede zwischen den Paketen – auf allen Breiten die primaere Information.
   Die vollstaendige Leistungsliste liegt darunter und wird nur auf Wunsch ausgeklappt. */
:where(.page-kaufen) .pricing-keydiffs {display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 8px;
  margin-bottom: 14px;
  min-height: 76px;}
:where(.page-kaufen) .pricing-keydiffs span {display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.84em;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  background: #f5f3f8;
  color: #444;}
:where(.page-kaufen) .pricing-keydiffs span i {color: var(--accent-color);
  font-size: 0.95em;}
:where(.page-kaufen) .keydiff-highlight {background: rgba(116, 35, 114, 0.08) !important;
  color: var(--accent-color) !important;}
:where(.page-kaufen) .pricing-features-collapsible {max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  margin: 0;}
:where(.page-kaufen) .pricing-box.features-open .pricing-features-collapsible {max-height: 1200px;}
:where(.page-kaufen) .pricing-toggle-details {display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid #e8e4ee;
  border-radius: var(--radius-md);
  padding: 7px 16px;
  font-size: 0.82em;
  font-weight: 600;
  color: var(--accent-color);
  cursor: pointer;
  margin-top: auto;
  align-self: center;
  transition: all 0.2s;}
:where(.page-kaufen) .pricing-toggle-details:hover {border-color: var(--accent-color);
  background: rgba(116, 35, 114, 0.04);}
:where(.page-kaufen) .pricing-toggle-details .toggle-hide {display: none;}
:where(.page-kaufen) .pricing-box.features-open .pricing-toggle-details .toggle-show {display: none;}
:where(.page-kaufen) .pricing-box.features-open .pricing-toggle-details .toggle-hide {display: inline;}
/* PRO-Streifen: andere Zielgruppe, deshalb ausserhalb der Kartenreihe und horizontal */
:where(.page-kaufen) .pricing-pro-strip {display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  text-align: left;
  height: auto;
  margin-top: 24px;
  padding: 26px 28px;}
:where(.page-kaufen) .pro-strip-head {display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;}
:where(.page-kaufen) .pro-strip-head h3 {margin: 0;
  font-size: 1.25em;
  color: var(--heading-color);}
:where(.page-kaufen) .pricing-badge-inline {background: rgba(116, 35, 114, 0.1);
  color: var(--accent-color);
  font-size: 0.74em;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-md);
  text-transform: uppercase;
  letter-spacing: 0.4px;}
:where(.page-kaufen) .pricing-pro-strip .pricing-desc {margin-bottom: 12px;
  max-width: 620px;}
:where(.page-kaufen) .pricing-pro-strip .pricing-keydiffs {justify-content: flex-start;
  min-height: 0;}
:where(.page-kaufen) .pro-strip-price {text-align: center;
  padding-left: 28px;
  border-left: 1px solid #ece9f1;
  min-width: 200px;}
:where(.page-kaufen) .pro-strip-price .pricing-price {font-size: 2.1em;}
:where(.page-kaufen) .pro-strip-price .pricing-period {margin-bottom: 12px;}
:where(.page-kaufen) .pro-strip-select {display: inline-block;
  border: 1px solid var(--accent-color);
  color: var(--accent-color);
  border-radius: var(--radius-md, 12px);
  padding: 8px 22px;
  font-size: 0.86em;
  font-weight: 600;}
:where(.page-kaufen) .pricing-pro-strip.selected .pro-strip-select {background: var(--accent-color);
  color: #fff;}
:where(.page-kaufen) .pricing-pro-strip:hover {transform: none;}
:where(.page-kaufen) .pricing-free-strip {display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  text-align: left;
  height: auto;
  margin-top: 16px;
  padding: 20px 24px;
  background: #f8f7fb;}
:where(.page-kaufen) .pricing-free-strip .pricing-desc {margin: 8px 0 0; max-width: 620px;}
:where(.page-kaufen) .pricing-free-strip h3 {margin: 6px 0 0; font-size: 1.15em;}
:where(.page-kaufen) .free-strip-price {text-align: center; padding-left: 24px; border-left: 1px solid #ece9f1; min-width: 180px;}
:where(.page-kaufen) .pricing-free-strip.selected .pro-strip-select {background: var(--accent-color); color: #fff;}
:where(.page-kaufen) .pricing-free-strip:hover {transform: none;}
@media (max-width: 991.98px) {
  :where(.page-kaufen) .pricing-free-strip {grid-template-columns: 1fr; gap: 14px;}
  :where(.page-kaufen) .free-strip-price {padding-left: 0; padding-top: 14px; border-left: none; border-top: 1px solid #ece9f1;}
}
@media (max-width: 991.98px) {
  :where(.page-kaufen) .pricing-pro-strip {grid-template-columns: 1fr;
    gap: 18px;}
  :where(.page-kaufen) .pro-strip-price {padding-left: 0;
    padding-top: 18px;
    border-left: none;
    border-top: 1px solid #ece9f1;}
}
/* Formularbloecke ohne zusaetzliche Karte in der Wizard-Karte */
:where(.page-kaufen) .buy-form-block {padding: 22px 0 4px;
  margin-bottom: 22px;
  border-bottom: 1px solid #ece9f1;}
:where(.page-kaufen) .buy-form-block:last-of-type {border-bottom: none;}
:where(.page-kaufen) .buy-form-block .form-label {font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 6px;}
:where(.page-kaufen) .buy-form-block .form-control {border-radius: 12px;
  border: 1.5px solid #d0cdd8;
  padding: 10px 14px;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #1a1a2e;}
:where(.page-kaufen) .buy-form-block .form-control::placeholder {font-size: 0.9rem;
  color: #9a96a6;}
:where(.page-kaufen) .buy-form-block .form-control:focus {border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(116, 35, 114, 0.12);}
/* Hilfe-Hinweis im Checkout */
:where(.page-kaufen) .buy-help {display: flex;
  align-items: flex-start;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #ece9f1;}
:where(.page-kaufen) .buy-help i {color: var(--accent-color);
  font-size: 1.05em;
  margin-top: 2px;}
:where(.page-kaufen) .buy-help p {margin: 0;
  font-size: 0.88em;
  color: #6a6a7a;
  line-height: 1.6;
  max-width: 520px;}
:where(.page-kaufen) .buy-help a {color: var(--accent-color);
  font-weight: 600;}
:where(.page-kaufen) .buy-help-sep {color: #c9c4d2; margin: 0 4px;}
/* Add-on belegt: Karte bleibt voll lesbar – sie soll weiter Interesse wecken –,
   ist aber nicht anwaehlbar. Kein rotes "Fehler"-Signal, sondern ein neutraler
   Belegt-Status. */
:where(.page-kaufen) .addon-toggle-card {border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-sm);}
:where(.page-kaufen) .addon-toggle-card:hover {border-color: rgba(116, 35, 114, 0.16);
  box-shadow: var(--shadow-md);}
:where(.page-kaufen) .addon-toggle-card.addon-active {background: #fff;
  box-shadow: var(--shadow-glow);}
:where(.page-kaufen) .addon-toggle-card.addon-unavailable {cursor: default;
  pointer-events: none;
  border-style: dashed;
  border-color: #d9d5e2;
  background: #fbfafd;}
:where(.page-kaufen) .addon-toggle-card.addon-unavailable .addon-toggle-icon {filter: grayscale(1);
  opacity: 0.65;}
:where(.page-kaufen) .addon-toggle-card.addon-unavailable .addon-toggle-price {opacity: 0.7;}
:where(.page-kaufen) .addon-tag.addon-tag-busy {background: rgba(176, 122, 26, 0.12);
  color: #8a5f14;}
:where(.page-kaufen) .addon-busy-note {display: flex;
  align-items: flex-start;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
  padding: 14px 16px;
  background: #faf8fc;
  border: 1px solid #ece9f1;
  border-radius: var(--radius-md);}
:where(.page-kaufen) .addon-busy-note i {color: var(--accent-color);
  font-size: 1.05em;
  margin-top: 2px;}
:where(.page-kaufen) .addon-busy-note p {margin: 0;
  font-size: 0.88em;
  color: #6a6a7a;
  line-height: 1.6;
  max-width: 560px;}
:where(.page-kaufen) .addon-busy-note a {color: var(--accent-color); font-weight: 600;}
/* Responsive sub texts */
:where(.page-kaufen) .buy-section-sub-mobile {display: none;}
@media (max-width: 768px) {
  /* Hero compact */
  :where(.page-kaufen) .buy-hero {min-height: 0 !important; height: auto !important;}
  :where(.page-kaufen) #service-details .container {padding-left: 10px;
    padding-right: 10px;}
  :where(.page-kaufen) #service-details .card.p-4 {padding: 12px !important;}
  :where(.page-kaufen) .buy-section-heading {font-size: 1.3rem;}
  :where(.page-kaufen) .buy-section-sub-desktop {display: none;}
  :where(.page-kaufen) .buy-section-sub-mobile {display: block; font-size: 0.88em;}
  /* Pricing cards compact */
  :where(.page-kaufen) .pricing-box {margin-bottom: 8px;
    padding: 20px 16px;}
  :where(.page-kaufen) .pricing-price {font-size: 2.2em;}
  :where(.page-kaufen) .pricing-desc {font-size: 0.85em; margin-bottom: 8px;}
  :where(.page-kaufen) .pricing-period {margin-bottom: 8px;}
  /* Key diffs visible on mobile */
  :where(.page-kaufen) .pricing-keydiffs {display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 10px;
    min-height: 0;}
  :where(.page-kaufen) .pricing-desc {min-height: 0;}
  :where(.page-kaufen) .pricing-keydiffs span {display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78em;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 8px;
    background: #f5f3f8;
    color: #444;}
  :where(.page-kaufen) .pricing-keydiffs span i {color: var(--accent-color); font-size: 0.9em;}
  :where(.page-kaufen) .keydiff-highlight {background: rgba(116,35,114,0.08) !important;
    color: var(--accent-color) !important;}
  /* Use-case tags compact on mobile */
  :where(.page-kaufen) .pricing-usecases {margin-bottom: 10px; gap: 4px;}
  :where(.page-kaufen) .usecase-tag {font-size: 0.72em; padding: 3px 9px;}
  /* Feature list + PRO grid collapsed by default */
  :where(.page-kaufen) .pricing-features-collapsible {max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    margin: 0;}
  :where(.page-kaufen) .pricing-box.features-open .pricing-features-collapsible {max-height: 1200px;}
  /* Toggle button */
  :where(.page-kaufen) .pricing-toggle-details {display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid #e8e4ee;
    border-radius: var(--radius-md);
    padding: 6px 16px;
    font-size: 0.78em;
    font-weight: 600;
    color: var(--accent-color);
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.2s;}
  :where(.page-kaufen) .pricing-toggle-details:hover {border-color: var(--accent-color);
    background: rgba(116,35,114,0.04);}
  :where(.page-kaufen) .pricing-toggle-details .toggle-hide {display: none;}
  :where(.page-kaufen) .pricing-box.features-open .pricing-toggle-details .toggle-show {display: none;}
  :where(.page-kaufen) .pricing-box.features-open .pricing-toggle-details .toggle-hide {display: inline;}
  /* PRO card compact */
  :where(.page-kaufen) .pricing-pro-grid {gap: 8px;}
  :where(.page-kaufen) .pricing-pro-feature {padding: 12px 10px;}
  :where(.page-kaufen) .pricing-pro-feature strong {font-size: 0.82em;}
  :where(.page-kaufen) .pricing-pro-feature span {font-size: 0.75em;}
  :where(.page-kaufen) .pro-feature-icon {width: 32px; height: 32px; font-size: 1em;}
  :where(.page-kaufen) .pricing-pro .pricing-desc {font-size: 0.85em;}
  :where(.page-kaufen) .pricing-pro-hint {font-size: 0.75em; display: none;}
  :where(.page-kaufen) .pricing-box.features-open .pricing-pro-hint {display: block;}
  /* Trust strip compact */
  :where(.page-kaufen) .buy-trust-strip {gap: 12px;}
  :where(.page-kaufen) .buy-trust-strip span {font-size: 0.72em;}
  /* Add-on cards compact */
  :where(.page-kaufen) .addon-toggle-card {padding: 14px;}
  :where(.page-kaufen) .addon-toggle-info p {font-size: 0.78em;}
  /* Form compact */
  :where(.page-kaufen) .buy-form-card {padding: 16px 14px !important;}
  :where(.page-kaufen) .buy-form-card .row.g-4 {--bs-gutter-x: 0;
    --bs-gutter-y: 0.75rem;}
  :where(.page-kaufen) .buy-form-card h5 {font-size: 0.95rem;}
  :where(.page-kaufen) .buy-price-badge {font-size: 1.5rem;
    padding: 10px 28px;}
  :where(.page-kaufen) .buy-order-btn {font-size: 0.95em;
    padding: 12px 24px;}
  /* Spacing between sections */
  :where(.page-kaufen) #service-details hr {margin-top: 1.5rem !important; margin-bottom: 1.5rem !important;}
}
/* Integrierte Bestell-Übersicht (Wizard-Panel) */
:where(.page-kaufen) .buy-wizard-aside {min-width:0}
:where(.page-kaufen) .buy-summary-panel {background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-lg,16px);box-shadow:var(--shadow-sm);padding:18px 20px}
@media(min-width:992px) {
  :where(.page-kaufen) .buy-summary-panel {position:sticky;top:96px}
}
@media (max-width: 991.98px) {
  :where(.page-kaufen) .buy-wizard-aside {position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 980;}
  :where(.page-kaufen) .buy-summary-panel {display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "pkg total"
      "addons total"
      "discount total";
    gap: 2px 16px;
    align-items: center;
    border-radius: 16px 16px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 -8px 28px rgba(20, 10, 30, 0.1);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));}
  :where(.page-kaufen) .buy-summary-title, :where(.page-kaufen) .buy-summary-hint {display: none;}
  :where(.page-kaufen) .buy-summary-row {grid-area: pkg;
    margin: 0;}
  :where(.page-kaufen) .buy-summary-row .buy-summary-label {display: none;}
  :where(.page-kaufen) .buy-summary-row strong {text-align: left;
    font-size: 0.88em;}
  :where(.page-kaufen) .buy-summary-addons {grid-area: addons;
    margin: 0;
    font-size: 0.75em;}
  :where(.page-kaufen) .buy-sticky-discount {grid-area: discount;
    margin: 0;
    font-size: 0.75em;}
  :where(.page-kaufen) .buy-summary-total-row {grid-area: total;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    padding: 0;
    border: none;
    gap: 0;}
  :where(.page-kaufen) .buy-summary-total-row .buy-summary-label {font-size: 0.65em;}
  :where(.page-kaufen) .buy-summary-total {font-size: 1.25em;}
  :where(.page-kaufen) #service-details.service-details {padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));}
}
:where(.page-kaufen) .buy-summary-title {font-size:.92em;font-weight:700;color:#1a1a2e;margin-bottom:14px;display:flex;align-items:center}
:where(.page-kaufen) .buy-summary-row {display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
:where(.page-kaufen) .buy-summary-label {font-size:.72em;font-weight:600;color:#8a8a9a;text-transform:uppercase;letter-spacing:.5px}
:where(.page-kaufen) .buy-summary-row strong {color:#1a1a2e;font-size:.95em;font-weight:700;text-align:right}
:where(.page-kaufen) .buy-summary-addons {font-size:.82em;color:var(--accent-color);font-weight:500;margin:2px 0 10px;line-height:1.45}
:where(.page-kaufen) .buy-summary-addons:empty {display:none}
:where(.page-kaufen) .buy-summary-total-row {display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid #ece9f1}
:where(.page-kaufen) .buy-summary-total {font-size:1.5em;font-weight:800;color:var(--accent-color);line-height:1.1}
:where(.page-kaufen) .buy-summary-hint {margin-top:12px;font-size:.74em;color:#8a8a9a}
:where(.page-kaufen) .buy-sticky-discount {font-size:.78em;font-weight:700;color:var(--accent-color);margin-bottom:6px;white-space:nowrap}
/* Bestell-Review (Schritt 4) */
:where(.page-kaufen) .buy-order-review {background:#faf8fb;border:1px solid #ece4f2;border-radius:12px;padding:16px 18px;margin-bottom:24px}
:where(.page-kaufen) .buy-order-review .ord-row {display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:.92em;color:#3a3a4a;border-bottom:1px dashed #e3dcec}
:where(.page-kaufen) .buy-order-review .ord-row:last-child {border-bottom:none}
:where(.page-kaufen) .buy-order-review .ord-row.ord-total {font-weight:800;color:#1a1a2e;font-size:1.05em;border-top:1px solid #ddd3e6;border-bottom:none;margin-top:4px;padding-top:12px}
:where(.page-kaufen) .buy-order-review .ord-row.ord-discount {color:var(--accent-color);font-weight:700}
:where(.page-kaufen) .buy-order-review .ord-name {font-weight:600}
/* Gutschein-Feedback */
:where(.page-kaufen) .buy-promo-feedback {margin-top: 8px;
  font-size: 0.86em;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 8px;
  padding: 8px 12px;}
:where(.page-kaufen) .buy-promo-feedback i {margin-right: 4px;}
:where(.page-kaufen) .buy-promo-feedback.is-valid {background: rgba(116, 35, 114, 0.08);
  color: var(--accent-color);}
:where(.page-kaufen) .buy-promo-feedback.is-invalid {background: #fdecea;
  color: #c0392b;}
:where(.page-kaufen) .buy-promo-feedback.is-pending {background: #f3f0f7;
  color: #6b6b7a;}
/* Ersparnis unter dem Preis-Badge */
:where(.page-kaufen) .buy-price-savings {margin-top: 6px;
  font-size: 0.86em;
  color: var(--accent-color);
  font-weight: 600;}
:where(.page-kaufen) .buy-price-savings s {color: #999;
  font-weight: 500;}
:where(.page-kaufen) .buy-info-tip {color: #888;
  margin-left: 4px;
  text-decoration: none;}
:where(.page-kaufen) .buy-info-tip:hover {color: var(--accent-color);}
/* Druckstation Farbband-Stepper */
:where(.page-kaufen) .addon-ribbon-stepper {display: none;
  margin-top: 12px;
  padding: 12px 14px;
  border-top: 1px dashed rgba(116, 35, 114, 0.2);}
:where(.page-kaufen) .addon-toggle-card.addon-active #ribbonStepper, :where(.page-kaufen) .addon-ribbon-stepper.active {display: block;}
:where(.page-kaufen) .ribbon-stepper-label {display: block;
  font-size: 0.82em;
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: 8px;}
:where(.page-kaufen) .ribbon-stepper-controls {display: inline-flex;
  align-items: center;
  gap: 12px;}
:where(.page-kaufen) .ribbon-btn {width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px solid #d0cdd8;
  background: #fff;
  color: var(--accent-color);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;}
:where(.page-kaufen) .ribbon-btn:hover {border-color: var(--accent-color);
  background: rgba(116, 35, 114, 0.06);}
:where(.page-kaufen) .ribbon-btn:disabled {opacity: 0.4;
  cursor: not-allowed;}
:where(.page-kaufen) .ribbon-count {font-size: 0.92em;
  color: #1a1a2e;
  min-width: 56px;
  text-align: center;}
:where(.page-kaufen) .ribbon-count strong {color: var(--accent-color);}
:where(.page-kaufen) .ribbon-stepper-hint {display: block;
  font-size: 0.74em;
  color: #8a8a9a;
  margin-top: 8px;
  line-height: 1.4;}

/* === page-kaufen (aus routes/buy.php) === */
:where(.page-kaufen) .buy-retention-hint {display: block;
  margin-top: 8px;
  padding: 10px 12px 8px;
  background: #f8f7fb;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 12px);}
:where(.page-kaufen) .buy-retention-hint[hidden] {display: none;}
:where(.page-kaufen) .buy-retention-scope {margin: 0 0 6px;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-color);}
:where(.page-kaufen) .buy-retention-rows {list-style: none;
  margin: 0;
  padding: 0;}
:where(.page-kaufen) .buy-retention-rows li {display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  font-size: 0.82em;}
:where(.page-kaufen) .buy-retention-rows li + li {border-top: 1px solid var(--border-color);}
:where(.page-kaufen) .buy-retention-rows span {color: var(--muted-color);}
:where(.page-kaufen) .buy-retention-rows strong {color: var(--heading-color);
  font-weight: 700;
  white-space: nowrap;}
:where(.page-kaufen) .buy-retention-end {margin: 6px 0 0;
  font-size: 0.78em;
  line-height: 1.4;
  color: var(--muted-color);}
:where(.page-kaufen) .buy-lifecycle {max-width: 820px;
  margin: 32px auto 0;}
:where(.page-kaufen) .buy-lifecycle-steps {list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  counter-reset: none;}
:where(.page-kaufen) .buy-lifecycle-steps li {position: relative;
  padding: 18px 16px 16px;
  background: #f8f7fb;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 12px);
  text-align: left;}
:where(.page-kaufen) .buy-lifecycle-num {display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--accent-color);
  color: #fff;
  font-size: 0.72em;
  font-weight: 700;}
:where(.page-kaufen) .buy-lifecycle-steps strong {display: block;
  margin-bottom: 4px;
  font-size: 0.95em;
  color: var(--heading-color);}
:where(.page-kaufen) .buy-lifecycle-steps li > span:last-child {display: block;
  font-size: 0.82em;
  line-height: 1.45;
  color: var(--muted-color);}
:where(.page-kaufen) .buy-lifecycle-note {margin: 12px 0 0;
  text-align: center;
  font-size: 0.82em;
  color: var(--muted-color);}
:where(.page-kaufen) .buy-assurance {list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  max-width: 820px;
  margin: 22px auto 0;
  padding: 0;}
:where(.page-kaufen) .buy-assurance li {display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82em;
  color: var(--muted-color);}
:where(.page-kaufen) .buy-assurance li i {color: var(--accent-color);
  font-size: 0.95em;}
@media (max-width: 768px) {
  :where(.page-kaufen) .buy-lifecycle-steps {grid-template-columns: 1fr; gap: 10px;}
  :where(.page-kaufen) .buy-lifecycle-steps li {padding: 14px 14px 12px;}
}

/* === page-danke (aus routes/thanks.php) === */
:where(.page-danke) .thanks-section {padding:60px 0}
:where(.page-danke) .thanks-check {font-size:3.5em;color:#1e7a1e;margin-bottom:12px}
:where(.page-danke) .thanks-hero h1 {color:var(--heading-color);margin-bottom:12px}
:where(.page-danke) .thanks-lead {font-size:1.05em;color:#3d3d4e;line-height:1.6}
:where(.page-danke) .thanks-orderid {color:#8a8a9a;font-size:.85em;margin-top:8px}
:where(.page-danke) .thanks-back-link {display:inline-block;margin-top:16px;color:#8a8a9a;text-decoration:none;font-size:.92em;margin-left:14px}
:where(.page-danke) .thanks-back-link:hover {color:var(--accent-color)}
:where(.page-danke) .thanks-next-steps {background:#faf8fb;border-radius:16px;padding:28px 26px;margin-top:40px}
:where(.page-danke) .thanks-next-steps h2 {font-size:1.3em;color:var(--heading-color);margin-bottom:18px;text-align:center}
:where(.page-danke) .thanks-steps {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
:where(.page-danke) .thanks-step {background:#fff;border-radius:12px;padding:22px 18px;text-align:left;display:flex;flex-direction:column;gap:6px;box-shadow:0 4px 12px rgba(0,0,0,.04)}
:where(.page-danke) .thanks-step-num {width:32px;height:32px;border-radius:50%;background:var(--accent-color);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95em;margin-bottom:4px}
:where(.page-danke) .thanks-step strong {color:var(--heading-color);font-size:.98em}
:where(.page-danke) .thanks-step span {font-size:.88em;color:#5a5a6a;line-height:1.5}
:where(.page-danke) .thanks-upsell {display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,#fff9e6,#fef3d0);border-radius:14px;padding:22px 24px;margin-top:28px;border:1px solid #f5dfa0}
:where(.page-danke) .thanks-upsell-icon {width:52px;height:52px;min-width:52px;background:#ffb400;color:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5em}
:where(.page-danke) .thanks-upsell-body {flex:1}
:where(.page-danke) .thanks-upsell-body strong {display:block;font-size:1em;color:#1a1a2e;margin-bottom:3px}
:where(.page-danke) .thanks-upsell-body p {margin:0;font-size:.9em;color:#5a5a6a;line-height:1.5}
:where(.page-danke) .thanks-upsell-link {color:var(--accent-color);font-weight:600;font-size:.92em;text-decoration:none;white-space:nowrap}
:where(.page-danke) .thanks-upsell-link:hover {text-decoration:underline}
:where(.page-danke) .thanks-referral {margin-top:36px;background:linear-gradient(135deg,#742372 0%,#a03498 100%);border-radius:18px;padding:36px 28px;color:#fff;box-shadow:0 16px 40px rgba(116,35,114,.25)}
:where(.page-danke) .thanks-referral-inner {max-width:600px;margin:0 auto;text-align:center}
:where(.page-danke) .thanks-referral-badge {display:inline-block;background:rgba(255,255,255,.18);font-size:.78em;font-weight:700;padding:5px 14px;border-radius:999px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px}
:where(.page-danke) .thanks-referral h2 {color:#fff;margin-bottom:12px;font-size:1.5em}
:where(.page-danke) .thanks-referral p {color:rgba(255,255,255,.9);line-height:1.6;margin-bottom:20px}
:where(.page-danke) .thanks-referral-code-box {background:#fff;border-radius:12px;padding:14px 18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;justify-content:center;color:#1a1a2e;margin-bottom:16px}
:where(.page-danke) .thanks-referral-code-label {font-size:.82em;color:#5a5a6a}
:where(.page-danke) .thanks-referral-code {font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.2em;font-weight:700;color:var(--accent-color);letter-spacing:1px}
:where(.page-danke) .thanks-referral-copy {background:var(--accent-color);color:#fff;border:none;border-radius:50px;padding:8px 16px;font-size:.88em;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .2s ease,transform .2s ease}
:where(.page-danke) .thanks-referral-copy:hover {background:#5a1a58;transform:translateY(-1px)}
:where(.page-danke) .thanks-referral-copy.copied {background:#1e7a1e}
:where(.page-danke) .thanks-referral-share {display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:10px}
:where(.page-danke) .thanks-share-btn {display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:50px;font-weight:600;font-size:.92em;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
:where(.page-danke) .thanks-share-btn:hover {transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.2)}
:where(.page-danke) .thanks-share-wa {background:#25D366;color:#fff}
:where(.page-danke) .thanks-share-wa:hover {color:#fff}
:where(.page-danke) .thanks-share-mail {background:#fff;color:var(--accent-color)}
:where(.page-danke) .thanks-share-mail:hover {color:var(--accent-color)}
:where(.page-danke) .thanks-referral-hint {font-size:.82em;color:rgba(255,255,255,.75);margin:8px 0 0}
@media (max-width:576px) {
  :where(.page-danke) .thanks-upsell {flex-direction:column;text-align:center}
  :where(.page-danke) .thanks-upsell-link {margin-top:6px}
}

/* === page-avv (aus routes/avv.php) === */
:where(.page-avv) .content h2 {margin-top: 32px;
  margin-bottom: 12px;
  font-size: 1.3rem;
  color: var(--heading-color);}
:where(.page-avv) .content p, :where(.page-avv) .content li {line-height: 1.8;}
:where(.page-avv) .content ul {padding-left: 24px;
  margin: 10px 0 16px;
  list-style-type: disc;}
:where(.page-avv) .content ul li {margin-bottom: 4px;
  display: list-item;
  list-style-type: disc;}
/* Aktionen (Druckbutton + Hinweis) */
:where(.page-avv) .avv-actions {background: #faf5fb;
  border: 1px solid #e0d0e8;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 24px;}
:where(.page-avv) .avv-print-btn {display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-color, #742372);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px 22px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s;}
:where(.page-avv) .avv-print-btn:hover {filter: brightness(1.08);}
:where(.page-avv) .avv-note {font-size: 0.86rem;
  color: #6a6a72;
  margin: 14px 0 0;
  line-height: 1.6;}
/* Parteien */
:where(.page-avv) .avv-parties {display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 12px 0 8px;}
@media (max-width: 640px) {
  :where(.page-avv) .avv-parties {grid-template-columns: 1fr;}
}
:where(.page-avv) .avv-party {border: 1px solid #ece8f0;
  border-radius: 10px;
  padding: 16px 18px;}
:where(.page-avv) .avv-party-role {font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--accent-color, #742372);
  font-weight: 700;
  margin-bottom: 10px;}
:where(.page-avv) .avv-fill {margin: 0 0 10px; font-size: 0.92rem; color: #444;}
:where(.page-avv) .avv-line {display: block;
  border-bottom: 1px solid #bbb;
  height: 18px;
  margin-top: 4px;}
/* Unterschriften */
:where(.page-avv) .avv-signatures {display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 48px;}
@media (max-width: 640px) {
  :where(.page-avv) .avv-signatures {grid-template-columns: 1fr; gap: 32px;}
}
:where(.page-avv) .avv-sign-line {border-bottom: 1px solid #333;
  height: 44px;}
:where(.page-avv) .avv-sign p {font-size: 0.82rem;
  color: #666;
  margin-top: 6px;}
/* Druck-Titel: nur in der Druckansicht sichtbar (die H1 liegt im ausgeblendeten Hero) */
:where(.page-avv) .avv-print-title {display: none;}
/* Druckansicht: Website-Rahmen ausblenden, Dokument im normalen Fluss drucken.
   Bewusst KEIN visibility:hidden + position:absolute – das zerlegt bei
   mehrseitigen Dokumenten die Paginierung. */
@media print {
  :where(.page-avv) #header, :where(.page-avv) #footer, :where(.page-avv) #wa-float, :where(.page-avv) #scroll-top, :where(.page-avv) #preloader, :where(.page-avv) .page-hero, :where(.page-avv) .breadcrumbs, :where(.page-avv) .avv-actions {display: none !important;}
  body:where(.page-avv) {background: #fff !important;}
  :where(.page-avv) #service-details, :where(.page-avv) #service-details .container, :where(.page-avv) #service-details .row, :where(.page-avv) #service-details .card {margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;}
  :where(.page-avv) #avvDoc {width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.5;}
  :where(.page-avv) .avv-print-title {display: block !important;
    font-size: 18pt;
    font-weight: 600;
    color: #000 !important;
    margin: 0 0 14pt;}
  :where(.page-avv) #avvDoc h2 {color: #000 !important;
    font-size: 13pt;
    margin-top: 16pt;
    break-after: avoid;
    page-break-after: avoid;}
  :where(.page-avv) #avvDoc a {color: #000 !important; text-decoration: none !important;}
  :where(.page-avv) #avvDoc ul li::marker {color: #000 !important;}
  :where(.page-avv) #avvDoc p, :where(.page-avv) #avvDoc li {orphans: 2; widows: 2;}
  :where(.page-avv) #avvDoc .avv-parties, :where(.page-avv) #avvDoc .avv-party, :where(.page-avv) #avvDoc .avv-signatures, :where(.page-avv) #avvDoc .avv-sign, :where(.page-avv) #avvDoc ul {break-inside: avoid; page-break-inside: avoid;}
  @page { margin: 18mm 16mm; }
}

/* === page-ratgeber (aus routes/ratgeber.php) === */
:where(.page-ratgeber) .ratgeber-hero {background:linear-gradient(135deg,rgba(42,20,88,.82) 0%,rgba(116,35,114,.70) 100%),url('/assets/img/ratgeber-hero.jpg');background-size:cover;background-position:center;padding:80px 0 50px}
:where(.page-ratgeber) .ratgeber-hero h1 {color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35)}
:where(.page-ratgeber) .ratgeber-hero p {color:#fff;opacity:.92;max-width:720px;margin:0 auto}
:where(.page-ratgeber) .rg-tag {display:inline-block;background:rgba(255,255,255,.18);color:#fff;font-size:.82em;font-weight:700;padding:6px 16px;border-radius:999px;margin-bottom:14px;text-transform:uppercase;letter-spacing:.5px}
:where(.page-ratgeber) .ratgeber-list {padding:48px 0 60px;background:#fff}
:where(.page-ratgeber) .rg-filters {display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 40px}
:where(.page-ratgeber) .rg-filter {appearance:none;border:1px solid #e5e3eb;background:#fff;color:#3d3d4e;font-size:.88rem;font-weight:600;padding:8px 16px;border-radius:999px;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}
:where(.page-ratgeber) .rg-filter:hover {border-color:rgba(116,35,114,.35);color:var(--accent-color)}
:where(.page-ratgeber) .rg-filter.is-active {background:var(--accent-color);border-color:var(--accent-color);color:#fff}
:where(.page-ratgeber) .rg-hub-section {margin-bottom:48px}
:where(.page-ratgeber) .rg-hub-section[hidden], :where(.page-ratgeber) [data-rg-item][hidden] {display:none!important}
:where(.page-ratgeber) .rg-hub-head {margin-bottom:22px;max-width:640px}
:where(.page-ratgeber) .rg-hub-head h2 {font-size:1.45rem;margin:0 0 6px;color:var(--heading-color)}
:where(.page-ratgeber) .rg-hub-head p {margin:0;color:#6a6a7a;font-size:.95rem;line-height:1.55}
:where(.page-ratgeber) .rg-card {display:flex;flex-direction:column;height:100%;background:#faf8fb;border:1px solid rgba(116,35,114,.08);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
:where(.page-ratgeber) .rg-card:hover {transform:translateY(-6px);box-shadow:0 18px 40px rgba(116,35,114,.12);border-color:rgba(116,35,114,.2);color:inherit}
:where(.page-ratgeber) .rg-card-thumb {position:relative;display:block;height:170px;background-size:cover;background-position:center}
:where(.page-ratgeber) .rg-card-thumb::after {content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(42,20,88,.15) 0%,rgba(42,20,88,.45) 100%)}
:where(.page-ratgeber) .rg-card-body {display:flex;flex-direction:column;gap:10px;flex:1;padding:22px}
:where(.page-ratgeber) .rg-card-icon {position:absolute;left:16px;bottom:-18px;z-index:2;width:44px;height:44px;border-radius:12px;background:#fff;color:var(--accent-color);display:flex;align-items:center;justify-content:center;font-size:1.2em;box-shadow:0 4px 14px rgba(42,20,88,.18)}
:where(.page-ratgeber) .rg-card-meta {display:flex;gap:10px;align-items:center;font-size:.78em;color:#8a8a9a;margin-top:8px}
:where(.page-ratgeber) .rg-card-tag {background:#fff;border:1px solid #e5e3eb;padding:2px 10px;border-radius:999px;color:var(--accent-color);font-weight:600}
:where(.page-ratgeber) .rg-card-read {display:inline-flex;align-items:center;gap:4px}
:where(.page-ratgeber) .rg-card h3 {font-size:1.1em;font-weight:700;color:var(--heading-color);margin:6px 0 8px;line-height:1.3}
:where(.page-ratgeber) .rg-card p {font-size:.92em;color:#5a5a6a;line-height:1.55;margin:0;flex:1}
:where(.page-ratgeber) .rg-card-arrow {margin-top:10px;color:var(--accent-color);font-weight:600;font-size:.92em}
:where(.page-ratgeber) .rg-card-topic .rg-card-tag {color:#5a1a58}
:where(.page-ratgeber) .rg-cta {margin-top:20px;padding:40px 20px;background:#faf8fb;border-radius:16px}
:where(.page-ratgeber) .rg-cta h3 {color:var(--heading-color);margin-bottom:10px}
:where(.page-ratgeber) .rg-cta p {color:#5a5a6a;margin-bottom:18px}

/* === page-vorlage (aus routes/vorlage.php) === */
:where(.page-vorlage) .lead-magnet-hero {padding:80px 0 50px}
:where(.page-vorlage) .lead-magnet-hero h1 {color:#fff}
:where(.page-vorlage) .lead-magnet-hero p {color:#fff;opacity:.92;max-width:700px;margin:0 auto}
:where(.page-vorlage) .lm-tag {display:inline-block;background:rgba(255,255,255,.18);color:#fff;font-size:.82em;font-weight:700;padding:6px 16px;border-radius:999px;margin-bottom:14px;text-transform:uppercase;letter-spacing:.5px}
:where(.page-vorlage) .lead-magnet-section {padding:60px 0;background:#fff}
:where(.page-vorlage) .lm-preview {position:relative;padding:30px 10px;display:flex;align-items:center;justify-content:center;min-height:420px}
:where(.page-vorlage) .lm-preview-card {background:#fff;border:1px solid rgba(116,35,114,.12);border-radius:14px;padding:26px 22px;box-shadow:0 16px 40px rgba(0,0,0,.15);width:240px;text-align:center;position:absolute;transition:transform .3s ease}
:where(.page-vorlage) .lm-preview-card-1 {top:10px;left:calc(50% - 180px);transform:rotate(-6deg);z-index:2}
:where(.page-vorlage) .lm-preview-card-2 {top:80px;left:calc(50% - 40px);transform:rotate(4deg);background:#faf8fb}
:where(.page-vorlage) .lm-preview-card:hover {z-index:5;transform:rotate(0)}
:where(.page-vorlage) .lm-preview-title {font-family:'Dancing Script',cursive;font-size:1.35em;color:var(--accent-color);font-weight:700;margin-bottom:14px}
:where(.page-vorlage) .lm-preview-qr {display:flex;justify-content:center;margin-bottom:12px}
:where(.page-vorlage) .lm-qr-box {width:120px;height:120px;background:#fff;border:2px solid #1a1a2e;border-radius:8px;padding:8px;display:grid;grid-template-columns:repeat(8,1fr);gap:1px}
:where(.page-vorlage) .lm-qr-cell {background:#fff}
:where(.page-vorlage) .lm-qr-cell.on {background:#1a1a2e}
:where(.page-vorlage) .lm-preview-text {font-size:.82em;color:#5a5a6a;line-height:1.5}
:where(.page-vorlage) .lm-heading {color:var(--heading-color);font-size:1.6em;font-weight:700;margin-bottom:10px}
:where(.page-vorlage) .lm-desc {font-size:1em;color:#3d3d4e;line-height:1.6;margin-bottom:22px}
:where(.page-vorlage) .lm-desc strong {color:var(--accent-color)}
:where(.page-vorlage) .lm-form .form-label {font-weight:600;font-size:.9em;color:#3d3d4e;margin-bottom:4px}
:where(.page-vorlage) .lm-submit {background:var(--accent-color);color:#fff;font-weight:600;border:none;border-radius:50px;padding:14px 28px;box-shadow:0 6px 18px rgba(116,35,114,.3);transition:all .25s ease;width:100%}
:where(.page-vorlage) .lm-submit:hover {background:#5a1a58;color:#fff;transform:translateY(-2px);box-shadow:0 10px 26px rgba(116,35,114,.4)}
:where(.page-vorlage) .lm-form-hint {margin:12px 0 0;font-size:.82em;color:#8a8a9a;text-align:center}
:where(.page-vorlage) .lead-magnet-trust {padding:24px 0;background:#faf8fb;border-top:1px solid #e5e3eb}
:where(.page-vorlage) .lm-trust-inner {display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 32px;color:#3d3d4e;font-size:.95em}
:where(.page-vorlage) .lm-trust-inner strong {color:var(--accent-color);font-weight:700}
@media (max-width:767px) {
  :where(.page-vorlage) .lm-preview {min-height:360px}
  :where(.page-vorlage) .lm-preview-card {width:210px;padding:20px 16px}
  :where(.page-vorlage) .lm-preview-card-1 {left:calc(50% - 145px)}
  :where(.page-vorlage) .lm-preview-card-2 {left:calc(50% - 55px)}
  :where(.page-vorlage) .lm-heading {font-size:1.35em}
}

/* === page-nutzungsbedingungen (aus routes/nutzungsbedingungen.php) === */
:where(.page-nutzungsbedingungen) .content h2 {margin-top: 32px;
  margin-bottom: 12px;
  font-size: 1.3rem;
  color: var(--heading-color);}
:where(.page-nutzungsbedingungen) .content p, :where(.page-nutzungsbedingungen) .content li {line-height: 1.8;}
:where(.page-nutzungsbedingungen) .content ul {padding-left: 24px;
  margin: 10px 0 16px;
  list-style-type: disc;}
:where(.page-nutzungsbedingungen) .content ul li {margin-bottom: 4px;
  display: list-item;
  list-style-type: disc;}
:where(.page-nutzungsbedingungen) .content .table {font-size: 0.92em;
  margin: 16px 0 24px;}
:where(.page-nutzungsbedingungen) .content .table th {font-weight: 600;
  font-size: 0.9em;}
/* Mobile Paket-Karten */
:where(.page-nutzungsbedingungen) .pkg-cards-mobile {display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 24px;}
:where(.page-nutzungsbedingungen) .pkg-card-mobile {border: 1px solid #ece8f0;
  border-radius: 10px;
  overflow: hidden;}
:where(.page-nutzungsbedingungen) .pkg-card-header {background: var(--accent-color);
  color: #fff;
  font-weight: 700;
  font-size: 0.95em;
  padding: 10px 16px;}
:where(.page-nutzungsbedingungen) .pkg-card-price {font-size: 1.15em;
  font-weight: 700;
  color: var(--heading-color);
  padding: 12px 16px 4px;}
:where(.page-nutzungsbedingungen) .pkg-card-mobile dl {padding: 0 16px 12px;
  margin: 0;}
:where(.page-nutzungsbedingungen) .pkg-card-mobile dt {font-size: 0.78em;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 8px;}
:where(.page-nutzungsbedingungen) .pkg-card-mobile dd {font-size: 0.9em;
  font-weight: 600;
  color: var(--heading-color);
  margin: 2px 0 0;}

/* === page-article (aus routes/ratgeber/was-kostet-eine-fotobox.php) === */
:where(.page-article) .rg-price-table {width:100%;border-collapse:collapse;margin:20px 0 30px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.06)}
:where(.page-article) .rg-price-table th, :where(.page-article) .rg-price-table td {padding:12px 14px;text-align:left;border-bottom:1px solid #f0eef3;font-size:.93em}
:where(.page-article) .rg-price-table thead {background:#faf8fb}
:where(.page-article) .rg-price-table thead th {font-weight:700;color:var(--heading-color)}
:where(.page-article) .rg-price-table tbody tr:last-child td {border-bottom:none}

/* === Anfrage-Formular B2B (firmenfeier, partner) === */
.b2b-request-section {padding:60px 0;background:#faf8fb}
.b2b-badge {display:inline-block;background:rgba(116,35,114,.08);color:var(--accent-color);font-size:.78em;font-weight:700;padding:5px 14px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}
.b2b-request-section h2 {color:var(--heading-color);margin-bottom:12px}
.b2b-lead {font-size:1.02em;color:#3d3d4e;line-height:1.6;margin-bottom:20px}
.b2b-benefits {list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:10px}
.b2b-benefits li {display:flex;gap:10px;align-items:flex-start;font-size:.94em;color:#3d3d4e}
.b2b-benefits i {color:var(--accent-color);font-size:1.1em;margin-top:2px;flex-shrink:0}
.b2b-contact-direct {display:flex;flex-wrap:wrap;gap:10px 16px;padding-top:6px;border-top:1px solid #e5e3eb;padding-top:16px}
.b2b-contact-link {display:inline-flex;align-items:center;gap:6px;color:var(--accent-color);text-decoration:none;font-weight:600;font-size:.92em}
.b2b-contact-link:hover {color:#5a1a58;text-decoration:underline}
.b2b-form {background:#fff;border-radius:16px;padding:28px 24px;box-shadow:0 8px 28px rgba(0,0,0,.06);border:1px solid #e5e3eb}
.b2b-form .form-label {font-weight:600;font-size:.88em;color:#3d3d4e;margin-bottom:4px}
.b2b-submit {background:var(--accent-color);color:#fff;font-weight:600;border:none;border-radius:50px;padding:14px 32px;box-shadow:0 4px 14px rgba(116,35,114,.25);transition:all .25s ease}
.b2b-submit:hover {background:#5a1a58;color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(116,35,114,.35)}
.b2b-form-hint {margin:12px 0 0;font-size:.82em;color:#8a8a9a}

/* === Saison-Deko Startseite (routes/partials/season_theme.php) === */
/* Halloween: Glut-Kante am Header */
:where(.page-home:has(.ep-hw)) #header {box-shadow: 0 1px 0 rgba(255, 140, 40, 0.55), 0 6px 28px -6px rgba(255, 110, 20, 0.45);}
:where(.page-home) .ep-hw {position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;}
:where(.page-home) .ep-hw-glow {position: absolute; left: 50%; top: 18vh; width: 130%; height: 80vh; transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(255, 120, 30, 0.38) 0%, rgba(255, 90, 10, 0.14) 40%, transparent 70%);}
:where(.page-home) .ep-hw-vignette {position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(20, 6, 18, 0.45) 100%);}
:where(.page-home) .ep-hw-web {position: absolute; top: 0; width: clamp(110px, 14vw, 190px); color: rgba(255, 255, 255, 0.32);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.12));}
:where(.page-home) .ep-hw-web svg {display: block; width: 100%; height: auto;}
:where(.page-home) .ep-hw-web--l {left: 0;}
:where(.page-home) .ep-hw-web--r {right: 0; transform: scaleX(-1);}
:where(.page-home) .ep-hw-spider {position: absolute; top: 0; right: clamp(70px, 9vw, 120px); width: 26px;
    transform-origin: 50% 0; animation: ep-hw-dangle 7s ease-in-out infinite;}
:where(.page-home) .ep-hw-spider-thread {display: block; width: 1px; height: clamp(90px, 14vh, 150px); margin: 0 auto;
    background: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.5));}
:where(.page-home) .ep-hw-spider svg {display: block; width: 26px; height: auto; margin-top: -2px; color: #120714;
    filter: drop-shadow(0 0 5px rgba(255, 140, 40, 0.55));}
@keyframes ep-hw-dangle {
    0%, 100% { transform: translateY(-18px) rotate(-2deg); }
    50% { transform: translateY(14px) rotate(2deg); }
  }
:where(.page-home) .ep-hw-bat {position: absolute; left: -90px; width: 58px; color: #0e0611; opacity: 0;
    filter: drop-shadow(0 0 8px rgba(255, 130, 40, 0.35)); animation: ep-hw-fly 16s linear infinite;}
:where(.page-home) .ep-hw-bat svg {display: block; width: 100%; height: auto;}
:where(.page-home) .ep-hw-bat .ep-hw-wings {transform-origin: 50% 40%; animation: ep-hw-flap 0.32s ease-in-out infinite alternate;}
:where(.page-home) .ep-hw-bat--1 {top: 22%; animation-delay: 1s;}
:where(.page-home) .ep-hw-bat--2 {top: 36%; width: 38px; animation-delay: 6.5s; animation-duration: 19s;}
:where(.page-home) .ep-hw-bat--3 {top: 14%; width: 46px; animation-delay: 11s; animation-duration: 14s;}
@keyframes ep-hw-fly {
    0% { transform: translate(0, 0) scale(.8); opacity: 0; }
    6% { opacity: .9; }
    25% { transform: translate(28vw, -40px) scale(.95); }
    50% { transform: translate(55vw, 25px) scale(1); }
    75% { transform: translate(85vw, -30px) scale(.9); opacity: .9; }
    90%, 100% { transform: translate(110vw, 10px) scale(.8); opacity: 0; }
  }
@keyframes ep-hw-flap { from { transform: scaleY(1); } to { transform: scaleY(.62); } }
/* Halloween-Variante des Saison-Hinweises */
:where(.page-home) .hero .season-teaser.season-teaser--halloween {border-color: rgba(255, 150, 60, 0.75); background: rgba(255, 110, 20, 0.34);
    box-shadow: 0 0 28px rgba(255, 120, 30, 0.45);}
:where(.page-home) .hero .season-teaser.season-teaser--halloween:hover, :where(.page-home) .hero .season-teaser.season-teaser--halloween:focus-visible {background: rgba(255, 110, 20, 0.36); border-color: #ffb066;}
:where(.page-home) .hero .season-teaser.season-teaser--halloween > .bi:first-child {color: #ffb066;}
:where(.page-home) .ep-hw-pumpkin {position: absolute; top: clamp(430px, 64vh, 660px); right: 6%; width: clamp(64px, 8vw, 110px);
    filter: drop-shadow(0 0 22px rgba(255, 120, 30, 0.55)); animation: ep-hw-bob 5s ease-in-out infinite;}
:where(.page-home) .ep-hw-pumpkin svg {display: block; width: 100%; height: auto;}
:where(.page-home) .ep-hw-pumpkin .ep-hw-face {animation: ep-hw-flicker 3.2s steps(1, end) infinite;}
:where(.page-home) .ep-hw-pumpkin--l {right: auto; left: 7%; margin-top: 30px; width: clamp(48px, 5.5vw, 76px); animation-delay: -2s;}
@keyframes ep-hw-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ep-hw-flicker { 0%, 100% { opacity: 1; } 47% { opacity: .78; } 50% { opacity: 1; } 71% { opacity: .86; } 73% { opacity: 1; } }
@media (max-width: 991px) {
  :where(.page-home) .ep-hw-pumpkin {display: none;}
}
@media (max-width: 767px) {
  :where(.page-home) .ep-hw-bat--2 {display: none;}
  :where(.page-home) .ep-hw-spider {right: 46px;}
}
@media (prefers-reduced-motion: reduce) {
  :where(.page-home) .ep-hw-spider, :where(.page-home) .ep-hw-bat .ep-hw-wings, :where(.page-home) .ep-hw-pumpkin, :where(.page-home) .ep-hw-pumpkin .ep-hw-face {animation: none;}
  :where(.page-home) .ep-hw-bat {display: none;}
}