/* ============================================================ Pongevity Women — Seiten-Styles Reihenfolge im : brand/ddpp-brand.css → site.css → diese Datei. Nur Brand-Variablen, keine Hex-Werte (siehe brand/check-hex.sh). Präfix "pg-" für alles, damit nichts mit site.css kollidiert. ============================================================ */ .pg { --pg-max: 1240px; --pg-pad: clamp(20px, 4vw, 40px); --pg-gap: clamp(24px, 3vw, 40px); --pg-sec: clamp(56px, 7vw, 104px); --pg-card: var(--ddpp-white); --pg-soft: color-mix(in oklab, var(--ddpp-green) 7%, var(--ddpp-offwhite)); --pg-line: color-mix(in oklab, var(--ddpp-green) 16%, transparent); --pg-muted: color-mix(in oklab, var(--ddpp-green) 68%, var(--ddpp-offwhite)); background: var(--ddpp-offwhite); color: var(--ddpp-green); } /* ---------- Bausteine ---------- */ .pg-section { max-width: var(--pg-max); margin: 0 auto; padding: var(--pg-sec) var(--pg-pad); } .pg-eyebrow { font-family: var(--font-accent); font-weight: 500; font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ddpp-orange); margin: 0 0 14px; } .pg-eyebrow-green { color: var(--ddpp-green); } .pg-h1 { font-family: var(--font-headline); font-weight: 500; font-size: clamp(56px, 8.5vw, 116px); line-height: 0.9; letter-spacing: -0.015em; margin: 0 0 18px; } .pg-h1-alt { color: var(--ddpp-orange); } .pg-h2 { font-family: var(--font-headline); font-weight: 500; font-size: clamp(32px, 4.2vw, 56px); line-height: 1.0; letter-spacing: -0.008em; margin: 0 0 24px; max-width: 18ch; } .pg-h2-wide { max-width: 30ch; } .pg-body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--pg-muted); margin: 0; } .pg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 500; font-size: 16px; border: 0; border-radius: var(--r-pill); padding: 15px 30px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 150ms cubic-bezier(0.2, 0.8, 0.2, 1), color 150ms, transform 120ms; } .pg-btn:active { transform: scale(0.97); } .pg-btn-primary { background: var(--ddpp-orange); color: var(--ddpp-green); } .pg-btn-primary:hover { background: color-mix(in oklab, var(--ddpp-orange) 88%, black); color: var(--ddpp-green); } .pg-btn-primary[disabled] { opacity: 0.6; cursor: default; } .pg-btn-ghost { background: transparent; color: var(--ddpp-green); box-shadow: inset 0 0 0 1.5px var(--ddpp-green); } .pg-btn-ghost:hover { background: var(--ddpp-green); color: var(--ddpp-offwhite); } .pg-btn-block { width: 100%; padding: 19px 30px; font-size: 17px; } .pg-btn-lg { padding: 19px 38px; font-size: 18px; } .pg-breadcrumb { max-width: var(--pg-max); margin: 0 auto; padding: 16px var(--pg-pad) 0; font-family: var(--font-accent); font-size: 13px; color: var(--pg-muted); display: flex; gap: 8px; align-items: center; } .pg-breadcrumb a { color: inherit; text-decoration: none; } .pg-breadcrumb a:hover { color: var(--ddpp-orange); } /* ---------- Hero ---------- */ .pg-hero { max-width: var(--pg-max); margin: 0 auto; padding: clamp(28px, 4vw, 56px) var(--pg-pad) var(--pg-sec); } .pg-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 64px); align-items: start; } .pg-hero-sub { font-family: var(--font-headline); font-weight: 500; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.1; margin: 0 0 10px; } .pg-hero-disciplines { font-family: var(--font-body); font-size: 15px; color: var(--pg-muted); margin: 0 0 22px; } .pg-hero-claim { font-family: var(--font-body); font-weight: 500; font-size: 17px; margin: 0 0 26px; padding-top: 22px; border-top: 1.5px solid var(--pg-line); max-width: 30ch; } .pg-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; } .pg-hero-meta { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .pg-hero-meta li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-family: var(--font-body); font-size: 13px; line-height: 1.35; color: var(--pg-muted); } .pg-hero-grid { position: relative; display: grid; grid-template-columns: 1.55fr 1fr; grid-auto-rows: minmax(0, 1fr); gap: 12px; aspect-ratio: 1.18 / 1; } .pg-tile { margin: 0; overflow: hidden; border-radius: var(--r-2); background: var(--pg-soft); } .pg-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .pg-tile-a { grid-column: 1; grid-row: 1; } .pg-tile-b { grid-column: 2; grid-row: 1 / span 2; } .pg-tile-c { grid-column: 1; grid-row: 2; } .pg-tile-d { grid-column: 1 / span 2; grid-row: 3; } .pg-hero-grid { grid-template-rows: 1.15fr 1fr 1.1fr; } /* Stempel — Störer, BC AlphaPipe (Brand §3) */ .pg-stamp { --pg-stamp-r: -63px; /* Radius der Schrift im Kreis (siehe Stamp in Pongevity.jsx) */ position: absolute; right: -10px; bottom: 8px; width: 148px; height: 148px; display: grid; place-items: center; border-radius: 50%; background: var(--ddpp-offwhite); box-shadow: inset 0 0 0 1.5px var(--ddpp-green); color: var(--ddpp-green); } .pg-stamp-ring { position: absolute; inset: 0; font-size: 11px; letter-spacing: 0; animation: pg-spin 22s linear infinite; } .pg-stamp-ring span { position: absolute; left: calc(50% - 0.5em); top: calc(50% - 0.5em); width: 1em; height: 1em; line-height: 1em; text-align: center; } .pg-stamp-core { color: var(--ddpp-orange); display: grid; place-items: center; } @keyframes pg-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .pg-stamp-ring { animation: none; } } /* ---------- Was ist Pongevity ---------- */ .pg-about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 0.95fr); gap: var(--pg-gap); align-items: start; } .pg-about-card { position: relative; margin: 0; border-radius: var(--r-2); overflow: hidden; background: var(--ddpp-green); aspect-ratio: 4 / 3; } .pg-about-card img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.72; } .pg-about-words { position: absolute; inset: auto auto 22px 26px; display: flex; flex-direction: column; gap: 2px; font-family: var(--font-headline); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.05; color: var(--ddpp-offwhite); text-align: left; } .pg-about-box { background: var(--pg-soft); border-radius: var(--r-2); padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 16px; } .pg-about-box .pg-eyebrow { margin: 0; font-size: 12px; line-height: 1.5; } .pg-about-claim { font-family: var(--font-body); font-weight: 500; font-size: 16px; margin: 0; padding-top: 16px; border-top: 1.5px solid var(--pg-line); color: var(--ddpp-green); } /* ---------- Benefits ---------- */ .pg-benefit-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } .pg-benefit { background: var(--pg-soft); border-radius: var(--r-2); padding: 26px 20px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; } .pg-benefit h3 { font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 1.25; margin: 0; } .pg-benefit p { font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: var(--pg-muted); margin: 0; } /* ---------- Kursablauf ---------- */ .pg-flow-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pg-gap); } .pg-flow-img { border-radius: var(--r-2); overflow: hidden; aspect-ratio: 4 / 3; background: var(--pg-soft); margin-bottom: 16px; } .pg-flow-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .pg-flow-card h3 { font-family: var(--font-body); font-weight: 500; font-size: 17px; margin: 0 0 6px; } .pg-flow-card p { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--pg-muted); margin: 0; } /* ---------- Session-Timeline ---------- */ .pg-session { background: color-mix(in oklab, var(--ddpp-green) 10%, var(--ddpp-offwhite)); border-top: 1.5px solid var(--pg-line); border-bottom: 1.5px solid var(--pg-line); } .pg-session-inner { max-width: var(--pg-max); margin: 0 auto; padding: clamp(44px, 5vw, 72px) var(--pg-pad); display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr); gap: var(--pg-gap); align-items: center; } .pg-session-head .pg-h2 { margin: 0; max-width: 16ch; } .pg-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; } /* Verbindungslinie hinter den Nummern */ .pg-steps::before { content: ""; position: absolute; top: 15px; left: 12.5%; right: 12.5%; height: 1.5px; background: color-mix(in oklab, var(--ddpp-green) 30%, transparent); } .pg-step { position: relative; text-align: center; } .pg-step-num { position: relative; display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 12px; border-radius: 50%; background: var(--ddpp-green); color: var(--ddpp-offwhite); font-family: var(--font-accent); font-size: 14px; } .pg-step h3 { font-family: var(--font-body); font-weight: 500; font-size: 15px; margin: 0 0 2px; } .pg-step-dur { display: block; font-family: var(--font-accent); font-size: 12px; letter-spacing: 0.04em; color: var(--ddpp-orange); margin-bottom: 6px; } .pg-step p { font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: var(--pg-muted); margin: 0; } /* ---------- Kursdetails + Anmeldung ---------- */ .pg-signup-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: var(--pg-gap); align-items: start; } .pg-details-img { margin: 0 0 22px; border-radius: var(--r-2); overflow: hidden; aspect-ratio: 16 / 9; background: var(--pg-soft); } .pg-details-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .pg-details-body .pg-h2 { margin-bottom: 20px; } .pg-details-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .pg-details-list li { display: flex; align-items: center; gap: 12px; font-family: var(--font-body); font-size: 15px; } .pg-details-list svg { flex: none; color: var(--ddpp-green); } .pg-form-card { background: var(--pg-card); border-radius: var(--r-2); padding: clamp(24px, 3vw, 40px); box-shadow: inset 0 0 0 1.5px var(--pg-line); } .pg-form-card .pg-h2 { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 8px; } .pg-form-sub { font-family: var(--font-body); font-size: 15px; color: var(--pg-muted); margin: 0 0 24px; } .pg-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; } .pg-field { display: flex; flex-direction: column; gap: 7px; } .pg-field-wide { grid-column: 1 / -1; } .pg-field label { font-family: var(--font-accent); font-size: 13px; letter-spacing: 0.03em; color: var(--ddpp-green); } .pg-field input, .pg-field select, .pg-field textarea { font-family: var(--font-body); font-size: 15px; color: var(--ddpp-green); background: var(--ddpp-offwhite); border: 1.5px solid var(--pg-line); border-radius: var(--r-2); padding: 13px 14px; width: 100%; box-sizing: border-box; transition: border-color 140ms; } .pg-field textarea { resize: vertical; min-height: 84px; } .pg-field input::placeholder, .pg-field textarea::placeholder { color: color-mix(in oklab, var(--ddpp-green) 45%, var(--ddpp-offwhite)); } .pg-field input:focus, .pg-field select:focus, .pg-field textarea:focus { outline: none; border-color: var(--ddpp-green); } .pg-field [aria-invalid="true"] { border-color: var(--ddpp-orange); } .pg-field-err { font-family: var(--font-body); font-size: 13px; color: var(--ddpp-orange); } .pg-form-banner { font-family: var(--font-body); font-size: 14px; line-height: 1.5; background: color-mix(in oklab, var(--ddpp-orange) 22%, var(--ddpp-offwhite)); border-radius: var(--r-2); padding: 14px 16px; margin-bottom: 20px; } .pg-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: var(--pg-muted); } .pg-consent input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--ddpp-orange); } .pg-consent a { color: var(--ddpp-green); } /* Honeypot: außerhalb des Sichtfelds, aber nicht display:none (Bots prüfen das). */ .pg-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .pg-form-done { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .pg-form-done .pg-btn { margin-top: 18px; } /* ---------- Stimmen ---------- */ .pg-voices-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: var(--pg-gap); align-items: start; } .pg-quotes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .pg-quote { background: var(--pg-soft); border-radius: var(--r-2); padding: 24px 22px; } .pg-quote p { font-family: var(--font-body); font-size: 14px; line-height: 1.55; margin: 0 0 14px; } /* Dekoratives Zitatzeichen statt sprachabhaengiger Anfuehrungszeichen — deutsche „…“ saehen in den anderen 11 Sprachen falsch aus. */ .pg-quote::before { content: "\201C"; display: block; font-family: var(--font-headline); font-size: 44px; line-height: 0.6; color: var(--ddpp-orange); margin-bottom: 10px; } .pg-quote-name { font-family: var(--font-accent); font-size: 13px; color: var(--ddpp-green); } /* ---------- FAQ ---------- */ .pg-faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: var(--pg-gap); align-items: start; } .pg-faq-list { display: grid; gap: 0; } .pg-faq-list details { border-top: 1.5px solid var(--pg-line); padding: 4px 0; } .pg-faq-list details:last-child { border-bottom: 1.5px solid var(--pg-line); } .pg-faq-list summary { list-style: none; cursor: pointer; padding: 18px 34px 18px 0; position: relative; font-family: var(--font-body); font-weight: 500; font-size: 16px; } .pg-faq-list summary::-webkit-details-marker { display: none; } .pg-faq-list summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; border-right: 1.5px solid var(--ddpp-green); border-bottom: 1.5px solid var(--ddpp-green); transform: translateY(-70%) rotate(45deg); transition: transform 160ms; } .pg-faq-list details[open] summary::after { transform: translateY(-30%) rotate(-135deg); } .pg-faq-list details p { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--pg-muted); margin: 0 0 20px; max-width: 70ch; } /* ---------- Abschluss-Band ---------- */ .pg-band { position: relative; overflow: hidden; background: var(--ddpp-green); color: var(--ddpp-offwhite); padding: clamp(64px, 8vw, 112px) var(--pg-pad); text-align: center; } .pg-band-pattern { position: absolute; inset: 0; background: url("/assets/pattern_green_cyan.webp") center / cover; opacity: 0.2; } .pg-band-inner { position: relative; max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 28px; } .pg-band-h2 { font-family: var(--font-headline); font-weight: 500; font-size: clamp(40px, 6vw, 88px); line-height: 0.96; letter-spacing: -0.01em; margin: 0; } .pg-band-h2 span { color: var(--ddpp-cyan); } .pg-band-meta { font-family: var(--font-body); font-size: 14px; margin: 0; } .pg-band-meta a { color: var(--ddpp-cyan); } /* ============================================================ Responsive ============================================================ */ @media (max-width: 1100px) { .pg-about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-about-box { grid-column: 1 / -1; } .pg-benefit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pg-flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-session-inner { grid-template-columns: minmax(0, 1fr); } .pg-voices-grid, .pg-faq-grid { grid-template-columns: minmax(0, 1fr); } .pg-quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .pg-hero-inner { grid-template-columns: minmax(0, 1fr); } .pg-hero-grid { aspect-ratio: 1.1 / 1; } .pg-signup-grid { grid-template-columns: minmax(0, 1fr); } .pg-quotes { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 680px) { .pg-hero-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; } .pg-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-flow-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } .pg-about-grid { grid-template-columns: minmax(0, 1fr); } .pg-form-grid { grid-template-columns: minmax(0, 1fr); } .pg-hero-actions .pg-btn { flex: 1 1 100%; } .pg-stamp { width: 112px; height: 112px; right: -4px; bottom: -6px; --pg-stamp-r: -47px; } .pg-stamp-ring { font-size: 9px; } /* Timeline wird zur vertikalen Liste */ .pg-steps { grid-template-columns: minmax(0, 1fr); gap: 22px; } .pg-steps::before { display: none; } .pg-step { text-align: left; display: grid; grid-template-columns: 30px 1fr; column-gap: 14px; align-items: start; } .pg-step-num { margin: 0; grid-row: 1 / span 3; } .pg-step h3, .pg-step-dur, .pg-step p { grid-column: 2; } }