/* ========================================================================= 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: 45px; /* einheitlicher Kartenradius */ --te-radius-xl: 45px; /* einheitlicher Kartenradius */ --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; --te-surface-radius: 45px; --border-radius: 45px; } /* ------------------------------------------------------------------------- 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 { display: block !important; background: transparent !important; border: 0 !important; outline: 0 !important; } .te-landing-page .tplus_bildtext .tplus_image.detailbild img { width: 100% !important; max-width: 100% !important; margin: 0 !important; } @font-face { font-family: "Permanent Marker"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/PermanentMarker.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: transparent; 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: calc(100% + 2px); max-width: none; margin: -1px; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; user-select: none; -webkit-user-drag: none; vertical-align: top; } .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; will-change: auto; } .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-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: 2147483000; isolation: isolate; pointer-events: none; overscroll-behavior: contain; 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; pointer-events: auto; touch-action: none; 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; pointer-events: auto; } .te-landing-video-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; 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; pointer-events: auto; 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; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "eyebrow eyebrow" "title actions"; align-items: center; column-gap: 1.35rem; row-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 { grid-area: 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 { grid-area: 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 { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: .75rem; min-height: 2.8rem; margin: 0; align-self: center; justify-self: end; } .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; pointer-events: auto; } .te-landing-video-modal__frame::before { display: none; } .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: transparent; box-shadow: 0 18px 48px rgba(7, 14, 31, .16); pointer-events: auto; touch-action: auto; user-select: auto; -webkit-user-select: auto; } 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: 760px) { .te-landing-video-modal__header { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "title" "actions"; padding-right: 4.4rem; } .te-landing-video-modal__actions { justify-self: start; } } @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; } } /* ========================================================================= RESPONSIVE FOUNDATION Zentrale Regeln fuer Radien, Viewport-Sicherheit und responsive Header. ========================================================================= */ html, body { width: 100%; max-width: 100%; overflow-x: hidden; } body, main, .page, .site, .site-wrapper, #page { min-width: 0; } img, video, iframe, svg { max-width: 100%; } .card, .te-card, .te-card-xl, .te-info-card, .pricing-card, .feature-card, .benefit-card, .target-group-card, .start-box, .artikel_box, .artikel_pricing, .result-box, .box_white, .box_shadow, .box_shadow_big, .tplus_box, .kontaktformular-container-all, .te-help-card, .te-help-category-card, .te-help-tutorial-card, .te-tutorial-article-card, .te-wiki-card, .te-wiki-article-card, #tricoma_energy_case_header_floating .card { border-radius: var(--te-surface-radius) !important; } .content-header.hero-gradient .carousel, .content-header.hero-gradient .te-standard-hero-media, .content-header.hero-gradient .carousel-inner, .content-header.hero-gradient .carousel-item, .content-header.hero-gradient .carousel-item > img, .content-header.hero-gradient .carousel-item > video, .content-header.hero-gradient .tplus_image.detailbild, .content-header.hero-gradient .tplus_image.detailbild img { border-radius: 45px !important; } .te-case-group, .te-service-group, .te-study-group, .content-header, section { max-width: 100%; } /* ========================================================================= MOBILE NAVIGATION ========================================================================= */ @media (max-width: 1061px) { .header { height: auto !important; min-height: 0 !important; background: rgba(255, 255, 255, .96) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .header .nav-container, .nav-container { position: relative !important; min-height: 72px !important; padding: 0 18px !important; } .header .nav-menu, .nav-menu { position: absolute !important; top: calc(100% + 10px) !important; right: 18px !important; left: 18px !important; z-index: 1000 !important; display: none !important; flex-direction: column !important; align-items: stretch !important; gap: 4px !important; margin: 0 !important; padding: 12px !important; border: 1px solid rgba(16, 43, 78, .08) !important; border-radius: 22px !important; background: rgba(255, 255, 255, .98) !important; box-shadow: 0 24px 54px rgba(16, 43, 78, .14) !important; } .header .nav-menu.active, .nav-menu.active { display: flex !important; } .header .nav-menu li, .nav-menu li, .header .nav-menu li:last-child, .nav-menu li:last-child { position: static !important; width: 100% !important; margin: 0 !important; transform: none !important; } .header .nav-link, .nav-link { display: flex !important; align-items: center !important; width: 100% !important; min-height: 44px !important; padding: 10px 13px !important; border-radius: 13px !important; } .header .nav-link:hover, .header .nav-link:focus-visible, .header .nav-link.active, .header .nav-link[aria-current="page"], .nav-link:hover, .nav-link:focus-visible, .nav-link.active, .nav-link[aria-current="page"] { background: rgba(0, 134, 221, .08) !important; color: #0086dd !important; } .header .nav-menu .cta-button-orange, .nav-menu .cta-button-orange { width: 100% !important; justify-content: center !important; margin-top: 5px !important; } .header .mobile-menu-btn, .mobile-menu-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; min-width: 44px !important; height: 44px !important; padding: 0 !important; border: 1px solid rgba(16, 43, 78, .08) !important; border-radius: 14px !important; background: rgba(255, 255, 255, .96) !important; box-shadow: 0 8px 22px rgba(16, 43, 78, .07) !important; color: #102b4e !important; font-size: 22px !important; line-height: 1 !important; } .content-header.hero-gradient > .container.bereich_center > .row, #help-banner.content-header.hero-gradient .row { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; margin: 0 !important; } .content-header.hero-gradient > .container.bereich_center > .row > [class*="col-"], #help-banner.content-header.hero-gradient .row > [class*="col-"] { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================================= TABLET HEADER Desktop bleibt unangetastet; zwischen 768 und 991 px wird einspaltig. ========================================================================= */ @media (min-width: 768px) and (max-width: 991.98px) { .content-header.hero-gradient, body .content-header.hero-gradient { min-height: 0 !important; height: auto !important; padding: 118px 0 58px !important; overflow: hidden; } .content-header.hero-gradient > .container.bereich_center { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: center !important; gap: 34px !important; width: 100% !important; max-width: 760px !important; margin-inline: auto !important; padding-inline: 24px !important; } .content-header.hero-gradient > .container.bereich_center > .columns, .content-header.hero-gradient > .container.bereich_center > .columns.six, .content-header.hero-gradient > .container.bereich_center > .columns.eight, .content-header.hero-gradient > .container.bereich_center > .columns.twelve { float: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .content-header.hero-gradient > .container.bereich_center > .columns.index2 { order: 1 !important; } .content-header.hero-gradient > .container.bereich_center > .columns:not(.index2) { order: 2 !important; } .content-header.hero-gradient h1, .content-header.hero-gradient h1.bg { max-width: 16ch; margin: 18px 0 20px !important; font-size: clamp(2.35rem, 7vw, 3.65rem) !important; font-weight: 600 !important; line-height: 1.04 !important; letter-spacing: -.045em !important; text-wrap: balance; } .content-header.hero-gradient .lead-text, .content-header.hero-gradient p.lead-text { max-width: 640px; margin: 0 0 26px !important; font-size: 1.05rem !important; line-height: 1.62 !important; } .content-header.hero-gradient .tplus_actions { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin: 0 !important; } .content-header.hero-gradient .tplus_actions > a { min-height: 48px; margin: 0 !important; } .content-header.hero-gradient .carousel, .content-header.hero-gradient .te-standard-hero-media { width: 100%; height: clamp(280px, 54vw, 390px) !important; overflow: hidden; border-radius: 45px; box-shadow: 0 20px 46px rgba(16, 43, 78, .10); } .content-header.hero-gradient .te-landing-media, .content-header.hero-gradient .tplus_image.detailbild { width: 100%; max-width: none; margin: 0 !important; } } /* ========================================================================= MOBILE HEADER Medien oben, weicher Verlauf und kompakter Inhaltsbereich darunter. ========================================================================= */ @media (max-width: 767.98px) { html, body, #page, .page, .site, .site-wrapper, main { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; overscroll-behavior-x: none !important; } .header .nav-container, .nav-container { min-height: 68px !important; } .header .logo, .nav-container .logo { max-width: 142px !important; height: auto !important; max-height: 40px !important; } .te-case-group, .te-service-group, .te-study-group, .content-header.hero-gradient { overflow-x: hidden !important; } .content-header.hero-gradient, body .content-header.hero-gradient { min-height: 0 !important; height: auto !important; padding: 72px 0 28px !important; overflow: hidden !important; background: linear-gradient(180deg, #f4f9fd 0%, #fff 82%) !important; } .content-header.hero-gradient > .container.bereich_center { display: flex !important; flex-direction: column !important; gap: 0 !important; width: 100% !important; max-width: 480px !important; margin: 0 auto !important; padding: 0 12px !important; box-sizing: border-box !important; overflow: visible !important; } .content-header.hero-gradient > .container.bereich_center > .columns, .content-header.hero-gradient > .container.bereich_center > .columns.six, .content-header.hero-gradient > .container.bereich_center > .columns.eight, .content-header.hero-gradient > .container.bereich_center > .columns.twelve { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; } .content-header.hero-gradient > .container.bereich_center > .columns:not(.index2) { position: relative !important; z-index: 1 !important; order: 1 !important; padding: 0 !important; overflow: visible !important; } .content-header.hero-gradient .te-landing-media, .content-header.hero-gradient .tplus_image.detailbild, .content-header.hero-gradient .carousel, .content-header.hero-gradient .te-standard-hero-media { position: relative !important; width: 100% !important; height: clamp(230px, 63vw, 274px) !important; min-height: 230px !important; margin: 0 !important; overflow: hidden !important; border-radius: 45px !important; box-shadow: none !important; } .content-header.hero-gradient .te-landing-media::after { content: "" !important; position: absolute !important; right: 0 !important; bottom: -1px !important; left: 0 !important; z-index: 5 !important; height: 116px !important; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 28%, rgba(255,255,255,.88) 76%, #fff 100%) !important; pointer-events: none !important; } .content-header.hero-gradient .te-landing-media img, .content-header.hero-gradient .tplus_image.detailbild img, .content-header.hero-gradient .carousel-inner, .content-header.hero-gradient .carousel-item, .content-header.hero-gradient .carousel-item img, .content-header.hero-gradient .carousel-item video { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 45px !important; } .content-header.hero-gradient .carousel-indicators { bottom: 68px !important; z-index: 6 !important; margin-bottom: 0 !important; } .content-header.hero-gradient > .container.bereich_center > .columns.index2 { position: relative !important; z-index: 7 !important; order: 2 !important; width: 100% !important; margin: -92px 0 0 !important; padding: 82px 20px 22px !important; border: 0 !important; border-radius: 0 0 34px 34px !important; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.96) 64px, #fff 92px, #fff 100%) !important; box-shadow: none !important; } .content-header.hero-gradient .tplus_bildtext_vorueberschrift { margin: 0 0 13px !important; } .content-header.hero-gradient h1, .content-header.hero-gradient h1.bg { max-width: none !important; margin: 0 0 15px !important; font-size: clamp(2rem, 9vw, 2.55rem) !important; line-height: 1.035 !important; letter-spacing: -.04em !important; text-wrap: balance; } .content-header.hero-gradient .lead-text, .content-header.hero-gradient p.lead-text { margin: 0 0 20px !important; font-size: .94rem !important; line-height: 1.52 !important; } .content-header.hero-gradient .tplus_actions { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; width: 100% !important; margin: 0 !important; margin-bottom: 0 !important; } .content-header.hero-gradient .tplus_actions > a, .content-header.hero-gradient .cta-button, .content-header.hero-gradient .te-btn { width: 100% !important; min-height: 48px !important; justify-content: center !important; margin: 0 !important; text-align: center !important; } .content-header.img-back { min-height: 520px !important; height: auto !important; padding: 112px 18px 34px !important; justify-content: flex-end !important; background-position: center !important; } .content-header.img-back .banner-content { width: 100% !important; max-width: 560px !important; padding: 22px 18px !important; border: 0 !important; border-radius: 45px !important; background: rgba(255, 255, 255, .93) !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .content-header.img-back .banner-content h1 { margin: 8px 0 12px !important; padding: 0 !important; font-size: clamp(1.85rem, 9vw, 2.55rem) !important; line-height: 1.08 !important; } .content-header.img-back .header-description { max-width: none !important; text-align: left !important; } .te-case-carousel, .te-service-carousel, .te-study-carousel { max-width: 100% !important; } .te-case-carousel-viewport, .te-service-carousel-viewport, .te-study-carousel-viewport { max-width: 100vw !important; overscroll-behavior-x: contain !important; } } /* ========================================================================= LEGACY LANDINGPAGE HEADER TEMPLATES (MOBILE) Bild-, Video-, Audio- und Slider-Varianten nutzen mobil denselben Aufbau. ========================================================================= */ @media (max-width: 767.98px) { .te-landing-media, .te-landing-video-host, .content-header.img-back, .hero-header.te-landing-media { position: relative !important; } .ai_header_v1, .ai_header_v3, .ai_header_v4, .header_videolinks, .header_videorechts, .header_videorechtsgross, .header_bildlinks, .header_bildlinksgross, .header_bildrechtsgross, .header_bildsliderrechtsgross { padding: 76px 0 34px !important; overflow: hidden !important; background: linear-gradient(180deg, #f4f9fd 0%, #fff 82%) !important; } .ai_header_v1 > .container, .header_videolinks > .container, .header_videorechts > .container, .header_videorechtsgross > .container, .header_bildlinks > .container, .header_bildlinksgross > .container, .header_bildrechtsgross > .container, .header_bildsliderrechtsgross > .container { display: flex !important; flex-direction: column !important; gap: 0 !important; width: 100% !important; max-width: 480px !important; margin: 0 auto !important; padding: 0 12px !important; } .ai_header_v1 > .container > .columns, .header_videolinks > .container > .columns, .header_videorechts > .container > .columns, .header_videorechtsgross > .container > .columns, .header_bildlinks > .container > .columns, .header_bildlinksgross > .container > .columns, .header_bildrechtsgross > .container > .columns, .header_bildsliderrechtsgross > .container > .columns { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .ai_header_v1 > .container > .columns:last-child, .header_videorechts > .container > .columns:last-child, .header_videorechtsgross > .container > .columns:last-child, .header_bildlinks > .container > .columns:first-child, .header_bildlinksgross > .container > .columns:first-child, .header_bildrechtsgross > .container > .columns:last-child, .header_bildsliderrechtsgross > .container > .columns:last-child { order: 1 !important; } .ai_header_v1 > .container > .columns:first-child, .header_videorechts > .container > .columns:first-child, .header_videorechtsgross > .container > .columns:first-child, .header_bildlinks > .container > .columns:last-child, .header_bildlinksgross > .container > .columns:last-child, .header_bildrechtsgross > .container > .columns:first-child, .header_bildsliderrechtsgross > .container > .columns:first-child { position: relative !important; z-index: 4 !important; order: 2 !important; margin-top: -52px !important; padding: 72px 18px 20px !important; border-radius: 0 0 34px 34px !important; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 58px, #fff 100%) !important; } .ai_header_v1 .ai_header_wrapper_contents, .header_videolinks .big_vid, .header_videorechts .big_vid, .header_videorechtsgross .big_vid, .header_bildlinks .tplus_image, .header_bildlinksgross .tplus_image, .header_bildrechtsgross .tplus_image, .header_bildsliderrechtsgross .tplus_image, .header_bildsliderrechtsgross .carousel { position: relative !important; width: 100% !important; height: clamp(230px, 64vw, 280px) !important; min-height: 230px !important; margin: 0 !important; overflow: hidden !important; border-radius: 45px !important; box-shadow: none !important; } .ai_header_v1 video, .header_videolinks video, .header_videorechts video, .header_videorechtsgross video, .header_bildlinks img, .header_bildlinksgross img, .header_bildrechtsgross img, .header_bildsliderrechtsgross img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 45px !important; } .content-header.hero-gradient ul.functions_list, .content-header.hero-gradient .functions_list, .ai_header_v1 ul.functions_list, .ai_header_v3 ul.functions_list, .ai_header_v4 ul.functions_list, .header_videolinks ul.functions_list, .header_videorechts ul.functions_list, .header_videorechtsgross ul.functions_list, .header_bildlinks ul.functions_list, .header_bildlinksgross ul.functions_list, .header_bildrechtsgross ul.functions_list, .header_bildsliderrechtsgross ul.functions_list { margin-bottom: 30px !important; padding-bottom: 0 !important; } .ai_header_v1 .tplus_actions, .ai_header_v3 .tplus_actions, .ai_header_v4 .tplus_actions, .header_videolinks .tplus_actions, .header_videorechts .tplus_actions, .header_videorechtsgross .tplus_actions, .header_bildlinks .tplus_actions, .header_bildlinksgross .tplus_actions, .header_bildrechtsgross .tplus_actions, .header_bildsliderrechtsgross .tplus_actions { margin-top: 24px !important; } } /* ========================================================================= DETAIL-LANDINGPAGE HEADER Gemeinsames Grundsystem fuer Leistungen, Anwendungsfaelle und Case Studies. ========================================================================= */ .te-detail-hero { position: relative; overflow: hidden; padding: 112px 0 78px; background: linear-gradient(180deg, #fff 0%, #f5f9fd 100%); } .te-detail-hero::before { content: ""; position: absolute; top: 40px; right: -220px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 134, 221, .08) 0%, rgba(0, 134, 221, 0) 70%); pointer-events: none; } .te-detail-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr); align-items: center; gap: clamp(48px, 7vw, 104px); } .te-detail-hero--media-left .te-detail-hero-media { order: 1; } .te-detail-hero--media-left .te-detail-hero-content { order: 2; } .te-detail-hero-content { min-width: 0; } .te-detail-hero-kicker { display: inline-flex; align-items: center; margin-bottom: 18px; padding: 7px 13px; border-radius: 999px; background: rgba(0, 134, 221, .10); color: var(--primary-blue, #0086dd); font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .te-detail-hero h1, .te-detail-hero h1.bg { margin: 0 0 22px !important; padding: 0 !important; color: #102b4e; font-size: clamp(2.75rem, 4.5vw, 5rem) !important; line-height: 1.02 !important; letter-spacing: -.045em; } .te-detail-hero-description, .te-detail-hero-description p { margin: 0; color: rgba(16, 43, 78, .70); font-size: 1.1rem; line-height: 1.62; } .te-detail-hero-bullets { margin-top: 24px; } .te-detail-hero-actions { margin-top: 28px; } .te-detail-hero-kicker:empty, .te-detail-hero-actions:empty, .te-detail-hero-bullets:empty { display: none !important; } .te-detail-hero-media { position: relative; min-width: 0; aspect-ratio: 1.12 / 1; overflow: hidden; border-radius: 45px; background: #e8f1f8; box-shadow: 0 24px 60px rgba(16, 43, 78, .12); } .te-detail-hero-media > img, .te-detail-hero-media > video, .te-detail-hero-media .te-detail-hero-media-fill, .te-detail-hero-media .te-detail-hero-media-fill > img, .te-detail-hero-media .te-detail-hero-media-fill > video { display: block; width: 100%; height: 100%; object-fit: cover; } .te-detail-hero-media .te-landing-video-trigger, .te-detail-hero-media .te-landing-video-overlay { z-index: 3; } .te-detail-hero-media--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; } .te-detail-hero-media--pair img, .te-detail-hero-media--compare .cd-image-container, .te-detail-hero-media--compare figure, .te-detail-hero-media--compare img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; border-radius: 34px; } .te-detail-hero-media--compare { padding: 12px; } .te-detail-hero-audio { position: absolute; right: 22px; bottom: 22px; left: 22px; z-index: 2; padding: 14px; border-radius: 22px; background: rgba(255, 255, 255, .93); } .te-detail-hero-audio audio { width: 100%; } .te-detail-hero-bullets ul.functions_list, .te-detail-hero-bullets ul, .te-detail-hero-bullets ol { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; width: 100% !important; margin: 0 !important; padding: 0 !important; } .te-detail-hero-bullets li { width: 100% !important; margin: 0 !important; box-sizing: border-box; } @media (max-width: 989px) { .te-detail-hero { padding: 92px 0 60px; } .te-detail-hero-grid { grid-template-columns: 1fr; gap: 32px; } .te-detail-hero-media { order: 1 !important; } .te-detail-hero-content { order: 2 !important; } } @media (max-width: 767.98px) { .te-detail-hero, body .te-detail-hero { padding: 14px 0 44px !important; background: linear-gradient(180deg, #f6fafe 0%, #fff 74%) !important; } .te-detail-hero::before { display: none; } .te-detail-hero > .container, .te-detail-hero .container.bereich_center { width: 100% !important; max-width: none !important; padding: 0 16px !important; box-sizing: border-box !important; } .te-detail-hero-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; } .te-detail-hero-media { order: 1 !important; width: 100% !important; aspect-ratio: 1.18 / 1 !important; border-radius: 45px !important; box-shadow: none !important; } .te-detail-hero-media::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; height: 34%; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.82) 72%, #fff 100%); pointer-events: none; } .te-detail-hero-content { position: relative; z-index: 3; order: 2 !important; width: calc(100% - 12px) !important; margin: -38px auto 0 !important; padding: 24px 8px 0 !important; border-radius: 34px 34px 0 0; background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.98) 76%, rgba(255,255,255,0) 100%); box-sizing: border-box; } .te-detail-hero-kicker { margin-bottom: 15px; padding: 6px 11px; font-size: .68rem; } .te-detail-hero h1, .te-detail-hero h1.bg { margin-bottom: 18px !important; font-size: clamp(2.05rem, 10vw, 3rem) !important; line-height: 1.04 !important; letter-spacing: -.04em !important; text-wrap: balance; } .te-detail-hero h1 *, .te-detail-hero h1.bg * { color: inherit !important; } .te-detail-hero-description, .te-detail-hero-description p { font-size: .96rem; line-height: 1.58; } .te-detail-hero-bullets { margin-top: 18px; } .te-detail-hero-actions, .te-detail-hero-actions .tplus_actions { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; width: 100% !important; margin-top: 22px !important; } .te-detail-hero-actions > a, .te-detail-hero-actions a, .te-detail-hero-actions .cta-button, .te-detail-hero-actions .te-btn { width: 100% !important; min-height: 48px !important; margin: 0 !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; } .te-detail-hero-media--pair { gap: 8px; padding: 8px; } .te-detail-hero-media--pair img, .te-detail-hero-media--compare .cd-image-container, .te-detail-hero-media--compare figure, .te-detail-hero-media--compare img { border-radius: 37px; } .te-detail-hero-bullets ul.functions_list, .te-detail-hero-bullets ul, .te-detail-hero-bullets ol { grid-template-columns: 1fr; } } /* ========================================================================= MOBILE EXPLAINER VIDEO Das Video wird mobil unter den Header-Aktionen platziert. CMS-Pfeile bleiben mobil verborgen; Desktop-Position und -Darstellung bleiben unveraendert. ========================================================================= */ .te-mobile-landing-video-slot { display: none; } @media (max-width: 767.98px) { .te-mobile-landing-video-slot, .content-header.hero-gradient .te-mobile-landing-video-slot { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 10px 0 18px !important; padding: 0 !important; overflow: visible !important; } .te-mobile-landing-video-slot:empty { display: none !important; } .te-mobile-landing-video-slot > .te-landing-video, .te-mobile-landing-video-slot > .te-landing-video--mobile-after-actions { position: relative !important; inset: auto !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; transform: none !important; overflow: visible !important; } .te-mobile-landing-video-slot .te-landing-video__trigger { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9 !important; margin: 0 !important; overflow: hidden !important; border-radius: 24px !important; box-shadow: 0 14px 34px rgba(16, 43, 78, .14) !important; pointer-events: auto !important; touch-action: manipulation !important; } .te-mobile-landing-video-slot .te-landing-video__thumbnail { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 24px !important; } .te-mobile-landing-video-slot .te-landing-video__play { width: 48px !important; height: 48px !important; } .te-mobile-landing-video-slot .te-landing-video__play svg { width: 26px !important; height: 26px !important; } .te-landing-video__arrow, .te-landing-video__arrow-label, .te-landing-video__arrow::before, .te-mobile-landing-video-slot .te-landing-video__arrow, .te-mobile-landing-video-slot .te-landing-video__arrow-label, .te-mobile-landing-video-slot .te-landing-video__arrow::before, .te-mobile-landing-video-slot .te-landing-video__arrow svg { display: none !important; content: none !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; max-width: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; opacity: 0 !important; visibility: hidden !important; } .te-landing-video-modal { position: fixed !important; inset: 0 !important; display: grid; place-items: center !important; width: 100vw !important; height: 100dvh !important; min-height: 100dvh !important; padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important; overflow: hidden !important; } .te-landing-video-modal__dialog { width: 100% !important; max-width: 720px !important; max-height: calc(100dvh - 20px) !important; margin: 0 !important; overflow: auto !important; border-radius: 24px !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .te-landing-video-modal__header { position: relative !important; z-index: 2 !important; min-height: 0 !important; padding: 14px 54px 12px 14px !important; } .te-landing-video-modal__eyebrow, .te-landing-video-modal__actions { display: none !important; } .te-landing-video-modal__title { font-size: clamp(1.15rem, 5vw, 1.6rem) !important; line-height: 1.15 !important; } .te-landing-video-modal__close { position: absolute !important; top: 10px !important; right: 10px !important; width: 38px !important; height: 38px !important; } .te-landing-video-modal__frame { padding: 10px !important; } .te-landing-video-modal__frame iframe { display: block !important; width: 100% !important; min-height: 0 !important; aspect-ratio: 16 / 9 !important; border-radius: 18px !important; box-shadow: none !important; } body.te-landing-video-modal-open { overflow: hidden !important; touch-action: none; } body.te-landing-video-modal-open .te-landing-video-modal__dialog, body.te-landing-video-modal-open .te-landing-video-modal__frame, body.te-landing-video-modal-open .te-landing-video-modal__frame iframe { touch-action: auto !important; } } /* ========================================================================= CARD TITLE CLAMP ========================================================================= */ @media (min-width: 768px) { .te-case-card-title, .te-service-card-title, .te-study-card-title { display: -webkit-box !important; overflow: hidden !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; max-height: 2.52em !important; padding-bottom: .08em !important; line-height: 1.22 !important; text-overflow: ellipsis !important; white-space: normal !important; } } /* ========================================================================= STARTSEITE: RESPONSIVE HOME EXPERIENCE Eigene, klar abgegrenzte Komponenten fuer die Startseiten-Module. Desktop bleibt bewusst nah am bestehenden Layout; Mobile wird kompakter, besser lesbar und nutzt horizontale Snap-Bereiche statt langer Kartenlisten. ========================================================================= */ .te-home-hero { padding: 150px 0 80px; background: radial-gradient(at 80% 20%, oklch(78% .17 60 / .18), transparent 55%), radial-gradient(at 20% 80%, oklch(62% .17 245 / .22), transparent 55%), oklch(.985 .005 240); } .te-home-hero-media, .te-home-solution-image, .te-home-case-card, .te-home-audience-card, .te-home-contact-shell, .te-home-contact-form { border-radius: 45px; } .te-home-hero-title-mobile { display: none; } .te-home-solution-image { display: block; width: 100%; height: auto; } .te-home-case-shell { padding: clamp(1.75rem, 2.5vw, 2.4rem); border-radius: 45px; } .te-home-case-layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(560px, 680px); align-items: center; gap: clamp(1.75rem, 2.4vw, 2.75rem); } .te-home-case-copy { min-width: 0; } .te-home-case-intro { max-width: 44rem; margin: 1.6rem 0 1.5rem; line-height: 1.6; } .te-home-case-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 34rem; margin-top: 1.3rem; } .te-home-case-fact { display: flex; flex-direction: column; gap: 3px; min-height: 92px; padding: 17px 19px; border: 0; border-radius: 0; background: transparent; color: #fff; } .te-home-case-fact strong { font-size: 1.25rem; line-height: 1.15; } .te-home-case-fact span { color: rgba(255, 255, 255, .76); font-size: .82rem; line-height: 1.35; } .te-home-case-actions { max-width: 19rem; margin-top: 1.5rem !important; } .te-home-case-card, .te-home-case-card *, .te-home-audience-card, .te-home-audience-card * { box-sizing: border-box; } .te-home-case-card { position: relative; display: block; width: 100%; max-width: 680px; justify-self: end; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 45px; background: #dfeaf4; color: inherit !important; text-decoration: none !important; transform: translateZ(0); transition: transform .28s ease; } .te-home-case-card:hover, .te-home-case-card:focus-visible { color: inherit !important; text-decoration: none !important; transform: translateY(-5px); } .te-home-case-card:focus-visible { outline: 3px solid rgba(49, 227, 242, .35); outline-offset: 4px; } .te-home-case-card-media, .te-home-case-card-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: inherit; } .te-home-case-card-media { overflow: hidden; } .te-home-case-card-media img { object-fit: cover; object-position: center; transition: transform .48s ease; } .te-home-case-card:hover .te-home-case-card-media img, .te-home-case-card:focus-visible .te-home-case-card-media img { transform: scale(1.035); } .te-home-case-card-panel { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: flex; flex-direction: column; min-height: 118px; height: 118px; padding: 16px 18px 52px; border-radius: 26px; background: rgba(255, 255, 255, .93); overflow: hidden; transition: height .36s cubic-bezier(.22, .8, .25, 1); } .te-home-case-card:hover .te-home-case-card-panel, .te-home-case-card-panel:hover, .te-home-case-card:focus-visible .te-home-case-card-panel, .te-home-case-card-panel:focus-within { height: calc(100% - 32px); } .te-home-case-card-kicker { margin-bottom: 8px; color: var(--te-primary); font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .te-home-case-card-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-width: 0; flex: 0 0 auto; } .te-home-case-card-panel h3 { display: -webkit-box; min-width: 0; margin: 0; padding-bottom: .14em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--te-ink) !important; font-size: clamp(1.35rem, 1.55vw, 1.65rem); line-height: 1.24; letter-spacing: -.025em; } .te-home-case-card-arrow { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-top: 1px; color: var(--te-primary); } .te-home-case-card-arrow svg { width: 20px; height: 20px; transition: transform .3s ease; } .te-home-case-card:hover .te-home-case-card-arrow svg, .te-home-case-card-panel:hover .te-home-case-card-arrow svg, .te-home-case-card:focus-visible .te-home-case-card-arrow svg, .te-home-case-card-panel:focus-within .te-home-case-card-arrow svg { transform: rotate(180deg); } .te-home-case-card-details { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; max-height: 0; margin-top: 0; opacity: 0; visibility: hidden; transform: translateY(10px); overflow: hidden; transition: max-height .26s ease, opacity .18s ease, visibility .18s ease, transform .26s ease, margin-top .26s ease; } .te-home-case-card:hover .te-home-case-card-details, .te-home-case-card-panel:hover .te-home-case-card-details, .te-home-case-card:focus-visible .te-home-case-card-details, .te-home-case-card-panel:focus-within .te-home-case-card-details { max-height: 1000px; margin-top: 12px; opacity: 1; visibility: visible; transform: translateY(0); } .te-home-case-card-description { margin: 0 0 12px; color: rgba(16, 43, 78, .68); font-size: .98rem; line-height: 1.48; } .te-home-case-card-bullets { min-height: 0; padding-right: 5px; overflow-y: auto; color: rgba(16, 43, 78, .68); scrollbar-width: thin; scrollbar-color: rgba(0, 134, 221, .28) transparent; } .te-home-case-card-bullets::-webkit-scrollbar, .te-home-audience-card-bullets::-webkit-scrollbar { width: 5px; } .te-home-case-card-bullets::-webkit-scrollbar-thumb, .te-home-audience-card-bullets::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(0, 134, 221, .28); } .te-home-case-card-bullets ul, .te-home-case-card-bullets ol, .te-home-case-card-bullets ul.functions_list, .te-home-audience-card-bullets ul, .te-home-audience-card-bullets ol, .te-home-audience-card-bullets ul.functions_list { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .te-home-case-card-bullets li, .te-home-case-card-bullets ul.functions_list li, .te-home-audience-card-bullets li, .te-home-audience-card-bullets ul.functions_list li { display: grid !important; grid-template-columns: 18px minmax(0, 1fr) !important; align-items: start !important; gap: 9px !important; width: 100% !important; margin: 0 0 9px !important; padding: 0 !important; font-size: .94rem !important; line-height: 1.42 !important; } .te-home-case-card-bullets li::before, .te-home-case-card-bullets li::after, .te-home-audience-card-bullets li::before, .te-home-audience-card-bullets li::after { display: none !important; content: none !important; } .te-home-card-check { display: block; width: 18px; height: 18px; min-width: 18px; margin-top: 1px; color: var(--primary-orange, #ff9900); } .te-home-case-card-link { position: absolute; right: 18px; bottom: 15px; left: 18px; display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 0; color: var(--te-primary); font-size: .98rem; font-weight: 700; } .te-home-case-card-link svg { width: 16px; height: 16px; transition: transform .18s ease; } .te-home-case-card:hover .te-home-case-card-link svg, .te-home-case-card-panel:hover .te-home-case-card-link svg, .te-home-case-card:focus-visible .te-home-case-card-link svg, .te-home-case-card-panel:focus-within .te-home-case-card-link svg { transform: translateX(3px); } .te-home-audience-item { display: flex; } .te-home-audience-card { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 45px; background: #dfeaf4; color: inherit !important; text-decoration: none !important; transform: translateZ(0); transition: transform .3s ease; } .te-home-audience-card:hover, .te-home-audience-card:focus-visible { color: inherit !important; text-decoration: none !important; transform: translateY(-5px); } .te-home-audience-card:focus-visible { outline: 3px solid rgba(0, 134, 221, .22); outline-offset: 4px; } .te-home-audience-card-media, .te-home-audience-card-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: inherit; } .te-home-audience-card-media { overflow: hidden; } .te-home-audience-card-media img { object-fit: cover; transition: transform .48s ease; } .te-home-audience-card:hover .te-home-audience-card-media img, .te-home-audience-card:focus-visible .te-home-audience-card-media img { transform: scale(1.035); } .te-home-audience-card-panel { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: flex; flex-direction: column; min-height: 118px; height: 118px; padding: 16px 18px 50px; border-radius: 26px; background: rgba(255, 255, 255, .93); overflow: hidden; transition: height .36s cubic-bezier(.22, .8, .25, 1); } .te-home-audience-card-panel:hover, .te-home-audience-card:focus-visible .te-home-audience-card-panel, .te-home-audience-card-panel:focus-within { height: calc(100% - 32px); } .te-home-audience-card-top { display: flex; align-items: flex-start; gap: 14px; min-width: 0; margin-bottom: 0; } .te-home-audience-card h3 { display: -webkit-box; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0 42px .14em 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--te-ink) !important; font-size: clamp(1.35rem, 1.55vw, 1.65rem); line-height: 1.24; letter-spacing: -.025em; } .te-home-audience-card-icon { position: absolute; top: 15px; right: 16px; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 4px; z-index: 5; } .te-home-audience-card-icon img { display: block; width: 34px; height: 34px; object-fit: contain; } .te-home-audience-card-arrow { position: absolute; top: 15px; right: 16px; bottom: auto; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 26px; height: 26px; color: var(--te-primary); z-index: 6; } .te-home-audience-card-arrow svg { width: 20px; height: 20px; transition: transform .28s ease; } .te-home-audience-card-panel:hover .te-home-audience-card-arrow svg, .te-home-audience-card:focus-visible .te-home-audience-card-arrow svg, .te-home-audience-card-panel:focus-within .te-home-audience-card-arrow svg { transform: rotate(180deg); } .te-home-audience-card-details { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; max-height: 0; margin-top: 0; opacity: 0; visibility: hidden; transform: translateY(8px); overflow: hidden; transition: max-height .28s ease, margin-top .28s ease, opacity .18s ease, visibility .18s ease, transform .28s ease; } .te-home-audience-card-panel:hover .te-home-audience-card-details, .te-home-audience-card:focus-visible .te-home-audience-card-details, .te-home-audience-card-panel:focus-within .te-home-audience-card-details { max-height: 1000px; margin-top: 12px; opacity: 1; visibility: visible; transform: translateY(0); } .te-home-audience-card-description { margin: 0 0 12px; color: rgba(16, 43, 78, .66); font-size: .98rem; line-height: 1.48; } .te-home-audience-card-bullets { min-height: 0; padding-right: 5px; overflow-y: auto; color: rgba(16, 43, 78, .66); scrollbar-width: thin; scrollbar-color: rgba(0, 134, 221, .28) transparent; } .te-home-audience-card-link { position: absolute; right: 54px; bottom: 16px; left: 18px; display: inline-flex; align-items: center; gap: 9px; max-width: none; margin: 0; padding: 0; color: var(--te-primary); font-size: .98rem; font-weight: 700; } .te-home-audience-card-link svg { width: 16px; height: 16px; transition: transform .18s ease; } .te-home-audience-card-panel:hover .te-home-audience-card-link svg, .te-home-audience-card:focus-visible .te-home-audience-card-link svg, .te-home-audience-card-panel:focus-within .te-home-audience-card-link svg { transform: translateX(3px); } .te-home-brand-card img { max-width: min(100%, 220px); height: auto; object-fit: contain; } .te-home-brand-item:nth-child(2) .te-home-brand-card img { height: 33px; } .te-home-brand-card.is-current img { height: 46px; } @media (min-width: 992px) { .te-home-group-brands { padding-top: 56px; } .te-home-case-layout { display: flex; align-items: stretch; justify-content: space-between; width: 100%; } .te-home-case-copy { flex: 1 1 0; min-width: 0; } .te-home-case-card { flex: 0 1 640px; width: min(48vw, 640px); max-width: 640px; min-height: 360px; align-self: stretch; aspect-ratio: auto; margin-right: 0; margin-left: auto; justify-self: auto; } .te-home-group-brands .te-home-brand-track { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; width: min(100%, 430px); margin: 0 0 0 auto !important; } .te-home-group-brands .te-home-brand-item { width: 100%; max-width: none; padding: 0 !important; } .te-home-group-brands .te-home-brand-card { min-height: 170px; margin: 0 !important; padding: 24px 28px !important; } .te-home-group-brands .te-home-brand-card img { display: block; width: auto; height: 52px; max-width: none; max-height: none; object-fit: contain; object-position: left center; } .te-home-group-brands .te-home-brand-item:nth-child(2) .te-home-brand-card img { height: 47px; } .te-home-group-brands .te-home-brand-card.is-current img { height: 66px; } .te-home-group-brands .te-home-brand-card h3 { margin-top: 14px !important; margin-bottom: 8px !important; font-size: 1rem !important; } .te-home-group-brands .te-home-brand-card p { margin-bottom: 22px !important; font-size: .8rem !important; } } @media (min-width: 768px) and (max-width: 991.98px) { .te-home-case-layout { grid-template-columns: 1fr; } .te-home-case-card { max-width: 560px; justify-self: start; } } @media (max-width: 767.98px) { .te-home-hero, body .te-home-hero { padding: 68px 0 24px !important; background: radial-gradient(circle at 85% 10%, rgba(255, 153, 0, .12), transparent 34%), radial-gradient(circle at 10% 45%, rgba(0, 134, 221, .12), transparent 42%), linear-gradient(180deg, #f4f9fd 0%, #ffffff 88%) !important; } .te-home-hero > .container.bereich_center { max-width: 540px !important; padding-inline: 16px !important; } .te-home-hero > .container.bereich_center > .te-home-hero-visual { padding: 10px 8px 0 !important; } .te-home-hero .te-home-hero-media { height: clamp(220px, 58vw, 280px) !important; min-height: 0 !important; padding: 0 !important; overflow: visible !important; border-radius: 45px !important; } .te-home-hero .te-home-hero-media video { width: 100% !important; height: 100% !important; object-fit: contain !important; border-radius: 45px !important; } .te-home-hero > .container.bereich_center > .te-home-hero-copy { margin: 0 !important; padding: 30px 4px 0 !important; border-radius: 0 !important; background: transparent !important; } .te-home-hero .tplus_bildtext_vorueberschrift { display: none !important; } .te-home-hero-title-desktop { display: none !important; } .te-home-hero-title-mobile { display: inline !important; } .te-home-hero h1, .te-home-hero h1.bg { max-width: 100% !important; margin-bottom: 14px !important; font-size: clamp(2rem, 8vw, 2.35rem) !important; line-height: 1.02 !important; letter-spacing: -.045em !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; } .te-home-hero .lead-text, .te-home-hero p.lead-text, .te-home-hero-audience { display: none !important; } .content-header.hero-gradient.te-home-hero .tplus_actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: 56px !important; } .te-home-hero .tplus_actions > a, .te-home-hero .cta-button, .te-home-hero .te-btn { min-width: 0 !important; min-height: 46px !important; padding-inline: 12px !important; font-size: .86rem !important; white-space: normal !important; } .te-home-problems, .te-home-solution, .te-home-audiences, .te-home-project, .te-home-group, .te-home-contact { padding-block: 56px !important; } .te-home-case { margin-bottom: 0 !important; padding-block: 48px !important; } .te-home-problems .container-wide, .te-home-solution .container-wide, .te-home-case .container-wide, .te-home-audiences .container-wide, .te-home-project .container-wide, .te-home-group .container-wide, .te-home-contact .container-wide { padding-inline: 16px; } .te-home-case { width: 100%; padding-inline: 0 !important; } .te-home-case .container-wide { width: 100% !important; max-width: none !important; margin-inline: 0 !important; padding-inline: 16px !important; } .te-home-case-shell { width: 100%; margin-inline: 0 !important; } .te-home-section-heading, .te-home-problems .te-home-section-heading { text-align: left !important; } .te-home-problems .tplus_bildtext_vorueberschrift, .te-home-solution .tplus_bildtext_vorueberschrift, .te-home-case .tplus_bildtext_vorueberschrift, .te-home-audiences .tplus_bildtext_vorueberschrift, .te-home-project .tplus_bildtext_vorueberschrift, .te-home-group .tplus_bildtext_vorueberschrift, .te-home-contact .tplus_bildtext_vorueberschrift { display: inline-flex !important; margin: 0 !important; padding: 4px 9px !important; font-size: .64rem !important; line-height: 1.1 !important; vertical-align: top; } .te-home-problems h2, .te-home-audiences h2, .te-home-project h2, .te-home-group h2, .te-home-contact h2, .te-home-case h2, .te-home-solution .te-display-head { margin-top: 8px !important; font-size: 1.65rem !important; line-height: 1.08 !important; letter-spacing: -.03em !important; text-wrap: balance; } .te-home-problems .fs-5, .te-home-audiences .fs-5, .te-home-project .fs-5, .te-home-group .fs-5, .te-home-contact .fs-5, .te-home-solution .fs-5 { font-size: .95rem !important; line-height: 1.52 !important; } .te-home-problems .te-home-section-heading > p { display: none !important; } .te-home-audiences .te-home-section-heading > p { margin-top: 14px !important; margin-bottom: 0 !important; } .te-home-problem-grid { --bs-gutter-x: 0; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; margin: 24px 0 0 !important; } .te-home-problem-grid > [class*="col-"] { width: auto !important; max-width: none !important; padding: 0 !important; } .te-home-problem-card { display: grid !important; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; align-items: start; column-gap: 8px; row-gap: 6px; min-height: 156px; padding: 13px 11px !important; border-radius: 45px !important; box-shadow: 0 8px 24px -16px rgba(16, 43, 78, .35) !important; transform: none !important; transition: none !important; } .te-home-problem-card:hover, .te-home-problem-card:focus, .te-home-problem-card:focus-within, .te-home-problem-card:active { transform: none !important; border-color: var(--te-border-soft) !important; box-shadow: 0 8px 24px -16px rgba(16, 43, 78, .35) !important; } .te-home-problem-card > .img { grid-row: 1; width: 36px !important; height: 36px !important; margin: 0 !important; } .te-home-problem-card > .img img { width: 21px !important; height: 21px !important; } .te-home-problem-card h3 { align-self: center; margin: 0 !important; font-size: .82rem !important; line-height: 1.22 !important; } .te-home-problem-card p { display: -webkit-box !important; grid-column: 1 / -1; margin: 0 !important; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; font-size: .66rem !important; line-height: 1.38 !important; } .te-home-problems-cta { margin-top: 18px !important; padding: 24px 20px !important; border-radius: 45px !important; gap: 16px !important; } .te-home-problems-cta .te-display { font-size: 1.55rem !important; } .te-home-problems-cta .te-section-intro { margin-top: 10px !important; font-size: .84rem !important; line-height: 1.5 !important; } .te-home-problems-cta-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 0 !important; } .te-home-problems-cta-actions a { width: 100%; min-width: 0; margin: 0 !important; padding-inline: 10px !important; font-size: .76rem !important; white-space: normal !important; text-align: center; } .te-home-solution-row { --bs-gutter-x: 0; --bs-gutter-y: 0; gap: 22px !important; margin-inline: 0 !important; } .te-home-solution-row > [class*="col-"] { width: 100%; padding-inline: 0; } .te-home-solution { overflow: hidden; } .te-home-solution-visual { order: 1; display: flex; align-items: center; justify-content: center; min-height: 280px; overflow: visible; } .te-home-solution-content { order: 2; } .te-home-solution-image { width: 122% !important; max-width: none !important; max-height: 320px; margin-inline: -11% !important; padding: 0 !important; object-fit: contain; border-radius: 45px; } .te-home-solution-content > p { margin-top: 14px !important; margin-bottom: 18px !important; } .te-home-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-top: 18px !important; } ul.functions_list.te-home-feature-grid li { position: relative; display: grid !important; grid-template-columns: 38px minmax(0, 1fr) !important; align-items: center !important; gap: 10px !important; min-width: 0; min-height: 88px; padding: 15px 14px !important; border: 1px solid var(--te-border-soft); border-radius: 45px; background: #fff; box-shadow: 0 8px 22px -17px rgba(16, 43, 78, .32); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .te-home-feature-modal-trigger { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 45px; background: transparent !important; color: transparent !important; cursor: pointer; appearance: none; -webkit-tap-highlight-color: transparent; } .te-home-feature-modal-trigger:hover, .te-home-feature-modal-trigger:focus, .te-home-feature-modal-trigger:active { background: transparent !important; color: transparent !important; transform: none !important; box-shadow: none !important; } ul.functions_list.te-home-feature-grid li:hover, ul.functions_list.te-home-feature-grid li:focus, ul.functions_list.te-home-feature-grid li:focus-within, ul.functions_list.te-home-feature-grid li:active { border-color: var(--te-border-soft) !important; background: #fff !important; box-shadow: 0 8px 22px -17px rgba(16, 43, 78, .32) !important; transform: none !important; } .bg-surface ul.functions_list.te-home-feature-grid li:hover, .bg-surface ul.functions_list.te-home-feature-grid li:focus, .bg-surface ul.functions_list.te-home-feature-grid li:focus-within, .bg-surface ul.functions_list.te-home-feature-grid li:active { background: rgba(255,255,255,.86) !important; } .te-home-feature-modal-trigger:focus-visible { outline: 3px solid rgba(0, 134, 221, .22); outline-offset: 2px; } .bg-surface ul.functions_list.te-home-feature-grid li { background: rgba(255,255,255,.86); } .te-home-feature-grid .img { width: 38px !important; height: 38px !important; margin: 0 !important; } .te-home-feature-grid .img img { width: 19px !important; height: 19px !important; } .te-home-feature-grid h3 { margin: 0 !important; font-size: .82rem !important; line-height: 1.2 !important; } .te-home-feature-grid p { display: none !important; } .te-home-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; width: 100%; margin-top: 18px !important; } .te-home-actions > a { width: 100% !important; min-width: 0 !important; min-height: 44px !important; margin: 0 !important; padding-inline: 10px !important; font-size: .78rem !important; white-space: normal !important; text-align: center; } .te-home-actions svg { display: none; } .te-home-case-shell { padding: 24px 18px !important; border-radius: 45px !important; } .te-home-case-layout { grid-template-columns: 1fr; gap: 24px; } .te-home-case-intro { margin: 14px 0 18px !important; font-size: .88rem; line-height: 1.5; } .te-home-case h2 br { display: none; } .te-home-case-facts { gap: 8px; margin-top: 14px; } .te-home-case-fact { min-height: 84px; padding: 14px 15px; } .te-home-case-fact strong { font-size: 1.05rem; } .te-home-case-fact span { font-size: .74rem; } .te-home-case-actions { display: grid !important; grid-template-columns: 1fr !important; max-width: none; } .te-home-case-actions > a { width: 100% !important; } .te-home-case-card { max-width: none; justify-self: stretch; aspect-ratio: 4 / 3; border-radius: 45px !important; } .te-home-case-card-panel, .te-home-case-card:hover .te-home-case-card-panel, .te-home-case-card-panel:hover, .te-home-case-card:focus-visible .te-home-case-card-panel, .te-home-case-card-panel:focus-within { left: 16px; right: 16px; bottom: 16px; min-height: 88px; height: 88px; padding: 12px 14px 34px; border-radius: 26px; } .te-home-case-card-kicker { margin-bottom: 5px; font-size: .58rem; } .te-home-case-card-summary { gap: 8px; } .te-home-case-card-panel h3 { font-size: .98rem; line-height: 1.22; } .te-home-case-card-arrow, .te-home-case-card-details { display: none !important; } .te-home-case-card-link { right: 14px; bottom: 11px; left: 14px; gap: 6px; margin: 0; padding: 0; font-size: .78rem; } .te-home-case-card-link svg { width: 12px; height: 12px; } .te-home-scroll-grid, .te-home-process-track, .te-home-brand-track { display: flex !important; flex-wrap: nowrap !important; gap: 12px !important; margin-right: -16px !important; margin-left: -2px !important; padding: 2px 16px 14px 2px !important; overflow-x: auto; overflow-y: visible; scroll-padding-left: 2px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .te-home-scroll-grid::-webkit-scrollbar, .te-home-process-track::-webkit-scrollbar, .te-home-brand-track::-webkit-scrollbar { display: none; } .te-home-scroll-item, .te-home-process-item { flex: 0 0 min(82vw, 320px) !important; width: min(82vw, 320px) !important; max-width: min(82vw, 320px) !important; padding: 0 !important; scroll-snap-align: start; } .te-home-brand-item { flex: 0 0 min(58vw, 224px) !important; width: min(58vw, 224px) !important; max-width: min(58vw, 224px) !important; padding: 0 !important; scroll-snap-align: start; } .te-home-audience-grid .te-home-scroll-item { flex-basis: min(65.6vw, 256px) !important; width: min(65.6vw, 256px) !important; max-width: min(65.6vw, 256px) !important; } .te-home-audience-grid { margin-top: -4px !important; } .te-home-audience-card { min-height: 0; aspect-ratio: 1 / 1; padding: 0 !important; border-radius: 45px !important; } .te-home-audience-card-panel, .te-home-audience-card:hover .te-home-audience-card-panel, .te-home-audience-card-panel:hover, .te-home-audience-card:focus-visible .te-home-audience-card-panel, .te-home-audience-card-panel:focus-within { left: 16px; right: 16px; bottom: 16px; min-height: 88px; height: 88px; padding: 12px 14px 11px; border-radius: 26px; } .te-home-audience-card-top { gap: 8px; } .te-home-audience-card h3 { padding-right: 0; font-size: .98rem !important; line-height: 1.22 !important; } .te-home-audience-card-icon { top: auto; right: 10px; bottom: 10px; gap: 2px; } .te-home-audience-card-icon img { width: 22px; height: 22px; } .te-home-audience-card-arrow, .te-home-audience-card-details { display: none !important; } .te-home-audience-card-link { right: 14px; bottom: 11px; left: 14px; gap: 6px; max-width: none; margin: 0; padding: 0; font-size: .78rem; } .te-home-audience-card-link svg { width: 12px; height: 12px; } .te-home-section-cta { text-align: left !important; } .te-home-section-cta > a { width: 100%; margin-top: 14px !important; } .te-home-project .te-home-section-heading { max-width: none; } .te-home-project .te-home-section-heading > p { margin-top: 14px !important; } .te-home-project .te-home-project-intro { display: none !important; } .te-home-project-points { display: flex !important; flex-direction: column; gap: 10px; margin-top: 18px !important; } .te-home-project-points li { display: grid !important; grid-template-columns: 20px minmax(0, 1fr) !important; align-items: start; gap: 10px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: rgba(255,255,255,.84) !important; font-size: .82rem !important; line-height: 1.45 !important; } .te-home-project-points .img { width: 20px !important; height: 20px !important; margin: 1px 0 0 !important; } .te-home-process-track { margin-top: 22px !important; } .te-home-process-item { flex-basis: min(65.6vw, 256px) !important; width: min(65.6vw, 256px) !important; max-width: min(65.6vw, 256px) !important; } .te-home-process-card { min-height: 216px; padding: 18px !important; } .te-home-process-card .te-icon-chip { transform: scale(.86); transform-origin: left top; } .te-home-process-card h3 { margin-top: 12px !important; font-size: .88rem !important; } .te-home-process-card p { font-size: .68rem !important; line-height: 1.44 !important; } .te-home-project .te-home-actions .te-btn-outline { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; } .te-home-group-row, .te-home-contact-row { --bs-gutter-x: 0; --bs-gutter-y: 0; gap: 26px !important; margin-inline: 0 !important; } .te-home-group-row > [class*="col-"], .te-home-contact-row > [class*="col-"] { padding-inline: 0 !important; } .te-home-group-brands, .te-home-contact-form-wrap { margin-top: 0 !important; } .te-home-group-copy > p { margin-top: 13px !important; } .te-home-group-copy .te-home-group-intro, .te-home-group-copy .te-home-group-process { display: none !important; } .te-home-group-copy .te-home-group-feature--ai { display: none !important; } .te-home-group-copy .te-home-group-cta { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; margin-top: 18px !important; } .te-home-group-copy .te-home-group-cta > a { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; min-height: 50px !important; padding: 0 18px !important; text-align: left !important; } .te-home-group-copy .te-home-group-cta svg { display: block !important; flex: 0 0 auto; width: 18px !important; height: 18px !important; margin-left: 12px; } .te-home-group-copy .functions_list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; } .te-home-group-copy .functions_list li { grid-template-columns: 18px 1fr !important; gap: 7px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-size: .7rem !important; line-height: 1.38 !important; } .te-home-group-copy .functions_list .img { width: 18px !important; height: 18px !important; } .te-home-brand-track { margin-top: 0 !important; } .te-home-brand-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 152px; margin-bottom: 0 !important; padding: 18px !important; } .te-home-brand-card.is-current { border-color: var(--te-border-soft); background: #fff; } .te-home-brand-card img { display: block; width: auto; height: 37px; max-width: none; max-height: none; object-fit: contain; object-position: left center; } .te-home-brand-item:nth-child(1) .te-home-brand-card img, .te-home-brand-item:nth-child(2) .te-home-brand-card img { margin-top: 6px; margin-left: 10px; } .te-home-brand-item:nth-child(1) .te-home-brand-card img { margin-bottom: 5px; } .te-home-brand-item:nth-child(2) .te-home-brand-card img { height: 33px; margin-bottom: 9px; } .te-home-brand-card.is-current img { height: 48px; } .te-home-brand-card h3 { display: -webkit-box; min-height: calc(1.25em * 3); margin-top: 10px !important; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: .82rem !important; line-height: 1.25 !important; } .te-home-brand-card.is-current h3 { margin-top: 1px !important; } .te-home-brand-card a { margin-top: auto !important; } .te-home-brand-card > .position-absolute.bottom-0 { right: auto !important; bottom: 18px !important; left: 18px !important; margin: 0 !important; } .te-home-brand-card p { display: none !important; } .te-home-contact-shell { padding: 24px 18px !important; border-radius: 45px !important; } .te-home-contact-row { gap: 26px !important; } .te-home-contact-copy .functions_list { margin: 18px 0 0 !important; } .te-home-contact-copy .functions_list li { grid-template-columns: 20px 1fr !important; margin-bottom: 9px !important; font-size: .8rem !important; } .te-home-contact-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 18px !important; } .te-home-contact-links a { min-width: 0; min-height: 42px; padding: 8px !important; font-size: .68rem !important; line-height: 1.2; text-align: center; white-space: normal; } .te-home-contact-form { padding: 18px !important; border-radius: 45px !important; } .te-home-contact-fields { --bs-gutter-x: 10px; --bs-gutter-y: 11px; } .te-home-contact-form .form-label { margin-bottom: 5px; font-size: .75rem; font-weight: 600; } .te-home-contact-form .form-control, .te-home-contact-form .form-select { min-height: 44px; padding: 9px 12px; border-radius: 18px; font-size: .82rem; } .te-home-contact-form textarea.form-control { min-height: 94px !important; } .te-home-contact-form .te-btn { min-height: 46px; } } @media (min-width: 390px) and (max-width: 767.98px) { .te-home-contact-fields > .col-md-6 { flex: 0 0 auto; width: 50%; } } @media (max-width: 374.98px) { .content-header.hero-gradient.te-home-hero .tplus_actions, .te-home-problems-cta-actions, .te-home-actions, .te-home-contact-links { grid-template-columns: 1fr !important; } .te-home-problem-grid, .te-home-feature-grid, .te-home-project-points, .te-home-group-copy .functions_list { grid-template-columns: 1fr !important; } } /* ========================================================================= STARTSEITE: MOBILE DETAILMODAL FUER LOESUNGS-KACHELN Optisch an das bestehende Erklaervideo-Modal angelehnt. ========================================================================= */ .te-home-solution-modal { position: fixed !important; font-family: var(--te-font-sans) !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 2147483000; display: grid; place-items: center; width: auto !important; min-width: 100vw !important; max-width: none !important; height: auto !important; min-height: 100vh !important; min-height: 100dvh !important; margin: 0 !important; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); opacity: 0; visibility: hidden; pointer-events: none; isolation: isolate; transform: none !important; transition: opacity .2s ease, visibility 0s linear .2s; } .te-home-solution-modal, .te-home-solution-modal *, .te-home-solution-modal *::before, .te-home-solution-modal *::after { font-family: var(--te-font-sans) !important; } .te-home-solution-modal[hidden] { display: none; } .te-home-solution-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } .te-home-solution-modal__backdrop { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100vw !important; min-width: 100vw !important; max-width: none !important; height: 100vh !important; height: 100dvh !important; min-height: 100vh !important; min-height: 100dvh !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: rgba(7, 14, 31, .58) !important; opacity: 0; cursor: pointer; -webkit-backdrop-filter: blur(11px) saturate(.82); backdrop-filter: blur(11px) saturate(.82); transition: opacity .2s ease; } .te-home-solution-modal.is-open .te-home-solution-modal__backdrop { opacity: 1; -webkit-backdrop-filter: blur(11px) saturate(.82); backdrop-filter: blur(11px) saturate(.82); } .te-home-solution-modal__dialog { position: relative; z-index: 1; width: min(100%, 440px); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow: auto; border: 1px solid rgba(21, 40, 75, .1); border-top: 4px solid var(--te-primary); border-radius: 28px; 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, 24px, 0) scale(.94); transition: transform .24s cubic-bezier(.2,.9,.2,1), opacity .18s ease; } .te-home-solution-modal.is-open .te-home-solution-modal__dialog { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } .te-home-solution-modal__header { position: relative; padding: 24px 64px 20px 22px; border-bottom: 1px solid rgba(21,40,75,.08); background: linear-gradient(180deg, #fff 0%, #f8fbff 100%); } .te-home-solution-modal__eyebrow { display: inline-flex; margin-bottom: 10px; padding: 6px 10px; border-radius: 999px; background: rgba(0,134,221,.09); color: var(--te-primary); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .te-home-solution-modal__title { margin: 0; color: var(--te-ink); font-size: 1.55rem; line-height: 1.12; letter-spacing: -.03em; } .te-home-solution-modal__close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; min-width: 42px !important; min-height: 42px !important; padding: 0 !important; border: 1px solid rgba(21,40,75,.12) !important; border-radius: 50% !important; background: #fff !important; color: var(--te-ink) !important; box-shadow: none !important; transform: none !important; cursor: pointer; appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .te-home-solution-modal__close:hover, .te-home-solution-modal__close:focus, .te-home-solution-modal__close:active { top: 18px !important; right: 18px !important; border: 1px solid rgba(21,40,75,.12) !important; background: #fff !important; background-color: #fff !important; color: var(--te-ink) !important; box-shadow: none !important; filter: none !important; transform: none !important; } .te-home-solution-modal__close:focus-visible { outline: 2px solid rgba(0,134,221,.28); outline-offset: 2px; } .te-home-solution-modal__close::before, .te-home-solution-modal__close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; border-radius: 99px; background: currentColor; } .te-home-solution-modal__close::before { transform: translate(-50%, -50%) rotate(45deg); } .te-home-solution-modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); } .te-home-solution-modal__body { padding: 24px 22px 28px; color: var(--te-ink-soft); font-size: .98rem; line-height: 1.62; } .te-home-solution-modal__body p { margin: 0; } html.te-home-solution-modal-open, body.te-home-solution-modal-open { overflow: hidden !important; overscroll-behavior: none; } @media (min-width: 768px) { .te-home-solution-modal, .te-home-feature-modal-trigger { display: none !important; } }