/* ==========================================================================
   Weber Lifttechnik – Sitepackage ig_template
   Ideengeist web solutions
   ========================================================================== */

/* Fonts (local, only the cuts needed: 400, 700, 800 italic) */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../Fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("../Fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 800; font-display: swap; src: url("../Fonts/barlow-800-italic.woff2") format("woff2"); }

:root {
    --c-blue: #003a70;
    --c-blue-dark: #002a52;
    --c-red: #98152c;
    --c-red-dark: #7a1023;
    --c-grey: #eaeef1;
    --c-grey-line: #c9d3dc;
    --c-white: #fff;
    --c-text: #003a70;
    --c-focus: #98152c;

    --main-width: 1440px;
    --side: 40px;
    --gutter: 38px;
    --space-section: clamp(3rem, 6vw, 7.5rem);
    --space-element: clamp(2rem, 3.5vw, 3.75rem);

    --fs-base: clamp(1.0625rem, 0.95rem + 0.35vw, 1.375rem);
    --fs-small: 0.82em;
    --fs-h1: clamp(2.375rem, 1.4rem + 3.6vw, 5rem);
    --fs-h2: clamp(1.75rem, 1.2rem + 1.7vw, 3rem);
    --fs-display: clamp(2.375rem, 1.3rem + 3.9vw, 6rem);
    --fs-h3: clamp(1.375rem, 1.1rem + 0.8vw, 2rem);
    --fs-h4: var(--fs-base);
    --fs-lead: clamp(1.25rem, 1rem + 0.7vw, 2rem);

    --header-height: 0px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: "Barlow", Arial, sans-serif;
    font-weight: 400;
    font-size: var(--fs-base);
    line-height: 1.45;
    color: var(--c-text);
    background: var(--c-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip; /* full-bleed elements (100vw incl. scrollbar) never cause horizontal scrolling */
}
img, video, svg { max-width: 100%; height: auto; }
img { border: 0; vertical-align: middle; }
picture { display: contents; }
picture > source { display: none; }

a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
p, ul, ol, table, figure, blockquote { margin: 0 0 1em; }
figure, blockquote { margin-inline: 0; }
strong, b { font-weight: 700; }

h1, h2, h3, h4, .h1, .h2, .h3, .h4 { margin: 0 0 0.6em; line-height: 1.12; color: inherit; }
h1, .h1 { font-size: var(--fs-h1); font-weight: 800; font-style: italic; letter-spacing: -0.005em; }
h2, .h2 { font-size: var(--fs-h2); font-weight: 800; font-style: italic; }
.h2.display { font-size: var(--fs-display); line-height: 1.05; hyphens: auto; }
h3, .h3 { font-size: var(--fs-h3); font-weight: 700; font-style: normal; line-height: 1.2; }
h4, .h4 { font-size: var(--fs-h4); font-weight: 700; font-style: normal; }
.subheader { font-size: var(--fs-lead); margin-top: -0.3em; }
/* Space between headline and the following text (the headline itself loses its margin as last child) */
.ce-header { margin-bottom: clamp(1.25rem, 1.9vw, 2.25rem); }
.page-footer .ce-header { margin-bottom: 0; }
.lead { font-size: var(--fs-lead); line-height: 1.35; }
.small, small { font-size: var(--fs-small); }
.phone { font-size: clamp(1.75rem, 1.2rem + 1.5vw, 3.5rem); line-height: 1.2; margin-bottom: 0.6em; }
.phone a { text-decoration: none; }

.main * > *:last-child { margin-bottom: 0; }

/* Two-coloured headlines: header text in *asterisks* (ig:highlight) is red; on dark backgrounds it keeps the text colour */
.hl { color: var(--c-red); }
.stage.l-0 .hl, .stage.l-2 .hl, .section.l-2 .hl, .section.l-5 .hl, .section.l-3 .hl, .quote.l-1 .hl, .quote.l-2 .hl, .cta .hl, .cover.l-1 .hl, .card .hl, .page-footer .hl { color: inherit; }

/* Alignment (header position, RTE classes) */
.text-center { text-align: center; }
.text-right { text-align: right; }
.ce-header.text-center .h2, .ce-header.text-center .h1 { margin-left: auto; margin-right: auto; }

/* Accessibility helpers */
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: 1rem; top: -100px; z-index: 1000;
    padding: 0.75rem 1.25rem; background: var(--c-blue); color: var(--c-white); font-weight: 700;
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
main:focus { outline: none; }
.l-2 :focus-visible, .l-3 :focus-visible, .section.l-5 :focus-visible, .stage.l-0 :focus-visible, .stage.l-2 :focus-visible,
.card :focus-visible, .cta :focus-visible, .page-footer :focus-visible, .btn:focus-visible { outline-color: currentColor; }
.btn:focus-visible { outline-color: var(--c-blue); }

/* ---------- Grid structure: .all / .main / .cStage ---------- */
.all {
    width: 100%;
    min-width: 100%;
    padding-left: var(--side);
    padding-right: var(--side);
}
.all.content { scroll-margin-top: var(--header-height); }

.main {
    max-width: var(--main-width);
    margin: 0 auto;
    padding: 0;
    position: relative;
    text-align: left;
}
.main::after { content: ""; display: table; clear: both; }

.cStage { display: flex; flex-wrap: wrap; margin: 0 calc(var(--gutter) / -2); row-gap: var(--gutter); }
.cStage > div { padding: 0 calc(var(--gutter) / 2); }
.cStage.f-10 { align-items: center; }
.cStage.f-11 { align-items: flex-end; }

.c16 { flex: 0 0 16.6666%; max-width: 16.6666%; }
.c20 { flex: 0 0 20%; max-width: 20%; }
.c25 { flex: 0 0 25%; max-width: 25%; }
.c30 { flex: 0 0 30%; max-width: 30%; }
.c33 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.c35 { flex: 0 0 35%; max-width: 35%; }
.c40 { flex: 0 0 40%; max-width: 40%; }
.c50 { flex: 0 0 50%; max-width: 50%; }
.c60 { flex: 0 0 60%; max-width: 60%; }
.c66 { flex: 0 0 66.6666%; max-width: 66.6666%; }
.c70 { flex: 0 0 70%; max-width: 70%; }
.c75 { flex: 0 0 75%; max-width: 75%; }
.c80 { flex: 0 0 80%; max-width: 80%; }

/* Elements inside a column / section: smaller spacing than top level elements */
.cStage > div > .frame + .frame,
.cStage > div > * + *,
.section-content > * + * { margin-top: var(--space-element); }
/* Referenced element (shortcut, e.g. teaser card from the references page) keeps the full column height */
.cStage > div > .frame-type-shortcut:only-child { height: 100%; }

/* Top level spacing */
.all.content { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.all.content + .all.content { padding-top: 0; }
.all.content.t-header + .all.content { padding-top: 0; }
.all.content.t-header { padding-bottom: clamp(1.5rem, 2.5vw, 2.5rem); }

/* Frame variants */
.frame-narrow, .f-narrow > .main, .f-narrow .section-inner { max-width: 900px; }
.frame-accent .h2, .frame-accent .h1, .f-accent .section-inner > .ce-header .h2 { color: var(--c-red); }
.frame-type-text .ce-header + *, .frame-type-textpic .ce-header + * { margin-top: 0; }

.frame-box { background: var(--c-grey); padding: clamp(1.5rem, 2.5vw, 2.5rem); height: 100%; }
.frame-box.frame-type-textpic .ce-textpic { display: flex; gap: clamp(1rem, 2vw, 2rem); align-items: flex-start; }
.frame-box.frame-type-textpic .ce-gallery { flex: 0 0 clamp(64px, 7vw, 130px); float: none; margin: 0; }
.frame-box.frame-type-textpic .ce-gallery * { width: 100% !important; float: none; margin: 0; }
.frame-box.frame-type-textpic { display: block; }
.frame-box .ce-bodytext { font-size: 0.85em; }
.frame-box .ce-bodytext h3 { font-size: var(--fs-h3); }

/* ---------- Buttons & links ---------- */
.btn, .frame-type-form_formframework button[type="submit"] {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
    min-height: clamp(48px, 2.9vw, 56px); padding: 0.5em 1em;
    font: inherit; font-weight: 700; font-size: 1em; line-height: 1.2; text-decoration: none;
    color: var(--c-white); background: var(--c-red); border: 2px solid var(--c-red); border-radius: 0; cursor: pointer;
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
}
.btn:hover, .frame-type-form_formframework button[type="submit"]:hover { background: var(--c-red-dark); border-color: var(--c-red-dark); text-decoration: none; }
.btn-blue { background: var(--c-blue); border-color: var(--c-blue); }
.btn-blue:hover { background: var(--c-blue-dark); border-color: var(--c-blue-dark); }
.btn-small { min-height: 44px; font-size: 0.82em; padding: 0.4em 0.9em; }
p > .btn + .btn { margin-left: 1rem; }
* + p > .btn:only-child { margin-top: 0.5em; }

.link-arrow { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5em; }
.link-arrow::after {
    content: ""; width: 1.4em; height: 0.8em; flex: none; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cpath d='M20 0l-1.4 1.4L24.2 7H0v2h24.2l-5.6 5.6L20 16l8-8z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cpath d='M20 0l-1.4 1.4L24.2 7H0v2h24.2l-5.6 5.6L20 16l8-8z'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform 0.2s ease-out;
}
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover::after { transform: translateX(4px); }

/* Lists */
.main ul { padding-left: 1.2em; }
.main ul li::marker { color: var(--c-red); }
ul.list-check, ul.list-strong { list-style: none; padding-left: 0; }
ul.list-check li { position: relative; padding-left: 2.1em; font-weight: 700; margin-bottom: 0.6em; }
ul.list-check li::before {
    content: ""; position: absolute; left: 0; top: 0.05em; width: 1.45em; height: 1.45em; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 9.7 7.6l-1.6 1.6A8.4 8.4 0 1 1 15.9 4.4l1.2-1.2A10 10 0 0 0 12 2zm9.3 1.3L11 13.6l-3.3-3.3-1.2 1.2 4.5 4.5L22.5 4.5z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 9.7 7.6l-1.6 1.6A8.4 8.4 0 1 1 15.9 4.4l1.2-1.2A10 10 0 0 0 12 2zm9.3 1.3L11 13.6l-3.3-3.3-1.2 1.2 4.5 4.5L22.5 4.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}
ul.list-strong li { font-weight: 700; margin-bottom: 0.4em; }

/* ---------- Header / navigation ---------- */
.page-header { position: relative; z-index: 50; }
.top { position: relative; z-index: 10; background: var(--c-white); } /* above the stage (dropdowns, mobile menu) */
.top-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo meta meta" "logo nav nav";
    align-items: center;
    column-gap: 2rem;
    padding: 1.25rem 0 1.5rem;
}
.logo { grid-area: logo; display: block; width: clamp(140px, 12vw, 232px); }
.logo img { display: block; width: 100%; height: auto; }
.top-meta { grid-area: meta; display: flex; justify-content: flex-end; align-items: center; gap: 1.5rem; }
.icon-link { display: inline-flex; color: #004982; padding: 0.25rem; }
.mobile-only, .mobile-cta { display: none; }
.lang-nav ul { list-style: none; margin: 0; padding: 0; display: flex; }
.lang-nav li + li::before { content: "|"; margin: 0 0.5em; color: #004982; }
.lang-nav a { color: #004982; font-weight: 700; font-size: 0.9em; text-decoration: none; }
.lang-nav a[aria-current="true"] { text-decoration: underline; }

.main-nav { grid-area: nav; justify-self: end; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 3.25rem); }
.nav-item { position: relative; display: flex; align-items: center; gap: 0.25rem; }
.nav-item > a { font-weight: 700; color: #004982; text-decoration: none; padding: 0.4rem 0; font-size: 1em; }
.nav-item > a:hover, .nav-item.act > a, .nav-item > a[aria-current="page"] { color: var(--c-red); }
.nav-item.nav-button > a { color: var(--c-white); background: var(--c-red); padding: 0.45rem 0.9rem; }
.nav-item.nav-button > a:hover { background: var(--c-red-dark); color: var(--c-white); }
.open-sub {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: -4px;
    padding: 0; border: 0; background: none; color: #004982; cursor: pointer;
}
.open-sub svg { transition: transform 0.2s ease-out; }
.nav-item.show-sub > .open-sub svg { transform: rotate(180deg); }
.sub-nav {
    list-style: none; margin: 0; padding: 0.75rem 0;
    position: absolute; left: -1.25rem; top: 100%; min-width: 280px;
    background: var(--c-white); box-shadow: 0 12px 30px rgba(0, 42, 82, 0.18); border-top: 4px solid var(--c-red);
}
.js .sub-nav:not(.is-open), html:not(.js) .sub-nav { display: none; }
html:not(.js) .nav-item:hover > .sub-nav, html:not(.js) .nav-item:focus-within > .sub-nav { display: block; }
.sub-nav a { display: block; padding: 0.55rem 1.25rem; text-decoration: none; font-weight: 700; color: var(--c-blue); }
.sub-nav a:hover, .sub-nav .act > a, .sub-nav a[aria-current="page"] { color: var(--c-red); }
.nav-toggle { display: none; }

/* ---------- Stage (header image / video) ---------- */
.stage { position: relative; overflow: hidden; color: var(--c-white); background: var(--c-blue); }
.stage.l-1 { color: var(--c-blue); background: var(--c-white); }
.stage-inner {
    position: static; display: flex; align-items: center;
    min-height: clamp(26rem, 39vw, 47rem); padding: clamp(2.5rem, 5vw, 6rem) 0;
}
.stage-text { position: relative; z-index: 2; max-width: min(40rem, 46%); }
.stage-title { font-size: var(--fs-h1); font-weight: 800; font-style: italic; line-height: 1.1; margin: 0 0 0.5em; hyphens: manual; }
.stage-body { font-size: var(--fs-lead); line-height: 1.35; }
.stage-body p { margin-bottom: 1.2em; }
.stage-media { position: absolute; right: 0; bottom: 0; width: 76%; height: 100%; }
.stage-media img, .stage-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.stage-media-masked {
    height: 88%;
    -webkit-mask: url("../Images/Brand/arch.svg") no-repeat right bottom / 100% 100%;
            mask: url("../Images/Brand/arch.svg") no-repeat right bottom / 100% 100%;
}
.stage-media-cutout img { object-fit: contain; object-position: right bottom; }
/* Cut out stage image (PNG): always completely visible (contain). Large display: crop the transparent margins
   in the file reference (image editor), the image then fills the stage height. */
.stage.l-1 .stage-inner { align-items: flex-start; padding-top: clamp(2rem, 3.8vw, 4.5rem); }
.video-toggle {
    position: absolute; right: var(--side); bottom: 1.5rem; z-index: 3; width: 48px; height: 48px;
    border: 2px solid var(--c-white); border-radius: 50%; background: rgba(0, 58, 112, 0.75); cursor: pointer;
}
.video-toggle::before, .video-toggle::after { content: ""; position: absolute; top: 14px; width: 5px; height: 16px; background: var(--c-white); }
.video-toggle::before { left: 15px; }
.video-toggle::after { right: 15px; }
.video-toggle[aria-pressed="true"]::before { left: 17px; width: 0; height: 0; background: none; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--c-white); top: 13px; }
.video-toggle[aria-pressed="true"]::after { display: none; }
/* compact */
.stage.l-2 .stage-inner { min-height: clamp(12rem, 21vw, 25rem); justify-content: space-between; }
.stage.l-2 .stage-text { max-width: 70%; }
.stage.l-2 .stage-title { margin: 0; }
.stage-icon { width: clamp(80px, 9vw, 170px); flex: none; color: var(--c-white); }
.stage-icon svg { width: 100%; height: auto; }

/* ---------- Sections (1-column grid) ---------- */
.section { position: relative; }
.all.section { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.section.l-1 { background: var(--c-grey); }
.section.l-2 { background: var(--c-blue); color: var(--c-white); }
.section.l-3 { background: var(--c-red); color: var(--c-white); }
.section.l-4 { background: #dfe3e6; }
/* 5: background image with blue gradient (image only visible towards the bottom), white text */
.section.l-5 { background: var(--c-blue); color: var(--c-white); }
.section.l-5 .section-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--c-blue) 40%, rgba(0, 58, 112, 0.7) 100%); }
.section-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.section-bg img { width: 100%; height: 100%; object-fit: cover; }
.section-inner { position: relative; z-index: 1; }
.section-inner > .ce-header { margin-bottom: var(--space-element); }
.all.section.l-0 + .all.content, .all.content + .all.section.l-0 { padding-top: 0; }
.section.l-4 { padding-top: clamp(2rem, 3.5vw, 4rem); padding-bottom: clamp(2rem, 3.5vw, 4rem); }

/* Timeline */
.f-timeline .section-inner { max-width: 1000px; margin-left: auto; margin-right: auto; }
/* Watermark (ibex, large) at the left edge of the timeline section */
.section.f-timeline { overflow: hidden; }
.section.l-1.f-timeline::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: url("../Images/Brand/watermark-quote.svg") no-repeat left -55.4vw bottom -38.3vw / 110.2vw auto;
}
.f-timeline .section-content > .frame { display: grid; grid-template-columns: clamp(80px, 9vw, 150px) 1fr; column-gap: clamp(1.25rem, 3vw, 3rem); align-items: start; }
.f-timeline .section-content > .frame + .frame { margin-top: clamp(1.5rem, 2.5vw, 2.5rem); }
.f-timeline .ce-header { display: contents; }
.f-timeline .subheader {
    grid-column: 1; grid-row: 1 / span 2; margin: 0;
    display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 50%;
    background: var(--c-white); color: var(--c-red); font-weight: 800; font-style: italic; font-size: clamp(1.25rem, 0.9rem + 1.2vw, 2.5rem);
}
.f-timeline .ce-header .h2, .f-timeline .ce-header .h3 { grid-column: 2; font-size: var(--fs-h3); font-weight: 700; font-style: normal; margin: 0.4em 0 0.3em; }
.f-timeline .ce-bodytext { grid-column: 2; }

/* Accordion */
.accordion-section.all { padding-top: 0; padding-bottom: 0; }
.accordion { border-top: 1px solid var(--c-grey-line); border-bottom: 1px solid var(--c-grey-line); }
.accordion-section + .accordion-section .accordion { border-top: 0; }
.accordion-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1.25rem, 2vw, 2rem) 0; cursor: pointer; list-style: none; }
.accordion-summary::-webkit-details-marker { display: none; }
.accordion-summary .h2, .accordion-summary .h3 { margin: 0; font-style: normal; font-weight: 700; font-size: var(--fs-h2); }
.accordion[open] .accordion-summary .h2, .accordion[open] .accordion-summary .h3 { color: var(--c-red); }
.accordion-icon { flex: none; color: var(--c-blue); transition: transform 0.2s ease-out; }
.accordion[open] .accordion-icon { transform: rotate(180deg); color: var(--c-red); }
.accordion-content { padding-bottom: clamp(1.5rem, 3vw, 3rem); }
.accordion-content > * + * { margin-top: var(--space-element); }
.all.content + .accordion-section, .accordion-section + .all.content { margin-top: var(--space-section); }

/* ---------- Icon bar / key figures ---------- */
.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--gutter); }
.feature { display: flex; align-items: center; gap: 1.25rem; }
.feature-icon { flex: none; width: clamp(72px, 6.4vw, 122px); }
.feature-icon svg, .feature-icon img { display: block; width: 100%; height: auto; }
.feature-text { display: flex; flex-direction: column; }
.feature-title { font-size: var(--fs-h3); line-height: 1.2; }
.features-l1 .feature { flex-direction: column; text-align: center; }
.features-l1 .feature-icon { width: clamp(64px, 4.5vw, 90px); }
.features-l2 .feature-title { font-size: var(--fs-h2); font-weight: 800; font-style: italic; line-height: 1; }
.features-l2 .feature-description { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; }
.l-3 .features-l1 .feature-title { font-size: var(--fs-base); }

/* ---------- Text & image (full bleed) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; padding: 0; background: var(--c-white); container-type: inline-size; overflow-x: clip; }
.split.l-1 { background: var(--c-grey); }
.split-media { position: relative; min-height: clamp(20rem, 40vw, 49rem); }
.split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Text column aligned with the content grid (.main): outer edge = (viewport - main width) / 2 */
.split-text { position: relative; z-index: 2; display: flex; align-items: center; padding: var(--space-section) var(--side); }
.split-text-inner { width: min(100%, calc(var(--main-width) / 2 - var(--gutter) / 2)); }
.split-image-right .split-text { justify-content: flex-start; padding-left: max(var(--side), calc((100cqw - var(--main-width)) / 2)); padding-right: clamp(2rem, 5vw, 6rem); }
.split-image-left .split-media { order: -1; }
.split-image-left .split-text { padding-left: calc(var(--gutter) / 2); padding-right: max(var(--side), calc((100cqw - var(--main-width)) / 2)); }
.split-logo { width: clamp(220px, 24.5vw, 470px); margin: 0.5rem 0 2rem; }
/* With a cut out product in front of the image: narrower image column (approx. 43 %, as in the layout) */
.split-image-right:has(.split-cutout) { grid-template-columns: 57.4fr 42.6fr; }
.split-image-left:has(.split-cutout) { grid-template-columns: 42.6fr 57.4fr; }
.split-logo img { display: block; width: 100%; height: auto; }
/* Cut out image as first image (PNG, e.g. tablet): larger than the column, overlaps the following section/footer */
/* Cut out first image (PNG, e.g. tablet): the section height comes from the text; the image extends into the
   text column's padding (not over the text) and downwards into the footer's top padding (not over the footer text) */
.split:has(.split-media-cutout) { position: relative; z-index: 2; }
.split-media-cutout { min-height: 0; }
.split-media.split-media-cutout img { inset: auto; left: -10%; bottom: -8vw; width: 110%; max-width: none; height: auto; object-fit: contain; }
.split-image-left .split-media.split-media-cutout img { left: 0; width: 100%; }
main:has(> .split:last-child .split-media-cutout) + .page-footer { padding-top: clamp(6rem, 10.5vw, 12.5rem); }
.split .h2, .split .h1 { font-size: var(--fs-display); line-height: 1.05; hyphens: auto; }
.split .h2:not(.display) { font-size: var(--fs-h2); }
.split.frame-accent .h2, .split.f-accent .h2 { color: var(--c-red); }

/* ---------- Image with text overlay ---------- */
.cover { position: relative; display: grid; padding: 0; overflow: hidden; }
.cover > * { grid-area: 1 / 1; }
.cover-media { min-height: clamp(18rem, 40vw, 48rem); }
.cover-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-content { position: relative; z-index: 1; width: 100%; padding: var(--space-section) var(--side); display: flex; align-items: flex-start; }
.cover-text { max-width: 44rem; }
.cover-text-1 .cover-content { justify-content: flex-end; }
.cover-text-2 .cover-content { justify-content: center; text-align: center; }
.cover-text-2 .cover-text { max-width: 60rem; }
.cover.l-1 { color: var(--c-white); }
.cover .h2 { font-size: var(--fs-h1); line-height: 1.1; }
.cover.f-accent .h2 { color: var(--c-red); }

/* ---------- Quote ---------- */
.quote { position: relative; }
.quote.all { padding-top: 0; padding-bottom: 0; }
.quote-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.quote-media img { display: block; width: 100%; height: auto; }
.quote-box { margin: 0; }
.quote-text { margin: 0; }
.quote-text p { font-size: var(--fs-h2); font-weight: 800; font-style: italic; line-height: 1.15; margin: 0; }
.quote-author { margin-top: 1.5rem; font-size: var(--fs-small); }
/* 0: white box on grey */
.quote.l-0 { background: var(--c-grey); container-type: inline-size; }
/* Watermark (ibex) in the grey area, clipped to the section */
.quote.l-0::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: url("../Images/Brand/watermark-quote.svg") no-repeat left -35.2vw top 2.5vw / 67.8vw auto;
}
.quote.l-0 .quote-inner { grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
/* Portrait: left column up to the viewport edge, bottom aligned, stays inside the section */
.quote.l-0 .quote-media { position: relative; left: clamp(0px, 5.2vw, 100px); align-self: end; margin-left: calc(-1 * max(var(--side), (100cqw - var(--main-width)) / 2)); }
.quote.l-0 .quote-box { grid-column: 2; position: relative; z-index: 1; background: var(--c-white); padding: clamp(1.75rem, 3.3vw, 4rem); margin: clamp(3rem, 5vw, 6rem) 0; min-height: clamp(18rem, 29.7vw, 36rem); display: flex; flex-direction: column; justify-content: center; }
.quote.l-0 .quote-box::before {
    content: ""; position: absolute; left: -3rem; bottom: 4rem; width: 3.2rem; height: 3.2rem; background: var(--c-white);
    border-radius: 0 0 0 100%;
}
/* 1: blue with portrait */
.quote.l-1 { background: var(--c-blue) linear-gradient(90deg, #00447f 0%, var(--c-blue) 60%); color: var(--c-white); }
/* Image = full width band (person on the left, ratio approx. 1920 x 948), quote in the right column */
.quote.l-1 .quote-inner { grid-template-columns: 1fr 1fr; column-gap: var(--gutter); min-height: min(49.4vw, 60rem); position: static; }
.quote.l-1 .quote-media { position: absolute; inset: 0; }
.quote.l-1 .quote-media img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.quote.l-1 .quote-box { grid-column: 2; position: relative; z-index: 1; align-self: center; padding: var(--space-element) 0; }
/* 2: red speech bubble */
.quote.l-2 .quote-inner { display: block; }
.quote.l-2 .quote-box { position: relative; background: var(--c-red); color: var(--c-white); padding: clamp(1.5rem, 3vw, 3rem); margin-top: 2.5rem; }
.quote.l-2 .quote-box::before { content: ""; position: absolute; left: -2rem; top: 0; width: 2rem; height: 2rem; background: radial-gradient(circle at 0 100%, transparent 70%, var(--c-red) 71%); }
.quote.l-2 .quote-text p { font-size: var(--fs-h3); font-weight: 800; }

/* ---------- Teaser cards ---------- */
.card { position: relative; display: flex; flex-direction: column; height: 100%; min-height: clamp(26rem, 31vw, 37.5rem); background: var(--c-blue); color: var(--c-white); }
.card-body { padding: clamp(1.25rem, 1.8vw, 2rem); }
.card-category { display: flex; align-items: center; gap: 0.75rem; font-size: 0.83em; font-weight: 700; text-transform: uppercase; margin-bottom: 1.25rem; }
.card-category-icon { flex: none; width: 56px; height: 56px; }
.card-category-icon svg { width: 100%; height: 100%; }
.card-title { font-size: var(--fs-h3); margin-bottom: 0.5em; }
.card-title a { text-decoration: none; }
.card-text { font-size: 0.95em; line-height: 1.4; }
.card-body { position: relative; z-index: 1; }
.card-media { margin-top: auto; overflow: hidden; }
.card-media img { width: 100%; height: auto; display: block; transition: transform 0.4s ease-out; }
.card-media-masked { aspect-ratio: 4 / 3;
    -webkit-mask: url("../Images/Brand/arch.svg") no-repeat center bottom / 100% 100%;
            mask: url("../Images/Brand/arch.svg") no-repeat center bottom / 100% 100%; }
.card-media-masked img { height: 100%; object-fit: cover; }
.card:has(.card-media-cutout) { height: auto; min-height: 0; aspect-ratio: 454 / 598; }
.card-media-cutout { position: absolute; left: 0; right: 0; bottom: 0; }
.card-linked .card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-linked:hover .card-media img { transform: scale(1.04); }
.card-linked:focus-within { outline: 3px solid var(--c-red); outline-offset: 3px; }
.card-linked .card-link:focus-visible { outline: none; }
.cStage > div > .card + .card { margin-top: var(--gutter); }

/* Headline with category icon */
.header-icon { display: flex; align-items: center; gap: 1.25rem; }
.header-icon-symbol { flex: none; width: clamp(40px, 3.4vw, 64px); color: var(--c-red); }
.header-icon-symbol svg { width: 100%; height: auto; }
.header-icon .ce-header { margin: 0; }
.header-icon .h2 { font-style: normal; font-weight: 700; text-transform: uppercase; margin: 0; }

/* ---------- Slider ---------- */
.slider { position: relative; }
.slider-track {
    /* runs out to the right edge of the viewport (as in the layout) */
    list-style: none; margin: 0 calc(-1 * max(var(--side), (100vw - var(--main-width)) / 2)) 0 0; padding: 0 max(var(--side), (100vw - var(--main-width)) / 2) 0 0;
    display: flex; gap: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none;
}
.slider-track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 min(36rem, 85%); scroll-snap-align: start; }
.slide-card { height: 100%; background: var(--c-grey); display: flex; flex-direction: column; }
.l-1 .slide-card { background: var(--c-white); }
.slide-media img { width: 100%; height: auto; display: block; }
.slide-body { padding: clamp(1.25rem, 2vw, 2rem); }
.slide-title { font-size: var(--fs-h3); }
.slide-text { margin: 0; }
.slider-controls { display: flex; gap: 0.5rem; margin-top: 1.25rem; }
.slider-controls button {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    padding: 0; border: 0; background: none; color: var(--c-blue); cursor: pointer;
}
.slider-controls button:disabled { color: #8a9bb0; cursor: default; }

/* ---------- Contact persons ---------- */
.contacts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gutter) clamp(1.25rem, 2vw, 2.5rem); }
.contact { width: clamp(9rem, 12vw, 13rem); text-align: center; font-size: 0.85em; }
.contact-photo { width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--c-grey); margin-bottom: 1rem; }
.contact-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contact-name { font-weight: 700; margin: 0 0 0.25em; font-size: 1.15em; }
.contact-info { margin: 0 0 0.5em; }
.contact-mail { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 700; text-decoration: none; }
.contact-mail:hover { text-decoration: underline; }

/* ---------- Contact teaser (speech bubble) ---------- */
.cta { position: relative; padding: 0; }
.cta-media { height: clamp(18rem, 40vw, 47rem); }
.cta-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cta-inner { position: absolute; left: 0; right: 0; bottom: 0; transform: translateY(35%); z-index: 3; padding: 0 var(--side); }
.cta-box { position: relative; width: calc(50% + 2.25rem); margin-left: calc(50% - 2.25rem); background: var(--c-red); color: var(--c-white); padding: clamp(1.75rem, 3vw, 3.25rem); }
.cta-box::before { content: ""; position: absolute; left: 1.75rem; top: -2.4rem; width: 2.4rem; height: 2.4rem; background: var(--c-red); border-radius: 100% 0 0 0; }
.cta-title { font-size: var(--fs-h2); }
.cta-box .btn { background: var(--c-blue); border-color: var(--c-blue); }
.cta-box .btn:hover { background: var(--c-blue-dark); border-color: var(--c-blue-dark); }
/* CTA as last element (directly or via "Insert records"): footer content starts below the overlapping box */
main:has(> .cta:last-child, > :last-child > .cta:last-child) + .page-footer { padding-top: clamp(10rem, 16vw, 16rem); }

/* ---------- Galleries (fluid_styled_content) ---------- */
.ce-gallery figure { margin: 0; }
.ce-gallery img { height: auto; }
.image-caption { font-size: 0.65em; margin-top: 0.5em; }
.ce-textpic .ce-gallery img { width: 100%; }
/* Logo row */
.frame-type-image.frame-layout-1 .ce-gallery, .frame-type-image.frame-layout-1 .ce-outer, .frame-type-image.frame-layout-1 .ce-inner { float: none; right: auto; width: 100%; }
.frame-type-image.frame-layout-1 .ce-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem; }
.frame-type-image.frame-layout-1 .ce-row, .frame-type-image.frame-layout-1 .ce-column { display: contents; }
.frame-type-image.frame-layout-1 img { width: auto; max-height: 120px; max-width: 180px; }
/* Icon list (textpic, layout 1) */
.frame-type-textpic.frame-layout-1 {
    display: grid; grid-template-columns: clamp(64px, 6vw, 120px) minmax(0, 18rem) minmax(0, 1fr);
    column-gap: clamp(1rem, 2.5vw, 3rem); align-items: center; padding: 1.5rem 0;
}
.frame-type-textpic.frame-layout-1 + .frame-type-textpic.frame-layout-1 { margin-top: 0; }
.frame-type-textpic.frame-layout-1 .ce-textpic { display: contents; }
.frame-type-textpic.frame-layout-1 .ce-gallery { grid-column: 1; grid-row: 1; float: none; margin: 0; width: 100%; }
.frame-type-textpic.frame-layout-1 .ce-gallery * { width: 100% !important; float: none; margin: 0; }
.frame-type-textpic.frame-layout-1 .ce-header { grid-column: 2; grid-row: 1; margin: 0; }
.frame-type-textpic.frame-layout-1 .ce-header .h3, .frame-type-textpic.frame-layout-1 .ce-header .h2 { font-size: var(--fs-h3); font-style: normal; font-weight: 700; margin: 0; }
.frame-type-textpic.frame-layout-1 .ce-bodytext { grid-column: 3; grid-row: 1; font-size: 0.9em; }
/* TYPO3 14 renders the header inside .ce-bodytext (image in text): header and text share the columns 2/3 via subgrid */
.frame-type-textpic.frame-layout-1 .ce-bodytext:has(> .ce-header) { grid-column: 2 / -1; display: grid; grid-template-columns: subgrid; align-items: center; font-size: 1em; }
.frame-type-textpic.frame-layout-1 .ce-bodytext > .ce-header { grid-column: 1; grid-row: 1 / span 20; }
.frame-type-textpic.frame-layout-1 .ce-bodytext > :not(.ce-header) { grid-column: 2; font-size: 0.9em; margin-top: 0; }
.frame-type-textpic.frame-layout-1 .ce-bodytext > :not(.ce-header) + :not(.ce-header) { margin-top: 0.75em; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
.ce-table { width: 100%; border-collapse: collapse; }
.ce-table th { text-align: left; font-size: 0.75em; font-weight: 700; padding: 0.6em 0.75em; border-bottom: 2px solid var(--c-blue); }
.ce-table td { padding: 0.6em 0.75em; border-bottom: 1px solid var(--c-grey-line); font-size: 1.1em; }
.table-status td:last-child, .table-status th:last-child { text-align: center; width: 30%; }
.table-status td:has(.status-available) { background: #e6f0ed; }
.table-status td:has(.status-partial) { background: #faf2e5; }
.table-status td:has(.status-unavailable) { background: #f5e7e9; }
.status { font-size: 0.72em; font-weight: 700; }
.status-available { color: #0b6e4f; }
.status-partial { color: #855400; }
.status-unavailable { color: var(--c-red); }

/* ---------- Downloads ---------- */
.downloads { list-style: none; margin: 0; padding: 0 !important; }
.downloads-columns { columns: 2 22rem; column-gap: var(--gutter); }
.downloads li { break-inside: avoid; margin-bottom: 1rem; }
.download-link { display: inline-flex; align-items: flex-start; gap: 1rem; text-decoration: none; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.75rem); line-height: 1.25; }
.download-link:hover .download-title { text-decoration: underline; }
.download-icon { flex: none; width: 1.5em; }
.download-icon svg { width: 100%; height: auto; }
.download-meta { font-size: 0.6em; margin-left: 0.4em; white-space: nowrap; }
.download-description { display: block; font-size: 0.65em; }

/* ---------- Forms ---------- */
.frame-type-form_formframework { max-width: var(--main-width); }
.frame-type-form_formframework form { max-width: 100%; }
.frame-type-form_formframework .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); column-gap: var(--gutter); }
.frame-type-form_formframework .row > * { padding: 0; max-width: none; }
.form-group, .form-element { margin-bottom: 1.25rem; }
.frame-type-form_formframework label, .frame-type-form_formframework legend { display: block; font-weight: 700; font-size: 0.85em; margin-bottom: 0.4em; }
.frame-type-form_formframework fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
.frame-type-form_formframework input[type="text"], .frame-type-form_formframework input[type="email"], .frame-type-form_formframework input[type="tel"],
.frame-type-form_formframework select, .frame-type-form_formframework textarea {
    width: 100%; min-height: 48px; padding: 0.55em 0.8em; font: inherit; font-size: 0.9em; color: var(--c-blue);
    background: var(--c-white); border: 1px solid #8a9bb0; border-radius: 0;
}
.frame-type-form_formframework textarea { min-height: 12rem; }
.frame-type-form_formframework ::placeholder { color: #6b7c8f; opacity: 1; }
.frame-type-form_formframework .form-check { margin-bottom: 0.4rem; }
.frame-type-form_formframework .inputs-list .form-check-label, .frame-type-form_formframework .form-check label { font-weight: 400; display: inline-flex; gap: 0.6em; align-items: flex-start; }
.frame-type-form_formframework input[type="radio"], .frame-type-form_formframework input[type="checkbox"] { width: 1.3em; height: 1.3em; margin: 0.1em 0 0; accent-color: var(--c-blue); flex: none; }
.form-check-label span { display: none; }
.form-check-label span.required { display: inline; }
.frame-type-form_formframework .help-block, .frame-type-form_formframework .error { color: var(--c-red); font-size: 0.8em; font-weight: 700; }
.frame-type-form_formframework .has-error input, .frame-type-form_formframework .has-error textarea { border: 2px solid var(--c-red); }
.frame-type-form_formframework .actions { margin-top: 1.5rem; }
.frame-type-form_formframework .form-text, .frame-type-form_formframework .help-text { font-size: 0.8em; }

/* ---------- Search (indexed_search) ---------- */
.search { max-width: 900px; }
.search-label { display: block; font-weight: 700; margin-bottom: 0.5em; }
.search-field { display: flex; gap: 0.75rem; }
.search-input {
    flex: 1; min-width: 0; min-height: clamp(48px, 2.9vw, 56px); padding: 0.5em 0.8em; font: inherit; color: var(--c-blue);
    background: var(--c-white); border: 1px solid #8a9bb0; border-radius: 0;
}
.search-input:focus-visible { outline-offset: 0; }
.search-submit svg { flex: none; }
.search-info { margin: 2.5rem 0 1.5rem; font-size: 0.9em; }
.search-results { list-style: none; margin: 0; padding: 0 !important; border-top: 1px solid var(--c-grey-line); }
.search-results > li { border-bottom: 1px solid var(--c-grey-line); padding: 1.5rem 0; }
.search-result-title { font-size: var(--fs-h3); font-style: normal; font-weight: 700; line-height: 1.2; margin: 0 0 0.4em; }
.search-result-title a { text-decoration: none; }
.search-result-title a:hover { text-decoration: underline; }
.search-result-text { margin: 0 0 0.4em; font-size: 0.9em; }
.search-result-text .tx-indexedsearch-redMarkup { font-weight: 700; color: var(--c-red); }
.search-result-path { margin: 0; font-size: 0.75em; color: #4d6a85; }
.search-result-path a { text-decoration: none; }
.search-pagination ul { list-style: none; margin: 2rem 0 0; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.search-pagination a {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 0.75em;
    font-weight: 700; text-decoration: none; border: 2px solid var(--c-blue);
}
.search-pagination a[aria-current="page"], .search-pagination a:hover { background: var(--c-blue); color: var(--c-white); }

/* ---------- Social media ---------- */
.social-nav { list-style: none; margin: 0; padding: 0 !important; display: flex; gap: 1rem; }
.social-nav a { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-white); color: var(--c-blue); }
.social-nav svg { width: 24px; height: 24px; }

/* ---------- Footer ---------- */
.page-footer { position: relative; overflow: hidden; background: var(--c-blue); color: var(--c-white); padding-top: clamp(3rem, 6vw, 6rem); }
.page-footer::after {
    content: ""; position: absolute; right: 0; bottom: 0; width: 36%; aspect-ratio: 960 / 682; pointer-events: none; mix-blend-mode: multiply;
    background: url("../Images/Brand/watermark-footer.svg") no-repeat right bottom / contain;
}
.page-footer .all.content { padding-top: 0; padding-bottom: 2rem; position: relative; z-index: 1; }
.page-footer .h3, .page-footer .h2 { font-size: var(--fs-h3); font-style: normal; font-weight: 700; line-height: 1.2; margin-bottom: 0.6em; }
.page-footer p { font-size: 1em; line-height: 1.42; margin-bottom: 1.42em; }
.page-footer p:empty { display: none; }
/* Text without visible headline (e.g. 2nd address column) starts at the height of the text next to it */
.page-footer .cStage > div > .frame-type-text:first-child:not(:has(> .ce-header)) { padding-top: calc(var(--fs-h3) * 1.8); }
.page-footer .cStage > div > * + *, .page-footer .cStage > div > .frame + .frame { margin-top: 1.75rem; }
.footer-bottom { position: relative; z-index: 1; padding-top: 1.5rem; padding-bottom: 2.5rem; font-size: 0.8em; }
.footer-bottom .main { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: baseline; }
.copyright { margin: 0; font-weight: 700; }
.legal-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.legal-nav a { text-decoration: none; }
.legal-nav a:hover, .legal-nav a[aria-current="page"] { text-decoration: underline; }

/* ---------- Lightbox ---------- */
.lightbox { display: block; cursor: zoom-in; }
.lightbox-dialog { padding: 0; border: 0; background: transparent; max-width: 94vw; max-height: 94vh; overflow: visible; }
.lightbox-dialog::backdrop { background: rgba(0, 20, 40, 0.88); }
.lightbox-dialog img { display: block; max-width: 94vw; max-height: 90vh; width: auto; height: auto; }
.lightbox-close {
    position: absolute; right: 0; top: -52px; width: 44px; height: 44px; border: 2px solid var(--c-white); border-radius: 50%;
    background: transparent; color: var(--c-white); font-size: 1.6rem; line-height: 1; cursor: pointer;
}

/* ---------- Spacing before / after (fields space_before_class / space_after_class) ---------- */
.frame-space-before-extra-small { margin-top: 1rem; }
.frame-space-before-small { margin-top: 2rem; }
.frame-space-before-medium { margin-top: var(--space-element); }
.frame-space-before-large { margin-top: var(--space-section); }
.frame-space-before-extra-large { margin-top: calc(var(--space-section) * 1.5); }
.frame-space-after-extra-small { margin-bottom: 1rem; }
.frame-space-after-small { margin-bottom: 2rem; }
.frame-space-after-medium { margin-bottom: var(--space-element); }
.frame-space-after-large { margin-bottom: var(--space-section); }
.frame-space-after-extra-large { margin-bottom: calc(var(--space-section) * 1.5); }
/* "No spacing": removes the default spacing of the element */
.frame-space-before-none { margin-top: 0 !important; }
.frame-space-after-none { margin-bottom: 0 !important; }
.all.frame-space-before-none { padding-top: 0 !important; }
.all.frame-space-after-none { padding-bottom: 0 !important; }
/* Top level: the classes are on the .all wrapper and on the inner frame – only the wrapper counts */
.all > .main > .frame[class*="frame-space-"] { margin-top: 0; margin-bottom: 0; }

/* ---------- Scroll effects ---------- */
/* Timeline: the year closest to the middle of the viewport is highlighted (class set by main.js) */
.f-timeline .subheader { transition: font-size 0.35s ease, box-shadow 0.35s ease; }
.f-timeline .frame.is-current .subheader { font-size: clamp(1.625rem, 1.1rem + 1.75vw, 3.375rem); box-shadow: 0 0 0 4px var(--c-red); }

/* Cut out images (PNG): rise in when visible, zoom/tilt lightly while scrolling (progress set by main.js) */
.cutout img { transform-origin: 50% 100%; scale: calc(0.96 + var(--cutout-progress, 0.5) * 0.04); transition: translate 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), scale 0.15s linear; }
html.js .cutout:not(.is-visible) img { translate: 0 8%; }
.stage-media-cutout img { transform-origin: 100% 100%; }
.card-media-cutout, .quote-media.cutout { overflow: hidden; }
/* Teaser cards: image always fills the card width, light movement while scrolling */
.card-media-cutout img { transform-origin: 50% 100%; scale: calc(1 + var(--cutout-progress, 0.5) * 0.08); }
/* Cut out product in front of the split image: larger than the column, reaches into the text column (as in the layout) */
/* Product reaches out of the background into the free space next to the text (not over the text) */
.split-cutout { position: absolute; z-index: 1; left: -30%; top: 50%; width: 125%; transform: translateY(-50%); pointer-events: none; }
.split-media .split-cutout img {
    position: static; width: 100%; height: auto; object-fit: contain; transform-origin: 50% 50%;
    rotate: calc((var(--cutout-progress, 0.5) - 0.5) * -12deg);
    transform: translate(calc((0.5 - var(--cutout-progress, 0.5)) * 8%), calc((0.5 - var(--cutout-progress, 0.5)) * 14%));
}
.split-image-left .split-cutout { left: auto; right: -30%; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
    :root { --side: 30px; --gutter: 30px; }

    /* Mobile navigation */
    .top-inner { grid-template-columns: auto 1fr auto auto; grid-template-areas: "logo meta cta toggle"; padding: 0.9rem 0; column-gap: 1rem; }
    .mobile-only { display: inline-flex; }
    .mobile-cta { display: inline-flex; grid-area: cta; }
    .nav-toggle {
        grid-area: toggle; display: inline-flex; align-items: center; justify-content: center;
        width: 48px; height: 48px; padding: 0; border: 0; background: none; color: var(--c-blue); cursor: pointer;
    }
    .nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after { display: block; width: 28px; height: 3px; background: currentColor; transition: transform 0.2s ease-out, background-color 0.2s; }
    .nav-toggle-icon { position: relative; }
    .nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; left: 0; }
    .nav-toggle-icon::before { top: -9px; }
    .nav-toggle-icon::after { top: 9px; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-icon { background: transparent; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { transform: translateY(9px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { transform: translateY(-9px) rotate(-45deg); }

    .main-nav {
        position: absolute; left: calc(-1 * var(--side)); right: calc(-1 * var(--side)); top: 100%;
        background: var(--c-white); box-shadow: 0 16px 30px rgba(0, 42, 82, 0.18); border-top: 1px solid var(--c-grey);
        max-height: calc(100vh - 100%); overflow-y: auto; padding: 0.5rem var(--side) 1.5rem;
    }
    .js .main-nav:not(.is-open) { display: none; }
    html:not(.js) .main-nav { position: static; grid-column: 1 / -1; box-shadow: none; padding: 0; }
    html:not(.js) .nav-toggle { display: none; }
    html:not(.js) .sub-nav { display: block; }
    .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav-item { flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid var(--c-grey); }
    .nav-item > a { padding: 0.9rem 0; font-size: 1.15em; flex: 1; }
    .nav-item.nav-button { border: 0; padding-top: 1rem; }
    .nav-item.nav-button > a { flex: none; }
    .open-sub { width: 48px; height: 48px; }
    .sub-nav { position: static; width: 100%; box-shadow: none; border: 0; padding: 0 0 0.75rem 1rem; min-width: 0; }
}

@media (max-width: 1100px) {
    .c33, .c66, .c16, .c30, .c70, .c40, .c20, .c50, .c80, .c25, .c75, .c35, .c60 { flex: 0 0 100%; max-width: 100%; }
    .cStage.l-99 { flex-direction: column-reverse; }
    .cStage > .c25 { flex: 0 0 50%; max-width: 50%; }
    .frame-type-textpic.frame-layout-1 { grid-template-columns: 64px 1fr; }
    .frame-type-textpic.frame-layout-1 .ce-bodytext { grid-column: 1 / -1; grid-row: 2; margin-top: 1rem; }
    .frame-type-textpic.frame-layout-1 .ce-bodytext:has(> .ce-header) { display: contents; }
    .frame-type-textpic.frame-layout-1 .ce-bodytext > .ce-header { grid-column: 2; grid-row: 1; }
    .frame-type-textpic.frame-layout-1 .ce-bodytext > :not(.ce-header) { grid-column: 1 / -1; }
    .frame-type-textpic.frame-layout-1 .ce-bodytext > .ce-header + * { margin-top: 1rem; }
}

@media (max-width: 900px) {
    .stage-inner { display: block; min-height: 0; padding-bottom: 0; }
    .stage-text { max-width: none; padding-bottom: 2rem; }
    .stage-media, .stage-media-masked { position: relative; width: calc(100% + 2 * var(--side)); height: auto; aspect-ratio: 3 / 2; margin: 0 calc(-1 * var(--side)); }
    .stage.l-1 .stage-inner { padding-top: clamp(2.5rem, 5vw, 6rem); }
    .stage.l-2 .stage-inner { display: flex; padding-bottom: 2rem; }
    .stage.l-2 .stage-text { padding: 0; }

    .split, .split-image-right:has(.split-cutout), .split-image-left:has(.split-cutout) { grid-template-columns: 1fr; }
    .split-cutout { left: -5%; width: 110%; }
    .split-image-left .split-cutout { right: -5%; }
    .split-media { min-height: 0; aspect-ratio: 4 / 3; }
    .split-media.split-media-cutout { aspect-ratio: auto; }
    .split-media.split-media-cutout img { position: static; width: 100%; }
    main:has(> .split:last-child .split-media-cutout) + .page-footer { padding-top: clamp(3rem, 6vw, 6rem); }
    .split-image-left .split-media { order: 0; }
    .split-text, .split-image-right .split-text, .split-image-left .split-text { padding: var(--space-section) var(--side); justify-content: flex-start; }
    .split-text-inner, .split-image-right .split-text-inner, .split-image-left .split-text-inner { width: 100%; }
    .split-media { order: 2; }

    .quote-inner, .quote.l-0 .quote-inner, .quote.l-1 .quote-inner { grid-template-columns: 1fr; }
    .quote.l-0 .quote-box, .quote.l-1 .quote-box { order: -1; margin: var(--space-element) 0 0; }
    .quote.l-1 .quote-inner { min-height: 0; }
    .quote.l-1 .quote-media { position: relative; inset: auto; order: 2; margin: 0 calc(-1 * var(--side)); aspect-ratio: 4 / 3; }
    .quote.l-1 .quote-box { grid-column: auto; padding-bottom: 0; }
    .quote.l-0 .quote-media { left: 0; margin: 0 calc(-1 * var(--side)); }
    .quote.l-0 .quote-box { grid-column: auto; min-height: 0; }
    .quote.l-0::before { background-size: 140vw auto; background-position: left -70vw top 2rem; }
    .quote.l-0 .quote-box::before { left: 3rem; bottom: -3rem; border-radius: 0 0 100% 0; }

    .cover-media { min-height: 24rem; }
    .cta-inner { position: static; transform: none; padding: 0; margin-top: -3rem; }
    .cta-box { width: 100%; margin-left: 0; }
    main:has(> .cta:last-child, > :last-child > .cta:last-child) + .page-footer { padding-top: clamp(3rem, 6vw, 6rem); }
    .cta { background: var(--c-red); }
}

@media (max-width: 767px) {
    :root { --side: 20px; --gutter: 24px; }
    .cStage > .c25 { flex: 0 0 100%; max-width: 100%; }
    .top-inner { column-gap: 0.5rem; }
    .top-meta { gap: 0.25rem; }
    .lang-nav { display: none; }
    .main-nav .lang-nav { display: block; }
    .mobile-cta { font-size: 0.75rem; padding: 0.4em 0.7em; }
    .logo { width: 120px; }
    .features { grid-template-columns: 1fr; }
    .cover .h2 { font-size: var(--fs-h2); hyphens: manual; }
    .features-l1 { grid-template-columns: 1fr 1fr; }
    .f-timeline .section-content > .frame { grid-template-columns: 80px 1fr; }
    .contacts { justify-content: center; }
    .downloads-columns { columns: 1; }
    .footer-bottom .main { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .slider-track { scroll-behavior: auto; }
    .cutout img, .split-media .split-cutout img { translate: none !important; scale: none !important; rotate: none !important; transform: none !important; }
}

@media print {
    .page-header .main-nav, .nav-toggle, .top-meta, .slider-controls, .video-toggle, .page-footer::after { display: none !important; }
    .stage, .section.l-2, .section.l-3, .card, .page-footer { color: #000 !important; background: none !important; }
}