/* ========================================================================= tricoma.energy ? Design-Layer v3 ????????????????????????????????? Ergnzt euer bestehendes tricoma_energy_v2.css. Bringt Lovable-Design-Tokens und Custom-Utilities in den Bootstrap-5-Workflow ? damit ihr im HTML primr Bootstrap-Klassen (row, col-lg-6, d-flex, gap-3, mb-4) plus ein paar tricoma-Klassen nutzen knnt, statt Tailwind-Utilities zu jagen. Reihenfolge im : 1. bootstrap.min.css 2. tricoma_energy_v2.css (bestehend) 3. tricoma_energy_v3.css (diese Datei ? berschreibt punktuell) ========================================================================= */ /* ------------------------------------------------------------------------- 1. DESIGN-TOKENS ------------------------------------------------------------------------- */ :root { /* Brand-Kern (gemappt auf eure bestehenden tricoma-Farben) */ --te-primary: #0086dd; --te-primary-hover: #006bb3; --te-primary-soft: #e6f3fc; /* dezenter Brand-Hintergrund */ --te-primary-foreground: #ffffff; --te-accent: #ff9900; /* Orange-Akzent */ --te-accent-hover: #e07e00; --te-accent-soft: #fff4e1; --te-accent-foreground: #1f2937; /* Text / Ink */ --te-ink: #1f2937; /* Haupttext */ --te-ink-soft: #5a6072; /* Flietext / Subtext */ --te-ink-mute: #9ca3af; /* Meta / Labels */ /* Flchen */ --te-bg: #ffffff; /* Standardhintergrund */ --te-surface: #f7f9fc; /* abgesetzte Section-Flche */ --te-surface-elev: #ffffff; /* gehobene Karte */ --te-muted: #f1f3f7; /* Bars/Tracks/Skeleton */ /* Linien */ --te-border: #e5e8ee; --te-border-soft: #eef0f4; /* Effekte */ --te-shadow-soft: 0 6px 18px -6px rgba(17, 24, 39, .08), 0 2px 6px -2px rgba(17, 24, 39, .05); --te-shadow-float: 0 22px 48px -18px rgba(17, 24, 39, .25), 0 6px 16px -6px rgba(17, 24, 39, .10); --te-shadow-glow: 0 0 0 1px rgba(0, 134, 221, .10), 0 30px 60px -20px rgba(0, 134, 221, .35); --te-shadow-glow-accent: 0 14px 34px -10px rgba(255, 153, 0, .45); /* Radien */ --te-radius-sm: 8px; --te-radius-md: 14px; --te-radius-lg: 22px; /* "rounded-2xl" */ --te-radius-xl: 32px; /* "rounded-3xl" */ --te-radius-pill: 9999px; /* Typo */ --te-font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --te-font-display: "Open Sans", "Inter", system-ui, sans-serif; /* Layout */ --te-container: 1400px; } /* ------------------------------------------------------------------------- 2. LAYOUT-UTILITIES ------------------------------------------------------------------------- */ /* Lovable nutzt berall .container-wide ? mehr Auenraum als .container */ .container-wide { width: 100%; max-width: var(--te-container); margin-inline: auto; padding-inline: 1.25rem; } @media (min-width: 768px) { .container-wide { padding-inline: 2rem; } } @media (min-width: 1200px) { .container-wide { padding-inline: 2.5rem; } } /* Vertikales Section-Spacing ? konsistent ber die ganze Seite */ .section-pad { padding-block: 5rem; } .section-pad-lg { padding-block: 6rem; } @media (min-width: 992px) { .section-pad { padding-block: 6rem; } .section-pad-lg { padding-block: 8rem; } } /* ------------------------------------------------------------------------- 3. FARB-UTILITIES (analog Bootstrap .bg-* / .text-*) ------------------------------------------------------------------------- */ /* Flchen */ .bg-surface { background-color: var(--te-surface); } .bg-surface-elev { background-color: var(--te-surface-elev);} .bg-primary-soft { background-color: var(--te-primary-soft);} .bg-accent-soft { background-color: var(--te-accent-soft); } .bg-muted { background-color: var(--te-muted); } .bg-ink { background-color: var(--te-ink); } .bg-ink-deep { background-color: #0f1623; } /* Text */ .text-ink { color: var(--te-ink) !important; } .text-ink-soft { color: var(--te-ink-soft) !important; } .text-ink-mute { color: var(--te-ink-mute) !important; } .text-te-primary { color: var(--te-primary) !important; } .text-te-accent { color: var(--te-accent) !important; } .text-on-primary { color: var(--te-primary-foreground) !important; } /* Borders */ .border-soft { border: 1px solid var(--te-border-soft) !important; } .border-te { border: 1px solid var(--te-border) !important; } .border-top-soft { border-top: 1px solid var(--te-border-soft) !important; } /* ------------------------------------------------------------------------- 4. RADIEN, SCHATTEN, EFFEKTE ------------------------------------------------------------------------- */ .rounded-2xl { border-radius: var(--te-radius-lg) !important; } .rounded-3xl { border-radius: var(--te-radius-xl) !important; } .rounded-pill-te { border-radius: var(--te-radius-pill) !important; } .shadow-soft { box-shadow: var(--te-shadow-soft) !important; } .shadow-float { box-shadow: var(--te-shadow-float) !important; } .shadow-glow { box-shadow: var(--te-shadow-glow) !important; } .shadow-glow-accent { box-shadow: var(--te-shadow-glow-accent) !important; } /* Sanfter Hover-Lift, der mit jedem Block kombinierbar ist */ .hover-lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .hover-lift:hover { transform: translateY(-4px); box-shadow: var(--te-shadow-float); } /* ------------------------------------------------------------------------- 5. KOMPONENTEN ------------------------------------------------------------------------- */ /* 5.1 Eyebrow / Pill-Label Beispiel: Branchen */ .te-eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border-radius: var(--te-radius-pill); background: var(--te-primary-soft); color: var(--te-primary); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1; } .te-eyebrow--accent { background: var(--te-accent-soft); color: #8a4a00; } .te-eyebrow--light { background: rgba(255, 255, 255, .18); color: #fff; backdrop-filter: blur(6px); } /* 5.2 Pill-Buttons (CTAs im Lovable-Style) Diese ergnzen eure bestehenden .cta-button-Klassen ? nicht ersetzen. */ .te-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .9rem 1.6rem; border-radius: var(--te-radius-pill); font-weight: 600; font-size: .95rem; text-decoration: none; border: 1px solid transparent; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; cursor: pointer; line-height: 1.2; } .te-btn-accent { background: var(--te-accent); color: #fff; box-shadow: var(--te-shadow-soft); } .te-btn-accent:hover { background: var(--te-accent-hover); color: #fff; transform: translateY(-2px); box-shadow: var(--te-shadow-glow-accent); } .te-btn-primary { background: var(--te-primary); color: #fff; box-shadow: 0 4px 15px rgba(0, 134, 221, .3); } .te-btn-primary:hover { background: var(--te-primary-hover); color: #fff; transform: translateY(-2px); } .te-btn-outline { background: var(--te-bg); color: var(--te-ink); border-color: var(--te-border); } .te-btn-outline:hover { border-color: var(--te-primary); background: var(--te-primary-soft); color: var(--te-ink); transform: translateY(-2px); } .te-btn-ghost-light { background: #fff; color: var(--te-primary); } .te-btn-ghost-light:hover { background: rgba(255, 255, 255, .9); color: var(--te-primary-hover); transform: translateY(-2px); } /* Pfeil-Icon, das beim Hover des Buttons mitluft */ .te-btn .te-arrow { transition: transform .2s ease; } .te-btn:hover .te-arrow { transform: translateX(4px); } /* 5.3 Icon-Chip (das farbige Quadrat mit Icon vor Feature-Texten) */ .te-icon-chip { display: inline-grid; place-items: center; width: 2.75rem; /* 44px ? wie h-11 w-11 bei Lovable */ height: 2.75rem; border-radius: 14px; background: var(--te-primary-soft); color: var(--te-primary); flex-shrink: 0; } .te-icon-chip svg { width: 1.25rem; height: 1.25rem; } .te-icon-chip--accent { background: var(--te-accent-soft); color: #8a4a00; } .te-icon-chip--lg { width: 3rem; height: 3rem; } .te-icon-chip--xl { width: 3.5rem; height: 3.5rem; border-radius: 18px; } /* Hover-Variante: fllt sich aus, wenn Eltern-.group gehovt wird */ .te-card-hover:hover .te-icon-chip { background: var(--te-primary); color: #fff; } /* 5.4 Karten Basisform fr Problem-Cards, Branchen-Cards, Feature-Cards, etc. */ .te-card { position: relative; background: var(--te-surface-elev); border: 1px solid var(--te-border-soft); border-radius: var(--te-radius-lg); padding: 1.75rem; box-shadow: var(--te-shadow-soft); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; height: 100%; } .te-card:hover { transform: translateY(-4px); border-color: rgba(0, 134, 221, .4); box-shadow: var(--te-shadow-float); } .te-card-xl { border-radius: var(--te-radius-xl); padding: 1.9rem; } .te-card-flat { box-shadow: none; } /* 5.5 Floating-Info-Card ? die kleinen Mini-Widgets im Hero */ .te-info-card { background: rgba(255, 255, 255, .95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--te-radius-lg); padding: 1rem; box-shadow: var(--te-shadow-float); font-size: .85rem; } .te-info-card .te-label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--te-primary); } /* 5.6 Bar-Chart-Track ? die animierten Sulen im Live-Lastmanagement-Mini */ .te-bar-track { display: flex; align-items: flex-end; gap: 4px; height: 3rem; } .te-bar { flex: 1; border-radius: 3px; background: linear-gradient(to top, var(--te-primary), rgba(0, 134, 221, .35)); } /* 5.7 Pulsierender Ring (fr aktive Status-Symbole im Energiefluss) */ @keyframes te-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(0, 134, 221, .35); } 70% { box-shadow: 0 0 0 14px rgba(0, 134, 221, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 134, 221, 0); } } .te-pulse-ring { animation: te-pulse-ring 2.4s ease-out infinite; } /* 5.8 Floating-Y (sanftes Auf-und-Ab fr Info-Cards) */ @keyframes te-float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .te-float-y { animation: te-float-y 5s ease-in-out infinite; } .te-float-y-slow { animation: te-float-y 7s ease-in-out infinite; } /* 5.9 Section-Hintergrnde (Mesh-Gradients) ? Lovable nutzt fr Stimmung ?bg-hero-mesh" / ?bg-gradient-mesh". */ .bg-hero-mesh { background: radial-gradient(at 85% 15%, rgba(255, 153, 0, .12), transparent 55%), radial-gradient(at 15% 85%, rgba(0, 134, 221, .14), transparent 55%), var(--te-bg); } .bg-gradient-mesh { background: radial-gradient(at 20% 20%, rgba(0, 134, 221, .9), transparent 60%), radial-gradient(at 80% 80%, rgba(255, 153, 0, .55), transparent 55%), linear-gradient(135deg, #006bb3, #0086dd); color: #fff; } .bg-gradient-accent { background: linear-gradient(135deg, #ff7a00, var(--te-accent)); } /* 5.10 Kontaktformular ? fixt das Lovable-Look-and-Feel mit Bootstrap */ .te-form .form-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--te-ink-soft); margin-bottom: .4rem; } .te-form .form-control, .te-form .form-select { border: 1px solid var(--te-border); font-size: .95rem; } .te-form .form-control:focus, .te-form .form-select:focus { border-color: var(--te-primary); box-shadow: 0 0 0 4px rgba(0, 134, 221, .12); } /* 5.11 Dunkler Footer */ .te-footer { background: #0f1623; color: rgba(255, 255, 255, .7); } .te-footer a { color: rgba(255, 255, 255, .6); text-decoration: none; transition: color .2s ease; } .te-footer a:hover { color: #fff; } .te-footer .te-footer-head { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #fff; margin-bottom: 1rem; } /* 5.12 Hilfreiche Mini-Utilities, die Bootstrap nicht hat */ .text-balance { text-wrap: balance; } .text-pretty { text-wrap: pretty; } .lh-tight { line-height: 1.1 !important; } /* Display-Heading ? grer / Tracking enger als die Bootstrap-Defaults */ .te-display { font-family: var(--te-font-display); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; font-size: clamp(2.1rem, 4.2vw, 3.25rem); } .te-display-head { font-family: var(--te-font-display); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; font-size: clamp(2.1rem, 4.2vw, 2.85rem); } .te-display--xl { font-size: clamp(2.5rem, 5.5vw, 4.5rem); } .te-card > .img, .card > .img { display: grid !important; height: calc(0.25rem * 10) !important; width: calc(0.25rem * 10) !important; place-items: center !important; border-radius: 50% !important; background-color: #d9f2ff !important; min-width: unset !important; max-width: unset !important; -webkit-mask-size: unset !important; -webkit-mask-repeat: unset !important; -webkit-mask-position: unset !important; background-image: unset !important; margin-top: unset !important; margin-right: unset !important; margin-bottom: 14px; color: #008ce4; } .te-card > .img > svg, .te-card > .img > img, .card > .img > svg, .card > .img > img { width: calc(0.25rem * 5); height: calc(0.25rem * 5); display: block; vertical-align: middle; filter: brightness(0) saturate(100%) invert(38%) sepia(99%) saturate(2374%) hue-rotate(181deg) brightness(96%) contrast(101%); } .img.img-blau > img { filter: brightness(0) saturate(100%) invert(38%) sepia(99%) saturate(2374%) hue-rotate(181deg) brightness(96%) contrast(101%); } /* Einheitlicher Bildradius auf Landingpages */ .te-landing-media .tplus_image, .te-landing-media .tplus_image img, .te-landing-media .img_slider, .te-landing-media .img_slider img, .te-landing-media .img_upload > img, .te-landing-media .img_left img, .te-landing-media .img_right img, .te-landing-media video, .te-landing-page .tplus_bildtext .tplus_image.detailbild, .te-landing-page .tplus_bildtext .tplus_image.detailbild img { border-radius: 45px !important; } .te-landing-media .tplus_image, .te-landing-media .img_slider, .te-landing-page .tplus_bildtext .tplus_image.detailbild { overflow: hidden !important; } .te-landing-page .tplus_bildtext .tplus_image.detailbild, .te-landing-page .tplus_bildtext .tplus_image.detailbild > a, .te-landing-page .tplus_bildtext .tplus_image.detailbild img, .te-landing-page .tplus_container img, .te-landing-page .tplus_container video { display: block !important; background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } .te-landing-page .tplus_bildtext .tplus_image.detailbild img, .te-landing-page .tplus_container img { width: calc(100% + 2px) !important; max-width: calc(100% + 2px) !important; margin: -1px !important; } @font-face { font-family: "Permanent Marker"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/PermanentMarker-Regular.woff2") format("woff2"), url("fonts/PermanentMarker-Regular.ttf") format("truetype"); } /* ------------------------------------------------------------------------- LANDINGPAGES: ERKLAERVIDEO AM HEADERBILD ------------------------------------------------------------------------- */ .te-landing-media { position: relative; overflow: visible; } .te-landing-media--background { overflow: visible !important; } .te-landing-video-host { overflow: visible !important; } .te-landing-video { --te-video-play-accent: #ff9900; --te-video-play-accent-rgb: 255, 153, 0; --te-video-play-fill: linear-gradient(135deg, #f8990d 0%, #fcd91f 100%); --te-video-arrow-accent-rgb: 255, 153, 0; --te-video-text-accent: #ff9900; --te-video-text-fill: linear-gradient(135deg, #ff9900 0%, #ff9900 100%); position: absolute; z-index: 8; width: min(51%, 18.75rem); pointer-events: none; } .te-landing-video--oben_links { top: -2.95rem; left: -3rem; } .te-landing-video--oben_rechts { top: -3.9rem; right: -3rem; } .te-landing-video--unten_links { bottom: -5.9rem; left: -3rem; } .te-landing-video--unten_rechts { right: -3rem; bottom: -6.75rem; } .te-landing-video__trigger { position: relative; z-index: 2; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 18px; background: #fff; line-height: 0; font-size: 0; isolation: isolate; box-shadow: 0 18px 42px -16px rgba(12, 27, 50, .46); cursor: pointer; appearance: none; pointer-events: auto; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .te-landing-video__thumbnail { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; user-select: none; -webkit-user-drag: none; vertical-align: top; transform: translateZ(0); } .te-landing-video__trigger::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: #fff; z-index: 3; pointer-events: none; } .te-landing-video__shade { display: none; } .te-landing-video__play { position: absolute; top: 50%; left: 50%; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; width: 3.75rem; height: 3.75rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, .56); border-radius: 50%; background: rgba(246, 250, 255, .74); color: #fff; box-shadow: 0 14px 30px rgba(4, 12, 30, .24); transform: translate(-50%, -50%); animation: teLandingVideoPlayPulse 2.6s ease-in-out infinite !important; transition: transform .25s ease; } .te-landing-video__play::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 50%; background: var(--te-video-play-fill); opacity: .08; animation: teLandingVideoPlayFill 2.6s ease-in-out infinite !important; } .te-landing-video__play svg { position: relative; z-index: 1; width: 2.18rem; height: 2.18rem; margin-left: .23rem; } .te-landing-video__caption { display: none; } .te-landing-video__trigger:hover .te-landing-video__play, .te-landing-video__trigger:focus-visible .te-landing-video__play { transform: translate(-50%, -50%) scale(1.08); } .te-landing-video__trigger:focus-visible { outline: 3px solid rgba(var(--te-video-play-accent-rgb), .28); outline-offset: 4px; } @keyframes teLandingVideoPlayPulse { 0%, 100% { border-color: rgba(255, 255, 255, .52); box-shadow: 0 14px 30px rgba(4, 12, 30, .24), 0 0 0 0 rgba(var(--te-video-play-accent-rgb), 0); } 50% { border-color: rgba(var(--te-video-play-accent-rgb), .92); box-shadow: 0 18px 42px rgba(var(--te-video-play-accent-rgb), .38), 0 0 0 11px rgba(var(--te-video-play-accent-rgb), .14); } } @keyframes teLandingVideoPlayFill { 0%, 100% { opacity: .08; } 50% { opacity: .72; } } .te-landing-video__arrow { position: absolute; z-index: 4; display: block; width: 81.4%; aspect-ratio: 2 / 1; pointer-events: none; filter: drop-shadow(0 8px 12px rgba(var(--te-video-arrow-accent-rgb), .18)); } .te-landing-video__arrow svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: center; } /* Unten: Text ueber dem Pfeil. Oben: Text unter dem Pfeil. */ .te-landing-video--unten_rechts .te-landing-video__arrow { left: -68%; bottom: -26%; } .te-landing-video--oben_rechts .te-landing-video__arrow { left: -68%; top: calc(-44% + .55rem); } .te-landing-video--oben_rechts .te-landing-video__arrow svg { transform: scaleY(-1); } .te-landing-video--unten_links .te-landing-video__arrow { right: -68%; bottom: -26%; } .te-landing-video--unten_links .te-landing-video__arrow svg { transform: scaleX(-1); } .te-landing-video--oben_links .te-landing-video__arrow { right: -68%; top: calc(-44% + .55rem); } .te-landing-video--oben_links .te-landing-video__arrow svg { transform: scale(-1, -1); } .te-landing-video__arrow-label { position: absolute; z-index: 5; color: var(--te-video-text-accent); background: var(--te-video-text-fill); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-family: "Permanent Marker", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-size: clamp(.7rem, 1.01vw, .9rem); font-weight: 400; font-synthesis: none; letter-spacing: .025em; line-height: 1; text-align: center; text-transform: uppercase; white-space: nowrap; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; filter: drop-shadow(0 0 .2px var(--te-video-text-accent)); opacity: 1; animation: none; } .te-landing-video--unten_rechts .te-landing-video__arrow-label { left: 22%; top: 6%; transform: translateX(-50%) rotate(-9deg); } .te-landing-video--oben_rechts .te-landing-video__arrow-label { left: 22%; bottom: 18%; transform: translateX(-50%) rotate(9deg); } .te-landing-video--unten_links .te-landing-video__arrow-label { left: 78%; top: 6%; transform: translateX(-50%) rotate(9deg); } .te-landing-video--oben_links .te-landing-video__arrow-label { left: 78%; bottom: 18%; transform: translateX(-50%) rotate(-9deg); } .te-landing-video__arrow-label { will-change: auto; } .te-landing-video__arrow-path { stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; } .te-landing-video__arrow-scratch { opacity: .55; } .te-landing-video__arrow-shaft, .te-landing-video__arrow-scratch { animation: teLandingVideoDrawShaft 3.5s cubic-bezier(.4, 0, .2, 1) infinite; } .te-landing-video__arrow-head-top { animation: teLandingVideoDrawHeadTop 3.5s cubic-bezier(.4, 0, .2, 1) infinite; } .te-landing-video__arrow-head-bottom { animation: teLandingVideoDrawHeadBottom 3.5s cubic-bezier(.4, 0, .2, 1) infinite; } @keyframes teLandingVideoArrowLabel { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 92%, 100% { opacity: 0; } } @keyframes teLandingVideoDrawShaft { 0%, 6% { stroke-dashoffset: 1000; opacity: 0; } 9% { opacity: 1; } 45%, 85% { stroke-dashoffset: 0; opacity: 1; } 92%, 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes teLandingVideoDrawHeadTop { 0%, 33% { stroke-dashoffset: 1000; opacity: 0; } 35% { opacity: 1; } 65%, 85% { stroke-dashoffset: 0; opacity: 1; } 92%, 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes teLandingVideoDrawHeadBottom { 0%, 43% { stroke-dashoffset: 1000; opacity: 0; } 45% { opacity: 1; } 75%, 85% { stroke-dashoffset: 0; opacity: 1; } 92%, 100% { stroke-dashoffset: 0; opacity: 0; } } .te-landing-video-modal { position: fixed; inset: 0; z-index: 1200; isolation: isolate; display: grid; place-items: center; padding: 1.5rem; opacity: 0; visibility: hidden; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: opacity .34s ease, visibility 0s linear .34s; } .te-landing-video-modal[hidden] { display: none; } .te-landing-video-modal__backdrop { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; background: rgba(7, 14, 31, .72) !important; opacity: 0; outline: 0; cursor: pointer; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); transition: opacity .34s ease, backdrop-filter .34s ease; } .te-landing-video-modal__dialog { position: relative; z-index: 1; width: min(94vw, 1120px); max-height: calc(100dvh - 2.5rem); overflow: hidden; border: 1px solid rgba(21, 40, 75, .1); border-top: 4px solid #0086dd; border-radius: 28px; background-clip: padding-box; background: linear-gradient(155deg, rgba(255, 255, 255, .99) 0%, rgba(246, 250, 255, .98) 100%); box-shadow: 0 34px 110px rgba(7, 14, 31, .46), 0 8px 28px rgba(0, 134, 221, .1); opacity: 0; transform: translate3d(0, 28px, 0) scale(.92); transform-origin: center; transition: transform .46s cubic-bezier(.2, .9, .2, 1), opacity .3s ease; } .te-landing-video-modal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; } .te-landing-video-modal.is-open .te-landing-video-modal__backdrop { opacity: 1; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } .te-landing-video-modal.is-open .te-landing-video-modal__dialog { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } .te-landing-video-modal.is-closing { opacity: 0; visibility: visible; transition-delay: 0s; } .te-landing-video-modal.is-closing .te-landing-video-modal__dialog { opacity: 0; transform: translate3d(0, 18px, 0) scale(.96); } .te-landing-video-modal__header { position: relative; display: grid; gap: .55rem; min-height: 5.4rem; padding: 1.35rem 5.25rem 1.25rem 1.55rem; border-bottom: 1px solid rgba(21, 40, 75, .08); background: linear-gradient(180deg, #fff 0%, #f8fbff 100%); } .te-landing-video-modal__eyebrow { display: inline-flex; align-items: center; width: max-content; min-height: 1.65rem; margin: 0; padding: .25rem .7rem; border: 1px solid rgba(0, 134, 221, .14); border-radius: 999px; background: rgba(0, 134, 221, .08); color: #0086dd; font-size: .72rem; font-weight: 700; line-height: 1; letter-spacing: .07em; text-transform: uppercase; } .te-landing-video-modal__title { --te-modal-title-source-size: 3rem; min-width: 0; width: min(var(--te-modal-title-source-width, 760px), calc(100% - 0px)); max-width: min(var(--te-modal-title-source-width, 760px), calc(100% - 0px)); margin: 0; color: #15284b; font-size: clamp(1.85rem, calc(var(--te-modal-title-source-size) * .82), 3.05rem); line-height: 1.08; letter-spacing: -.025em; overflow-wrap: normal; text-wrap: pretty; } .te-landing-video-modal__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; min-height: 2.8rem; margin-top: .15rem; } .te-landing-video-modal__cta.cta-button-orange { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; margin: 0; padding: .72rem 1.35rem; border: 0; border-radius: 999px; background: #ff9900; color: #fff; font-size: .96rem; font-weight: 700; line-height: 1; text-decoration: none; box-shadow: 0 12px 26px rgba(255, 153, 0, .24); transition: transform .2s ease, background .2s ease, box-shadow .2s ease; } .te-landing-video-modal__cta.cta-button-orange:hover, .te-landing-video-modal__cta.cta-button-orange:focus-visible { transform: translateY(-1px); background: #e98c00; color: #fff; box-shadow: 0 15px 30px rgba(255, 153, 0, .32); } .te-landing-video-modal__close { position: absolute; top: 1.15rem; right: 1.15rem; z-index: 4; width: 3rem; height: 3rem; padding: 0; border: 1px solid rgba(21, 40, 75, .12); border-radius: 50%; background: rgba(255, 255, 255, .86); color: #15284b; box-shadow: 0 10px 26px rgba(21, 40, 75, .13); cursor: pointer; appearance: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; } .te-landing-video-modal__close span::before, .te-landing-video-modal__close span::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1.1rem; height: 2px; border-radius: 99px; background: currentColor; } .te-landing-video-modal__close span::before { transform: translate(-50%, -50%) rotate(45deg); } .te-landing-video-modal__close span::after { transform: translate(-50%, -50%) rotate(-45deg); } .te-landing-video-modal__close:hover, .te-landing-video-modal__close:focus-visible { transform: scale(1.06); border-color: #dc3545; background: #dc3545; color: #fff; box-shadow: 0 10px 24px rgba(220, 53, 69, .28); } .te-landing-video-modal__frame { position: relative; padding: 1.1rem 1.2rem 1.25rem; background: transparent; } .te-landing-video-modal__frame::before { content: ""; position: absolute; inset: .95rem 1.05rem 1.05rem; z-index: 0; border-radius: 22px; background: #07101e; box-shadow: 0 18px 48px rgba(7, 14, 31, .22); } .te-landing-video-modal__frame iframe { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 20px; background: #000; user-select: none; -webkit-user-select: none; } body.te-landing-video-modal-open { overflow: hidden; } @media (max-width: 1100px) { .te-landing-video { width: min(46.5%, 16.5rem); } .te-landing-video--oben_links, .te-landing-video--unten_links { left: -1.5rem; } .te-landing-video--oben_rechts, .te-landing-video--unten_rechts { right: -1.5rem; } .te-landing-video--unten_links { bottom: -5.3rem; } .te-landing-video--unten_rechts { bottom: -6.05rem; } } @media (max-width: 989px) { .te-landing-video { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: min(68%, 25.5rem); margin: -3.75rem 0 1.5rem auto; } .te-landing-video--oben_links, .te-landing-video--unten_links { margin-right: auto; margin-left: 0; } .te-landing-video__arrow { width: 70%; } } @media (max-width: 600px) { .te-landing-video { width: 80%; margin-top: -2.25rem; } .te-landing-video__play { width: 3.5rem; height: 3.5rem; } .te-landing-video__play svg { width: 2rem; height: 2rem; } .te-landing-video__arrow { display: none; } .te-landing-video-modal { padding: .75rem; } .te-landing-video-modal__dialog { border-radius: 22px; } .te-landing-video-modal__header { min-height: 4.7rem; padding: 1.05rem 4.4rem 1rem 1rem; } .te-landing-video-modal__title { font-size: clamp(1.55rem, calc(var(--te-modal-title-source-size) * .65), 2.2rem); } .te-landing-video-modal__cta.cta-button-orange { min-height: 2.55rem; padding: .65rem 1.1rem; font-size: .9rem; } .te-landing-video-modal__eyebrow { margin-bottom: .4rem; font-size: .68rem; } .te-landing-video-modal__close { top: .8rem; right: .8rem; width: 2.7rem; height: 2.7rem; } .te-landing-video-modal__frame { padding: .75rem; } .te-landing-video-modal__frame::before { inset: .65rem; border-radius: 17px; } .te-landing-video-modal__frame iframe { border-radius: 16px; } } @media (prefers-reduced-motion: reduce) { .te-landing-video__arrow-label, .te-landing-video__arrow-path { animation: none !important; } .te-landing-video__arrow-path { stroke-dashoffset: 0; opacity: 1; } .te-landing-video__play { animation: teLandingVideoPlayPulse 4s ease-in-out infinite !important; } .te-landing-video__play::before { animation: teLandingVideoPlayFill 4s ease-in-out infinite !important; } }