/* ============================================================ W2 PARTNER · KAJABI CUSTOM THEME Einfügen unter: Settings → Site → Custom Code → Head ============================================================ */ /* --- Google Fonts laden ----------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Public+Sans:wght@400;500;600&display=swap'); /* --- Design-Tokens ---------------------------------------------- */ :root { --bg: #faf7f1; --surface: #ffffff; --surface-2: #f3ede0; --surface-3: #ebe4d2; --ink: #18201c; --ink-soft: #5b6259; --muted: #8a9087; --line: #e3ddcb; --line-soft: #efe9d8; --forest: #2d5f3e; --forest-dark: #1f4329; --forest-tint: #e7efe7; --gold: #b6873b; --amber-tint: #fbf2dd; --red: #b8483a; --font-display: "Newsreader", Georgia, serif; --font-sans: "Public Sans", system-ui, sans-serif; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; --sh-sm: 0 1px 2px rgba(24,32,28,.04), 0 1px 3px rgba(24,32,28,.06); --sh-md: 0 4px 14px rgba(24,32,28,.06), 0 1px 3px rgba(24,32,28,.04); --sh-lg: 0 18px 40px rgba(24,32,28,.10), 0 4px 12px rgba(24,32,28,.04); } /* --- Basis ------------------------------------------------------ */ body { background-color: var(--bg) !important; color: var(--ink) !important; font-family: var(--font-sans) !important; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* --- Typografie ------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .kjb-hero__title, .kjb-section__title, .kjb-card__title { font-family: var(--font-display) !important; font-weight: 500 !important; letter-spacing: -0.02em; color: var(--ink) !important; line-height: 1.08; } h1, .kjb-hero__title { font-size: clamp(36px, 5vw, 60px); } h2, .kjb-section__title { font-size: clamp(26px, 3vw, 38px); } h3 { font-family: var(--font-sans) !important; font-size: 20px; font-weight: 600 !important; line-height: 1.3; } h4 { font-family: var(--font-sans) !important; font-size: 16px; font-weight: 600 !important; } p, li { color: var(--ink-soft); } a { color: var(--forest); } a:hover { color: var(--forest-dark); } /* --- Navigation ------------------------------------------------- */ .kjb-navigation, .site-header, nav.navigation { background: rgba(250, 247, 241, 0.88) !important; backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line) !important; box-shadow: none !important; } .kjb-navigation .kjb-navigation__logo img, .site-header .logo img { max-height: 38px; } .kjb-navigation__link, .navigation__link, nav a { font-family: var(--font-sans) !important; font-weight: 500 !important; font-size: 15px !important; color: var(--ink-soft) !important; transition: color .15s !important; } .kjb-navigation__link:hover, nav a:hover { color: var(--ink) !important; } /* --- Buttons ---------------------------------------------------- */ .kjb-btn, .btn, button[type="submit"], .purchase-button, .kjb-checkout-button, a.kjb-btn { font-family: var(--font-sans) !important; font-weight: 500 !important; font-size: 15px !important; border-radius: var(--r-pill) !important; border: 1px solid transparent !important; padding: 0 22px !important; height: 46px !important; line-height: 44px !important; transition: background .18s, border-color .18s, color .18s !important; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none !important; } /* Primär-Button (grün) */ .kjb-btn--primary, .kjb-checkout-button, .purchase-button, button[type="submit"], .btn-primary { background: var(--forest) !important; color: #f3eee2 !important; border-color: var(--forest) !important; } .kjb-btn--primary:hover, .kjb-checkout-button:hover, .purchase-button:hover, button[type="submit"]:hover { background: var(--forest-dark) !important; border-color: var(--forest-dark) !important; color: #f3eee2 !important; } /* Sekundär-Button (Outline) */ .kjb-btn--secondary, .btn-secondary { background: transparent !important; color: var(--ink) !important; border-color: var(--line) !important; } .kjb-btn--secondary:hover { border-color: var(--ink) !important; } /* --- Karten / Cards --------------------------------------------- */ .kjb-card, .product-card, .kjb-pricing-item { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r-md) !important; box-shadow: var(--sh-sm) !important; } /* --- Preise / Pricing ------------------------------------------- */ .kjb-pricing-item { padding: 40px !important; border-radius: var(--r-lg) !important; } .kjb-pricing-item__price, .pricing-price { font-family: var(--font-display) !important; font-weight: 500 !important; font-size: 52px !important; line-height: 1 !important; letter-spacing: -0.02em !important; color: var(--ink) !important; } .kjb-pricing-item--featured, .pricing-item--featured { background: var(--ink) !important; border-color: transparent !important; box-shadow: var(--sh-lg) !important; } .kjb-pricing-item--featured *, .pricing-item--featured h3, .pricing-item--featured .kjb-pricing-item__price { color: #f3eee2 !important; } /* --- Formular / Input ------------------------------------------- */ input, textarea, select { font-family: var(--font-sans) !important; background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r-sm) !important; padding: 12px 16px !important; color: var(--ink) !important; font-size: 16px !important; } input:focus, textarea:focus, select:focus { outline: 2px solid var(--forest) !important; border-color: transparent !important; box-shadow: none !important; } /* --- Kurs-Player (Kajabi Course) -------------------------------- */ .kjb-player, .course-player, .course-sidebar { background: var(--bg) !important; } .kjb-lesson-title, .lesson-title { font-family: var(--font-display) !important; font-weight: 500 !important; color: var(--ink) !important; } /* Sidebar Lektionen */ .kjb-course-outline__post, .course-outline__item { border-color: var(--line) !important; } .kjb-course-outline__post--active, .course-outline__item--active { background: var(--forest-tint) !important; color: var(--forest-dark) !important; border-left: 3px solid var(--forest) !important; } /* Fortschrittsbalken */ .kjb-progress, .progress-bar { background: var(--line) !important; border-radius: var(--r-pill) !important; } .kjb-progress__fill, .progress-bar__fill { background: var(--forest) !important; border-radius: var(--r-pill) !important; } /* --- Footer ----------------------------------------------------- */ footer, .kjb-footer, .site-footer { background: var(--ink) !important; color: #b0aea4 !important; border-top: none !important; } footer a, .kjb-footer a, .site-footer a { color: #b0aea4 !important; font-size: 14px !important; } footer a:hover, .kjb-footer a:hover { color: #f3eee2 !important; } footer h4, .kjb-footer h4 { color: #f3eee2 !important; font-family: var(--font-sans) !important; font-size: 13px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; font-weight: 600 !important; } /* --- Checkout-Seite -------------------------------------------- */ .kjb-checkout, .checkout-form { background: var(--bg) !important; } .kjb-checkout__summary { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r-md) !important; } /* --- Alerts & Badges ------------------------------------------- */ .kjb-alert--success, .alert-success { background: var(--forest-tint) !important; color: var(--forest-dark) !important; border-color: transparent !important; } /* --- Sektionen -------------------------------------------------- */ .kjb-section, section { padding: 80px 0; } .kjb-section--alt { background: var(--surface) !important; } /* ============================================================ Responsive Anpassungen ============================================================ */ @media (max-width: 700px) { h1, .kjb-hero__title { font-size: 34px; } h2, .kjb-section__title { font-size: 26px; } .kjb-pricing-item__price { font-size: 40px !important; } }
About Contact
Store My Library

My Courses

Featured Courses

Available Courses