/* ========================================================================= igroupTV.de - _style.css (Design-System + globale Shell) CI verbindlich (design-direction.md): Rot #C8141E, Ink #121212, Hybrid-Look. Fonts: proxima-nova (CI) via Adobe Typekit-CDN, Roboto self-hosted als Fallback (DSGVO-Hinweis siehe nav.mjs). ========================================================================= */ /* ---- Fonts ---- */ /* Primaer: proxima-nova (i-group CI) via Adobe Fonts/Typekit, geladen im (nav.mjs). Roboto self-hosted als DSGVO-freundlicher Fallback (im Font-Stack nach Helvetica). */ @font-face{font-family:'Roboto';src:url('../fonts/roboto-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Roboto';src:url('../fonts/roboto-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Roboto';src:url('../fonts/roboto-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} /* ---- Tokens ---- */ :root{ --red:#C8141E; --red-hov:#A8101A; --red-act:#8E0E16; --ink:#121212; --ink-soft:#1c1c1f; --ink-line:rgba(255,255,255,.10); --white:#FFFFFF; --paper:#F8F9FA; --hairline:#DEE2E6; --muted:#6C757D; --green:#198754; --text:#1A1A1A; --on-dark:#FFFFFF; --on-dark-mut:rgba(255,255,255,.66); --font-display:'proxima-nova',Helvetica,Roboto,Arial,sans-serif; --font-body:'proxima-nova',Helvetica,Roboto,Arial,sans-serif; --maxw:1400px; --pad:clamp(20px,5vw,64px); --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px; --sh-sm:0 1px 2px rgba(18,18,18,.06),0 2px 8px rgba(18,18,18,.05); --sh-md:0 8px 24px rgba(18,18,18,.08),0 2px 6px rgba(18,18,18,.05); --sh-lg:0 30px 70px rgba(18,18,18,.16); --ease:cubic-bezier(.2,.7,.2,1); --hdr-h:72px; } /* ---- Reset / Base ---- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} [hidden]{display:none !important} body{font-family:var(--font-body);color:var(--text);background:var(--white); font-size:17px;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} img{max-width:100%;display:block;height:auto} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} ::selection{background:var(--red);color:#fff} :focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px} /* ---- Typography ---- */ h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:700;line-height:1.06;letter-spacing:-.02em;color:var(--ink)} h1{font-size:clamp(2.4rem,1.4rem + 3.6vw,4.4rem)} h2{font-size:clamp(1.9rem,1.2rem + 2.4vw,3rem);letter-spacing:-.025em} h3{font-size:clamp(1.2rem,1rem + .8vw,1.6rem);letter-spacing:-.01em} .eyebrow{font-family:var(--font-display);font-weight:500;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);display:inline-flex;align-items:center;gap:.5rem} .lead{font-size:clamp(1.05rem,1rem + .5vw,1.32rem);color:var(--muted);line-height:1.6;max-width:54ch} strong{font-weight:700} /* ---- Layout ---- */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} .sec{padding:clamp(44px,5.5vw,84px) 0} .sec--paper{background:var(--paper)} .sec--ink{background:var(--ink);color:var(--on-dark)} .sec--ink h1,.sec--ink h2,.sec--ink h3{color:#fff} .sec-head{max-width:62ch} .sec-head .lead{margin-top:1rem} .center{text-align:center;margin-inline:auto} /* ---- Buttons ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem; font-family:var(--font-body);font-weight:500;font-size:1rem;line-height:1; padding:.95rem 1.5rem;border-radius:var(--r-pill);transition:transform .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease),color .18s var(--ease);white-space:nowrap} .btn-sm{padding:.7rem 1.15rem;font-size:.92rem} .btn-primary{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(200,20,30,.28)} .btn-primary:hover{background:var(--red-hov);transform:translateY(-2px);box-shadow:0 10px 26px rgba(200,20,30,.36)} .btn-primary:active{background:var(--red-act);transform:translateY(0)} .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--hairline)} .btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)} .btn-ghost-light{background:rgba(255,255,255,.06);color:#fff;border:1.5px solid rgba(255,255,255,.28)} .btn-ghost-light:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5)} .btn-block{width:100%} /* ---- Skip-Link (Tastatur-A11y) ---- */ .skip-link{position:fixed;top:-120px;left:1rem;z-index:100;background:var(--red);color:#fff; padding:.7rem 1.1rem;border-radius:var(--r-sm);font-family:var(--font-display);font-weight:500; box-shadow:var(--sh-md);transition:top .2s var(--ease)} .skip-link:focus{top:1rem} #main:focus{outline:none} /* ---- Progress bar ---- */ #progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%; background:var(--red);z-index:60;transition:transform .1s linear} /* ---- Header (zweistufig: transparent über Hero -> weiß beim Scrollen) ---- */ .site-header{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--hdr-h);display:flex;align-items:center; background:#fff;border-bottom:1px solid var(--hairline);transition:background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)} .site-header .nav-row{display:flex;align-items:center;gap:1.5rem;width:100%} .brand{display:flex;align-items:center;flex:0 0 auto} .brand .logo{height:34px;width:auto} .logo-light{display:none} .logo-dark{display:block} .mainnav{display:flex;align-items:center;gap:.35rem;margin-left:1rem} .navlink{font-family:var(--font-display);font-weight:500;font-size:.95rem;color:var(--ink);padding:.5rem .8rem;border-radius:var(--r-sm);transition:color .15s,background .15s;position:relative} .navlink:hover{color:var(--red)} .navlink.active{color:var(--red)} .nav-actions{margin-left:auto;display:flex;align-items:center;gap:1rem} .nav-tel{font-weight:500;font-size:.92rem;color:var(--ink);display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap} .nav-tel:hover{color:var(--red)} .nav-tel .ti-phone{width:15px;height:15px;display:inline-block;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24 11.36 11.36 0 0 0 3.57.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.57 1 1 0 0 1-.24 1.02z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24 11.36 11.36 0 0 0 3.57.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.57 1 1 0 0 1-.24 1.02z'/%3E%3C/svg%3E") center/contain no-repeat} .nav-login{font-family:var(--font-display);font-weight:500;font-size:.92rem;color:var(--ink);display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;transition:color .15s} .nav-login:hover{color:var(--red)} .nav-login svg{width:16px;height:16px;flex:0 0 auto} .burger{display:none;flex-direction:column;gap:5px;padding:8px;margin-left:.25rem} .burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.25s var(--ease)} /* Transparent state over dark hero */ .site-header[data-hero="1"]:not(.scrolled){background:transparent;border-color:transparent} .site-header[data-hero="1"]:not(.scrolled) .logo-light{display:block} .site-header[data-hero="1"]:not(.scrolled) .logo-dark{display:none} .site-header[data-hero="1"]:not(.scrolled) .navlink{color:rgba(255,255,255,.9)} .site-header[data-hero="1"]:not(.scrolled) .navlink:hover{color:#fff} .site-header[data-hero="1"]:not(.scrolled) .nav-tel{color:rgba(255,255,255,.85)} .site-header[data-hero="1"]:not(.scrolled) .nav-tel:hover{color:#fff} .site-header[data-hero="1"]:not(.scrolled) .nav-login{color:rgba(255,255,255,.85)} .site-header[data-hero="1"]:not(.scrolled) .nav-login:hover{color:#fff} .site-header[data-hero="1"]:not(.scrolled) .burger span{background:#fff} .site-header.scrolled{box-shadow:var(--sh-sm)} /* Mobile nav (off-canvas dropdown) */ .mobile-nav{position:fixed;top:var(--hdr-h);left:0;right:0;background:#fff;border-bottom:1px solid var(--hairline); padding:1rem var(--pad) 1.5rem;display:flex;flex-direction:column;gap:.25rem;z-index:49;box-shadow:var(--sh-md)} .mobile-nav a{padding:.85rem .25rem;font-family:var(--font-display);font-weight:500;font-size:1.05rem;border-bottom:1px solid var(--hairline)} .mobile-nav .btn{margin-top:.8rem;border-bottom:none} .mobile-nav .m-tel{color:var(--muted);font-weight:400;border-bottom:none;font-size:.95rem} .mobile-nav .m-login{display:inline-flex;align-items:center;gap:.45rem} .mobile-nav .m-login svg{width:17px;height:17px;flex:0 0 auto} .foot-login{display:inline-flex;align-items:center;gap:.4rem} .foot-login svg{width:15px;height:15px;flex:0 0 auto} /* Sub-pages: content unter den fixen Header schieben */ body.is-sub main{padding-top:var(--hdr-h)} /* ---- Footer (dunkel) ---- */ .site-footer{background:var(--ink);color:var(--on-dark-mut);padding:clamp(56px,7vw,96px) 0 2.2rem} .site-footer h5{font-family:var(--font-display);color:#fff;font-size:.95rem;font-weight:500;letter-spacing:.02em;margin-bottom:1rem} .foot-top{display:grid;grid-template-columns:1.5fr 1fr 1.1fr 1.1fr;gap:clamp(2rem,4vw,3.4rem)} .foot-nav{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem} .foot-brand .logo{height:42px;margin-bottom:1.1rem} .foot-claim{max-width:42ch;line-height:1.6;font-size:.98rem} .foot-ways{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem} .foot-link{color:rgba(255,255,255,.78);transition:color .15s} .foot-link:hover{color:#fff} .foot-person{color:var(--on-dark-mut);font-size:.86rem;margin-top:.3rem;line-height:1.5} .foot-meta p{line-height:1.7;font-size:.95rem} .foot-legal-links{display:flex;gap:1.2rem;margin-top:1rem} .foot-legal-links a{color:rgba(255,255,255,.78)} .foot-legal-links a:hover{color:#fff} .foot-bottom{border-top:1px solid var(--ink-line);margin-top:clamp(2rem,4vw,3.5rem);padding-top:1.4rem;text-align:left} .foot-credit{font-size:.85rem;color:rgba(255,255,255,.6)} .foot-credit a{color:rgba(255,255,255,.78);text-decoration:underline;text-underline-offset:2px} .foot-credit a:hover{color:#fff} /* ---- Sticky mobile CTA bar ---- */ .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;gap:.6rem;padding:.7rem var(--pad); background:rgba(18,18,18,.92);backdrop-filter:blur(10px);border-top:1px solid var(--ink-line);transform:translateY(0);transition:transform .3s var(--ease)} .sticky-cta .btn{flex:1} .sticky-cta.hide{transform:translateY(120%)} /* ---- Reveal-Animation ---- */ .reveal{transition:opacity .7s var(--ease),transform .7s var(--ease)} html.js .reveal{opacity:0;transform:translateY(26px)} html.js .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s} /* ---- Responsive shell ---- */ @media(max-width:900px){ .mainnav,.nav-tel,.nav-actions{display:none} .burger{display:flex} .foot-top{grid-template-columns:repeat(2,1fr);gap:2.4rem} } @media(max-width:768px){ body{font-size:16px} .sticky-cta{display:flex} body.is-home main,body.is-sub main{padding-bottom:74px} /* Platz für Sticky-CTA */ } @media(max-width:560px){ .foot-top{grid-template-columns:1fr} } /* ---- Reduced motion ---- */ @media(prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important} .reveal{opacity:1;transform:none} } /* ========================================================================= igroupTV.de - _add.css (Hero/Anamorphose + Channel-Screen + Sektionen) ========================================================================= */ /* ====================== HERO (dunkle TV-Bühne) ====================== */ .hero{position:relative;background:var(--ink);color:#fff;min-height:100svh;display:flex;align-items:center; padding-top:calc(var(--hdr-h) + clamp(1.5rem,4vw,3rem));padding-bottom:clamp(2.5rem,6vw,5rem);overflow:hidden} .hero-bg{position:absolute;inset:0;z-index:0; background: radial-gradient(1100px 760px at 80% 26%,rgba(200,20,30,.26),transparent 58%), radial-gradient(900px 620px at 8% 98%,rgba(255,255,255,.045),transparent 60%), var(--ink)} .hero-bg::before{content:"";position:absolute;inset:0;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:54px 54px;mask:radial-gradient(120% 90% at 70% 20%,#000,transparent 75%)} .hero-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 120%,rgba(0,0,0,.55),transparent 60%)} .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;width:100%} .hero-copy h1{color:#fff;margin:.7rem 0 0} .hero-copy h1 .hl{position:relative;white-space:nowrap} .hero-copy h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.10em;background:var(--red);border-radius:2px;opacity:.95} .hero-sub{color:rgba(255,255,255,.74);font-size:clamp(1.05rem,1rem + .5vw,1.3rem);line-height:1.6;max-width:46ch;margin:1.4rem 0 2rem} .hero-cta{display:flex;gap:1rem;flex-wrap:wrap} .hero-reassure{margin-top:1.2rem;color:rgba(255,255,255,.62);font-size:.95rem;display:flex;align-items:center;gap:.5rem} .hero-reassure::before{content:"";width:18px;height:18px;flex:0 0 auto;background:var(--red);border-radius:50%; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat} .hero-trust{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--ink-line); display:flex;gap:1rem 1.4rem;flex-wrap:wrap;align-items:center;color:rgba(255,255,255,.5);font-size:.8rem;letter-spacing:.03em} .hero-trust b{color:rgba(255,255,255,.82);font-weight:500} .ht-item{display:inline-flex;align-items:center;gap:.5rem} .ht-item svg{width:16px;height:16px;flex:0 0 auto;color:rgba(255,255,255,.72)} /* ---- Hero-Bühne: TV-Device + Anamorphose ---- */ .hero-stage{position:relative;perspective:1500px;min-height:clamp(340px,42vw,520px); animation:stageFloat 7s ease-in-out infinite} @keyframes stageFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} /* Moderner Flatscreen (Nachbau der echten igroupTV-Stele): dünner, glänzender Rahmen, schmaler Chin */ .tv{position:relative;z-index:2;transform:rotateY(-12deg) rotateX(4deg);transform-style:preserve-3d; border-radius:15px;background:linear-gradient(155deg,#23252a,#0c0d10 46%,#050506);padding:7px 7px 13px; box-shadow:0 1px 2px rgba(0,0,0,.55),0 36px 74px -16px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.16),inset 0 -2px 3px rgba(0,0,0,.6); transition:transform .4s var(--ease)} .tv::after{content:"";position:absolute;inset:-16% -12% -26%;z-index:-1;border-radius:46px; background:radial-gradient(58% 58% at 50% 44%,rgba(200,20,30,.34),transparent 70%);filter:blur(32px);opacity:.7} .tv::before{content:"";position:absolute;left:50%;bottom:5px;transform:translateX(-50%);width:26px;height:3px; border-radius:2px;background:rgba(255,255,255,.12)} /* Brand-/Sensor-Strip im Chin */ /* ---- Channel-Screen (Nachbau echtes igroupTV) ---- */ .ch{position:relative;border-radius:9px;overflow:hidden;background:#fff;aspect-ratio:16/10; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);color:#15171a} .ch-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 12px;border-bottom:1px solid #eceef0;font-size:11px} .ch-weather{display:flex;align-items:center;gap:6px;color:#444} .ch-weather b{font-family:var(--font-display);font-weight:700;font-size:15px;color:#15171a} .ch-weather .sub{color:#8a9099;font-size:9px;line-height:1.1} .ch-clock{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.02em;font-variant-numeric:tabular-nums} .ch-clock .date{display:block;text-align:center;font-size:8.5px;font-weight:400;color:#8a9099;letter-spacing:.06em} .ch-igroup{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:-.02em;color:#15171a} .ch-igroup span{color:var(--red)} .ch-body{position:relative;height:calc(100% - 34px - 22px)} .ch-slide{position:absolute;inset:0;opacity:0;padding:14px 16px;display:flex;flex-direction:column;justify-content:center; transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none} .ch-slide.is-active{opacity:1;transform:none} html:not(.js) .ch-slide:first-child{opacity:1;transform:none} /* Broadcast-Cut beim Umschalten (Regiepult) */ .ch.ch-cut::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;animation:chCut .45s var(--ease)} @keyframes chCut{0%{background:rgba(255,255,255,.55)}28%{background:rgba(200,20,30,.14)}100%{background:transparent}} .ch-kicker{font-family:var(--font-display);font-weight:700;font-size:13px;color:#15171a;margin-bottom:8px;display:flex;align-items:center;gap:6px} .ch-kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(200,20,30,.16)} /* slide 1: kursplan */ .kp-row{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid #f0f1f3;font-size:12px} .kp-row .t{font-family:var(--font-display);font-weight:700;color:#15171a;width:42px} .kp-row .c{color:#3a3f45;flex:1} .kp-row.now{background:rgba(200,20,30,.06);margin:0 -8px;padding:6px 8px;border-radius:6px;border-bottom:none;border-left:3px solid var(--red)} .kp-row .pill{font-size:9px;background:var(--red);color:#fff;padding:2px 7px;border-radius:99px;font-weight:500} /* slide 2: angebot */ .an{height:100%;border-radius:8px;background:linear-gradient(135deg,#15171a,#2a2d31);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:16px;position:relative;overflow:hidden} .an::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(200,20,30,.5),transparent 70%)} .an .tag{align-self:flex-start;background:var(--red);color:#fff;font-weight:700;font-size:12px;padding:4px 10px;border-radius:99px;margin-bottom:8px} .an h4{color:#fff;font-size:20px;line-height:1.05} .an p{color:rgba(255,255,255,.72);font-size:12px;margin-top:6px} /* slide 3: bewertung */ .bw{display:flex;align-items:center;gap:14px;height:100%} .bw .stars{color:#f5a623;font-size:18px;letter-spacing:1px} .bw .num{font-family:var(--font-display);font-weight:700;font-size:30px;color:#15171a;line-height:1} .bw .txt{font-size:12px;color:#3a3f45} .bw .qr{width:64px;height:64px;margin-left:auto;border-radius:6px;display:block} .ch-ticker{position:absolute;left:0;right:0;bottom:0;height:22px;background:#15171a;color:#fff;display:flex;align-items:center;overflow:hidden;font-size:10px} .ch-ticker .run{white-space:nowrap;padding-left:100%;animation:ticker 18s linear infinite;color:rgba(255,255,255,.85)} @keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-100%)}} /* ---- Anamorphose: Elemente brechen aus dem Screen ---- */ .pop{position:absolute;z-index:5;background:#fff;color:#15171a;border-radius:14px;box-shadow:0 24px 50px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.04); padding:11px 13px;display:flex;align-items:center;gap:10px; transform:translate3d(calc(var(--mx,0) * var(--dx,18px)),calc(var(--my,0) * var(--dy,14px)),0);transition:transform .25s var(--ease)} .pop .ic{width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;color:#fff} .pop .ti{font-family:var(--font-display);font-weight:700;font-size:12.5px;line-height:1.15} .pop .su{font-size:10.5px;color:var(--muted);line-height:1.2} .pop-notif{top:-6%;left:-13%;--dx:24px;--dy:18px} .pop-notif .ic{background:var(--red);box-shadow:0 0 0 5px rgba(200,20,30,.16)} .pop-notif .ic svg{width:18px;height:18px;fill:#fff} .pop-rating{bottom:-4%;right:-12%;--dx:-22px;--dy:-16px} .pop-rating .ic{background:#f5a623} .pop-rating .stars{color:#f5a623;font-size:14px;letter-spacing:1px} .pop-play{top:54%;right:-9%;width:60px;height:60px;border-radius:18px;background:var(--red);display:grid;place-items:center;padding:0; box-shadow:0 18px 40px rgba(200,20,30,.5),0 0 0 1px rgba(255,255,255,.08);--dx:-30px;--dy:22px} .pop-play::before{content:"";width:0;height:0;border-left:20px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:5px;border-radius:3px} .pop-live{top:11%;right:-8%;padding:7px 12px;--dx:-18px;--dy:-12px} .pop-live .d{width:8px;height:8px;border-radius:50%;background:var(--red);animation:pulse 1.6s infinite} .pop-live .ti{letter-spacing:.12em} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(200,20,30,.6)}70%{box-shadow:0 0 0 7px rgba(200,20,30,0)}} /* ---- Regiepult (interaktive Screen-Steuerung im Hero) ---- */ .regie{position:relative;z-index:4;margin-top:clamp(1rem,2.4vw,1.6rem); background:linear-gradient(180deg,#1c1c1f,#0d0d0f);border:1px solid rgba(255,255,255,.1);border-radius:14px; padding:.8rem .9rem;box-shadow:0 20px 44px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05)} .regie-top{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.65rem} .regie-live{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-display);font-weight:700; font-size:.72rem;letter-spacing:.14em;color:#fff} .regie-dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:pulse 1.6s infinite} .regie-hint{font-size:.74rem;color:rgba(255,255,255,.5);letter-spacing:.02em} .regie-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap} .regie-ch,.regie-auto{font-family:var(--font-display);font-weight:500;font-size:.82rem;color:rgba(255,255,255,.82); background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:9px;padding:.5rem .85rem; cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease)} .regie-ch:hover,.regie-auto:hover{background:rgba(255,255,255,.13);color:#fff} .regie-ch.is-on{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 5px 16px rgba(200,20,30,.42)} .regie-auto{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem} .regie-auto::before{content:"";width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);transition:background .15s} .regie-auto.is-on::before{background:var(--red)} /* ---- Hero: echtes Live-iframe statt Fake-Channel ---- */ .ch-live{background:#000;aspect-ratio:16/9} .ch-frame{position:absolute;top:0;left:0;width:1920px;height:1080px;border:0;display:block;background:#000;transform-origin:top left} .ch-livebadge{position:absolute;top:10px;left:10px;z-index:3;display:inline-flex;align-items:center;gap:.4rem; background:rgba(200,20,30,.92);color:#fff;font-family:var(--font-display);font-weight:700;font-size:11px; letter-spacing:.09em;padding:4px 9px 4px 8px;border-radius:99px;box-shadow:0 4px 14px rgba(0,0,0,.35)} .ch-livedot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite} .ch-poweron{position:absolute;inset:0;z-index:4;background:#000;pointer-events:none; animation:powerOn 1.5s var(--ease) .2s forwards} @keyframes powerOn{ 0%{opacity:1;clip-path:inset(0 0 0 0);background:#000} 30%{opacity:1;clip-path:inset(49.5% 0 49.5% 0);background:#fff} 48%{opacity:1;clip-path:inset(0 0 0 0);background:rgba(255,255,255,.18)} 100%{opacity:0;clip-path:inset(0 0 0 0);background:rgba(255,255,255,0)} } .tv-cap{margin-top:clamp(1rem,2.4vw,1.5rem);text-align:center;font-size:.84rem; color:rgba(255,255,255,.62);display:flex;align-items:center;justify-content:center;gap:.5rem} .tv-cap-dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(200,20,30,.18);animation:pulse 1.6s infinite} /* ====================== STUB-SEKTIONEN (Platzhalter) ====================== */ .stub .eyebrow{margin-bottom:.7rem} .stub h2{max-width:18ch} .stub .lead{margin-top:1rem} .stub-note{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;font-size:.85rem;color:var(--muted); background:#fff;border:1px solid var(--hairline);padding:.5rem .9rem;border-radius:99px} .stub-note .d{width:8px;height:8px;border-radius:50%;background:var(--red)} .sec--ink .stub-note{background:rgba(255,255,255,.05);border-color:var(--ink-line);color:rgba(255,255,255,.7)} /* ====================== RESPONSIVE HERO ====================== */ @media(max-width:980px){ .hero-grid{grid-template-columns:1fr;gap:clamp(2.5rem,8vw,4rem)} .hero-stage{order:2;margin-top:1rem;min-height:auto} .tv{transform:rotateY(-8deg) rotateX(4deg)} } @media(max-width:768px){ .hero{min-height:auto;padding-top:calc(var(--hdr-h) + 1.5rem)} .hero-stage{animation:none;perspective:none;padding:0 6%} .tv{transform:none} .pop{transform:none !important} .pop-notif{top:-14px;left:-6px} .pop-rating{bottom:-14px;right:-6px} .pop-play{width:48px;height:48px;right:2px;top:auto;bottom:30%} .pop-live{display:none} } @media(prefers-reduced-motion:reduce){ .hero-stage,.ch-ticker .run,.pop-live .d,.regie-dot,.ch-livedot,.tv-cap-dot{animation:none} .ch-slide{transition:none} .ch-poweron{animation:none;opacity:0} } /* ====================== PREISE ====================== */ .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:clamp(2rem,4vw,3.2rem)} .price-card{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-lg);padding:1.8rem 1.6rem;display:flex;flex-direction:column;min-height:200px;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)} .price-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:#cfd4da} .price-card--featured{border-color:var(--red);box-shadow:0 18px 42px rgba(200,20,30,.14)} .price-flag{position:absolute;top:-12px;left:1.6rem;background:var(--red);color:#fff;font-family:var(--font-display); font-weight:700;font-size:.72rem;letter-spacing:.06em;padding:4px 11px;border-radius:var(--r-pill);box-shadow:0 6px 16px rgba(200,20,30,.3)} .price-card{position:relative} .price-tier{font-family:var(--font-display);font-weight:500;color:var(--muted);font-size:.95rem} .price-amt{display:flex;align-items:baseline;gap:.18rem;margin:.35rem 0 1.2rem} .price-amt .num{font-family:var(--font-display);font-weight:700;font-size:clamp(2.6rem,2rem + 2vw,3.4rem);color:var(--ink);line-height:1;letter-spacing:-.03em} .price-amt .cur{font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--ink)} .price-amt .per{color:var(--muted);font-size:.92rem;margin-left:.25rem} .price-link{margin-top:auto;font-weight:500;font-size:.92rem;color:var(--ink);border-bottom:1.5px solid var(--hairline);align-self:flex-start;padding-bottom:2px;transition:border-color .15s,color .15s} .price-link:hover{color:var(--red);border-color:var(--red)} .price-incl{margin-top:clamp(1.4rem,3vw,2rem);background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:1.5rem 1.7rem} .price-incl h4{font-family:var(--font-display);font-weight:500;font-size:1rem;color:var(--ink);margin-bottom:1.1rem} .price-incl ul{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem 2rem} .price-incl li{position:relative;padding-left:1.8rem;font-size:.96rem;color:#33373c;line-height:1.5} .price-incl li::before{content:"";position:absolute;left:0;top:.12em;width:19px;height:19px;border-radius:50%;background:var(--red); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat} .price-incl b{color:var(--ink);font-weight:500} .price-extra{text-align:center;color:var(--muted);font-size:.9rem;margin-top:1.2rem} .risk-badge{display:flex;align-items:flex-start;gap:1rem;max-width:780px;margin:clamp(2rem,4vw,3rem) auto 0; background:rgba(200,20,30,.06);border:1px solid rgba(200,20,30,.28);border-radius:var(--r-lg);padding:1.2rem 1.5rem} .risk-ic{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:700} .risk-badge strong{font-family:var(--font-display);color:var(--ink);font-weight:700} .risk-sub{display:block;color:var(--muted);font-size:.9rem;margin-top:.35rem;line-height:1.5} .price-cta{display:flex;flex-direction:column;align-items:center;gap:1.1rem;margin-top:clamp(1.8rem,3vw,2.4rem);text-align:center} .roi-link{color:var(--ink);font-weight:500;border-bottom:1.5px solid var(--hairline);padding-bottom:2px;max-width:56ch;transition:border-color .15s,color .15s} .roi-link:hover{color:var(--red);border-color:var(--red)} @media(max-width:820px){ .price-grid{grid-template-columns:1fr;gap:1rem} .price-card{min-height:0} .price-incl ul{grid-template-columns:1fr} } /* ====================== ROI-RECHNER ====================== */ .roi{display:grid;grid-template-columns:1.04fr .96fr;background:#fff;border:1px solid var(--hairline); border-radius:var(--r-lg);box-shadow:var(--sh-md);overflow:hidden;margin-top:clamp(2rem,4vw,3.2rem)} .roi-controls{padding:clamp(1.5rem,3vw,2.5rem)} .roi-result{padding:clamp(1.5rem,3vw,2.5rem);background:var(--paper);border-left:1px solid var(--hairline); display:flex;flex-direction:column} /* ---- Felder ---- */ .roi-field{margin-bottom:1.6rem} .roi-field:last-child{margin-bottom:0} .roi-label{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem 1rem;flex-wrap:wrap; font-family:var(--font-display);font-weight:500;font-size:1rem;color:var(--ink);margin-bottom:.75rem;cursor:default} .roi-hint{display:block;margin-top:.55rem;font-size:.84rem;color:var(--muted);line-height:1.45;max-width:42ch} /* ---- Stepper ---- */ .roi-stepper{display:inline-flex;align-items:stretch;border:1.5px solid var(--hairline);border-radius:var(--r-pill);overflow:hidden;background:#fff} .roi-step{width:48px;font-family:var(--font-display);font-size:1.5rem;font-weight:500;color:var(--ink);line-height:1; display:grid;place-items:center;transition:background .15s var(--ease),color .15s var(--ease)} .roi-step:hover:not([aria-disabled="true"]){background:rgba(200,20,30,.08);color:var(--red)} .roi-step[aria-disabled="true"]{opacity:.3;cursor:not-allowed} .roi-num{min-width:62px;padding:.65rem 0;text-align:center;font-family:var(--font-display);font-weight:700; font-size:1.25rem;color:var(--ink);border-inline:1.5px solid var(--hairline);font-variant-numeric:tabular-nums} /* ---- Segmented (Laufzeit) ---- */ .roi-seg{display:inline-flex;background:var(--paper);border:1.5px solid var(--hairline);border-radius:var(--r-pill);padding:4px;gap:3px;flex-wrap:wrap} .roi-seg-btn{padding:.55rem 1.05rem;border-radius:var(--r-pill);font-family:var(--font-display);font-weight:500; font-size:.92rem;color:var(--muted);transition:background .18s var(--ease),color .18s var(--ease)} .roi-seg-btn:hover{color:var(--ink)} .roi-seg-btn.is-active{background:var(--ink);color:#fff} /* ---- Slider (Erlös) ---- */ .roi-val{font-family:var(--font-display);font-weight:700;font-size:1.18rem;color:var(--red);letter-spacing:-.01em} .roi-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px; background:var(--hairline);outline:none;cursor:pointer} .roi-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%; background:var(--red);border:3px solid #fff;box-shadow:0 2px 8px rgba(200,20,30,.4);cursor:pointer;transition:transform .12s var(--ease)} .roi-slider::-webkit-slider-thumb:hover{transform:scale(1.1)} .roi-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--red);border:3px solid #fff; box-shadow:0 2px 8px rgba(200,20,30,.4);cursor:pointer} .roi-slider::-moz-range-track{height:6px;border-radius:99px;background:transparent} /* ---- Toggle (Vermarkter) ---- */ .roi-field--toggle{border-top:1px solid var(--hairline);margin-top:1.9rem;padding-top:1.6rem} .roi-switch{display:flex;align-items:flex-start;gap:.85rem;cursor:pointer;position:relative} .roi-switch input{position:absolute;opacity:0;width:0;height:0} .roi-switch-track{flex:0 0 auto;width:44px;height:26px;border-radius:99px;background:var(--hairline); position:relative;transition:background .2s var(--ease);margin-top:1px} .roi-switch-track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%; background:#fff;box-shadow:var(--sh-sm);transition:transform .2s var(--ease)} .roi-switch input:checked + .roi-switch-track{background:var(--red)} .roi-switch input:checked + .roi-switch-track::after{transform:translateX(18px)} .roi-switch input:focus-visible + .roi-switch-track{outline:2px solid var(--red);outline-offset:3px} .roi-switch-text{font-family:var(--font-display);font-weight:500;font-size:.98rem;color:var(--ink);line-height:1.35} .roi-field--toggle .roi-hint{margin-top:.55rem} /* ---- Ergebnis ---- */ .roi-res-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem} .roi-res-row span{color:var(--muted);font-size:.95rem} .roi-res-row strong{font-family:var(--font-display);font-weight:700;font-size:1.35rem;color:var(--ink);letter-spacing:-.01em;white-space:nowrap} .roi-res-row strong small{font-weight:400;font-size:.78rem;color:var(--muted);margin-left:.12rem} .roi-res-sub{font-size:.84rem;color:var(--muted);margin:.15rem 0 1.2rem} .roi-divider{height:1px;background:var(--hairline);margin:.2rem 0 1.3rem} .roi-cov-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem} .roi-cov-head span:first-child{color:var(--ink);font-family:var(--font-display);font-weight:500;font-size:1.02rem} .roi-cov-pct{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,1.5rem + 1.4vw,2.6rem); color:var(--red);line-height:1;letter-spacing:-.025em;white-space:nowrap} .roi-cov-bar{height:10px;border-radius:99px;background:var(--hairline);overflow:hidden;margin:.85rem 0 .75rem} .roi-cov-bar span{display:block;height:100%;border-radius:99px;background:var(--red);transition:width .5s var(--ease),background .3s var(--ease)} .roi.is-covered .roi-cov-bar span{background:var(--green)} .roi-cov-badge{display:none;align-items:center;gap:.4rem;align-self:flex-start;background:rgba(25,135,84,.1); color:#0f5132;border:1px solid rgba(25,135,84,.3);font-family:var(--font-display);font-weight:500; font-size:.85rem;padding:.35rem .8rem;border-radius:var(--r-pill);margin-bottom:.3rem} .roi.is-covered .roi-cov-badge{display:inline-flex} .roi-verdict{font-size:.98rem;color:var(--ink);line-height:1.55;margin:1rem 0 1.2rem} .roi-disclaimer{display:flex;gap:.6rem;align-items:flex-start;font-size:.82rem;color:var(--muted);line-height:1.45; background:#fff;border:1px solid var(--hairline);border-radius:var(--r-md);padding:.75rem .9rem;margin-bottom:1.4rem} .roi-disc-ic{flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:var(--muted);color:#fff; font-family:var(--font-display);font-weight:700;font-size:.72rem;display:grid;place-items:center;margin-top:.08rem} .roi-cta{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:auto} @media(max-width:820px){ .roi{grid-template-columns:1fr} .roi-result{border-left:none;border-top:1px solid var(--hairline)} .roi-cta{grid-template-columns:1fr} } /* ====================== SHARED: Pfeil-Link, Ink-Button ====================== */ .link-arrow{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-display);font-weight:500; font-size:.95rem;color:var(--ink);transition:color .15s var(--ease)} .link-arrow::after{content:"\2192";transition:transform .18s var(--ease)} .link-arrow:hover{color:var(--red)} .link-arrow:hover::after{transform:translateX(3px)} .btn-ink{background:var(--ink);color:#fff} .btn-ink:hover{background:#000;transform:translateY(-2px);box-shadow:var(--sh-md)} .btn-wa{background:#25d366;color:#fff;box-shadow:0 6px 18px rgba(37,211,102,.28)} .btn-wa:hover{background:#1ebe57;color:#fff;transform:translateY(-2px);box-shadow:0 10px 26px rgba(37,211,102,.36)} /* ====================== 2. PROBLEM ====================== */ .prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:clamp(2rem,4vw,3.2rem)} .prob-card{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-lg);padding:1.8rem 1.6rem; transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)} .prob-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:#cfd4da} .prob-ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;color:#fff;background:var(--ink); margin-bottom:1.1rem;transition:background .25s var(--ease),transform .25s var(--ease)} .prob-ic svg{width:26px;height:26px} .prob-card:hover .prob-ic{background:var(--red);transform:translateY(-2px) rotate(-3deg)} @media(prefers-reduced-motion:reduce){.prob-card:hover{transform:none}.prob-card:hover .prob-ic{transform:none}} .prob-card h3{font-size:1.15rem;margin-bottom:.4rem} .prob-card p{color:var(--muted);font-size:.98rem;line-height:1.55} .prob-bridge{text-align:center;font-family:var(--font-display);font-weight:700;color:var(--ink); font-size:clamp(1.4rem,1rem + 1.6vw,2rem);letter-spacing:-.02em;margin:clamp(2.4rem,5vw,3.6rem) auto 0;max-width:24ch} .prob-leadout{text-align:center;color:var(--muted);margin-top:.7rem;font-size:1.05rem} /* ====================== 3. LÖSUNG (3 Schritte) ====================== */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:clamp(2rem,4vw,3.2rem)} .step{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-lg);padding:1.8rem 1.6rem;box-shadow:var(--sh-sm)} .step-media{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;margin-bottom:1.1rem;background:var(--paper)} .step-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)} .step:hover .step-media img{transform:scale(1.05)} .step-num{width:42px;height:42px;border-radius:50%;background:#fff;border:1.5px solid var(--hairline); color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:1.15rem;display:grid;place-items:center;margin-bottom:1.1rem} .step-media .step-num{position:absolute;left:.7rem;bottom:.7rem;margin-bottom:0;box-shadow:var(--sh-md)} .step h3{font-size:1.2rem;margin-bottom:.4rem} .step p{color:var(--muted);font-size:.98rem;line-height:1.55} .step-foot{display:flex;align-items:center;justify-content:center;gap:1rem 2rem;flex-wrap:wrap;margin-top:clamp(1.8rem,3vw,2.4rem)} .step-reassure{font-family:var(--font-display);font-weight:500;color:var(--ink)} /* ====================== 4. FEATURES ====================== */ .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:clamp(2rem,4vw,3.2rem)} .feat-card{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-md);padding:1.5rem 1.4rem; transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)} .feat-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:rgba(200,20,30,.35)} .feat-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:var(--red); background:rgba(200,20,30,.08);margin-bottom:1rem;transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)} .feat-card:hover .feat-ic{background:var(--red);color:#fff;transform:translateY(-2px) rotate(-3deg)} .feat-ic svg{width:25px;height:25px} .feat-card h3{font-size:1.06rem;margin-bottom:.35rem;letter-spacing:-.01em} .feat-card p{color:var(--muted);font-size:.93rem;line-height:1.5} /* Bento-Lead-Tile (Kern-Feature, breiter) */ .feat-card--lead{grid-column:span 2;display:flex;align-items:flex-start;gap:1.3rem; background:linear-gradient(145deg,#fff,#fff5f5);border-color:rgba(200,20,30,.18)} .feat-card--lead .feat-ic{width:58px;height:58px;margin-bottom:0;flex:0 0 auto} .feat-card--lead .feat-ic svg{width:32px;height:32px} .feat-card--lead h3{font-size:1.4rem;margin:.5rem 0 .4rem} .feat-card--lead p{font-size:1rem;max-width:48ch} .feat-flag{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red);background:rgba(200,20,30,.1);padding:3px 9px;border-radius:99px} @media(max-width:768px){.feat-card--lead{grid-column:span 1}} @media(prefers-reduced-motion:reduce){.feat-card:hover .feat-ic{transform:none}} .feat-chips{margin-top:clamp(1.8rem,3vw,2.4rem);background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:1.4rem 1.6rem} .feat-chips-lead{display:block;font-family:var(--font-display);font-weight:500;color:var(--ink);margin-bottom:.9rem} .feat-chips ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem} .feat-chips li{font-size:.85rem;color:#33373c;background:#fff;border:1px solid var(--hairline);border-radius:var(--r-pill);padding:.35rem .85rem} .whats-block{margin-top:clamp(1.8rem,3vw,2.4rem);display:flex;align-items:center;gap:1.5rem; background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:1.6rem 1.8rem} .whats-photo{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:0 0 auto} .whats-text{font-size:1.02rem;color:var(--ink);line-height:1.5;margin-bottom:1rem;max-width:60ch} .whats-cta{display:flex;gap:.7rem;flex-wrap:wrap} /* ====================== 6. FÜR WEN (Personas) ====================== */ .persona-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:clamp(2rem,4vw,3.2rem)} .persona-card{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-lg);padding:1.6rem 1.4rem;display:flex;flex-direction:column} .persona-label{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink);letter-spacing:-.01em} .persona-motto{font-family:var(--font-display);font-weight:500;color:var(--ink);font-size:1.02rem;line-height:1.4;margin:.8rem 0} .persona-claim{color:var(--muted);font-size:.92rem;line-height:1.5;margin-bottom:1rem} .persona-hebel{list-style:none;display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.3rem} .persona-hebel li{position:relative;padding-left:1.3rem;font-size:.9rem;color:#33373c} .persona-hebel li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:#c2c7cd} .persona-card .link-arrow{margin-top:auto;font-size:.9rem} .persona-bridge{text-align:center;font-family:var(--font-display);font-weight:500;color:var(--ink);font-size:1.1rem; margin:clamp(2rem,4vw,3rem) auto 0;max-width:42ch} /* ====================== 7. PARTNER ====================== */ .partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(2rem,4vw,3.2rem)} .partner-tile{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-md);padding:1.3rem 1.4rem; text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:104px;transition:border-color .2s,box-shadow .2s} .partner-logo{max-height:46px;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.82;transition:filter .2s var(--ease),opacity .2s var(--ease)} .partner-tile:hover .partner-logo{filter:none;opacity:1} .partner-tile:hover{border-color:#cfd4da;box-shadow:var(--sh-sm)} .partner-name{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:#3a3f45;letter-spacing:-.01em} .partner-use{font-size:.86rem;color:var(--muted)} .partner-claims{margin-top:clamp(1.6rem,3vw,2.2rem);text-align:center;max-width:62ch;margin-inline:auto;display:flex;flex-direction:column;gap:.6rem} .partner-claim{color:var(--ink);font-size:1.02rem;line-height:1.5} .partner-incl{color:var(--muted);font-size:.95rem} .partner-cta{display:flex;gap:1rem 2rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem} /* ====================== 8. REFERENZEN ====================== */ .ref-feature{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:clamp(2rem,4vw,3.2rem);align-items:stretch} .ref-video{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:.3rem;min-height:280px; border-radius:var(--r-lg);padding:1.6rem;color:#fff;overflow:hidden;background:linear-gradient(180deg,#1f1f22,#0a0a0b);box-shadow:var(--sh-md)} .ref-video::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 38%,rgba(200,20,30,.32),transparent 70%)} .ref-play{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%; background:var(--red);box-shadow:0 18px 40px rgba(200,20,30,.5);display:grid;place-items:center;transition:transform .2s var(--ease)} .ref-video:hover .ref-play{transform:translate(-50%,-50%) scale(1.07)} .ref-play::before{content:"";width:0;height:0;border-left:20px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:5px} .ref-video-cap{position:relative;font-family:var(--font-display);font-weight:700;font-size:1.15rem} .ref-video-sub{position:relative;color:rgba(255,255,255,.72);font-size:.9rem;line-height:1.4;max-width:36ch} .ref-q{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-lg);padding:1.6rem 1.7rem;display:flex;flex-direction:column} .ref-q p{color:var(--ink);font-size:1rem;line-height:1.6;margin-bottom:1.1rem} .ref-q--lead p{font-size:1.08rem} .ref-q cite{margin-top:auto;font-style:normal;display:flex;flex-direction:row;align-items:center;gap:.7rem} .ref-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:0 0 auto} .ref-cite-text{display:flex;flex-direction:column;gap:.1rem;min-width:0} .ref-name{font-family:var(--font-display);font-weight:700;color:var(--ink)} .ref-org{color:var(--muted);font-size:.9rem} .ref-more{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:1.4rem} .logo-wall{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 1.7rem;margin-top:clamp(2rem,4vw,3rem); padding:clamp(1.4rem,3vw,2rem) 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)} .logo-wall span{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--muted);letter-spacing:-.01em;transition:color .15s} .logo-wall:hover span{color:var(--ink)} .logo-wall img{height:40px;width:auto;max-width:150px;object-fit:contain;opacity:.96;transition:opacity .2s var(--ease)} /* farbig */ .logo-wall img:hover{opacity:1} .ref-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.6rem;margin-top:1.6rem;color:var(--muted);font-size:.9rem} .ref-trust span{position:relative;padding-left:1.5rem} .ref-trust span::before{content:"";position:absolute;left:0;top:.05em;width:17px;height:17px;border-radius:50%;background:var(--red); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/11px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/11px no-repeat} .ref-cta{text-align:center;margin-top:1.8rem} /* ====================== 8a + 11. LEAD-FORMULARE ====================== */ .leadform-card{max-width:880px;margin-inline:auto;background:#fff;border:1px solid var(--hairline);border-radius:var(--r-lg); box-shadow:var(--sh-md);padding:clamp(1.6rem,3vw,2.6rem)} .leadform-head{text-align:center;margin-bottom:1.6rem} .leadform-head h2{font-size:clamp(1.5rem,1.1rem + 1.4vw,2rem)} .leadform-head p{color:var(--muted);margin-top:.6rem} .lead-form{max-width:760px;margin-inline:auto} .lf-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.1rem} .lf-field{display:flex;flex-direction:column;gap:.4rem} .lf-field span{font-family:var(--font-display);font-weight:500;font-size:.88rem;color:var(--ink)} .lf-field input{font:inherit;font-size:1rem;padding:.8rem .9rem;border:1.5px solid var(--hairline);border-radius:var(--r-sm);background:#fff;color:var(--text);transition:border-color .15s} .lf-field input:focus{outline:none;border-color:var(--red)} .lf-consent{display:flex;align-items:flex-start;gap:.6rem;font-size:.88rem;color:var(--muted);line-height:1.45;margin-bottom:1.2rem} .lf-consent input{margin-top:.15rem;width:18px;height:18px;flex:0 0 auto;accent-color:var(--red)} .lf-consent a{color:var(--ink);text-decoration:underline;text-underline-offset:2px} .lf-consent a:hover{color:var(--red)} .lead-form>.btn{min-width:220px} .lf-success{margin-top:1.1rem;padding:.9rem 1.1rem;border-radius:var(--r-md);background:rgba(25,135,84,.1); color:#0f5132;border:1px solid rgba(25,135,84,.3);font-size:.95rem;line-height:1.5} .lead-form--dark .lf-field span{color:rgba(255,255,255,.86)} .lead-form--dark .lf-field input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);color:#fff} .lead-form--dark .lf-field input::placeholder{color:rgba(255,255,255,.62)} .lead-form--dark .lf-field input:focus{border-color:var(--red);background:rgba(255,255,255,.12)} .lead-form--dark .lf-consent{color:rgba(255,255,255,.78)} .lead-form--dark .lf-consent a{color:#fff} .lead-form--dark .lf-success{background:rgba(25,135,84,.18);color:#7ee2a8;border-color:rgba(25,135,84,.4)} .lf-success.is-error{background:rgba(200,20,30,.08);color:var(--red);border-color:rgba(200,20,30,.3)} .lead-form--dark .lf-success.is-error{background:rgba(200,20,30,.2);color:#ff8b91;border-color:rgba(200,20,30,.5)} .lf-field input[aria-invalid="true"]{border-color:var(--red)} .lf-req{color:var(--red);font-style:normal;font-weight:700} .lf-reqnote{font-size:.8rem;color:var(--muted);margin:-.5rem 0 1.1rem} .lead-form--dark .lf-reqnote{color:rgba(255,255,255,.6)} summary:focus-visible{outline:2px solid var(--red);outline-offset:-2px;border-radius:var(--r-md)} /* ====================== 11. CLOSER (Laura + Wege) ====================== */ .closer{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;margin-top:clamp(2rem,4vw,3rem)} .closer-person{display:flex;flex-direction:column;gap:1rem} .closer-photo{width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.15)} .closer-meta{display:flex;flex-direction:column;gap:.25rem} .closer-meta strong{font-family:var(--font-display);font-size:1.2rem;color:#fff} .closer-meta span{color:rgba(255,255,255,.7);font-size:.95rem} .closer-trust{color:rgba(255,255,255,.5)!important;font-size:.85rem;letter-spacing:.02em} .closer-ways{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.8rem; margin-top:clamp(1.8rem,3vw,2.4rem);padding-top:clamp(1.6rem,3vw,2rem);border-top:1px solid var(--ink-line)} .closer-ways-lead{color:rgba(255,255,255,.6);font-size:.95rem;margin-right:.4rem} /* ====================== 10. FAQ ====================== */ .faq-list{max-width:820px;margin:clamp(2rem,4vw,3rem) auto 0} .faq-item{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-md);margin-bottom:.7rem} .faq-item summary{list-style:none;cursor:pointer;padding:1.1rem 1.3rem;font-family:var(--font-display);font-weight:500; font-size:1.05rem;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:1rem} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"";width:10px;height:10px;flex:0 0 auto;border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s var(--ease);margin-top:-4px} .faq-item[open] summary{color:var(--red)} .faq-item[open] summary::after{transform:rotate(-135deg);margin-top:3px;border-color:var(--red)} .faq-a{padding:0 1.3rem 1.2rem} .faq-a p{color:var(--muted);line-height:1.6;font-size:.98rem} .faq-a a{color:var(--red);font-weight:500;text-decoration:underline;text-underline-offset:2px} .faq-foot{text-align:center;margin-top:clamp(1.8rem,3vw,2.4rem);display:flex;flex-direction:column;align-items:center;gap:1rem} .faq-foot>span{font-family:var(--font-display);font-weight:500;color:var(--ink);font-size:1.1rem} .faq-foot-ways{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.8rem} .faq-tel{color:var(--muted);font-size:.95rem} .faq-tel:hover{color:var(--red)} /* FAQ-Sofortsuche */ .faq-search{max-width:820px;margin:clamp(1.6rem,3vw,2.2rem) auto 0;position:relative} .faq-search input{width:100%;font:inherit;font-size:1.02rem;padding:.95rem 1.1rem .95rem 2.9rem; border:1.5px solid var(--hairline);border-radius:var(--r-pill);background:#fff;color:var(--text);transition:border-color .15s var(--ease)} .faq-search input:focus{outline:none;border-color:var(--red)} .faq-search::before{content:"";position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);width:18px;height:18px;background:var(--muted);pointer-events:none; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.2-4.2'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.2-4.2'/%3E%3C/svg%3E") center/contain no-repeat} .faq-noresult{max-width:820px;margin:1.1rem auto 0;text-align:center;color:var(--muted)} .faq-noresult a{color:var(--red);font-weight:500;text-decoration:underline;text-underline-offset:2px} /* ====================== RESPONSIVE (neue Sektionen) ====================== */ @media(max-width:980px){ .feat-grid{grid-template-columns:repeat(2,1fr)} .persona-grid{grid-template-columns:repeat(2,1fr)} .partner-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:820px){ .prob-grid,.steps{grid-template-columns:1fr} .ref-feature,.ref-more{grid-template-columns:1fr} .closer{grid-template-columns:1fr;justify-items:center;text-align:center} .closer-person{align-items:center;text-align:center} .lf-fields{grid-template-columns:1fr} .whats-block{flex-direction:column;text-align:center} .whats-text{margin-inline:auto} .whats-cta{justify-content:center} } @media(max-width:560px){ .feat-grid,.persona-grid,.partner-grid{grid-template-columns:1fr} .lead-form>.btn{width:100%} } /* ====================== STARTSEITE: TEASER-BLÖCKE (mit Video-Slot) ====================== */ .teaser{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} .teaser--reverse .teaser-media{order:2} .teaser-media{position:relative;display:grid;place-items:center;aspect-ratio:16/10;border-radius:var(--r-lg); overflow:hidden;background:linear-gradient(180deg,#1f1f22,#0a0a0b);box-shadow:var(--sh-md)} .teaser-media::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 42%,rgba(200,20,30,.30),transparent 70%)} .teaser-play{position:relative;width:62px;height:62px;border-radius:50%;background:var(--red);display:grid;place-items:center; box-shadow:0 16px 36px rgba(200,20,30,.5);transition:transform .2s var(--ease)} .teaser-media:hover .teaser-play{transform:scale(1.07)} .teaser-play::before{content:"";width:0;height:0;border-left:19px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px} .teaser-soon{position:absolute;bottom:.8rem;left:1rem;font-family:var(--font-display);font-weight:500;font-size:.74rem; letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.62)} .teaser-body .eyebrow{margin-bottom:.6rem} .teaser-body h2{margin-bottom:.7rem} .teaser-body p{color:var(--muted);font-size:1.05rem;line-height:1.6;margin-bottom:1.4rem;max-width:46ch} /* ====================== PAGE-CTA-BAND + SUB-PAGE-TITEL ====================== */ .page-cta-band .wrap{max-width:680px} .page-cta-band h2{margin-bottom:.7rem} .page-cta-band p{color:var(--muted);margin:0 auto 1.5rem;max-width:50ch} .sec--ink.page-cta-band p{color:rgba(255,255,255,.72)} .sec-head h1{font-size:clamp(2rem,1.4rem + 2.2vw,3.2rem);line-height:1.05;letter-spacing:-.025em;color:var(--ink)} .sec--ink .sec-head h1{color:#fff} @media(max-width:820px){ .teaser{grid-template-columns:1fr;gap:1.5rem} .teaser--reverse .teaser-media{order:0} } /* ========================================================================= UX-ELEMENTE (2026-06-24): Vorher/Nachher, Format-Switch, Count-up, Marquee ========================================================================= */ /* ====================== 1. VORHER/NACHHER-SLIDER (Problem) ====================== */ .ba{position:relative;max-width:780px;margin:clamp(2.4rem,5vw,3.6rem) auto 0;border-radius:var(--r-lg);overflow:hidden; background:#000;aspect-ratio:16/10;box-shadow:var(--sh-lg);user-select:none;touch-action:pan-y} .ba-pane{position:absolute;inset:0;overflow:hidden} .ba-before{z-index:2;clip-path:inset(0 calc(100% - var(--ba,50%)) 0 0)} /* linker Teil = Vorher */ .ba .ch{height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none} .ba-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000;pointer-events:none} /* echter Live-Channel im "Mit igroupTV"-Pane */ .ch--off{background:radial-gradient(120% 90% at 50% 38%,#161618,#050506);display:grid;place-items:center;position:relative} .ch--off::before{content:"";position:absolute;inset:0;opacity:.55; background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px)} .ba-off-label{position:relative;font-family:var(--font-display);font-weight:500;letter-spacing:.16em;text-transform:uppercase; font-size:.78rem;color:rgba(255,255,255,.3)} .ba-off-dot{position:absolute;top:13px;right:15px;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16)} .ba-tag{position:absolute;top:13px;z-index:3;font-family:var(--font-display);font-weight:700;font-size:.68rem;letter-spacing:.1em; text-transform:uppercase;padding:4px 9px;border-radius:var(--r-pill);white-space:nowrap} .ba-tag--before{left:13px;background:rgba(255,255,255,.14);color:rgba(255,255,255,.82)} .ba-tag--after{right:13px;background:var(--red);color:#fff;padding:5px 10px;display:inline-flex;align-items:center} .ba-tag--after img{height:13px;width:auto;display:block} .ba-handle{position:absolute;top:0;bottom:0;left:var(--ba,50%);z-index:4;width:2px;margin-left:-1px; background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(0,0,0,.22);pointer-events:none} .ba-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%; background:var(--red);box-shadow:0 8px 22px rgba(200,20,30,.5),0 0 0 4px rgba(255,255,255,.2);display:grid;place-items:center} .ba-grip::before{content:"";width:22px;height:22px;background:#fff; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 7l-5 5 5 5v-3h8v3l5-5-5-5v3H8z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 7l-5 5 5 5v-3h8v3l5-5-5-5v3H8z'/%3E%3C/svg%3E") center/contain no-repeat} .ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;z-index:5} .ba:focus-within .ba-grip{outline:3px solid #fff;outline-offset:3px} .ba-cap{text-align:center;color:var(--muted);font-size:.9rem;margin-top:1rem} .ba-cap b{color:var(--ink);font-weight:500} /* ====================== 2. FORMAT-SWITCH (Hero, läuft auf jedem Display) ====================== */ .hero-stage{--dev-h:clamp(320px,48vw,520px)} .tv{aspect-ratio:var(--dev,1.7778);margin-inline:auto;display:flex;align-items:center;justify-content:center; transition:transform .4s var(--ease),width .45s var(--ease),height .45s var(--ease)} .tv[data-fmt="quer"]{width:100%;height:auto} /* Quer: füllt die Spalte */ .tv[data-fmt="hoch"],.tv[data-fmt="stele"]{width:auto;height:var(--dev-h)} /* Hoch/Stele: Höhe begrenzt, schmale Silhouette */ .tv>.ch{width:100%} .ch-live{aspect-ratio:16/9;height:auto;border-radius:5px;box-shadow:0 0 0 1px rgba(0,0,0,.85)} /* Quer: 16:9-Channel */ .tv[data-fmt="hoch"] .ch-live{aspect-ratio:9/16} /* Hoch: echter Portrait-Channel füllt den Screen */ .ch-frame--hoch{width:1080px;height:1920px} /* Portrait-Channel nativ 1080x1920 (Quer-Frame bleibt 1920x1080) */ /* Beide Channels sind vorgeladen -> Umschalten ohne Reload (sofortiger Wechsel des sichtbaren Channels) */ .tv[data-fmt="quer"] .ch-frame--hoch{opacity:0;pointer-events:none} .tv[data-fmt="hoch"] .ch-frame--quer{opacity:0;pointer-events:none} /* Format-Switch-Panel (CI, segmentierte Format-Buttons mit Silhouetten) */ .fmt-switch{max-width:430px;margin:clamp(1rem,2.4vw,1.5rem) auto 0; background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:.9rem; box-shadow:0 16px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.07)} .fmt-switch-head{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;margin:0 .15rem .75rem} .fmt-switch-title{font-family:var(--font-display);font-weight:700;font-size:.9rem;color:#fff;letter-spacing:-.01em} .fmt-switch-hint{font-family:var(--font-display);font-weight:500;font-size:.76rem;color:rgba(255,255,255,.5)} .fmt-switch-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem} .fmt-btn{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.6rem; font-family:var(--font-display);font-weight:500;font-size:.85rem;color:rgba(255,255,255,.8); background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.12);border-radius:12px;padding:.85rem .5rem .7rem; cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)} .fmt-btn:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.26);transform:translateY(-2px)} .fmt-btn.is-on{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 8px 22px rgba(200,20,30,.42)} .fmt-ico{display:block;border:2px solid currentColor;border-radius:3px;opacity:.92} .fmt-ico--quer{width:30px;height:18px} .fmt-ico--hoch{width:17px;height:28px} .fmt-ico--stele{width:12px;height:30px} @media(prefers-reduced-motion:reduce){.fmt-btn:hover{transform:none}} /* ====================== 3. ZAHLEN-COUNT-UP (Stat-Band) ====================== */ .statbar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline); border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden} .stat{background:#fff;padding:clamp(1.4rem,3vw,2rem) 1.1rem;text-align:center} .stat-num{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,1.4rem + 2vw,3rem);color:var(--ink); line-height:1;letter-spacing:-.025em;font-variant-numeric:tabular-nums;display:inline-flex;align-items:baseline;gap:.05em} .stat-num .u{color:var(--muted);font-size:.62em;font-weight:700} .stat-num .star{color:var(--red);font-size:.7em} .stat-lab{margin-top:.55rem;color:var(--muted);font-size:.92rem;line-height:1.4} @media(max-width:680px){ .statbar{grid-template-columns:repeat(2,1fr)} } /* ====================== 4. LOGO-MARQUEE (Referenzen) ====================== */ .logo-wall.is-marquee{display:block;overflow:hidden;padding:clamp(1.3rem,3vw,1.9rem) 0; -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .logo-track{display:flex;align-items:center;gap:2.8rem;width:max-content;animation:logoMarquee 42s linear infinite;will-change:transform} .logo-wall.is-marquee:hover .logo-track,.logo-wall.is-marquee:focus-within .logo-track{animation-play-state:paused} .logo-track>img{height:44px;width:auto;max-width:170px;flex:0 0 auto;object-fit:contain;opacity:.96;transition:opacity .2s var(--ease),transform .2s var(--ease)} /* farbig (Wunsch Simon) */ .logo-track>img:hover{opacity:1;transform:translateY(-2px)} .logo-track>span{flex:0 0 auto;font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--muted);white-space:nowrap;letter-spacing:-.01em} @keyframes logoMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} /* ---- Reduced motion: alle vier UX-Elemente ruhig ---- */ @media(prefers-reduced-motion:reduce){ .logo-track{animation:none} } /* ====================== Closer mit Laura (persönliche Nähe, Startseite) ====================== */ .closer-cta{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:center} .closer-cta-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg)} .closer-cta-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block} .closer-cta-badge{position:absolute;left:1rem;bottom:1rem;display:inline-flex;align-items:center;gap:.5rem; background:rgba(12,12,14,.66);backdrop-filter:blur(8px);color:#fff;font-family:var(--font-display);font-weight:500; font-size:.86rem;letter-spacing:-.005em;padding:.55rem .95rem;border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.16);box-shadow:0 6px 20px rgba(0,0,0,.3)} .closer-cta-badge svg{width:17px;height:17px;flex:0 0 auto;color:var(--red)} .closer-cta-body .eyebrow{margin-bottom:.6rem} .closer-cta-body h2{margin-bottom:.7rem} .closer-cta-body p{color:rgba(255,255,255,.72);font-size:1.05rem;line-height:1.6;margin-bottom:1.5rem;max-width:46ch} @media(max-width:820px){ .closer-cta{grid-template-columns:1fr;text-align:center} .closer-cta-photo img{aspect-ratio:16/10} .closer-cta-body p{margin-inline:auto} .closer-cta .hero-cta{justify-content:center} } /* ====================== Störer: farbige Kunden-Logo-Marquee (volle Breite) ====================== */ .stoerer{padding:clamp(2.4rem,5vw,3.6rem) 0;overflow:hidden} .stoerer-lead{text-align:center;font-family:var(--font-display);font-weight:500;color:var(--muted); font-size:.95rem;letter-spacing:.02em;margin-bottom:clamp(1.3rem,3vw,1.9rem);padding-inline:var(--pad)} .stoerer-lead b{color:var(--ink);font-weight:700} .logo-wall--band{margin:0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)} .ref-stoerer{margin-top:clamp(1.8rem,4vw,2.6rem);overflow:hidden} /* ====================== Personas „ballern" (mehr Leben) ====================== */ .persona-card{position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease),opacity .3s var(--ease)} .persona-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:#cfd4da} .persona-card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--red); transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)} .persona-card:hover::after{transform:scaleX(1)} .persona-num{position:absolute;top:.7rem;right:1rem;font-family:var(--font-display);font-weight:700;font-size:2.6rem; line-height:1;color:rgba(18,18,18,.06);pointer-events:none;transition:color .25s var(--ease)} .persona-card:hover .persona-num{color:rgba(200,20,30,.13)} .persona-ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;color:#fff;background:var(--ink); margin-bottom:1.05rem;transition:background .25s var(--ease),transform .25s var(--ease)} .persona-ic svg{width:25px;height:25px} .persona-card:hover .persona-ic{background:var(--red);transform:translateY(-2px) rotate(-3deg)} .persona-card .persona-label{font-size:.82rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)} .persona-card .persona-motto{font-size:1.18rem;color:var(--ink);font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:.5rem 0 .85rem} @media(prefers-reduced-motion:reduce){ .persona-card:hover{transform:none} .persona-card:hover .persona-ic{transform:none} } /* Persona-Selektor „Welcher Typ bist Du?" */ .persona-pick{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem;margin-top:clamp(1.5rem,3vw,2.2rem)} .persona-pick-lead{font-family:var(--font-display);font-weight:500;color:var(--muted);font-size:.95rem;margin-right:.3rem} .persona-chip{font-family:var(--font-display);font-weight:500;font-size:.92rem;color:var(--ink);background:#fff; border:1.5px solid var(--hairline);border-radius:var(--r-pill);padding:.52rem 1.05rem; transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)} .persona-chip:hover{border-color:var(--ink)} .persona-chip.is-on{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 6px 16px rgba(200,20,30,.3)} .persona-grid.has-pick .persona-card:not(.is-active){opacity:.5} .persona-grid.has-pick .persona-card.is-active{opacity:1;border-color:var(--red);box-shadow:0 18px 42px rgba(200,20,30,.16)} .persona-grid.has-pick .persona-card.is-active::after{transform:scaleX(1)} .persona-grid.has-pick .persona-card.is-active .persona-ic{background:var(--red)} .persona-grid.has-pick .persona-card.is-active .persona-num{color:rgba(200,20,30,.16)} /* ====================== Echte Studio-Fotos in Teasern (+ Screen-Inlay) ====================== */ /* Teaser-Menü (Startseite: klickbares Feature-Menü statt Fließtext) */ .teaser-menu{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.55rem} .teaser-menu a{display:flex;align-items:center;gap:.85rem;padding:.7rem .9rem;border:1px solid var(--hairline); border-radius:var(--r-md);background:#fff;color:var(--ink);text-decoration:none; transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)} .teaser-menu a:hover{transform:translateX(4px);border-color:var(--red);box-shadow:var(--sh-sm)} .tm-ic{flex:0 0 auto;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(200,20,30,.08);color:var(--red)} .tm-ic svg{width:20px;height:20px} .tm-tx{display:flex;flex-direction:column;line-height:1.25;min-width:0} .tm-tx b{font-family:var(--font-display);font-weight:700;font-size:.98rem;color:var(--ink)} .tm-tx small{color:var(--muted);font-size:.82rem} .tm-go{margin-left:auto;color:var(--red);font-size:1.1rem;font-weight:700;transition:transform .18s var(--ease)} .teaser-menu a:hover .tm-go{transform:translateX(3px)} /* Features: Hervorhebung der "und vieles mehr"-Karte */ .feat-card--more{background:linear-gradient(160deg,#fff,#fff6f6);border-style:dashed;border-color:rgba(200,20,30,.45)} .feat-card--more .feat-ic{color:var(--red)} /* ROI-Kopf: kompakte Häkchen-Chips statt Textabsätze (Startseite) */ .roi-chips{list-style:none;display:flex;justify-content:center;gap:.55rem;flex-wrap:wrap;margin:1.3rem 0 1.8rem;padding:0} .roi-chips li{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-display);font-weight:500; font-size:.86rem;color:var(--ink);background:#fff;border:1px solid var(--hairline);border-radius:99px;padding:.45rem .95rem} .roi-chips li::before{content:"\2713";color:var(--red);font-weight:700} /* Funktionen-Teaser als 4 Bildkacheln nebeneinander (Startseite) */ .tmenu{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:clamp(2rem,4vw,3rem)} .tmcard{position:relative;min-height:300px;border-radius:16px;overflow:hidden;display:block;text-decoration:none;color:#fff; background:#16181c;isolation:isolate;box-shadow:0 10px 30px -14px rgba(18,18,18,.35); transition:transform .25s var(--ease),box-shadow .25s var(--ease)} .tmcard:hover{transform:translateY(-5px);box-shadow:0 24px 54px -18px rgba(18,18,18,.5)} .tmcard-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .55s var(--ease)} .tmcard:hover .tmcard-bg{transform:scale(1.07)} .tmcard::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(0deg,rgba(8,9,11,.92) 8%,rgba(8,9,11,.35) 48%,rgba(8,9,11,.05) 80%)} .tmcard:hover::after{background:linear-gradient(0deg,rgba(8,9,11,.94) 8%,rgba(200,20,30,.3) 55%,rgba(8,9,11,.05) 90%)} .tmcard-no{position:absolute;top:1rem;left:1.1rem;font-family:var(--font-display);font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)} .tmcard-no b{color:var(--red)} .tmcard-in{position:absolute;inset:0;padding:1.1rem 1.2rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.3rem} .tmcard h3{font-family:var(--font-display);font-weight:700;font-size:1.18rem;letter-spacing:-.01em;margin:0;color:#fff} .tmcard p{font-size:.9rem;color:rgba(255,255,255,.82);margin:0} .tmcard-go{margin-top:.55rem;display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-display);font-weight:700;font-size:.82rem;color:#fff;opacity:0;transform:translateY(6px);transition:opacity .25s var(--ease),transform .25s var(--ease)} .tmcard-go::after{content:"\2192";color:var(--red)} .tmcard:hover .tmcard-go{opacity:1;transform:none} @media(max-width:880px){.tmenu{grid-template-columns:1fr 1fr}} @media(max-width:520px){.tmenu{grid-template-columns:1fr}.tmcard{min-height:240px}} @media(prefers-reduced-motion:reduce){.tmcard-bg{transition:none}.tmcard-go{transition:none}} .teaser-photo{padding:0} .teaser-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)} .teaser-photo:hover>img{transform:scale(1.04)} .teaser-photo::before{opacity:0} /* roten Radial-Tint des Platzhalters aus */ .teaser-label{position:absolute;z-index:2;left:.9rem;bottom:.8rem;display:inline-flex;align-items:center;gap:.4rem; background:rgba(12,12,14,.66);backdrop-filter:blur(8px);color:#fff;font-family:var(--font-display);font-weight:500; font-size:.78rem;padding:.4rem .8rem;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.16)} .teaser-label svg{width:15px;height:15px;flex:0 0 auto;color:var(--red)} /* Screen-Inlay: macht den (im Foto schwarzen) Screen "an" */ .teaser-inlay{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9%; background:linear-gradient(160deg,#ffffff,#eef0f2);box-shadow:0 0 18px rgba(200,20,30,.4);overflow:hidden} .teaser-inlay .ti-logo{font-family:var(--font-display);font-weight:700;color:#15171a;letter-spacing:-.03em;line-height:1;font-size:clamp(9px,1.5vw,15px)} .teaser-inlay .ti-logo b{color:var(--red)} .teaser-inlay .ti-live{display:inline-flex;align-items:center;gap:3px;background:var(--red);color:#fff;font-family:var(--font-display);font-weight:700;font-size:clamp(6px,.9vw,9px);letter-spacing:.08em;padding:2px 5px;border-radius:99px} .teaser-inlay .ti-live .dot{width:4px;height:4px;border-radius:50%;background:#fff} /* Inlay-Position auf studio-stele.jpg (per Screenshot getunt) */ .ti-stele{left:37%;top:25%;width:27.5%;height:67%;transform:perspective(800px) rotateY(-4deg);border-radius:2px} /* Video im Screen (Kundenstimme; Platzhalter = Live-Channel, spaeter Testimonial-