/* ============================================================ Globale Styles – Webinar Landingpage Baut auf tokens.css auf (dort liegen Farben & Schriften). ============================================================ */ /* Schrift wird performanter direkt im per geladen, nicht mehr via @import (vermeidet eine zusätzliche, blockierende Anfrage). */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Medien nie über ihren Container hinaus */ img, video { max-width: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 18px; line-height: var(--body-line); color: var(--color-text); background: var(--color-cream); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-spacing); line-height: var(--head-line); color: var(--color-dark); margin: 0 0 0.5em; } h1 { font-size: clamp(2rem, 5vw, 3.25rem); } h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); } h3 { font-size: clamp(1.2rem, 3vw, 1.5rem); } p { margin: 0 0 1em; } a { color: var(--color-accent); } /* ---- Layout-Hilfen ---- */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } .section { padding: 64px 0; } .section--dark { background: var(--color-dark); color: var(--color-cream); } .section--dark h1, .section--dark h2, .section--dark h3 { color: var(--color-white); } /* ---- Buttons ---- */ .btn { display: inline-block; background: var(--color-accent); color: var(--color-white); font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; text-decoration: none; padding: 16px 32px; border: 0; border-radius: var(--radius); cursor: pointer; box-shadow: var(--shadow-btn); transition: background .15s ease, transform .15s ease; } .btn:hover { background: var(--color-accent-dark); transform: translateY(-1px); } .btn--block { display: block; width: 100%; text-align: center; } /* ---- Karten / Formular-Container ---- */ .card { background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 32px; } /* ---- Formularfelder ---- */ .field { margin-bottom: 16px; text-align: left; } .field label { display: block; font-weight: 500; margin-bottom: 6px; color: var(--color-dark); } .field input { width: 100%; padding: 14px 16px; font-size: 1rem; font-family: var(--font-body); border: 1.5px solid #ddd; border-radius: var(--radius); background: #fff; } .field input:focus { outline: none; border-color: var(--color-accent); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; color: var(--color-white); background: var(--color-dark); overflow: hidden; } .hero__bg { position: absolute; inset: 0; background-image: url('../img/instrumente.webp'); background-size: cover; background-position: center; } /* Warmer dunkler Schleier – Bild abgedunkelt, weiße Schrift gut lesbar */ .hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(37,20,23,0.74) 0%, rgba(37,20,23,0.55) 45%, rgba(37,20,23,0.72) 100%); } .hero__inner { position: relative; max-width: 1180px; margin: 0 auto; text-align: center; padding: 84px 0 92px; } .hero__kicker { display: inline-block; background: rgba(220,102,59,0.22); color: var(--color-sand); border: 1px solid rgba(218,194,157,0.40); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.6px; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; margin-bottom: 22px; } /* Pre-Headline – steht über der großen Headline */ .hero__pre { font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 500; color: var(--color-sand); line-height: 1.4; margin: 0 auto 16px; max-width: 30em; } .hero h1 { color: var(--color-white); font-size: clamp(1.9rem, 3.2vw, 2.85rem); margin: 0 auto 22px; max-width: 26em; } .hero__lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: rgba(255,255,255,0.92); max-width: 40em; margin: 0 auto 30px; } .hero__cta { margin: 0 auto; } /* dezenter dunkler Schatten hält die weiße Schrift über dem Foto klar lesbar */ .hero h1, .hero__pre, .hero__lead { text-shadow: 0 2px 12px rgba(0,0,0,0.38); } /* Formular-Karte im Hero */ .hero__form-card { padding: 30px 28px; } .hero__form-card h3 { text-align: center; font-size: 1.35rem; margin-bottom: 6px; } .hero__form-sub { text-align: center; color: var(--color-text); font-size: 0.95rem; margin-bottom: 22px; } .hero__form-foot { text-align: center; font-size: 0.8rem; color: #888; margin: 14px 0 0; } /* ---- Responsiv ---- */ @media (max-width: 768px) { /* Hero füllt den sichtbaren Bildschirm, Inhalt mittig → Button sofort sichtbar */ .hero { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; } .hero__inner { width: 100%; padding: 44px 0; } .hero__kicker { font-size: 0.74rem; padding: 8px 16px; margin-bottom: 28px; } .hero__pre { font-size: 1.05rem; margin-bottom: 26px; } .hero h1 { font-size: 1.6rem; line-height: 1.3; margin-bottom: 28px; max-width: 100%; } .hero__lead { font-size: 1rem; line-height: 1.55; margin-bottom: 36px; } } @media (max-width: 380px) { .hero h1 { font-size: 1.46rem; } .hero__pre { font-size: 0.98rem; } .hero__lead { font-size: 0.96rem; } } /* ============================================================ BLOCK 2 – MEINE GESCHICHTE ============================================================ */ .story { background: var(--color-cream); padding: 96px 0; overflow: hidden; } .story__inner { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 64px; align-items: center; } /* --- Bild mit versetztem Akzent-Rahmen --- */ .story__media { position: relative; } .story__media img { position: relative; z-index: 2; width: 100%; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow); } /* Terrakotta-Block, der hinter dem Foto hervorschaut */ .story__media::before { content: ''; position: absolute; z-index: 1; right: -22px; bottom: -22px; width: 62%; height: 78%; background: var(--color-accent); border-radius: var(--radius-lg); } /* Sandbeige-Linien oben links als dezente Deko */ .story__media::after { content: ''; position: absolute; z-index: 1; left: -22px; top: -22px; width: 70px; height: 70px; background-image: radial-gradient(var(--color-sand) 2px, transparent 2px); background-size: 14px 14px; opacity: 0.8; } /* DACH-Badge, schwebt auf dem Bild */ .story__badge { position: absolute; z-index: 3; right: -12px; top: 24px; background: var(--color-white); color: var(--color-dark); font-weight: 600; font-size: 0.9rem; padding: 10px 16px; border-radius: 999px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 8px; } /* --- Textspalte --- */ .story__text { position: relative; } .story__eyebrow { display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: 1.2px; font-size: 0.82rem; font-weight: 600; color: var(--color-accent); margin-bottom: 18px; } .story__eyebrow::before { content: ''; width: 34px; height: 2px; background: var(--color-accent); } .story__text h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 22px; } /* großes Anführungszeichen als Deko hinter der Überschrift */ .story__text h2::before { content: '\201C'; position: absolute; top: -46px; left: -8px; font-size: 8rem; line-height: 1; color: var(--color-sand); opacity: 0.5; z-index: -1; font-family: Georgia, 'Times New Roman', serif; } .story__text p { font-size: 1.08rem; } /* hervorgehobener Vertrauens-Satz */ .story__callout { background: var(--color-white); border-left: 4px solid var(--color-accent); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 24px; margin: 26px 0; font-size: 1.12rem; font-weight: 500; color: var(--color-dark); } /* Signatur */ .story__sign { display: flex; align-items: center; gap: 14px; margin-top: 30px; } .story__sign img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow); } .story__sign-name { font-weight: 700; color: var(--color-dark); line-height: 1.2; } .story__sign-role { font-size: 0.9rem; color: var(--color-text); } @media (max-width: 860px) { .story { padding: 64px 0; } .story__inner { grid-template-columns: 1fr; gap: 56px; } .story__media { max-width: 420px; margin: 0 auto; } .story__text h2::before { font-size: 6rem; top: -34px; } } /* ============================================================ BLOCK 3 – WAS DICH ERWARTET (Benefit-Karten) ============================================================ */ .benefits { background: var(--color-white); padding: 96px 0; } .benefits__title { text-align: center; max-width: 16em; margin: 0 auto 56px; font-size: clamp(1.8rem, 3.4vw, 2.6rem); } .benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .benefit-card { background: var(--color-cream); border-radius: var(--radius-lg); padding: 38px 34px; transition: transform .15s ease, box-shadow .15s ease; } .benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .benefit-card__icon { width: 58px; height: 58px; border-radius: 15px; background: var(--color-white); box-shadow: 0 4px 14px rgba(37,20,23,0.08); display: flex; align-items: center; justify-content: center; margin-bottom: 28px; } .benefit-card__icon svg { width: 27px; height: 27px; color: var(--color-dark); } .benefit-card h3 { font-size: 1.32rem; margin-bottom: 14px; } .benefit-card p { margin: 0; color: var(--color-text); font-size: 1rem; } @media (max-width: 880px) { .benefits { padding: 64px 0; } .benefits__grid { grid-template-columns: 1fr; gap: 20px; max-width: 480px; margin: 0 auto; } .benefits__title { margin-bottom: 40px; } } /* ============================================================ BLOCK 4 – DIESES TRAINING IST FÜR DICH, WENN ... ============================================================ */ .audience { position: relative; background: var(--color-cream); padding: 88px 0 96px; overflow: hidden; } .audience__bg { position: absolute; inset: 0; background: url('../img/fluegelhorn.webp') center/cover; } /* Heller, warmer Schleier – das Foto schimmert nur sanft golden durch */ .audience__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(239,236,234,0.90), rgba(239,236,234,0.93)); } .audience .container { position: relative; z-index: 2; } .audience__panel { background: var(--color-white); border: 1px solid rgba(37,20,23,0.06); box-shadow: var(--shadow); border-radius: 24px; padding: 56px clamp(24px, 4vw, 60px); } .audience__panel h2 { color: var(--color-dark); font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin-bottom: 42px; } .audience__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } .audience-card { background: var(--color-cream); border-radius: 18px; padding: 34px 32px; } .audience-card__icon { width: 56px; height: 56px; border-radius: 15px; background: var(--color-white); box-shadow: 0 4px 14px rgba(37,20,23,0.08); display: flex; align-items: center; justify-content: center; margin-bottom: 26px; } .audience-card__icon svg { width: 27px; height: 27px; color: var(--color-dark); } .audience-card h3 { color: var(--color-dark); font-size: 1.32rem; margin-bottom: 12px; } .audience-card p { color: var(--color-text); margin: 0; font-size: 1rem; } /* goldener CTA unter dem Panel */ .audience__cta { text-align: center; margin-top: 40px; } .btn--gold { background: linear-gradient(180deg, #f8c14a 0%, #ef911d 100%); color: var(--color-white); font-size: 1.15rem; padding: 18px 40px; box-shadow: 0 10px 26px rgba(239,145,29,0.40); text-shadow: 0 1px 1px rgba(120,70,0,0.35); } .btn--gold:hover { background: linear-gradient(180deg, #f9c85b 0%, #f59b29 100%); transform: translateY(-2px); } @media (max-width: 760px) { .audience { padding: 60px 0 70px; } .audience__panel { padding: 36px 22px; } .audience__panel h2 { margin-bottom: 28px; } .audience__grid { grid-template-columns: 1fr; gap: 18px; } .btn--gold { font-size: 1.02rem; padding: 16px 26px; width: 100%; } } /* ============================================================ BLOCK 5 – ÜBER DEN GASTGEBER ============================================================ */ .host { background: var(--color-cream); padding: 80px 0; } .host__card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr 1fr; } .host__text { padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 60px); text-align: center; display: flex; flex-direction: column; justify-content: center; } .host__text h2 { margin-bottom: 26px; } .host__text p { color: var(--color-text); } .host__text .btn { margin: 22px auto 0; } .host__media { position: relative; min-height: 520px; } .host__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* dezenter heller Verlauf unten für lesbaren Namen */ .host__media::after { content: ''; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(to top, rgba(232,224,217,0.9), rgba(232,224,217,0)); } .host__name { position: absolute; left: 34px; bottom: 28px; z-index: 2; } .host__name strong { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.8rem); letter-spacing: var(--head-spacing); color: var(--color-dark); } .host__name span { color: #4a382f; font-size: 1rem; } @media (max-width: 860px) { .host { padding: 56px 0; } .host__card { grid-template-columns: 1fr; } .host__media { min-height: 380px; order: -1; } } /* ============================================================ BLOCK 6 – STIMMEN ZUFRIEDENER KUNDEN (Testimonials) ============================================================ */ .voices { background: var(--color-white); padding: 90px 0; } .voices__title { text-align: center; margin-bottom: 60px; font-size: clamp(1.9rem, 3.6vw, 2.8rem); } /* Swipebares Karussell */ .voices__carousel { position: relative; } .voices__track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 6px 2px 20px; scrollbar-width: thin; scrollbar-color: var(--color-sand) transparent; } .voices__track::-webkit-scrollbar { height: 8px; } .voices__track::-webkit-scrollbar-thumb { background: var(--color-sand); border-radius: 4px; } .voices__track::-webkit-scrollbar-track { background: transparent; } .voice { flex: 0 0 360px; max-width: 360px; scroll-snap-align: start; background: var(--color-cream); border-radius: var(--radius-lg); padding: 32px 28px; } /* Pfeil-Buttons */ .voices__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: var(--color-white); border: 1px solid #eee; box-shadow: var(--shadow); color: var(--color-dark); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 5; transition: background .15s ease, transform .15s ease; } .voices__arrow:hover { background: var(--color-cream); transform: translateY(-50%) scale(1.06); } .voices__arrow svg { width: 22px; height: 22px; } .voices__arrow--prev { left: -14px; } .voices__arrow--next { right: -14px; } .voice__stars { color: #f5a623; font-size: 1.15rem; letter-spacing: 3px; margin-bottom: 18px; } .voice__title { font-family: var(--font-head); font-weight: 700; color: var(--color-dark); font-size: 1.12rem; margin-bottom: 10px; } .voice__text { color: var(--color-text); font-size: 1rem; margin-bottom: 24px; } .voice__text p { margin: 0 0 14px; } .voice__person { display: flex; align-items: center; gap: 14px; } .voice__person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow); } /* Ersatz-Avatar (Initiale), falls kein Foto vorhanden */ .voice__avatar { width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--color-sand); color: var(--color-dark); font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; box-shadow: var(--shadow); } .voice__name { font-weight: 700; color: var(--color-dark); line-height: 1.2; } .voice__loc { font-style: italic; color: #8c8580; font-size: 0.92rem; } @media (max-width: 860px) { .voices { padding: 64px 0; } .voices__title { margin-bottom: 40px; } } @media (max-width: 700px) { .voices__arrow { display: none; } /* am Handy reicht Wischen */ .voice { flex-basis: 82%; max-width: 82%; } /* eine Karte fast voll sichtbar, nächste lugt hervor */ } /* ============================================================ BLOCK 7 – HÖRPROBEN UNSERER TEILNEHMER ============================================================ */ .samples { background: var(--color-sand); padding: 80px 0; } .samples__title { text-align: center; margin-bottom: 48px; font-size: clamp(1.7rem, 3.2vw, 2.4rem); color: var(--color-dark); } .samples__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; } .sample-card { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #b89968 center/cover no-repeat; box-shadow: var(--shadow); cursor: pointer; display: block; } .sample-card::after { /* leichtes Abdunkeln für Lesbarkeit */ content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(0,0,0,0.18), rgba(0,0,0,0.0) 55%); } /* YouTube-Vorschaubild (lazy geladen) */ .sample-card__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* eingebetteter Player (erscheint erst nach Klick) */ .sample-card iframe { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; border: 0; } .sample-card.is-playing { cursor: default; } /* roter „Stempel" oben links */ .sample-card__stamp { position: absolute; top: 18px; left: -6px; z-index: 3; transform: rotate(-9deg); color: #c4302b; font-weight: 800; font-size: 0.95rem; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; padding: 7px 14px; border: 3px solid #c4302b; border-radius: 6px; background: rgba(255,255,255,0.18); box-shadow: inset 0 0 0 2px rgba(196,48,43,0.55); text-shadow: 0 1px 1px rgba(255,255,255,0.5); } /* Play-Button mittig */ .sample-card__play { position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(218,194,157,0.85); display: flex; align-items: center; justify-content: center; transition: transform .15s ease, background .15s ease; } .sample-card:hover .sample-card__play { transform: translate(-50%,-50%) scale(1.08); background: rgba(255,255,255,0.92); } .sample-card__play::before { content: ''; width: 0; height: 0; margin-left: 4px; border-left: 18px solid var(--color-dark); border-top: 11px solid transparent; border-bottom: 11px solid transparent; } /* rotes Label unten links mit Titel */ .sample-card__label { position: absolute; z-index: 3; left: 0; bottom: 22px; background: #e2231a; color: #fff; padding: 12px 22px 12px 18px; border-radius: 0 10px 10px 0; max-width: 70%; } .sample-card__label strong { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.15; text-shadow: 0 1px 2px rgba(0,0,0,0.25); } .sample-card__label span { font-size: 0.92rem; opacity: 0.95; } .samples__cta { text-align: center; margin-top: 44px; } @media (max-width: 760px) { .samples { padding: 56px 0; } .samples__grid { grid-template-columns: 1fr; gap: 24px; } .sample-card { aspect-ratio: 16 / 9; } } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--color-cream); padding: 58px 0 70px; text-align: center; } .site-footer__brand { font-family: var(--font-head); font-weight: 700; color: var(--color-dark); font-size: 1.08rem; margin-bottom: 18px; } .site-footer__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 36px; margin-bottom: 36px; } .site-footer__links a { color: var(--color-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; } .site-footer__links a:hover { color: var(--color-accent); } .site-footer__divider { border: 0; border-top: 1px solid rgba(37,20,23,0.12); max-width: var(--maxw); margin: 0 auto 34px; } .site-footer__disclaimer { color: #9a938e; font-size: 0.85rem; line-height: 1.7; max-width: 1180px; margin: 0 auto; } @media (max-width: 600px) { .site-footer { padding: 44px 0 54px; } .site-footer__links { gap: 22px; } .site-footer__disclaimer { font-size: 0.8rem; } } /* ============================================================ GLOBALER RESPONSIVE-FEINSCHLIFF ============================================================ */ @media (max-width: 600px) { body { font-size: 16px; } .section { padding: 48px 0; } .container { padding: 0 18px; } .card { padding: 24px 20px; } } /* ============================================================ ANMELDE-POPUP (Modal) ============================================================ */ .modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; } .modal.is-open { display: flex; } .modal__backdrop { position: absolute; inset: 0; background: rgba(37,20,23,0.62); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 440px; margin: 20px; background: var(--color-white); border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0,0,0,0.35); padding: 40px 32px 32px; animation: modalIn .2s ease; } @keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } } .modal__close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 0; background: transparent; font-size: 1.6rem; line-height: 1; color: #9a938e; cursor: pointer; border-radius: 50%; } .modal__close:hover { background: var(--color-cream); color: var(--color-dark); } .modal__dialog h3 { text-align: center; font-size: 1.5rem; margin-bottom: 6px; } .modal__sub { text-align: center; color: var(--color-text); font-size: 0.95rem; margin-bottom: 24px; } .modal__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.82rem; color: var(--color-text); margin: 4px 0 18px; line-height: 1.45; } .modal__consent input { margin-top: 3px; flex: 0 0 auto; } .modal__foot { text-align: center; font-size: 0.8rem; color: #9a938e; margin: 14px 0 0; } /* Honeypot gegen Spam-Bots – für Menschen unsichtbar */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Erfolgs-/Fehlermeldung */ .modal__success { text-align: center; padding: 8px 4px; } .modal__success-icon { font-size: 3rem; line-height: 1; margin-bottom: 8px; } .modal__success p { color: var(--color-text); margin: 0; } .modal__error { background: #fce8e6; color: #b3261e; border-radius: var(--radius); padding: 10px 14px; font-size: 0.88rem; margin-bottom: 14px; display: none; } /* ============================================================ VIDEOSEITE (gesperrter Player) ============================================================ */ .vpage { background: var(--color-cream); min-height: 100vh; color: var(--color-text); padding: 40px 0 80px; } .vpage__head { text-align: center; margin-bottom: 26px; } .vpage__head h1 { color: var(--color-dark); font-size: clamp(1.4rem, 3vw, 2rem); margin: 0; } .vplayer { position: relative; max-width: 960px; margin: 0 auto; background: #000; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16 / 9; } .vplayer video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; } /* Start-Overlay (nötig für Ton-Wiedergabe = Nutzergeste) */ .vplayer__start { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); cursor: pointer; } .vplayer__start .btn { font-size: 1.15rem; } /* Lautstärke-Regler (einziges Bedienelement) */ .vplayer__vol { position: absolute; z-index: 4; bottom: 14px; left: 14px; display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.5); border-radius: 999px; padding: 8px 14px; opacity: 0; transition: opacity .2s ease; } .vplayer:hover .vplayer__vol, .vplayer.is-playing .vplayer__vol { opacity: 1; } .vplayer__vol button { background: none; border: 0; color: #fff; cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0; } .vplayer__vol input[type="range"] { width: 92px; accent-color: var(--color-accent); cursor: pointer; } /* Wiedergabe-Geschwindigkeit – versteckt hinter Zahnrad ⚙ */ .vplayer__speed { position: absolute; z-index: 4; bottom: 14px; right: 14px; opacity: 0; transition: opacity .2s ease; } .vplayer:hover .vplayer__speed, .vplayer.is-playing .vplayer__speed { opacity: 1; } .vplayer__speed-toggle { background: rgba(0,0,0,0.5); border: 0; color: #fff; cursor: pointer; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; transition: transform .2s ease; } .vplayer__speed-toggle:hover { transform: rotate(45deg); } .vplayer__speed-menu { position: absolute; bottom: 46px; right: 0; background: rgba(0,0,0,0.85); border-radius: 10px; padding: 8px; min-width: 130px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); } .vplayer__speed-menu[hidden] { display: none; } .vplayer__speed-title { color: #aaa; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.6px; padding: 4px 10px 6px; } .vplayer__speed-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; color: #fff; padding: 9px 10px; border-radius: 6px; cursor: pointer; font-size: 0.92rem; font-family: var(--font-body); } .vplayer__speed-menu button:hover { background: rgba(255,255,255,0.12); } .vplayer__speed-menu button.is-active { color: var(--color-accent); font-weight: 700; } /* Hinweis, wenn noch kein Video hinterlegt ist */ .vplayer__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: #cbb; padding: 24px; font-size: 0.95rem; } /* Zeitgesteuerter Calendly-Aufruf */ .vcta { max-width: 760px; margin: 36px auto 0; text-align: center; background: var(--color-white); border: 1px solid rgba(37,20,23,0.08); box-shadow: var(--shadow); border-radius: 16px; padding: 34px 28px; animation: modalIn .35s ease; } .vcta h2 { color: var(--color-dark); font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 18px; } .vcta[hidden] { display: none; } @media (max-width: 600px) { .vpage { padding: 24px 0 56px; } .vcta { padding: 26px 20px; } }