/* ========================================================= ALPIN – CATEGORY INTRO Datei: 33-alpin-category-intro.css Globaler Kategorie-Einstiegsblock Verwendung: Wohnmobile Transporter 4x4 / Offroad PKW Traktoren LKW / Marine TYPOGRAFIE: kommt zentral aus 00-alpin-core.css Headline: Archivo ALPIN Variable ExtraCondensed Weight 800 ========================================================= */ /* ========================================================= 01 | HAUPTCONTAINER ========================================================= */ .alpin-category-intro { width: 100% !important; max-width: var(--alpin-max-width) !important; margin: 0 auto !important; padding: 0 !important; display: grid !important; grid-template-columns: 52% 48% !important; align-items: stretch !important; gap: 0 !important; box-sizing: border-box !important; background: #ffffff !important; overflow: hidden !important; } /* Elementor Container Reset */ .alpin-category-intro > .e-con-inner { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: contents !important; } /* ========================================================= 02 | LINKER CONTENT-BEREICH ========================================================= */ .alpin-category-intro-content { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 64px var(--alpin-edge) 64px var(--alpin-edge) !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; box-sizing: border-box !important; background: #ffffff !important; } .alpin-category-intro-content > .e-con-inner { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= 03 | EYEBROW / TOPLINE ========================================================= */ .alpin-category-intro-eyebrow { position: relative !important; width: 100% !important; margin: 0 0 28px 0 !important; padding: 0 0 13px 0 !important; } .alpin-category-intro-eyebrow, .alpin-category-intro-eyebrow *, .alpin-category-intro-eyebrow .elementor-heading-title { margin: 0 !important; font-family: var(--alpin-font-ui) !important; font-size: 12px !important; font-weight: 700 !important; font-style: normal !important; font-variation-settings: normal !important; line-height: 1.2 !important; letter-spacing: .6px !important; text-transform: uppercase !important; color: #111111 !important; } /* rote ALPIN Linie */ .alpin-category-intro-eyebrow::after { content: "" !important; position: absolute !important; left: 0 !important; bottom: 0 !important; width: 42px !important; height: 2px !important; background: var(--alpin-red) !important; pointer-events: none !important; } /* ========================================================= 04 | GROSSE HEADLINE VERBINDLICHE ALPIN DNA Archivo ALPIN Variable ExtraCondensed Weight 800 Schriftdefinition kommt aus CORE. ========================================================= */ .alpin-category-intro-title { width: 100% !important; max-width: 760px !important; margin: 0 0 24px 0 !important; padding: 0 !important; } .alpin-category-intro-title, .alpin-category-intro-title *, .alpin-category-intro-title .elementor-heading-title { margin: 0 !important; padding: 0 !important; font-family: var(--alpin-font-headline) !important; font-size: clamp( 38px, 2.7vw, 50px ) !important; font-weight: var(--alpin-headline-weight) !important; font-style: normal !important; font-stretch: 62.5% !important; font-variation-settings: "wdth" var(--alpin-headline-width), "wght" var(--alpin-headline-weight) !important; line-height: .94 !important; letter-spacing: -.6px !important; text-transform: uppercase !important; color: #111111 !important; } /* ========================================================= 05 | FLIESSTEXT ========================================================= */ .alpin-category-intro-text { width: 100% !important; max-width: 660px !important; margin: 0 !important; padding: 0 !important; } .alpin-category-intro-text, .alpin-category-intro-text *, .alpin-category-intro-text p { font-family: var(--alpin-font-body) !important; font-size: 15px !important; font-weight: 400 !important; font-style: normal !important; font-variation-settings: normal !important; line-height: 1.58 !important; letter-spacing: 0 !important; color: #555555 !important; } .alpin-category-intro-text p { margin: 0 0 18px 0 !important; padding: 0 !important; } .alpin-category-intro-text p:last-child { margin-bottom: 0 !important; } /* ========================================================= 06 | RECHTER BILDBEREICH ========================================================= */ .alpin-category-intro-media { position: relative !important; width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 440px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #111111 !important; box-sizing: border-box !important; } .alpin-category-intro-media > .e-con-inner { width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= 07 | BILD-WIDGET ========================================================= */ .alpin-category-intro-media .elementor-widget-image { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } .alpin-category-intro-media .elementor-widget-image .elementor-widget-container { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } .alpin-category-intro-media .elementor-widget-image a { display: block !important; width: 100% !important; height: 100% !important; } .alpin-category-intro-media .elementor-widget-image img { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center center !important; border: 0 !important; border-radius: 0 !important; } /* ========================================================= 08 | WEISSER BILDÜBERGANG ========================================================= */ .alpin-category-intro-media::before { content: "" !important; position: absolute !important; z-index: 2 !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: 90px !important; pointer-events: none !important; background: linear-gradient( 90deg, #ffffff 0%, rgba(255,255,255,.82) 25%, rgba(255,255,255,.38) 58%, rgba(255,255,255,0) 100% ) !important; } /* ========================================================= 09 | TABLET ========================================================= */ @media (max-width: 1024px) { .alpin-category-intro { grid-template-columns: 50% 50% !important; } .alpin-category-intro-content { padding: 52px var(--alpin-edge) 52px var(--alpin-edge) !important; } .alpin-category-intro-title { max-width: 100% !important; } .alpin-category-intro-title, .alpin-category-intro-title *, .alpin-category-intro-title .elementor-heading-title { font-size: clamp( 34px, 4.2vw, 43px ) !important; line-height: .94 !important; letter-spacing: -.5px !important; } .alpin-category-intro-text, .alpin-category-intro-text *, .alpin-category-intro-text p { font-size: 14px !important; } .alpin-category-intro-media { min-height: 400px !important; } .alpin-category-intro-media::before { width: 60px !important; } } /* ========================================================= 10 | MOBILE ========================================================= */ @media (max-width: 767px) { .alpin-category-intro { display: flex !important; flex-direction: column !important; } .alpin-category-intro-content { order: 1 !important; width: 100% !important; padding: 42px var(--alpin-edge) 40px var(--alpin-edge) !important; } .alpin-category-intro-media { order: 2 !important; width: 100% !important; min-height: 320px !important; } .alpin-category-intro-eyebrow { margin-bottom: 24px !important; } .alpin-category-intro-title { margin-bottom: 20px !important; max-width: 100% !important; } .alpin-category-intro-title, .alpin-category-intro-title *, .alpin-category-intro-title .elementor-heading-title { font-size: clamp( 32px, 9vw, 40px ) !important; line-height: .95 !important; letter-spacing: -.4px !important; } .alpin-category-intro-text { max-width: 100% !important; } .alpin-category-intro-text, .alpin-category-intro-text *, .alpin-category-intro-text p { font-size: 14px !important; line-height: 1.55 !important; } /* Seitlicher Verlauf auf Mobile nicht notwendig */ .alpin-category-intro-media::before { display: none !important; } } /* ========================================================= 11 | KLEINE SMARTPHONES ========================================================= */ @media (max-width: 480px) { .alpin-category-intro-content { padding: 36px 20px 34px 20px !important; } .alpin-category-intro-media { min-height: 270px !important; } .alpin-category-intro-eyebrow, .alpin-category-intro-eyebrow *, .alpin-category-intro-eyebrow .elementor-heading-title { font-size: 10px !important; } .alpin-category-intro-title, .alpin-category-intro-title *, .alpin-category-intro-title .elementor-heading-title { font-size: 32px !important; line-height: .95 !important; letter-spacing: -.3px !important; } } /* ========================================================= 12 | ELEMENTOR TYPOGRAFIE OVERRIDE Elementor darf die zentrale ALPIN Headline-Schrift nicht überschreiben. ========================================================= */ body .alpin-category-intro .alpin-category-intro-title, body .alpin-category-intro .alpin-category-intro-title *, body .alpin-category-intro .alpin-category-intro-title .elementor-heading-title { font-family: var(--alpin-font-headline) !important; font-weight: var(--alpin-headline-weight) !important; font-style: normal !important; font-stretch: 62.5% !important; font-variation-settings: "wdth" var(--alpin-headline-width), "wght" var(--alpin-headline-weight) !important; text-transform: uppercase !important; } /* ========================================================= ENDE 33-alpin-category-intro.css ========================================================= */