/* Project-specific styles for the separate FLEXIcontent type landingpage_extended. */
.landingpage-extended {
  --lp-blue: #0084a7;
  --lp-ink: #333;
  --lp-soft: #d5e5f1;
  background-attachment: fixed;
  background-image: url(/medien/cache/background_image/m_biconex_welle.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 130%;
  color: var(--lp-ink);
}
.landingpage-extended__content { padding-top: 6rem; padding-bottom: 5rem; }
.landingpage-extended h1 { color: var(--lp-blue); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 300; line-height: 1.12; margin: 0 0 1.25rem; text-transform: uppercase; }
.landingpage-extended h2 { color: #212529; font-size: clamp(1.5rem, 2.5vw, 2.2rem); font-weight: 700; margin: 2.6rem 0 1rem; }
.landingpage-extended h3 { color: var(--lp-blue); font-size: 1.2rem; font-weight: 700; margin: 1.7rem 0 .6rem; }
.landingpage-extended h4 { color: #212529; font-size: 1.05rem; font-weight: 700; margin: .9rem 0 .35rem; }
.landingpage-extended .rule { width: 82px; height: 4px; margin: 0 0 2rem; background: var(--lp-blue); }
.landingpage-extended .sec { margin: 0 0 3.75rem; }
.landingpage-extended .sec-head { border-top: 1px solid #ced4da; padding-top: 1.2rem; margin-bottom: 1.25rem; }
.landingpage-extended .sec-label { color: var(--lp-blue); display: block; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.landingpage-extended .sec-title { margin-top: .25rem; }
.landingpage-extended .lead { font-size: 1.25rem; line-height: 1.55; font-weight: 500; }
.landingpage-extended .lead-sub { font-size: 1.05rem; line-height: 1.6; }
.landingpage-extended .hero { position: relative; margin: 2rem 0 0; overflow: hidden; background: var(--lp-soft); }
.landingpage-extended .hero::after { border: 30px solid #fff; content: ""; height: 100%; left: 0; opacity: .5; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 1; }
.landingpage-extended .hero img { display: block; width: 100%; max-height: 384px; object-fit: cover; }
.landingpage-extended .hero-lb { background: rgba(0, 132, 167, .7); color: #fff; font-size: clamp(1.35rem, 3vw, 2.3rem); font-weight: 700; left: 50%; letter-spacing: .06em; line-height: 1; margin: 0; padding: .35em .48em; position: absolute; text-align: center; text-transform: uppercase; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; z-index: 2; }
.landingpage-extended .tbl-wrap { margin: 1.5rem 0; overflow-x: auto; }
.landingpage-extended .tbl { border-collapse: collapse; min-width: 680px; width: 100%; }
.landingpage-extended .tbl th, .landingpage-extended .tbl td { border: 1px solid #ced4da; padding: .8rem; text-align: left; vertical-align: top; }
.landingpage-extended .tbl thead th { background: var(--lp-blue); color: #fff; }
.landingpage-extended .tbl tbody th { background: #eef5f8; color: var(--lp-ink); }
.landingpage-extended .icards, .landingpage-extended .cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1.5rem 0; }
.landingpage-extended .icard, .landingpage-extended .card { background: transparent; border: 0; margin: 0; overflow: hidden; transition: transform .25s ease; }
.landingpage-extended .icard:hover, .landingpage-extended .card:hover { transform: translateY(-2px); }
.landingpage-extended .icard-im { aspect-ratio: 1; background: transparent; display: grid; place-items: center; }
.landingpage-extended .icard-im img { display: block; height: 100%; object-fit: contain; width: 100%; }
.landingpage-extended .icard-tx, .landingpage-extended .card { padding: 1rem; }
.landingpage-extended .icard-tx { margin: 0; }
.landingpage-extended .irow { display: block; margin: 1.5rem 0; }
.landingpage-extended .irow-g { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.landingpage-extended .irow-i { aspect-ratio: 1; background: transparent; display: grid; margin: 0; place-items: center; }
.landingpage-extended .irow-i img { display: block; height: 100%; object-fit: contain; width: 100%; }
.landingpage-extended .irow figcaption { display: block; margin: 1rem 0 0; }
.landingpage-extended .card .ic { box-sizing: border-box; color: var(--lp-blue); display: block; height: auto; margin: .15rem auto 1rem; max-width: 50%; overflow: visible; padding: .35rem; stroke: currentColor; width: 50%; }
.landingpage-extended .card h4 { hyphens: auto; overflow-wrap: normal; word-break: normal; }
.landingpage-extended .steps { counter-reset: step; display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 1.5rem 0; padding-left: 0; }
.landingpage-extended .step { background: #f4f8fa; border-left: 4px solid var(--lp-blue); padding: 1.25rem; }
.landingpage-extended .step-nr { color: var(--lp-blue); font-size: 1.6rem; font-weight: 700; }
.landingpage-extended .step-nr::before { counter-increment: step; content: counter(step, decimal-leading-zero); }
.landingpage-extended .step-nr { font-size: 0; }
.landingpage-extended .step-nr::before { font-size: 1.6rem; }
.landingpage-extended .faq { margin: 2rem 0; }
.landingpage-extended .faq-i { border: 0; margin: 0 0 2.25rem; padding: 0; }
.landingpage-extended .faq-i summary { background: #eef0f2; color: var(--lp-blue); cursor: pointer; font-size: 1.1rem; font-weight: 700; line-height: 1.3; padding: 1.2rem 4rem 1.2rem 1.5rem; position: relative; transition: background-color .28s ease, color .28s ease; }
.landingpage-extended .faq-i[open] summary { background: #8cbdd0; color: #fff; }
.landingpage-extended .faq-i summary::-webkit-details-marker { display: none; }
.landingpage-extended .faq-i summary::marker { content: ""; }
.landingpage-extended .faq-x { font-size: 0; position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); }
.landingpage-extended .faq-x::before { content: "+"; font-size: 2rem; font-weight: 400; line-height: 1; transition: opacity .2s ease; }
.landingpage-extended .faq-i[open] .faq-x::before { content: "−"; }
.landingpage-extended .faq-a { padding: 0; }
.landingpage-extended .faq-a-inner { padding: 1.55rem 1.5rem .25rem; }
@keyframes lp-background-zoom { 0% { background-size: 130%; } 50% { background-size: 210%; } 100% { background-size: 130%; } }
@keyframes lp-ken-burns { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .landingpage-extended { animation: lp-background-zoom 35s ease-in-out infinite; }
  .landingpage-extended .hero img { transform: scale(1.35); transform-origin: center; }
  .landingpage-extended .hero.is-in-view img { animation: lp-ken-burns 15s ease-out both; will-change: transform; }
}
@media (prefers-reduced-motion: reduce) { .landingpage-extended, .landingpage-extended .hero img { animation: none; } }
/* The base template gives .slideout-pusher an opaque white background.  On
   extended landing pages it must stay transparent so the animated body wave
   remains visible between the editorial sections. */
body.landingpage-extended .slideout-pusher,
body.landingpage-extended main { background-color: transparent; }
body.landingpage-extended #site-header {
  background: transparent;
  transition: background-color .25s ease-in-out;
}
body.landingpage-extended #site-header #hauptmenu {
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease-in-out;
}
body.landingpage-extended.scrolled #site-header { background: rgba(255, 255, 255, .8); }
body.landingpage-extended.scrolled #site-header #hauptmenu { opacity: 1; pointer-events: auto; }
body.landingpage-extended .landingpage-anchor { left: 0; position: absolute; top: -105px; }
/* Same responsive measures as the existing start page: .container for image
   strips, .container-lg for the editorial measure. */
.landingpage-extended__content > h1,
.landingpage-extended__content > .rule,
.landingpage-extended .sec > :not(.hero) {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 992px) {
  .landingpage-extended__content > h1,
  .landingpage-extended__content > .rule,
  .landingpage-extended .sec > :not(.hero) { max-width: 960px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .landingpage-extended__content > h1,
  .landingpage-extended__content > .rule,
  .landingpage-extended .sec > :not(.hero) { max-width: 720px; }
}
@media (max-width: 980px) { .landingpage-extended .icards, .landingpage-extended .cards, .landingpage-extended .irow-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } .landingpage-extended .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .landingpage-extended__content { padding-top: 4rem; } .landingpage-extended .icards, .landingpage-extended .cards, .landingpage-extended .irow-g, .landingpage-extended .steps { grid-template-columns: 1fr; } .landingpage-extended .irow-i img { height: auto; } }