/* =========================================================================== * CheckTV Brand-CSS — v0.5.0 * * Komplett-Neuauflage angelehnt an die React/shadcn Demo-Page: * https://ubv2q7i65x6r4.kimi.page/ * * Strategie: * - Plus Jakarta Sans als Schrift (Google-Fonts via @import) * - Drei Brand-Akzente: Magenta #ff006e, Purple #8338ec, Blue #3a86ff, * plus Cyan #00f5d4 für "Du sparst"-Highlights * - Tiefes Schwarz #0a0a0f als Background, #1a1a24 für Card-Surfaces * - Glass-Look: backdrop-filter blur 20px + 5% White-Tint * - Drei pulsierende Hintergrund-Gradient-Orbs auf (fixed, blur) * - Klassen-Vokabular bleibt kompatibel zu den neuen Patterns * (.ctv-hero, .ctv-pricing, .ctv-faq, etc.) * ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap'); /* --------------------------------------------------------------------------- * 1. Brand-Tokens * ------------------------------------------------------------------------- */ :root { --ctv-magenta: #ff006e; --ctv-purple : #8338ec; --ctv-blue : #3a86ff; --ctv-cyan : #00f5d4; --ctv-bg : #0a0a0f; --ctv-card : #1a1a24; --ctv-surface: #12121a; --ctv-grad : linear-gradient(135deg, #ff006e 0%, #8338ec 50%, #3a86ff 100%); --ctv-grad-2col : linear-gradient(135deg, #ff006e 0%, #8338ec 100%); --ctv-radius : 1rem; --ctv-radius-lg : 1.5rem; --ctv-ease : cubic-bezier(0.16, 1, 0.3, 1); --ctv-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); } /* --------------------------------------------------------------------------- * 2. Dark-Mode-Override für GeneratePress * Wir überschreiben die GP-CSS-Variablen, sodass alle Default-Komponenten * automatisch im Dark-Look erscheinen — Header, Sidebar, Single-Post. * ------------------------------------------------------------------------- */ body.checktv-dark-mode { --base : #0a0a0f; --base-2 : #12121a; --base-3 : #1a1a24; --contrast : #ffffff; --contrast-2 : rgba(255,255,255,.7); --contrast-3 : rgba(255,255,255,.5); --accent : #ff006e; --accent-hover: #ff3389; background: #0a0a0f !important; color : #fff; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", sans-serif; font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; } body.checktv-dark-mode, body.checktv-dark-mode .site, body.checktv-dark-mode .site-content, body.checktv-dark-mode .inside-article, body.checktv-dark-mode .entry-content, body.checktv-dark-mode .site-main, body.checktv-dark-mode .main-navigation, body.checktv-dark-mode .menu-toggle, body.checktv-dark-mode .site-header { background: transparent; color : #fff; } body.checktv-dark-mode h1, body.checktv-dark-mode h2, body.checktv-dark-mode h3, body.checktv-dark-mode h4, body.checktv-dark-mode h5, body.checktv-dark-mode h6 { color: #fff; font-family: inherit; letter-spacing: -0.02em; } body.checktv-dark-mode a { color: #fff; } body.checktv-dark-mode a:hover { color: var(--ctv-magenta); } body.checktv-dark-mode ::selection { background: rgba(255, 0, 110, 0.35); color: #fff; } /* Scrollbar */ body.checktv-dark-mode::-webkit-scrollbar { width: 10px; } body.checktv-dark-mode::-webkit-scrollbar-track { background: #0a0a0f; } body.checktv-dark-mode::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ff006e, #8338ec); border-radius: 4px; } /* --------------------------------------------------------------------------- * 3. Body-Background mit drei Gradient-Orbs * Pseudo-Elemente, position fixed, kein Re-Layout beim Scroll * ------------------------------------------------------------------------- */ body.checktv-dark-mode::before, body.checktv-dark-mode::after { content: ''; position: fixed; z-index: 0; pointer-events: none; filter: blur(100px); border-radius: 50%; } body.checktv-dark-mode::before { top: -20%; left: -10%; width: 800px; height: 800px; background: radial-gradient(circle, rgba(255,0,110,.4) 0%, transparent 70%); opacity: .2; } body.checktv-dark-mode::after { top: 40%; right: -15%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(131,56,236,.4) 0%, transparent 70%); opacity: .15; } /* dritter Orb wird in functions.php injiziert */ .ctv-orb-3 { position: fixed; bottom: -10%; left: 30%; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(58,134,255,.4) 0%, transparent 70%); filter: blur(100px); opacity: .15; pointer-events: none; z-index: 0; } body.checktv-dark-mode .site, body.checktv-dark-mode .site-content, body.checktv-dark-mode .site-footer { position: relative; z-index: 1; } /* --------------------------------------------------------------------------- * 4. Header / Navigation (Glass-Bar) * ------------------------------------------------------------------------- */ body.checktv-dark-mode .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background: rgba(10, 10, 15, 0.85) !important; border-bottom: 1px solid rgba(255,255,255,.06); } body.checktv-dark-mode .site-title a { background: var(--ctv-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; font-size: 1.5rem; letter-spacing: .02em; animation: ctv-pulse-glow-text 4s ease-in-out infinite; } body.checktv-dark-mode .main-navigation .main-nav ul li a { color: rgba(255,255,255,.7); font-weight: 500; font-size: .95rem; position: relative; transition: color .3s var(--ctv-ease); } body.checktv-dark-mode .main-navigation .main-nav ul li a:hover, body.checktv-dark-mode .main-navigation .main-nav ul li.current-menu-item > a { color: #fff; } body.checktv-dark-mode .main-navigation .main-nav ul li a::after { content: ''; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--ctv-grad-2col); transition: width .3s var(--ctv-ease); } body.checktv-dark-mode .main-navigation .main-nav ul li a:hover::after, body.checktv-dark-mode .main-navigation .main-nav ul li.current-menu-item > a::after { width: 60%; } /* Login-Button rechts im Header */ .ctv-btn-login { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.25rem; border-radius: 9999px; background: var(--ctv-grad-2col); color: #fff !important; font-weight: 600; font-size: .9rem; letter-spacing: .01em; box-shadow: 0 10px 30px rgba(255,0,110,.25); transition: transform .25s var(--ctv-ease), box-shadow .25s var(--ctv-ease); } .ctv-btn-login:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 15px 40px rgba(255,0,110,.4); color: #fff !important; } .ctv-btn-login svg { transition: transform .25s var(--ctv-ease); } .ctv-btn-login:hover svg { transform: translateX(3px); } /* --------------------------------------------------------------------------- * 5. Utility-Klassen für Patterns * ------------------------------------------------------------------------- */ .ctv-grad-text { background: var(--ctv-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } .ctv-glass { background: rgba(255,255,255,.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.08); border-radius: var(--ctv-radius); } .ctv-card-hover { transition: transform .5s var(--ctv-ease), box-shadow .5s var(--ctv-ease), border-color .3s var(--ctv-ease); } .ctv-card-hover:hover { transform: translateY(-12px); box-shadow: 0 30px 60px rgba(0,0,0,.4), 0 0 40px rgba(255,0,110,.15); border-color: rgba(255,0,110,.25); } .ctv-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 1rem 2.25rem; border-radius: 9999px; font-weight: 600; font-size: 1rem; letter-spacing: .01em; border: 0; cursor: pointer; text-decoration: none; transition: transform .3s var(--ctv-ease), box-shadow .3s var(--ctv-ease), background .3s var(--ctv-ease); white-space: nowrap; } .ctv-btn--primary { background: var(--ctv-grad-2col); color: #fff !important; box-shadow: 0 10px 30px rgba(255,0,110,.25); } .ctv-btn--primary:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 20px 40px rgba(255,0,110,.4); color: #fff !important; } .ctv-btn--ghost { background: rgba(255,255,255,.06); color: #fff !important; border: 1px solid rgba(255,255,255,.18); } .ctv-btn--ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.32); color: #fff !important; } .ctv-btn--lg { padding: 1.15rem 2.75rem; font-size: 1.1rem; } .ctv-btn svg { transition: transform .25s var(--ctv-ease); } .ctv-btn:hover svg { transform: translateX(4px); } /* Section-Wrapper */ .ctv-section { position: relative; padding: clamp(4rem, 8vw, 8rem) 1rem; z-index: 1; } .ctv-container { max-width: 1280px; margin: 0 auto; } .ctv-container--narrow { max-width: 1024px; } .ctv-section__head { text-align: center; margin-bottom: 4rem; } .ctv-section__title { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700; margin: 0 0 1.5rem; line-height: 1.1; color: #fff; } .ctv-section__sub { font-size: 1.125rem; color: rgba(255,255,255,.6); max-width: 640px; margin: 0 auto; line-height: 1.6; } /* --------------------------------------------------------------------------- * 6. Hero * ------------------------------------------------------------------------- */ .ctv-hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 5rem 1rem 4rem; } .ctv-hero__bg { position: absolute; inset: 0; z-index: 0; background-image: url('/wp-content/uploads/2026/05/hero-visual.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: .35; } .ctv-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 30% 20%, rgba(255,0,110,.22), transparent 55%), radial-gradient(ellipse at 70% 80%, rgba(131,56,236,.18), transparent 55%), linear-gradient(180deg, rgba(10,10,15,.55) 0%, rgba(10,10,15,.4) 50%, #0a0a0f 100%); } .ctv-hero__particles { z-index: 2; } .ctv-hero__content { z-index: 3; } .ctv-hero__particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .ctv-hero__particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--ctv-magenta); opacity: .4; animation: ctv-float 6s ease-in-out infinite; } .ctv-hero__content { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; text-align: center; } .ctv-hero__title { font-size: clamp(2.5rem, 6vw, 4.75rem); font-weight: 700; line-height: 1.05; letter-spacing: -.025em; margin: 0 0 1.5rem; color: #fff; } .ctv-hero__title em { font-style: normal; background: var(--ctv-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 40px rgba(255,0,110,.5); } .ctv-hero__sub { font-size: clamp(1rem, 1.5vw, 1.25rem); color: rgba(255,255,255,.7); max-width: 720px; margin: 0 auto 3rem; line-height: 1.6; } .ctv-hero__sub strong { color: #fff; font-weight: 600; } .ctv-hero__features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; max-width: 960px; margin: 0 auto 3rem; } .ctv-hero-feature { background: rgba(255,255,255,.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.08); border-radius: var(--ctv-radius); padding: 1.5rem; text-align: center; transition: transform .5s var(--ctv-ease), box-shadow .5s var(--ctv-ease); } .ctv-hero-feature:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(255,0,110,.15); } .ctv-hero-feature__icon { width: 56px; height: 56px; border-radius: 14px; background: var(--ctv-grad-2col); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: #fff; animation: ctv-pulse-glow 4s ease-in-out infinite; } .ctv-hero-feature__icon svg { width: 28px; height: 28px; } .ctv-hero-feature__title { font-size: 1.05rem; font-weight: 600; margin: 0 0 .25rem; color: #fff; } .ctv-hero-feature__sub { font-size: .875rem; color: rgba(255,255,255,.6); margin: 0; } .ctv-hero__cta { margin-bottom: 2rem; } .ctv-hero__trust { font-size: .875rem; color: rgba(255,255,255,.5); letter-spacing: .03em; margin: 0; } /* --------------------------------------------------------------------------- * 7. Pricing — 4 Cards, 12 Monate als Featured * ------------------------------------------------------------------------- */ .ctv-pricing { padding: 6rem 1rem; position: relative; } .ctv-pricing__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 1280px; margin: 0 auto; } @media (min-width: 640px) { .ctv-pricing__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .ctv-pricing__grid { grid-template-columns: repeat(4, 1fr); } } .ctv-pricing-card { position: relative; background: rgba(255,255,255,.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.08); border-radius: var(--ctv-radius); padding: 1.75rem 1.5rem; display: flex; flex-direction: column; transition: transform .5s var(--ctv-ease), box-shadow .5s var(--ctv-ease), border-color .3s var(--ctv-ease); } .ctv-pricing-card:hover { transform: translateY(-12px); box-shadow: 0 30px 60px rgba(0,0,0,.4), 0 0 40px rgba(255,0,110,.15); border-color: rgba(255,0,110,.25); } .ctv-pricing-card--featured { background: linear-gradient(180deg, #1a1a24 0%, #1a1a24 100%); border: 2px solid rgba(255,0,110,.5); box-shadow: 0 0 40px rgba(255,0,110,.3); } @media (min-width: 1024px) { .ctv-pricing-card--featured { transform: translateY(-1rem); } .ctv-pricing-card--featured:hover { transform: translateY(-1.75rem); } } .ctv-pricing-card__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--ctv-grad-2col); color: #fff; padding: .25rem 1rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: .25rem; animation: ctv-pulse-glow 4s ease-in-out infinite; z-index: 2; } .ctv-pricing-card__badge svg { width: 12px; height: 12px; } .ctv-pricing-card__name { font-size: 1.1rem; font-weight: 600; color: #fff; margin: 0 0 .5rem; } .ctv-pricing-card__price { font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 700; background: var(--ctv-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; line-height: 1; } .ctv-pricing-card__period { font-size: 1.25rem; color: rgba(255,255,255,.6); margin-left: .25rem; } .ctv-pricing-card__price-row { margin: 0 0 1rem; } .ctv-pricing-card__desc { font-size: .875rem; color: rgba(255,255,255,.6); margin: 0 0 1.5rem; min-height: 2.6em; } .ctv-pricing-card__features { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: .65rem; flex: 1; } .ctv-pricing-card__features li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: rgba(255,255,255,.75); } .ctv-pricing-card__features li::before { content: ''; flex-shrink: 0; width: 16px; height: 16px; background-color: var(--ctv-cyan); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain; } .ctv-pricing-card__cta { width: 100%; padding: .85rem 1rem; border-radius: 9999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #fff !important; font-weight: 600; font-size: .9rem; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; transition: background .3s var(--ctv-ease), transform .3s var(--ctv-ease); } .ctv-pricing-card__cta:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); color: #fff !important; } .ctv-pricing-card--featured .ctv-pricing-card__cta { background: var(--ctv-grad-2col); border-color: transparent; box-shadow: 0 10px 30px rgba(255,0,110,.25); } .ctv-pricing-card--featured .ctv-pricing-card__cta:hover { box-shadow: 0 20px 40px rgba(255,0,110,.4); } .ctv-pricing__bottom { text-align: center; margin-top: 3rem; } .ctv-pricing__hint { margin-top: 1rem; font-size: .875rem; color: rgba(255,255,255,.4); } /* --------------------------------------------------------------------------- * 8. Sparrechner * ------------------------------------------------------------------------- */ .ctv-savings { padding: 6rem 1rem; position: relative; } .ctv-savings__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 1280px; margin: 0 auto; } @media (min-width: 1024px) { .ctv-savings__grid { grid-template-columns: 3fr 2fr; } } .ctv-savings__panel { background: rgba(255,255,255,.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.08); border-radius: var(--ctv-radius); padding: 1.5rem; } .ctv-savings__panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; } .ctv-savings__panel-title { font-size: 1.1rem; font-weight: 600; color: #fff; margin: 0; } .ctv-savings__select-all { background: none; border: 0; color: var(--ctv-magenta); font-size: .875rem; font-weight: 500; cursor: pointer; transition: color .3s var(--ctv-ease); } .ctv-savings__select-all:hover { color: #ff3389; } .ctv-savings__services { display: grid; grid-template-columns: 1fr; gap: .75rem; } @media (min-width: 640px) { .ctv-savings__services { grid-template-columns: repeat(2, 1fr); } } .ctv-service { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-radius: .85rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05); cursor: pointer; transition: background .3s var(--ctv-ease), border-color .3s var(--ctv-ease), transform .2s var(--ctv-ease); } .ctv-service:hover { background: rgba(255,255,255,.08); transform: translateY(-1px); } .ctv-service.is-active { background: rgba(255,0,110,.1); border-color: rgba(255,0,110,.3); } .ctv-service__label { display: flex; align-items: center; gap: .75rem; font-size: .9rem; color: rgba(255,255,255,.85); } .ctv-service__price { font-size: .9rem; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; } /* Custom Toggle (Switch) */ .ctv-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; } .ctv-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .ctv-switch__slider { position: absolute; inset: 0; background: rgba(255,255,255,.15); border-radius: 9999px; transition: background .3s var(--ctv-ease); } .ctv-switch__slider::before { content: ''; position: absolute; width: 16px; height: 16px; top: 3px; left: 3px; background: #fff; border-radius: 50%; transition: transform .3s var(--ctv-ease); } .ctv-switch input:checked + .ctv-switch__slider { background: var(--ctv-magenta); } .ctv-switch input:checked + .ctv-switch__slider::before { transform: translateX(16px); } /* Savings-Display */ .ctv-savings__result { position: sticky; top: 90px; } .ctv-savings__result-title { font-size: 1.1rem; font-weight: 600; color: #fff; margin: 0 0 1.5rem; } .ctv-savings__row { margin-bottom: 1.5rem; } .ctv-savings__row-label { font-size: .875rem; color: rgba(255,255,255,.6); margin: 0 0 .25rem; } .ctv-savings__row-value { font-size: 2rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; margin: 0; } .ctv-savings__row-value-suffix { font-size: 1rem; color: rgba(255,255,255,.6); font-weight: 400; margin-left: .25rem; } .ctv-savings__price-card { padding: 1rem; border-radius: .85rem; background: linear-gradient(135deg, rgba(255,0,110,.08), rgba(131,56,236,.08)); border: 1px solid rgba(255,0,110,.2); margin-bottom: 1.5rem; } .ctv-savings__price-card .ctv-savings__row-value { background: var(--ctv-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ctv-savings__hint { font-size: .75rem; color: rgba(255,255,255,.4); margin: .5rem 0 0; } .ctv-savings__highlight { padding: 1rem; border-radius: .85rem; background: rgba(0,245,212,.08); border: 1px solid rgba(0,245,212,.3); margin-bottom: 1.5rem; } .ctv-savings__highlight .ctv-savings__row-label { color: var(--ctv-cyan); } .ctv-savings__highlight .ctv-savings__row-value { color: var(--ctv-cyan); font-size: 2.25rem; } .ctv-savings__year-text { font-size: 1.05rem; font-weight: 600; color: #fff; margin: 0 0 1.5rem; } .ctv-savings__year-text strong { background: var(--ctv-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } /* --------------------------------------------------------------------------- * 9. How-it-works (3 Steps mit Gradient-Linie) * ------------------------------------------------------------------------- */ .ctv-how { padding: 6rem 1rem; position: relative; } .ctv-how__steps { position: relative; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .ctv-how__steps { grid-template-columns: repeat(3, 1fr); } } .ctv-how__line { position: absolute; top: 50%; left: 6%; right: 6%; height: 3px; background: var(--ctv-grad); border-radius: 2px; transform: translateY(-50%); z-index: 0; display: none; } @media (min-width: 1024px) { .ctv-how__line { display: block; } } .ctv-how__step { position: relative; z-index: 1; background: rgba(255,255,255,.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.08); border-radius: var(--ctv-radius); padding: 2rem; transition: transform .5s var(--ctv-ease), box-shadow .5s var(--ctv-ease); } .ctv-how__step:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(0,0,0,.4), 0 0 40px rgba(255,0,110,.15); } .ctv-how__step-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .ctv-how__step-num { font-size: 3rem; font-weight: 700; background: var(--ctv-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: .6; line-height: 1; transition: opacity .3s var(--ctv-ease); } .ctv-how__step:hover .ctv-how__step-num { opacity: 1; } .ctv-how__step-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--ctv-grad-2col); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; animation: ctv-pulse-glow 4s ease-in-out infinite; } .ctv-how__step-icon svg { width: 28px; height: 28px; } .ctv-how__step-title { font-size: 1.15rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .75rem; color: #fff; } .ctv-how__step-text { color: rgba(255,255,255,.65); line-height: 1.6; font-size: .95rem; margin: 0; } /* --------------------------------------------------------------------------- * 10. Devices * ------------------------------------------------------------------------- */ .ctv-devices { padding: 6rem 1rem; position: relative; } .ctv-devices__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; max-width: 1280px; margin: 0 auto; align-items: center; } @media (min-width: 1024px) { .ctv-devices__grid { grid-template-columns: 1fr 1fr; } } .ctv-devices__visual { position: relative; } .ctv-devices__mockup { position: relative; border-radius: var(--ctv-radius-lg); overflow: hidden; background-image: url('/wp-content/uploads/2026/05/devices.jpg'); background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,.08); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(255,0,110,.15); } .ctv-devices__mockup::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(255,0,110,.18), transparent 55%), radial-gradient(circle at 70% 70%, rgba(131,56,236,.18), transparent 55%), linear-gradient(180deg, rgba(10,10,15,.15) 0%, rgba(10,10,15,.55) 100%); } /* Wenn das Mockup ein echtes Bild als BG hat, blenden wir das SVG-Grid aus. Falls das Bild fehlt, zeigt das Grid weiterhin die 4 Device-Icons als Fallback. */ .ctv-devices__mockup-grid { position: relative; display: none; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 1rem; width: 80%; height: 80%; z-index: 1; } .ctv-devices__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.5rem; } .ctv-devices__badge { padding: .5rem 1rem; border-radius: 9999px; background: var(--ctv-grad-2col); background-size: 200% 200%; color: #fff; font-size: .875rem; font-weight: 600; animation: ctv-grad-shift 8s linear infinite; } .ctv-devices__cards { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; } @media (min-width: 640px) { .ctv-devices__cards { grid-template-columns: repeat(2, 1fr); } } .ctv-device-card { background: rgba(255,255,255,.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.08); border-radius: .85rem; padding: 1.25rem; display: flex; gap: 1rem; transition: transform .3s var(--ctv-ease), border-color .3s var(--ctv-ease); } .ctv-device-card:hover { transform: translateY(-4px); border-color: rgba(255,0,110,.3); } .ctv-device-card__icon { width: 48px; height: 48px; border-radius: 10px; background: linear-gradient(135deg, rgba(255,0,110,.2), rgba(131,56,236,.2)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .3s var(--ctv-ease); } .ctv-device-card:hover .ctv-device-card__icon { background: linear-gradient(135deg, rgba(255,0,110,.35), rgba(131,56,236,.35)); } .ctv-device-card__icon svg { width: 24px; height: 24px; color: var(--ctv-magenta); } .ctv-device-card__title { font-size: .95rem; font-weight: 600; color: #fff; margin: 0 0 .25rem; } .ctv-device-card__text { font-size: .8rem; color: rgba(255,255,255,.6); margin: 0; line-height: 1.5; } .ctv-devices__features { background: rgba(255,255,255,.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.08); border-radius: var(--ctv-radius); padding: 1.5rem; margin-bottom: 2rem; } .ctv-devices__features-title { font-size: 1.1rem; font-weight: 600; color: #fff; margin: 0 0 1rem; display: flex; align-items: center; gap: .5rem; } .ctv-devices__features-title svg { width: 20px; height: 20px; color: var(--ctv-magenta); } .ctv-devices__features-list { display: grid; grid-template-columns: 1fr; gap: .75rem; } @media (min-width: 640px) { .ctv-devices__features-list { grid-template-columns: repeat(2, 1fr); } } .ctv-devices__feature-item { display: flex; align-items: center; gap: .75rem; font-size: .875rem; color: rgba(255,255,255,.7); } .ctv-devices__feature-icon { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,0,110,.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ctv-devices__feature-icon svg { width: 12px; height: 12px; color: var(--ctv-magenta); } /* --------------------------------------------------------------------------- * 11. FAQ — 2-Column Grid mit Plus-Icon * ------------------------------------------------------------------------- */ .ctv-faq-section { padding: 6rem 1rem; position: relative; } .ctv-faq-section__head { text-align: center; margin-bottom: 4rem; max-width: 1024px; margin-left: auto; margin-right: auto; } .ctv-faq-section__title { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700; margin: 0; color: #fff; } .ctv-faq-section__title em { font-style: normal; background: var(--ctv-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ctv-faq-section__subtitle { font-size: 1rem; color: rgba(255,255,255,.6); margin: 1rem 0 0; } .ctv-faq-section__subtitle a { color: var(--ctv-magenta); } .ctv-faq-section__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 1024px; margin: 0 auto; } @media (min-width: 768px) { .ctv-faq-section__grid { grid-template-columns: repeat(2, 1fr); } } .ctv-faq { background: rgba(255,255,255,.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.08); border-left: 4px solid transparent; border-radius: .85rem; overflow: hidden; transition: border-color .4s var(--ctv-ease), box-shadow .4s var(--ctv-ease); } .ctv-faq:hover { border-left-color: rgba(255,255,255,.2); } .ctv-faq[open] { border-left-color: var(--ctv-magenta); box-shadow: 0 0 30px rgba(255,0,110,.12); } .ctv-faq summary { list-style: none; cursor: pointer; padding: 1.15rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 500; color: #fff; font-size: .95rem; } .ctv-faq summary::-webkit-details-marker { display: none; } .ctv-faq summary::after { content: ''; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background-color: rgba(255,255,255,.08); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a8b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 14px; transition: background-color .4s var(--ctv-ease), transform .4s var(--ctv-ease); } .ctv-faq[open] summary::after { background-color: rgba(255,0,110,.2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff006e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); transform: rotate(45deg); } .ctv-faq p { padding: 0 1.25rem 1.25rem; margin: 0; color: rgba(255,255,255,.65); font-size: .9rem; line-height: 1.65; } /* --------------------------------------------------------------------------- * 12. CTA-Section * ------------------------------------------------------------------------- */ .ctv-cta { position: relative; padding: 6rem 1rem; overflow: hidden; text-align: center; } .ctv-cta__bg { position: absolute; inset: 0; z-index: 0; background-image: url('/wp-content/uploads/2026/05/cta-bg.jpg'); background-size: cover; background-position: center; } .ctv-cta::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 25% 25%, rgba(255,0,110,.35), transparent 55%), radial-gradient(ellipse at 75% 75%, rgba(131,56,236,.35), transparent 55%), rgba(10,10,15,.65); } .ctv-cta__orb-1, .ctv-cta__orb-2 { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 0; opacity: .25; } .ctv-cta__orb-1 { top: 25%; left: 25%; width: 256px; height: 256px; background: radial-gradient(circle, rgba(255,0,110,.5), transparent 70%); animation: ctv-float 8s ease-in-out infinite; } .ctv-cta__orb-2 { bottom: 25%; right: 25%; width: 192px; height: 192px; background: radial-gradient(circle, rgba(131,56,236,.5), transparent 70%); animation: ctv-float 10s ease-in-out infinite reverse; } .ctv-cta__content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; } .ctv-cta__title { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; color: #fff; margin: 0 0 1.5rem; letter-spacing: -.02em; } .ctv-cta__sub { font-size: clamp(1rem, 1.5vw, 1.25rem); color: rgba(255,255,255,.7); margin: 0 auto 2.5rem; max-width: 640px; line-height: 1.6; } .ctv-cta__btn { animation: ctv-pulse-glow 4s ease-in-out infinite; } .ctv-cta__trust { margin-top: 2rem; font-size: .875rem; color: rgba(255,255,255,.5); } /* --------------------------------------------------------------------------- * 13. Footer (GP-Footer Override + CheckTV-Footer-Block) * ------------------------------------------------------------------------- */ body.checktv-dark-mode .site-footer { background: #0a0a0f !important; border-top: 1px solid rgba(255,255,255,.06); padding: 3rem 1rem 2rem; position: relative; z-index: 1; } body.checktv-dark-mode .site-info { text-align: center; color: rgba(255,255,255,.4); font-size: .875rem; } body.checktv-dark-mode .site-info a { color: rgba(255,255,255,.5); transition: color .3s var(--ctv-ease); } body.checktv-dark-mode .site-info a:hover { color: var(--ctv-magenta); } /* Custom Footer-Block */ .ctv-footer { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; max-width: 1280px; margin: 0 auto; } .ctv-footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; } .ctv-footer__legal a { font-size: .9rem; color: rgba(255,255,255,.6) !important; text-decoration: none; position: relative; transition: color .3s var(--ctv-ease); } .ctv-footer__legal a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--ctv-grad-2col); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ctv-ease); } .ctv-footer__legal a:hover { color: #fff !important; } .ctv-footer__legal a:hover::after { transform: scaleX(1); } .ctv-footer__social { display: flex; gap: .75rem; } .ctv-footer__social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.55) !important; transition: transform .3s var(--ctv-ease), background .3s var(--ctv-ease), color .3s var(--ctv-ease), border-color .3s var(--ctv-ease); } .ctv-footer__social a:hover { transform: translateY(-3px); background: rgba(255,0,110,.12); border-color: rgba(255,0,110,.35); color: #fff !important; } .ctv-footer__copy { margin: 0; font-size: .85rem; color: rgba(255,255,255,.4); text-align: center; letter-spacing: .01em; } .ctv-footer__copy strong { color: rgba(255,255,255,.7); font-weight: 600; } @media (max-width: 640px) { .ctv-footer__legal { gap: .35rem 1.25rem; } .ctv-footer__legal a { font-size: .82rem; } .ctv-footer__copy { font-size: .8rem; } } /* --------------------------------------------------------------------------- * 14. WooCommerce * ------------------------------------------------------------------------- */ body.checktv-dark-mode.woocommerce .woocommerce-info, body.checktv-dark-mode.woocommerce .woocommerce-message, body.checktv-dark-mode.woocommerce .woocommerce-error { background: rgba(255,255,255,.05); color: #fff; border-left-color: var(--ctv-magenta); } body.checktv-dark-mode.woocommerce .product .price { color: #fff; font-weight: 700; } body.checktv-dark-mode.woocommerce .single_add_to_cart_button, body.checktv-dark-mode.woocommerce .checkout-button, body.checktv-dark-mode.woocommerce .button.alt { background: var(--ctv-grad-2col) !important; border: 0 !important; border-radius: 9999px !important; padding: .85rem 2rem !important; font-weight: 600 !important; color: #fff !important; transition: transform .3s var(--ctv-ease), box-shadow .3s var(--ctv-ease) !important; box-shadow: 0 10px 30px rgba(255,0,110,.25); } body.checktv-dark-mode.woocommerce .single_add_to_cart_button:hover, body.checktv-dark-mode.woocommerce .checkout-button:hover, body.checktv-dark-mode.woocommerce .button.alt:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(255,0,110,.4); } body.checktv-dark-mode.woocommerce-cart .cart_totals, body.checktv-dark-mode.woocommerce-checkout .checkout { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--ctv-radius); padding: 2rem; backdrop-filter: blur(20px); } /* --------------------------------------------------------------------------- * 15. Page-Title verstecken + Full-Width-Layout auf Front-Page * GeneratePress packt den Content per default in: * .site (max-1200) → .content-area → article → .inside-article (pad 40) * → .entry-content * Auf der Home-Page brechen wir alle Container auf, damit die Patterns * wirklich von Bildschirm-Rand zu Bildschirm-Rand gehen. * ------------------------------------------------------------------------- */ body.home .entry-header, body.home .page-header, body.home .entry-title { display: none !important; } body.home .site, body.home .site-content, body.home .content-area, body.home main#main, body.home article, body.home .inside-article { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; } body.home .entry-content { max-width: none !important; padding: 0 !important; margin: 0 !important; } body.home .entry-content > * { max-width: none; } /* Sidebar auf Home wegnehmen (falls Filter mal nicht greift) */ body.home #right-sidebar, body.home #left-sidebar { display: none !important; } /* GP Site-Wrapper soll auf Home die ganze Breite nutzen */ body.home .grid-container, body.home .grid-parent { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* Header bleibt aber zentriert (1280px max), nur die Content-Sections gehen full-bleed */ body.home .site-header .grid-container, body.home .site-header .inside-header { max-width: 1280px !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; margin: 0 auto !important; } /* Footer bleibt ebenso zentriert */ body.home .site-footer .grid-container, body.home .site-footer .inside-site-info { max-width: 1280px !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; margin: 0 auto !important; } /* --------------------------------------------------------------------------- * 16. Animationen * ------------------------------------------------------------------------- */ @keyframes ctv-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes ctv-pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(255,0,110,.3); } 50% { box-shadow: 0 0 40px rgba(255,0,110,.6); } } @keyframes ctv-pulse-glow-text { 0%, 100% { text-shadow: 0 0 20px rgba(255,0,110,.4); } 50% { text-shadow: 0 0 40px rgba(255,0,110,.7); } } @keyframes ctv-grad-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Reveal-on-scroll (für ctv-reveal Klasse) */ .ctv-reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s var(--ctv-ease), transform .8s var(--ctv-ease); } .ctv-reveal.is-visible { opacity: 1; transform: translateY(0); } /* --------------------------------------------------------------------------- * 16b. Installation-Page * ------------------------------------------------------------------------- */ .ctv-install { padding: 6rem 1rem; position: relative; } .ctv-install__featured { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 1100px; margin: 0 auto; } @media (min-width: 768px) { .ctv-install__featured { grid-template-columns: 1fr 1fr; } } .ctv-install-card { position: relative; background: rgba(255,255,255,.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.08); border-radius: var(--ctv-radius); padding: 2rem 1.75rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; transition: transform .4s var(--ctv-ease), box-shadow .4s var(--ctv-ease), border-color .3s var(--ctv-ease); } .ctv-install-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(0,0,0,.4), 0 0 40px rgba(255,0,110,.18); border-color: rgba(255,0,110,.3); } .ctv-install-card--primary { border: 2px solid rgba(255,0,110,.4); box-shadow: 0 0 30px rgba(255,0,110,.18); } .ctv-install-card__head { display: flex; flex-direction: column; align-items: center; gap: .5rem; } .ctv-install-card__badge { align-self: center; background: var(--ctv-grad-2col); color: #fff; padding: .25rem .85rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; letter-spacing: .02em; } .ctv-install-card__title { font-size: 1.3rem; font-weight: 700; margin: 0; color: #fff; line-height: 1.2; } .ctv-install-card__sub { font-size: .85rem; color: rgba(255,255,255,.55); margin: 0; } .ctv-install-card__url { width: 100%; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.08); border-radius: .85rem; padding: 1rem; text-align: center; } .ctv-install-card__url-label { display: block; font-size: .75rem; color: rgba(255,255,255,.5); margin-bottom: .35rem; text-transform: uppercase; letter-spacing: .08em; } .ctv-install-card__url-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.05rem; font-weight: 600; color: var(--ctv-cyan); word-break: break-all; user-select: all; } .ctv-install-card__steps { list-style: none; padding: 0; margin: 0; counter-reset: ctv-step; display: flex; flex-direction: column; align-items: center; gap: .85rem; width: 100%; } .ctv-install-card__steps li { display: flex; align-items: center; justify-content: center; gap: .65rem; font-size: .92rem; line-height: 1.5; color: rgba(255,255,255,.78); counter-increment: ctv-step; text-align: left; max-width: 320px; } .ctv-install-card__steps li::before { content: counter(ctv-step); flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ctv-grad-2col); color: #fff; font-weight: 700; font-size: .8rem; display: flex; align-items: center; justify-content: center; } .ctv-install-card__cta { align-self: center; margin-top: auto; } /* Alternative Apps */ .ctv-install__alts { display: grid; grid-template-columns: 1fr; gap: 1.25rem; max-width: 1100px; margin: 0 auto; } @media (min-width: 640px) { .ctv-install__alts { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .ctv-install__alts { grid-template-columns: repeat(4, 1fr); } } .ctv-install-alt { background: rgba(255,255,255,.04); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.08); border-radius: var(--ctv-radius); padding: 1.5rem 1.25rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem; transition: transform .3s var(--ctv-ease), border-color .3s var(--ctv-ease); } .ctv-install-alt__links { justify-content: center; } .ctv-install-alt:hover { transform: translateY(-4px); border-color: rgba(255,0,110,.25); } .ctv-install-alt__title { font-size: 1.1rem; font-weight: 700; color: #fff; margin: 0; } .ctv-install-alt__desc { font-size: .85rem; color: rgba(255,255,255,.65); margin: 0; line-height: 1.5; } .ctv-install-alt__platforms { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.4); margin: 0; } .ctv-install-alt__links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; } .ctv-install-alt__link { font-size: .78rem; padding: .35rem .75rem; border-radius: 9999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.85) !important; text-decoration: none; transition: background .3s var(--ctv-ease), border-color .3s var(--ctv-ease); } .ctv-install-alt__link:hover { background: rgba(255,0,110,.12); border-color: rgba(255,0,110,.35); color: #fff !important; } .ctv-install__tip { max-width: 1100px; margin: 4rem auto 0; padding: 1.5rem 1.75rem; background: linear-gradient(135deg, rgba(255,0,110,.08), rgba(131,56,236,.08)); border: 1px solid rgba(255,0,110,.2); border-radius: var(--ctv-radius); } .ctv-install__tip-title { font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; color: var(--ctv-magenta); } .ctv-install__tip p { margin: 0; color: rgba(255,255,255,.75); font-size: .92rem; line-height: 1.6; } /* --------------------------------------------------------------------------- * 16c. Reseller-Page * ------------------------------------------------------------------------- */ .ctv-reseller { padding: 6rem 1rem; position: relative; } .ctv-reseller__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 1100px; margin: 0 auto 5rem; } @media (min-width: 768px) { .ctv-reseller__grid { grid-template-columns: repeat(3, 1fr); } } .ctv-reseller-card { position: relative; background: rgba(255,255,255,.04); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.08); border-radius: var(--ctv-radius); padding: 2rem 1.75rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; transition: transform .4s var(--ctv-ease), box-shadow .4s var(--ctv-ease), border-color .3s var(--ctv-ease); } .ctv-reseller-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(0,0,0,.4), 0 0 40px rgba(255,0,110,.15); border-color: rgba(255,0,110,.3); } .ctv-reseller-card--featured { border: 2px solid rgba(255,0,110,.5); box-shadow: 0 0 40px rgba(255,0,110,.25); } @media (min-width: 768px) { .ctv-reseller-card--featured { transform: translateY(-1rem); } .ctv-reseller-card--featured:hover { transform: translateY(-1.75rem); } } .ctv-reseller-card__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--ctv-grad-2col); color: #fff; padding: .25rem 1rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; display: inline-flex; align-items: center; gap: .25rem; animation: ctv-pulse-glow 4s ease-in-out infinite; z-index: 2; } .ctv-reseller-card__badge svg { width: 12px; height: 12px; } .ctv-reseller-card__head { display: flex; flex-direction: column; align-items: center; gap: .25rem; } .ctv-reseller-card__tier { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 700; background: var(--ctv-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ctv-reseller-card__name { font-size: 1.4rem; font-weight: 700; margin: 0; color: #fff; } .ctv-reseller-card__price { margin: 0; line-height: 1; } .ctv-reseller-card__price-num { font-size: 3rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; } .ctv-reseller-card__price-cur { font-size: 1.5rem; color: rgba(255,255,255,.6); margin-left: .25rem; } .ctv-reseller-card__credits { margin: 0; font-size: .95rem; color: var(--ctv-cyan); letter-spacing: .02em; } .ctv-reseller-card__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: .55rem; flex: 1; width: 100%; } .ctv-reseller-card__features li { display: flex; align-items: center; justify-content: flex-start; gap: .5rem; font-size: .9rem; color: rgba(255,255,255,.75); width: fit-content; text-align: left; } .ctv-reseller-card__features li::before { content: ''; flex-shrink: 0; width: 16px; height: 16px; background-color: var(--ctv-cyan); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain; } .ctv-reseller-card__cta { width: 100%; padding: .85rem 1rem; border-radius: 9999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #fff !important; font-weight: 600; font-size: .9rem; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin-top: auto; transition: background .3s var(--ctv-ease), transform .3s var(--ctv-ease); } .ctv-reseller-card__cta:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); color: #fff !important; } .ctv-reseller-card--featured .ctv-reseller-card__cta { background: var(--ctv-grad-2col); border-color: transparent; box-shadow: 0 10px 30px rgba(255,0,110,.25); } /* Credit-System */ .ctv-reseller__credit-info { max-width: 1100px; margin: 0 auto 5rem; text-align: center; padding: 3rem 1.5rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: var(--ctv-radius); } .ctv-reseller__credit-title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; margin: 0 0 .75rem; color: #fff; } .ctv-reseller__credit-sub { color: rgba(255,255,255,.65); margin: 0 0 2.5rem; font-size: 1rem; } .ctv-reseller__credit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: 700px; margin: 0 auto; } @media (min-width: 640px) { .ctv-reseller__credit-grid { grid-template-columns: repeat(4, 1fr); } } .ctv-reseller__credit-tile { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); border-radius: .85rem; padding: 1.25rem .75rem; display: flex; flex-direction: column; align-items: center; gap: .15rem; } .ctv-reseller__credit-amount { font-size: 2.25rem; font-weight: 800; background: var(--ctv-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; } .ctv-reseller__credit-unit { font-size: .8rem; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .08em; } .ctv-reseller__credit-eq { font-size: .8rem; color: var(--ctv-cyan); margin-top: .15rem; } /* Contact-Band */ .ctv-reseller__contact { max-width: 800px; margin: 0 auto; text-align: center; padding: 3rem 1.5rem; background: linear-gradient(135deg, rgba(255,0,110,.1), rgba(131,56,236,.1)); border: 1px solid rgba(255,0,110,.25); border-radius: var(--ctv-radius); } .ctv-reseller__contact-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: #fff; margin: 0 0 .5rem; } .ctv-reseller__contact-sub { color: rgba(255,255,255,.7); margin: 0 0 1.75rem; } /* --------------------------------------------------------------------------- * 16f. Legal — Impressum / AGB / Datenschutz / Bedingungen * Reading-optimierter Glass-Container mit großzügigem Whitespace, * Plus Jakarta Sans, klare Hierarchie. * ------------------------------------------------------------------------- */ .ctv-legal { padding: 7rem 1rem 6rem; position: relative; } .ctv-legal__container { max-width: 820px; margin: 0 auto; background: rgba(255,255,255,.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.08); border-radius: var(--ctv-radius); padding: clamp(2rem, 5vw, 3.5rem); } .ctv-legal__title { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; margin: 0 0 .75rem; color: #fff; letter-spacing: -.02em; } .ctv-legal__title em { font-style: normal; background: var(--ctv-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ctv-legal__meta { font-size: .85rem; color: rgba(255,255,255,.5); margin: 0 0 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.08); } .ctv-legal__container h2 { font-size: 1.4rem; font-weight: 700; color: #fff; margin: 2.5rem 0 1rem; padding-top: 1rem; line-height: 1.3; } .ctv-legal__container h2:first-of-type { margin-top: 0; padding-top: 0; } .ctv-legal__container h2 .ctv-legal__paragraph { display: inline-block; background: var(--ctv-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-right: .35rem; } .ctv-legal__container h3 { font-size: 1.1rem; font-weight: 600; color: #fff; margin: 1.75rem 0 .75rem; } .ctv-legal__container p { color: rgba(255,255,255,.78); font-size: 1rem; line-height: 1.75; margin: 0 0 1.15rem; } .ctv-legal__container p strong { color: #fff; font-weight: 600; } .ctv-legal__container ul, .ctv-legal__container ol { margin: 0 0 1.5rem; padding-left: 1.5rem; color: rgba(255,255,255,.78); line-height: 1.7; } .ctv-legal__container li { margin-bottom: .4rem; } .ctv-legal__container ul li::marker { color: var(--ctv-magenta); } .ctv-legal__container ol li::marker { color: var(--ctv-magenta); font-weight: 700; } .ctv-legal__container a { color: var(--ctv-magenta); text-decoration: underline; text-underline-offset: 3px; transition: color .25s var(--ctv-ease); } .ctv-legal__container a:hover { color: #ff3389; } .ctv-legal__container hr { border: 0; border-top: 1px solid rgba(255,255,255,.08); margin: 2rem 0; } .ctv-legal__container blockquote { border-left: 3px solid var(--ctv-magenta); background: rgba(255,0,110,.05); padding: 1rem 1.25rem; margin: 1.5rem 0; border-radius: 0 .65rem .65rem 0; color: rgba(255,255,255,.85); font-style: italic; } .ctv-legal__address { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); border-radius: .85rem; padding: 1.25rem 1.5rem; margin: 0 0 1.5rem; color: rgba(255,255,255,.85); line-height: 1.65; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9rem; } @media (max-width: 640px) { .ctv-legal { padding: 5rem .75rem 4rem; } .ctv-legal__title { font-size: 1.6rem; } .ctv-legal__container h2 { font-size: 1.2rem; } .ctv-legal__container h3 { font-size: 1rem; } } /* --------------------------------------------------------------------------- * 16d. Kontakt — Glass-Form * ------------------------------------------------------------------------- */ .ctv-kontakt { padding: 6rem 1rem; position: relative; } .ctv-kontakt__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 1100px; margin: 0 auto; } @media (min-width: 900px) { .ctv-kontakt__grid { grid-template-columns: 2fr 3fr; } } .ctv-kontakt__info { display: flex; flex-direction: column; gap: 1.5rem; } .ctv-kontakt__info-box { background: rgba(255,255,255,.04); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.08); border-radius: var(--ctv-radius); padding: 2rem 1.75rem; } .ctv-kontakt__info-title { font-size: 1.15rem; font-weight: 700; color: #fff; margin: 0 0 1.5rem; } .ctv-kontakt__info-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.25rem; } .ctv-kontakt__info-list li { display: flex; align-items: flex-start; gap: 1rem; } .ctv-kontakt__info-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, rgba(255,0,110,.18), rgba(131,56,236,.18)); display: flex; align-items: center; justify-content: center; color: var(--ctv-magenta); } .ctv-kontakt__info-icon svg { width: 20px; height: 20px; } .ctv-kontakt__info-list strong { display: block; color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .15rem; } .ctv-kontakt__info-list a, .ctv-kontakt__info-list span { color: rgba(255,255,255,.85); font-size: .95rem; } .ctv-kontakt__info-list a:hover { color: var(--ctv-magenta); } .ctv-kontakt__social { display: flex; gap: .75rem; } .ctv-kontakt__social-link { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7) !important; transition: transform .3s var(--ctv-ease), background .3s var(--ctv-ease), color .3s var(--ctv-ease), border-color .3s var(--ctv-ease); } .ctv-kontakt__social-link svg { width: 20px; height: 20px; } .ctv-kontakt__social-link:hover { transform: translateY(-3px); background: rgba(255,0,110,.15); border-color: rgba(255,0,110,.4); color: #fff !important; } .ctv-kontakt__form { background: rgba(255,255,255,.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.08); border-radius: var(--ctv-radius); padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; } .ctv-kontakt__field { display: flex; flex-direction: column; gap: .35rem; } .ctv-kontakt__field-row { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .ctv-kontakt__field-row { grid-template-columns: 1fr 1fr; } } .ctv-kontakt__label { font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.85); letter-spacing: .01em; } .ctv-kontakt__optional { color: rgba(255,255,255,.4); font-weight: 400; } .ctv-kontakt__input { width: 100%; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1); border-radius: .65rem; padding: .85rem 1rem; color: #fff; font-size: .95rem; font-family: inherit; transition: border-color .25s var(--ctv-ease), background .25s var(--ctv-ease), box-shadow .25s var(--ctv-ease); } .ctv-kontakt__input::placeholder { color: rgba(255,255,255,.35); } .ctv-kontakt__input:focus { outline: 0; border-color: var(--ctv-magenta); background: rgba(0,0,0,.5); box-shadow: 0 0 0 3px rgba(255,0,110,.18); } .ctv-kontakt__select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px; padding-right: 2.5rem; } .ctv-kontakt__select option { background: #1a1a24; color: #fff; } .ctv-kontakt__textarea { resize: vertical; min-height: 7rem; line-height: 1.5; } .ctv-kontakt__consent { display: block; font-size: .82rem; color: rgba(255,255,255,.65); line-height: 1.5; } .ctv-kontakt__consent label { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; } .ctv-kontakt__consent input[type=checkbox] { flex-shrink: 0; margin-top: .2rem; width: 16px; height: 16px; accent-color: var(--ctv-magenta); } .ctv-kontakt__consent a { color: var(--ctv-magenta); text-decoration: underline; } .ctv-kontakt__submit { align-self: flex-start; } .ctv-kontakt__status { margin: 0; font-size: .9rem; min-height: 1.25rem; } /* --------------------------------------------------------------------------- * 16e. Floating Glass Navigation (Hero-Bereich) * Statt eines klassischen Headers oben — ein schwebendes Glass-Pill in * der Hero-Sektion. Beim Scrollen bleibt es sticky. * ------------------------------------------------------------------------- */ body.checktv-dark-mode .site-header { position: fixed !important; top: 1rem !important; left: 50%; transform: translateX(-50%); width: calc(100% - 2rem); max-width: 1240px; background: rgba(15, 15, 22, 0.55) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 9999px !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(255, 0, 110, 0.12) !important; padding: 0 !important; z-index: 100 !important; transition: top .3s var(--ctv-ease), max-width .3s var(--ctv-ease), padding .3s var(--ctv-ease); } body.checktv-dark-mode .site-header .inside-header, body.checktv-dark-mode .site-header .grid-container { padding: .6rem 1.25rem !important; max-width: 100% !important; } /* WP-Admin-Bar berücksichtigen (eingeloggte User) */ body.admin-bar.checktv-dark-mode .site-header { top: calc(32px + 1rem) !important; } @media (max-width: 782px) { body.admin-bar.checktv-dark-mode .site-header { top: calc(46px + .5rem) !important; } } /* Header beim Scrollen kleiner */ body.checktv-dark-mode .site-header.is-scrolled { max-width: 900px; padding: 0 !important; } /* Damit der Hero nicht vom Header verdeckt wird */ body.checktv-dark-mode .ctv-hero { padding-top: 8rem; } /* Mobile: kein Pill, sondern volle Glass-Bar */ @media (max-width: 768px) { body.checktv-dark-mode .site-header { top: 0 !important; left: 0; transform: none; width: 100%; max-width: none; border-radius: 0 !important; border: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important; } body.admin-bar.checktv-dark-mode .site-header { top: 46px !important; } body.checktv-dark-mode .ctv-hero { padding-top: 6rem; } } /* --------------------------------------------------------------------------- * 17. Mobile-Optimierung * Breakpoints: * - Tablet (≤ 1024px) — nicht so kritisch, GP regelt das halbwegs * - Mobile (≤ 768px) — Haupt-Mobile-Block * - Small mobile (≤ 480px) — kleine Phones (iPhone SE, ältere Androids) * ------------------------------------------------------------------------- */ /* Tablet & kleinere Desktops */ @media (max-width: 1024px) { body.checktv-dark-mode::before { width: 500px; height: 500px; } body.checktv-dark-mode::after { width: 400px; height: 400px; } .ctv-orb-3 { width: 300px; height: 300px; } } /* MOBILE — alles ≤ 768px */ @media (max-width: 768px) { /* ========== Globaler Tweak ========== */ body.checktv-dark-mode { font-size: 15px; } /* Section-Padding reduzieren */ .ctv-section, .ctv-hero, .ctv-pricing, .ctv-savings, .ctv-how, .ctv-devices, .ctv-faq-section, .ctv-cta { padding-left: 1rem !important; padding-right: 1rem !important; padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; } .ctv-section__head { margin-bottom: 2.5rem; } .ctv-section__title { font-size: 1.75rem; line-height: 1.15; } .ctv-section__sub { font-size: .95rem; } /* ========== Header / Navigation ========== */ /* GP-Burger: per default zeigt GP ein Hamburger-Menu unter 768px. Wir styling nur Logo + Login-Button-Anpassung. */ body.checktv-dark-mode .site-header { padding: .5rem 0 !important; } body.checktv-dark-mode .site-title a { font-size: 1.15rem; } /* Login-Button im Header soll auch auf Mobile bleiben, aber kleiner */ .ctv-btn-login { padding: .45rem .9rem; font-size: .8rem; } .ctv-btn-login svg { width: 12px; height: 12px; } /* Login-Text auf sehr kleinen Phones ausblenden, nur Icon zeigen */ @media (max-width: 380px) { .ctv-btn-login span { display: none; } .ctv-btn-login { padding: .55rem; } } /* GP Mobile-Menu-Button Styling */ body.checktv-dark-mode .menu-toggle, body.checktv-dark-mode .mobile-menu-control-wrapper { background: transparent !important; color: #fff !important; } body.checktv-dark-mode .menu-toggle .gp-icon { color: #fff; } body.checktv-dark-mode .main-navigation.toggled .main-nav, body.checktv-dark-mode .main-navigation .main-nav ul ul { background: rgba(10, 10, 15, 0.96) !important; backdrop-filter: blur(20px); } body.checktv-dark-mode .main-navigation.toggled .main-nav ul li a { padding: 1rem 1.5rem !important; border-bottom: 1px solid rgba(255,255,255,.06); } /* ========== Hero ========== */ .ctv-hero { min-height: auto; padding-top: 4rem !important; padding-bottom: 3rem !important; } .ctv-hero__title { font-size: 2.1rem; line-height: 1.1; margin-bottom: 1rem; } /* Manuelle
in der Headline brechen sonst doppelt */ .ctv-hero__title br { display: none; } .ctv-hero__sub { font-size: .95rem; margin-bottom: 2rem; padding: 0 .5rem; } .ctv-hero__sub br { display: none; } .ctv-hero__features { grid-template-columns: 1fr; gap: .85rem; margin-bottom: 2rem; } .ctv-hero-feature { padding: 1rem; } .ctv-hero-feature__icon { width: 44px; height: 44px; border-radius: 12px; margin-bottom: .5rem; } .ctv-hero-feature__icon svg { width: 22px; height: 22px; } .ctv-hero-feature__title { font-size: .95rem; } .ctv-hero-feature__sub { font-size: .8rem; } .ctv-hero__cta { margin-bottom: 1.5rem; } .ctv-btn--lg { padding: .9rem 1.75rem; font-size: 1rem; } .ctv-hero__trust { font-size: .75rem; padding: 0 .5rem; } /* ========== Pricing ========== */ .ctv-pricing__grid { grid-template-columns: 1fr !important; gap: 1rem; } /* Featured-Card auf Mobile in normaler Reihenfolge (kein -mt offset) */ .ctv-pricing-card--featured { transform: none !important; margin-top: 1.5rem; } .ctv-pricing-card--featured:hover { transform: translateY(-6px) !important; } .ctv-pricing-card { padding: 1.5rem 1.25rem; } .ctv-pricing-card__price { font-size: 2.5rem; } /* ========== Sparrechner ========== */ .ctv-savings__grid { grid-template-columns: 1fr !important; gap: 1.25rem; } .ctv-savings__panel { padding: 1.25rem; } .ctv-savings__services { grid-template-columns: 1fr !important; } .ctv-service { padding: .85rem; } .ctv-service__label { font-size: .85rem; } .ctv-service__price { font-size: .85rem; } /* Sticky aufheben — bremst auf Mobile-Scroll */ .ctv-savings__result { position: static !important; top: auto !important; } .ctv-savings__row-value { font-size: 1.65rem; } .ctv-savings__highlight .ctv-savings__row-value { font-size: 1.85rem; } /* ========== How-it-works ========== */ .ctv-how__steps { grid-template-columns: 1fr !important; gap: 1.25rem; } .ctv-how__line { display: none !important; } .ctv-how__step { padding: 1.5rem 1.25rem; } .ctv-how__step-num { font-size: 2.25rem; } .ctv-how__step-icon { width: 44px; height: 44px; border-radius: 12px; } .ctv-how__step-icon svg { width: 22px; height: 22px; } .ctv-how__step-title { font-size: 1rem; letter-spacing: .03em; } .ctv-how__step-text { font-size: .85rem; } /* ========== Devices ========== */ .ctv-devices__grid { grid-template-columns: 1fr !important; gap: 2rem; } .ctv-devices__cards { grid-template-columns: 1fr !important; } .ctv-device-card { padding: 1rem; } .ctv-device-card__icon { width: 40px; height: 40px; border-radius: 8px; } .ctv-device-card__icon svg { width: 20px; height: 20px; } .ctv-device-card__title { font-size: .9rem; } .ctv-device-card__text { font-size: .75rem; } .ctv-devices__features { padding: 1.25rem; } .ctv-devices__features-list { grid-template-columns: 1fr !important; } .ctv-devices__feature-item { font-size: .8rem; } .ctv-devices__badge { padding: .4rem .8rem; font-size: .8rem; } /* ========== FAQ ========== */ .ctv-faq-section__grid { grid-template-columns: 1fr !important; gap: .75rem; } .ctv-faq-section__title { font-size: 1.85rem; } .ctv-faq summary { padding: 1rem 1.1rem; font-size: .9rem; } .ctv-faq summary::after { width: 28px; height: 28px; background-size: 12px; } .ctv-faq p { padding: 0 1.1rem 1.1rem; font-size: .85rem; } /* ========== CTA ========== */ .ctv-cta__title { font-size: 2rem; } .ctv-cta__sub { font-size: .95rem; padding: 0 .5rem; } .ctv-cta__btn { padding: .85rem 1.5rem; font-size: .95rem; } .ctv-cta__orb-1, .ctv-cta__orb-2 { width: 150px !important; height: 150px !important; } /* ========== Buttons ========== */ .ctv-btn { padding: .85rem 1.5rem; font-size: .95rem; } /* ========== Pricing-Bottom ========== */ .ctv-pricing__bottom { margin-top: 2rem; } /* ========== Background-Orbs auf Mobile reduzieren ========== */ body.checktv-dark-mode::before { width: 350px; height: 350px; opacity: .15; } body.checktv-dark-mode::after { width: 280px; height: 280px; opacity: .12; } .ctv-orb-3 { width: 220px; height: 220px; opacity: .12; } /* Header & Footer mobile padding */ body.home .site-header .grid-container, body.home .site-header .inside-header { padding-left: 1rem !important; padding-right: 1rem !important; } body.home .site-footer .grid-container, body.home .site-footer .inside-site-info { padding-left: 1rem !important; padding-right: 1rem !important; } } /* SMALL MOBILE — iPhone SE & ältere Androids ≤ 480px */ @media (max-width: 480px) { .ctv-hero__title { font-size: 1.85rem; } .ctv-section__title { font-size: 1.55rem; } .ctv-faq-section__title { font-size: 1.65rem; } .ctv-cta__title { font-size: 1.75rem; } .ctv-pricing-card__price { font-size: 2.2rem; } .ctv-savings__row-value { font-size: 1.45rem; } .ctv-savings__row-value-suffix { font-size: .85rem; } /* Section-Padding noch kleiner */ .ctv-section, .ctv-hero, .ctv-pricing, .ctv-savings, .ctv-how, .ctv-devices, .ctv-faq-section, .ctv-cta { padding-left: .75rem !important; padding-right: .75rem !important; padding-top: 3rem !important; padding-bottom: 3rem !important; } } /* --------------------------------------------------------------------------- * 18. Reduced-Motion (a11y) * ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }