/****************************************************************************
 * Startseite V2 (2026-10)
 * Section-Stile nach Vorlage lb-firmengruppe.de.
 * ALLES ist auf .lbv2 begrenzt (Section-CSS "lbv2 ..."), damit die
 * bestehenden Seiten unverändert bleiben.
 ****************************************************************************/
.lbv2 {
    --lbv2-red: #FF6148;
    --lbv2-red-dark: #E54D39;
    --lbv2-blue: #162C47;
    --lbv2-blue-light: #1E4268;
    --lbv2-blue-dark: #1D1D25;
    --lbv2-text-dark: #14496E;
    --lbv2-light-grey: #F4F4F4;
}

/****************************************************************************
 * Row-Breite 80rem wie alle anderen LB-Seiten (lbenergy.tech global: 120rem,
 * BASICS-container.css). Gilt für V2-Sections und – auf Seiten mit V2-Sections –
 * auch für Topbar und Footer.
 ****************************************************************************/
.lbv2 .row:not(.expanded),
body:has(.lbv2) .topbar .row:not(.expanded),
body:has(.lbv2) .footer .row:not(.expanded) {
    max-width: 80rem;
}

/****************************************************************************
 * Hintergründe
 ****************************************************************************/
.lbv2.lbv2_bg_blue {
    background: linear-gradient(-90deg, #1E4268, #0D1F37);
    color: #FFFFFF;
}
.lbv2.lbv2_bg_dark {
    background-color: #0D1F37;
    color: #FFFFFF;
}
.lbv2.lbv2_bg_red {
    background-color: var(--lbv2-red);
    color: #FFFFFF;
}
.lbv2.lbv2_bg_light {
    background-color: var(--lbv2-light-grey);
    color: var(--lbv2-text-dark);
}
.lbv2.lbv2_bg_white {
    background-color: #FFFFFF;
    color: var(--lbv2-text-dark);
}

/****************************************************************************
 * Typografie
 ****************************************************************************/
.lbv2 h1,
.lbv2 h2 {
    font-weight: 700;
}
.lbv2 h1 strong,
.lbv2 h2 strong {
    text-transform: none;
}
.lbv2 .content_title > p:first-child {
    font-weight: 400;
    margin-bottom: 0.25rem;
}
.lbv2 .content_title > p + h1,
.lbv2 .content_title > p + h2 {
    margin-top: 0;
}
.lbv2 .content_title em {
    font-weight: 300;
}

/* Kennzahlen-Liste: | 43 Tonnen weniger CO2 */
.lbv2 .lbv2_facts {
    list-style: none;
    margin: 1.5rem 0;
    font-weight: 700;
}
.lbv2 .lbv2_facts li {
    padding-left: 0.75rem;
    border-left: 2px solid currentColor;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

/****************************************************************************
 * Buttons & Links
 ****************************************************************************/
.lbv2 .button,
.lbv2 .button:visited {
    padding: 1rem 1.5rem;
    border-radius: 0;
    background-color: var(--lbv2-blue-dark);
    border: 0.0625rem solid var(--lbv2-blue-dark);
    color: #FFFFFF;
    font-weight: 400;
}
.lbv2 .button:hover,
.lbv2 .button:focus {
    background-color: var(--lbv2-red);
    border-color: var(--lbv2-red);
    color: #FFFFFF;
}
.lbv2 .button.outline,
.lbv2 .button.outline:visited {
    background-color: transparent;
    color: currentColor;
    border: 0.0625rem solid currentColor;
}
.lbv2 .button.outline:hover,
.lbv2 .button.outline:focus {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--lbv2-red);
}
.lbv2.lbv2_bg_light .button.outline:hover,
.lbv2.lbv2_bg_light .button.outline:focus,
.lbv2.lbv2_bg_white .button.outline:hover,
.lbv2.lbv2_bg_white .button.outline:focus {
    background-color: var(--lbv2-blue-dark);
    border-color: var(--lbv2-blue-dark);
    color: #FFFFFF;
}

.lbv2 .arrow_link {
    font-weight: 700;
    position: relative;
    display: inline-block;
}
.lbv2 .arrow_link:before {
    content: '➔ ';
    margin-right: 0.25em;
}
.lbv2 .arrow_link:after {
    content: ''; position: absolute;
    bottom: 0; left: 0; height: 2px; width: 0;
    background-color: currentColor;
    transition: width .25s ease;
}
.lbv2 .arrow_link:hover:after,
.lbv2 .arrow_link:focus:after {
    width: 100%;
}

/****************************************************************************
 * Linien-Deko (custom_lines von lb-firmengruppe.de)
 ****************************************************************************/
@media screen and (min-width:40em){
    .lbv2.lbv2_lines {
        position: relative;
    }
    .lbv2.lbv2_lines > * {
        position: relative;
        z-index: 30;
    }
    .lbv2.lbv2_lines:before {
        content: ''; position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100%; height: 100%;
        background: url(../img/lbv2/line_1.svg) no-repeat;
        background-position: 100% 100%;
        background-size: contain;
        animation: lbv2_line_1 25s infinite 2s;
        z-index: 0; pointer-events: none;
    }
    .lbv2.lbv2_lines:after {
        content: ''; position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 25%; height: auto;
        background: url(../img/lbv2/line_2.svg) no-repeat;
        background-position: 0 100%;
        background-size: contain;
        animation: lbv2_line_2 30s infinite;
        z-index: 0; pointer-events: none;
    }
}
@keyframes lbv2_line_1 {
    0%   {height: 100%;}
    50%  {height: 80%;}
    100% {height: 100%;}
}
@keyframes lbv2_line_2 {
    0%   {right: 0;}
    50%  {right: -15%;}
    100% {right: 0;}
}

/****************************************************************************
 * Hintergrundbild mit Verlauf (Section-Hintergrund "Slider", 1 Bild)
 * lbv2_overlay_left  = blauer Verlauf von links, Text links
 * lbv2_overlay_right = grauer Verlauf von rechts, Text rechts
 ****************************************************************************/
.lbv2.lbv2_overlay_left,
.lbv2.lbv2_overlay_right {
    position: relative;
    color: #FFFFFF;
}
.lbv2.lbv2_overlay_left > *,
.lbv2.lbv2_overlay_right > * {
    position: relative;
    z-index: 20;
}
.lbv2.lbv2_overlay_left > .slider_wrapper,
.lbv2.lbv2_overlay_right > .slider_wrapper {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
}
.lbv2.lbv2_overlay_left:after,
.lbv2.lbv2_overlay_right:after {
    content: ''; position: absolute; z-index: 10;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
}
.lbv2.lbv2_overlay_left:after {
    background: linear-gradient(90deg, rgba(13,31,55,0.95) 0%, rgba(13,31,55,0.8) 45%, rgba(13,31,55,0) 100%);
}
.lbv2.lbv2_overlay_right:after {
    background: linear-gradient(90deg, rgba(60,60,60,0) 0%, rgba(60,60,60,0.75) 25%, rgba(60,60,60,0.8) 100%);
}

/* Grauer Verlauf von links (grey_overlay_from_left von lb-asset.de) */
.lbv2.lbv2_overlay_left_grey {
    position: relative;
    color: #FFFFFF;
}
.lbv2.lbv2_overlay_left_grey > * {
    position: relative;
    z-index: 20;
}
.lbv2.lbv2_overlay_left_grey:after {
    content: ''; position: absolute; z-index: 10;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, rgba(60,60,60,0.8) 0%, rgba(60,60,60,0.5) 75%, rgba(60,60,60,1) 100%);
    pointer-events: none;
}

/****************************************************************************
 * Hintergrund-Video (Section-Hintergrund "Video")
 * Video-URL z. B. /videos/trenner.mp4 – Section braucht keine weitere Klasse.
 ****************************************************************************/
.lbv2.content_section > .video_bg_wrapper,
.lbv2.content_section > .slider_wrapper {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    pointer-events: none;
}
.lbv2.content_section > .video_bg_wrapper .video_bg {
    width: 100%;
    height: 100%;
}
.lbv2.content_section > .video_bg_wrapper .video_bg:before {
    content: none;
}

/* Bild/Video halb entsättigt, beim Hover in Farbe (trenner_section, wie lb-asset.de) */
.lbv2.lbv2_trenner .slider_wrapper img,
.lbv2.lbv2_trenner .video_bg img,
.lbv2.lbv2_trenner .video_bg video {
    filter: saturate(0.5);
    transform: scale(1);
    transition: all .25s ease;
}
.lbv2.lbv2_trenner:hover .slider_wrapper img,
.lbv2.lbv2_trenner:hover .video_bg img,
.lbv2.lbv2_trenner:hover .video_bg video {
    filter: saturate(1);
    transform: scale(1.0125);
}

/****************************************************************************
 * Header (header_section von lb-firmengruppe.de)
 * Bild als Section-Hintergrund, Titel rechts, orange Box mit Button.
 ****************************************************************************/
.content > .lbv2.lbv2_header:first-child,
.content > .typo_animation_wrapper:first-child > .lbv2.lbv2_header {
    margin-top: -4rem; /* Topbar 4rem (2026-10-07, vorher -8rem) */
}
.lbv2.lbv2_header {
    min-height: 100svh;
    padding-top: 10rem;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    z-index: 20;
}
.lbv2.lbv2_header:after {
    content: ''; position: absolute; z-index: 10;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(0deg, rgba(13,31,55,0.85) 0%, rgba(13,31,55,0.2) 60%, rgba(13,31,55,0.5) 100%);
    pointer-events: none;
}
.lbv2.lbv2_header > * {
    position: relative;
    z-index: 20;
}
.lbv2.lbv2_header > .slider_wrapper,
.lbv2.lbv2_header > .video_bg_wrapper {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    pointer-events: none;
}
.lbv2.lbv2_header > .row {
    width: 100%;
}
/* Rautengrafik links neben dem Inhalt (wie header_section aller LB-Seiten) */
.lbv2.lbv2_header > .row:after {
    content: ''; position: absolute;
    bottom: 6.5rem; right: 100%;
    width: 33rem; height: 37rem;
    background: url(../img/lbv2/logo_outline.svg) no-repeat center;
    background-size: contain;
    opacity: 0.25;
    pointer-events: none;
}
.lbv2.lbv2_header .text_column {
    display: flex;
    flex-flow: column nowrap;
}
.lbv2.lbv2_header .text_column > *:not(.button-group) {
    padding-left: 8%;
}
.lbv2.lbv2_header .text_column > .content_title + *:not(.button-group) {
    margin-top: 0;
}
.lbv2.lbv2_header .text_column > p:last-of-type {
    padding-bottom: 3rem;
}

/* Orange Box */
.lbv2.lbv2_header .text_column .button-group {
    position: relative;
    display: block;
    width: calc(66.666% - 1rem);
    margin: 0 0 -5rem;
    padding: 1rem 0.5rem;
    font-size: 0;
    text-align: center;
    background-color: var(--lbv2-red-dark);
    transition: background-color .25s ease;
}
.lbv2.lbv2_header .text_column .button-group:hover {
    background-color: var(--lbv2-red);
}
.lbv2.lbv2_header .text_column .button-group:before {
    content: ''; position: relative;
    display: inline-block; vertical-align: middle;
    width: 0; padding: 0 0 100%;
}
.lbv2.lbv2_header .text_column .button-group:after {
    content: ''; position: absolute;
    bottom: 100%; right: 100%;
    width: 100vw; height: 200vh;
    background-color: var(--lbv2-blue-dark);
}
.lbv2.lbv2_header .text_column .button-group > * {
    font-size: 1rem;
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100% - 1rem);
}
.lbv2.lbv2_header .text_column .button-group > .button,
.lbv2.lbv2_header .text_column .button-group > .button:visited {
    background-color: transparent;
    border-color: #FFFFFF;
    color: #FFFFFF;
}
.lbv2.lbv2_header .text_column .button-group > .button:hover,
.lbv2.lbv2_header .text_column .button-group > .button:focus {
    background-color: #FFFFFF;
    color: var(--lbv2-red);
}
/* Folge-Section rückt unter die Box */
.lbv2.lbv2_header + .lbv2,
.typo_animation_wrapper:has(> .lbv2.lbv2_header) + .typo_animation_wrapper > .lbv2,
.typo_animation_wrapper:has(> .lbv2.lbv2_header) + .lbv2 {
    padding-top: 8rem;
}

@media screen and (min-width:40em){
    .lbv2.lbv2_header .text_column > *:not(.button-group) {
        padding-left: 50%;
    }
    .lbv2.lbv2_header .text_column > p:last-of-type {
        padding-bottom: 0;
        margin-bottom: -8rem;
    }
    .lbv2.lbv2_header .text_column .button-group {
        width: calc(41.333% - 1rem);
        margin-bottom: -7rem;
    }
}
@media screen and (min-width:64em){
    .lbv2.lbv2_header {
        height: 100svh;
        padding-top: 7rem;
    }
    .lbv2.lbv2_header .text_column > *:not(.button-group) {
        padding-left: calc(41.333% + 1rem);
    }
    .lbv2.lbv2_header .text_column > p:last-of-type {
        margin-bottom: -10rem;
    }
    .lbv2.lbv2_header .text_column .button-group {
        width: calc(33.333% - 1rem);
        margin-bottom: -8rem;
    }
}
@media screen and (min-width:80em){
    .lbv2.lbv2_header .text_column > p:last-of-type {
        margin-bottom: -11rem;
    }
}

/****************************************************************************
 * Text + Bild (Chillventa, Plattform)
 ****************************************************************************/
.lbv2 .image_column figure,
.lbv2 .text_column figure {
    height: auto;
}
@media screen and (max-width:39.9375em){
    .lbv2 .image_column {
        padding-top: 2rem;
    }
}

/****************************************************************************
 * Lightbox-Overlay (typo_lightbox, z. B. Produktfilm): dunkel statt weiß,
 * Transparenz wie bisher (0.95). Gilt seitenweit, Lightbox hängt am <body>.
 * Schrift weiß, damit das Schließen-X (currentColor) sichtbar bleibt.
 ****************************************************************************/
.typo_lightbox_wrapper {
    background-color: rgba(29,29,37,0.95);
    color: #FFFFFF;
}