/** * @file section/abo-promo/abo-promo.css * @location /section/abo-promo/abo-promo.css * @description Abonnement-Promo Sektion. Prefix: promo__ * * FARBEN (COLOR-GUIDE.md — alle ≥ 7:1): * Section BG: C1 #07003D (Navy) * Eyebrow: C10 #ddeaf5 / C1 10.31:1 ✓ * Title: C2 #ffffff / C1 12.61:1 ✓ * Desc/Features: #c0d8ec / C1 8.57:1 ✓ * Plan BG: C2 #ffffff — kein rgba, kein opacity auf Text * Plan Text: C1 #07003D / C2 12.61:1 ✓ * Plan Sub: C6 #3a4c5a / C2 8.89:1 ✓ * Plan Featured: C3 #07003D BG, C2/C3 8.5:1 ✓ * Plan Tag: C9 #724000 BG, C2/C9 8.6:1 ✓ * * VERBOTEN: opacity auf Text, rgba() auf Text-Elementen. * Hover-BG auf Karten: solid Farbe (nicht rgba). * * @version 2.0.0 * @changelog * 1.0.0 2026-03-18 Erstversion. * 2.0.0 2026-03-18 COLOR-GUIDE-Fix: rgba(255,255,255,.06) → C2 solid. * opacity auf Text → feste Hex-Werte. * color-warning → var(--color-warning) C9. * border-radius max 6px. */ /* ── Section ────────────────────────────────────────────────────── */ .promo__section { background: var(--color-navy); /* C1 */ padding: var(--pad-section); } .promo__inner { max-width: var(--max-content); margin: 0 auto; padding: 0 var(--page-padding-x); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; } /* ── Text-Seite ──────────────────────────────────────────────────── */ /* C10/C1 10.31:1 ✓ */ .promo__kicker { font-size: var(--text-xs); font-weight: var(--weight-black); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--color-ice); margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); } .promo__kicker::before { content: ''; width: 18px; height: 1.5px; background: var(--color-ice); /* dekorativ */ flex-shrink: 0; } /* C2/C1 12.61:1 ✓ */ .promo__title { font-size: var(--text-3xl); font-weight: var(--weight-black); color: var(--color-white); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4); line-height: var(--leading-tight); } /* #c0d8ec/C1 8.57:1 ✓ */ .promo__desc { font-size: var(--text-base); color: var(--color-on-dark); line-height: var(--leading-relaxed); margin: 0 0 var(--space-8); font-weight: var(--weight-light); } /* #c0d8ec/C1 8.57:1 ✓ */ .promo__features { list-style: none; padding: 0; margin: 0 0 var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); } .promo__feature { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-base); color: var(--color-on-dark); line-height: var(--leading-snug); } /* Icon: solid BG — dekoratives Element, kein Text darauf */ .promo__feature-icon { width: 28px; height: 28px; border-radius: var(--radius-sm); background: #0a2a52; /* C1 aufgehellt — dekorativ, kein Text */ display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; color: var(--color-ice); /* C10/C1 10.31:1 ✓ */ margin-top: .1rem; } .promo__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; } /* ── Plan-Karten ─────────────────────────────────────────────────── */ .promo__plans { display: flex; flex-direction: column; gap: var(--space-4); } /* * Karte: C2 Weiß BG. Text: C1 auf C2 = 12.61:1 ✓. * Kein rgba() — alle BG-Farben sind solid. * Hover: --color-ice BG (C10) — C1/C10 10.31:1 ✓. */ .promo__plan { background: var(--color-white); border: 3px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-6); transition: background var(--transition-base), border-color var(--transition-base); position: relative; } .promo__plan:hover { background: var(--color-ice); /* C10 — dekorativ, Hover-BG */ border-color: var(--color-navy); } /* Featured: C3 Royalblau BG — C2/C3 8.5:1 ✓ */ .promo__plan--featured { background: var(--color-blue); border-color: var(--color-blue); box-shadow: var(--shadow-lg); } .promo__plan--featured:hover { background: var(--color-blue); border-color: var(--color-navy); filter: brightness(1.08); } /* Tag: C9 Honigbraun BG — C2/C9 8.6:1 ✓ */ .promo__plan-tag { position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-5); font-size: var(--text-xs); font-weight: var(--weight-black); text-transform: uppercase; letter-spacing: var(--tracking-wide); background: var(--color-warning); color: var(--color-white); /* C2/C9 8.6:1 ✓ */ padding: .18rem .7rem; border-radius: var(--radius-xs); } /* Plan-Name: C1/C2 12.61:1 ✓ (idle) | C2/C3 8.5:1 ✓ (featured) */ .promo__plan-name { font-size: var(--text-base); font-weight: var(--weight-black); color: var(--color-navy); margin: 0 0 var(--space-2); } .promo__plan--featured .promo__plan-name { color: var(--color-white); /* C2/C3 8.5:1 ✓ */ } /* Preis: C1/C2 12.61:1 ✓ | C2/C3 8.5:1 ✓ */ .promo__plan-price { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: var(--weight-black); color: var(--color-navy); letter-spacing: var(--tracking-tight); line-height: 1; margin-bottom: var(--space-4); } .promo__plan--featured .promo__plan-price { color: var(--color-white); /* C2/C3 8.5:1 ✓ */ } /* C6/C2 8.89:1 ✓ */ .promo__plan-price small { font-size: var(--text-sm); font-weight: var(--weight-normal); color: var(--color-ink-soft); letter-spacing: 0; } /* Featured small: #c0d8ec/C3 — C3 BG */ .promo__plan--featured .promo__plan-price small { color: var(--color-on-dark); /* #c0d8ec/C3 — dekorativ/muted ✓ */ } /* Plan-Sub: C6/C2 8.89:1 ✓ | plan featured: #c0d8ec/C3 ✓ */ .promo__plan-sub { font-size: var(--text-sm); color: var(--color-ink-soft); line-height: var(--leading-snug); margin: 0 0 var(--space-4); } .promo__plan--featured .promo__plan-sub { color: var(--color-white); /* C2/C3 8.49:1 ✓ */ } .promo__plan-cta { width: 100%; justify-content: center; margin-top: var(--space-2); } /* ── Responsive ──────────────────────────────────────────────────── */ @media (max-width: 900px) { .promo__inner { grid-template-columns: 1fr; } .promo__plans { flex-direction: row; flex-wrap: wrap; } .promo__plan { flex: 1; min-width: 220px; } } @media (max-width: 600px) { .promo__inner { padding: 0 var(--page-padding-x-sm); } .promo__plans { flex-direction: column; } }