/* ========================================================= ALPIN GLOBAL FACTS Datei: 30-alpin-facts.css ========================================================= */ /* ========================================================= 01 | HAUPTCONTAINER ========================================================= */ .alpin-facts { position: relative !important; isolation: isolate !important; width: 100% !important; max-width: var(--alpin-max-width, 1600px) !important; margin: 0 auto !important; padding: 18px var(--alpin-edge, 72px) !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: space-between !important; gap: 0 !important; box-sizing: border-box !important; overflow: hidden !important; /* Hintergrund */ background-color: #080808 !important; background-image: var(--alpin-facts-bg) !important; background-repeat: no-repeat !important; background-size: cover !important; /* MITTE RECHTS */ background-position: right center !important; } /* ========================================================= 02 | OVERLAY ========================================================= */ .alpin-facts::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background: linear-gradient( 90deg, rgba(5,5,5,.99) 0%, rgba(5,5,5,.97) 24%, rgba(5,5,5,.90) 44%, rgba(5,5,5,.72) 60%, rgba(5,5,5,.44) 76%, rgba(5,5,5,.16) 100% ) !important; } /* ========================================================= 03 | INHALT ÜBER OVERLAY ========================================================= */ .alpin-facts > * { position: relative !important; z-index: 2 !important; } /* ========================================================= 04 | EINZELNE FACT-SPALTEN ========================================================= */ .alpin-facts .alpin-fact { position: relative !important; flex: 1 1 25% !important; width: 25% !important; max-width: 25% !important; min-width: 0 !important; min-height: 124px !important; margin: 0 !important; padding: 2px 28px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 12px !important; row-gap: 12px !important; text-align: center !important; box-sizing: border-box !important; background: transparent !important; } /* ========================================================= 05 | TRENNLINIEN ========================================================= */ .alpin-facts .alpin-fact:not(:last-child)::after { content: "" !important; position: absolute !important; right: 0 !important; top: 14% !important; width: 1px !important; height: 72% !important; background: rgba(255,255,255,.22) !important; pointer-events: none !important; } /* ========================================================= 06 | ELEMENTOR RESET ========================================================= */ .alpin-facts .alpin-fact .elementor-widget-heading, .alpin-facts .alpin-fact .elementor-widget-container { margin: 0 !important; padding: 0 !important; } /* ========================================================= 07 | ALLGEMEINE TYPOGRAFIE ========================================================= */ .alpin-facts .alpin-fact .elementor-widget-heading .elementor-heading-title { margin: 0 !important; padding: 0 !important; color: #ffffff !important; text-align: center !important; text-transform: uppercase !important; } /* ========================================================= 08 | KICKER ========================================================= */ .alpin-facts .alpin-fact .alpin-fact-kicker { margin: 0 !important; padding: 0 !important; } .alpin-facts .alpin-fact .alpin-fact-kicker.elementor-widget-heading .elementor-heading-title { font-family: var(--alpin-font) !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .35px !important; color: rgba(255,255,255,.92) !important; white-space: nowrap !important; } /* ========================================================= 09 | VALUE ========================================================= */ .alpin-facts .alpin-fact .alpin-fact-value { margin: 0 !important; padding: 0 !important; } .alpin-facts .alpin-fact .alpin-fact-value.elementor-widget-heading .elementor-heading-title { font-family: var(--alpin-font-display) !important; font-size: 54px !important; font-weight: 900 !important; line-height: .88 !important; letter-spacing: -1.4px !important; color: #ffffff !important; white-space: nowrap !important; } /* ========================================================= 10 | PLUG & PLAY ========================================================= */ .alpin-facts .alpin-fact .alpin-fact-value.alpin-fact-value-wide { margin: 0 !important; padding: 0 !important; } .alpin-facts .alpin-fact .alpin-fact-value.alpin-fact-value-wide.elementor-widget-heading .elementor-heading-title { font-family: var(--alpin-font-display) !important; font-size: 39px !important; font-weight: 900 !important; line-height: .92 !important; letter-spacing: -1px !important; color: #ffffff !important; white-space: nowrap !important; } /* ========================================================= 11 | LABEL ========================================================= */ .alpin-facts .alpin-fact .alpin-fact-label { margin: 0 !important; padding: 0 !important; } .alpin-facts .alpin-fact .alpin-fact-label.elementor-widget-heading .elementor-heading-title { font-family: var(--alpin-font) !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.05 !important; letter-spacing: .2px !important; color: rgba(255,255,255,.94) !important; white-space: nowrap !important; } /* ========================================================= 12 | ELEMENTOR COLORS SICHER ÜBERSCHREIBEN ========================================================= */ .alpin-facts .alpin-fact .alpin-fact-kicker .elementor-heading-title, .alpin-facts .alpin-fact .alpin-fact-value .elementor-heading-title, .alpin-facts .alpin-fact .alpin-fact-label .elementor-heading-title { color: #ffffff !important; } /* ========================================================= 13 | TABLET ========================================================= */ @media (max-width: 1024px) { .alpin-facts { padding: 16px var(--alpin-edge-tablet, 40px) !important; background-position: right center !important; } .alpin-facts::before { background: linear-gradient( 90deg, rgba(5,5,5,.97) 0%, rgba(5,5,5,.92) 45%, rgba(5,5,5,.72) 100% ) !important; } .alpin-facts .alpin-fact { min-height: 116px !important; padding: 2px 18px !important; gap: 9px !important; row-gap: 9px !important; } .alpin-facts .alpin-fact .alpin-fact-value.elementor-widget-heading .elementor-heading-title { font-size: 46px !important; } .alpin-facts .alpin-fact .alpin-fact-value.alpin-fact-value-wide.elementor-widget-heading .elementor-heading-title { font-size: 32px !important; } .alpin-facts .alpin-fact .alpin-fact-kicker.elementor-widget-heading .elementor-heading-title, .alpin-facts .alpin-fact .alpin-fact-label.elementor-widget-heading .elementor-heading-title { font-size: 11px !important; } } /* ========================================================= 14 | MOBILE ========================================================= */ @media (max-width: 767px) { .alpin-facts { padding: 16px var(--alpin-edge-mobile, 24px) !important; flex-wrap: wrap !important; background-position: right center !important; } .alpin-facts::before { background: linear-gradient( 90deg, rgba(5,5,5,.96) 0%, rgba(5,5,5,.88) 100% ) !important; } .alpin-facts .alpin-fact { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; min-height: 108px !important; padding: 2px 10px !important; gap: 7px !important; row-gap: 7px !important; } .alpin-facts .alpin-fact .alpin-fact-value.elementor-widget-heading .elementor-heading-title { font-size: 42px !important; } .alpin-facts .alpin-fact .alpin-fact-value.alpin-fact-value-wide.elementor-widget-heading .elementor-heading-title { font-size: 27px !important; } .alpin-facts .alpin-fact .alpin-fact-kicker.elementor-widget-heading .elementor-heading-title, .alpin-facts .alpin-fact .alpin-fact-label.elementor-widget-heading .elementor-heading-title { font-size: 10px !important; } .alpin-facts .alpin-fact:nth-child(2)::after { display: none !important; } .alpin-facts .alpin-fact:nth-child(1), .alpin-facts .alpin-fact:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.12) !important; } }