/*
 * CMS pages (body.cms-page-view), styled like the live shop: content in the theme container (as wide as the breadcrumbs), 14px text,
 * uppercase page/section headings, orange links, simple bordered tables.
 * Works on top of css/cms-content.css (which restores the spacing the Hyva reset removes); this file only
 * sets the sizes/colours/widths of the live design. Plain CSS, no Tailwind rebuild. The page content is not changed.
 */

/* ---------- Content column: the theme container, same width as the breadcrumbs (96rem container, 24px side padding) ---------- */
body.cms-page-view .column.main > h1,
body.cms-page-view .column.main > h2,
body.cms-page-view .column.main > h3,
body.cms-page-view .column.main > h4,
body.cms-page-view .column.main > p,
body.cms-page-view .column.main > ul,
body.cms-page-view .column.main > ol,
body.cms-page-view .column.main > hr,
body.cms-page-view .column.main > table,
body.cms-page-view .column.main > .gp-cms-paragraph,
body.cms-page-view .column.main > .gp-accordion,
body.cms-page-view .column.main > .gp-teaser,
body.cms-page-view .column.main > div.hidden,
body.cms-page-view .column.main > div.block.widget,
body.cms-page-view .column.main > div[class~="md:hidden"] {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* ---------- Text ---------- */
body.cms-page-view .column.main .gp-cms-paragraph,
body.cms-page-view .column.main .gp-accordion,
body.cms-page-view .column.main .gp-teaser,
body.cms-page-view .column.main > p,
body.cms-page-view .column.main > ul,
body.cms-page-view .column.main > ol {
    color: #333;
    font-size: 14px;
    line-height: 20px;
}
body.cms-page-view .column.main .gp-cms-paragraph p,
body.cms-page-view .column.main .gp-accordion p,
body.cms-page-view .column.main .gp-teaser p,
body.cms-page-view .column.main > p {
    margin: 0 0 10px;
}
body.cms-page-view .column.main .gp-cms-paragraph ul,
body.cms-page-view .column.main .gp-cms-paragraph ol,
body.cms-page-view .column.main > ul,
body.cms-page-view .column.main > ol {
    margin: 0 0 25px;
    padding-left: 40px;
}
body.cms-page-view .column.main .gp-cms-paragraph li,
body.cms-page-view .column.main > ul li,
body.cms-page-view .column.main > ol li {
    margin: 0 0 10px;
}
body.cms-page-view .column.main .gp-cms-paragraph a,
body.cms-page-view .column.main .gp-accordion a,
body.cms-page-view .column.main .gp-teaser a,
body.cms-page-view .column.main > p a {
    color: #ff6101;
    text-decoration: none;
}
body.cms-page-view .column.main .gp-cms-paragraph a:hover,
body.cms-page-view .column.main .gp-accordion a:hover,
body.cms-page-view .column.main .gp-teaser a:hover,
body.cms-page-view .column.main > p a:hover {
    text-decoration: underline;
}

/* ---------- Headings ---------- */
body.cms-page-view .column.main > h1,
body.cms-page-view .column.main > h2,
body.cms-page-view .column.main .gp-cms-paragraph h1,
body.cms-page-view .column.main .gp-cms-paragraph h2,
body.cms-page-view .column.main .gp-accordion h2 {
    margin: 10px auto 20px;
    color: #212121;
    font-size: 26px;
    font-weight: 700;
    line-height: 28.6px;
    text-transform: uppercase;
}
body.cms-page-view .column.main .gp-cms-paragraph h1,
body.cms-page-view .column.main .gp-cms-paragraph h2,
body.cms-page-view .column.main .gp-accordion h2 {
    margin-left: 0;
    margin-right: 0;
}
body.cms-page-view .column.main > h3,
body.cms-page-view .column.main .gp-cms-paragraph h3,
body.cms-page-view .column.main .gp-teaser h3 {
    margin: 10px 0 20px;
    color: #212121;
    font-size: 24px;
    font-weight: 500;
    line-height: 26.4px;
    text-transform: none;
}
body.cms-page-view .column.main > h3 {
    margin-left: auto;
    margin-right: auto;
}

/* page title: the first heading of the page (like live's headline block) */
body.cms-page-view .column.main > h1:first-of-type,
body.cms-page-view .column.main > h2:first-of-type {
    margin-top: 0;
    margin-bottom: 40px;
}

/* ---------- Tables: like live, borders only when the table itself asks for them (border="N") ---------- */
body.cms-page-view .column.main .gp-cms-paragraph table,
body.cms-page-view .column.main .gp-teaser table,
body.cms-page-view .column.main > table {
    border-collapse: collapse;
    border: 0;
    margin: 0;
    color: #333;
    font-size: 14px;
    line-height: 20px;
}
body.cms-page-view .column.main .gp-cms-paragraph th,
body.cms-page-view .column.main .gp-cms-paragraph td,
body.cms-page-view .column.main .gp-teaser th,
body.cms-page-view .column.main .gp-teaser td,
body.cms-page-view .column.main > table th,
body.cms-page-view .column.main > table td {
    padding: 8px 10px;
    border: 0;
    vertical-align: top;
}
body.cms-page-view .column.main .gp-cms-paragraph table[border]:not([border="0"]),
body.cms-page-view .column.main .gp-teaser table[border]:not([border="0"]),
body.cms-page-view .column.main > table[border]:not([border="0"]) {
    border: 1px solid #777;
}
body.cms-page-view .column.main .gp-cms-paragraph table[border]:not([border="0"]) th,
body.cms-page-view .column.main .gp-cms-paragraph table[border]:not([border="0"]) td,
body.cms-page-view .column.main .gp-teaser table[border]:not([border="0"]) th,
body.cms-page-view .column.main .gp-teaser table[border]:not([border="0"]) td,
body.cms-page-view .column.main > table[border]:not([border="0"]) th,
body.cms-page-view .column.main > table[border]:not([border="0"]) td {
    border: 1px solid #777;
}
body.cms-page-view .column.main .gp-cms-paragraph th,
body.cms-page-view .column.main .gp-teaser th,
body.cms-page-view .column.main > table th {
    font-weight: 700;
    text-align: left;
}

/* headings without text (left over from the page builder) take no space */
body.cms-page-view .column.main h1:empty,
body.cms-page-view .column.main h2:empty,
body.cms-page-view .column.main h3:empty,
body.cms-page-view .column.main h4:empty {
    display: none;
}

/* ---------- Separator ---------- */
body.cms-page-view .column.main hr,
body.cms-page-view .column.main .gp-cms-paragraph hr {
    margin: 20px auto;
    border: 0;
    border-top: 1px solid #ddd;
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
    /* live: the page title is centred and has a bit less space below on phones */
    body.cms-page-view .column.main > h1:first-of-type,
    body.cms-page-view .column.main > h2:first-of-type {
        margin-bottom: 30px;
        text-align: center;
        word-break: break-word;
    }
    /* live: glossary tables stack their cells on phones */
    body[class*="cms-lexikon"] .column.main .gp-cms-paragraph table tr td,
    body[class*="cms-lexikon"] .column.main .gp-cms-paragraph table tr th {
        display: block;
        width: auto !important;
        height: auto !important;
    }
    body[class*="cms-lexikon"] .column.main .gp-cms-paragraph table {
        width: 100% !important;
        max-width: 100%;
    }
}

/* ---------- Pages with their own page width on live (registration, welcome pages) ---------- */
body.cms-registrierung .column.main {
    width: 100%;
    box-sizing: border-box;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px 20px;
}
body.cms-nue-gewerbebetrieb .column.main,
body.cms-nue-errichter .column.main,
body.cms-nue-privatperson .column.main {
    width: 100%;
    box-sizing: border-box;
    max-width: 1140px;
    margin: 0 auto;
    padding: 20px;
}
@media (max-width: 1023px) {
    body.cms-registrierung .column.main,
    body.cms-nue-gewerbebetrieb .column.main,
    body.cms-nue-errichter .column.main,
    body.cms-nue-privatperson .column.main {
        max-width: 750px;
    }
}

/* ---------- Lexikon ---------- */
/* the page title (h1) inside the content has 20px space above, like live */
body[class*="cms-lexikon"] .column.main .gp-cms-paragraph h1 {
    margin-top: 20px;
}
/* ---------- Teaser images: full content width, like live (simple pages; the big guide pages use side-by-side layouts) ---------- */
body[class*="cms-lexikon"] .column.main .gp-teaser img,
body[class*="cms-lexikon"] .column.main .gp-cms-paragraph > p > img,
body[class*="cms-rauchmelder"] .column.main .gp-teaser img,
body.cms-ajax-alarmanlage .column.main .gp-teaser img,
body.cms-ajax-systems-angebotsanfragen .column.main .gp-teaser img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}
body.cms-page-view .column.main .gp-teaser {
    margin: 0 auto 20px;
}

/* ---------- FAQ accordion (details/summary), like live's accordion ---------- */
body.cms-page-view .column.main .gp-accordion {
    margin-bottom: 40px;
}
body.cms-page-view .column.main .gp-accordion details {
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
}
body.cms-page-view .column.main .gp-accordion details + details {
    border-top: 0;
}
body.cms-page-view .column.main .gp-accordion summary {
    position: relative;
    display: block;
    min-height: 40px;
    padding: 10px 0 10px 45px;
    list-style: none;
    cursor: pointer;
    color: #212121;
    font-size: 18px;
    font-weight: 600;
    line-height: 19.8px;
    box-sizing: border-box;
}
body.cms-page-view .column.main .gp-accordion summary::-webkit-details-marker {
    display: none;
}
body.cms-page-view .column.main .gp-accordion summary::marker {
    content: "";
}
/* orange chevron on the left: points right when closed, down when open */
body.cms-page-view .column.main .gp-accordion summary::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid #ff6101;
    border-bottom: 2px solid #ff6101;
    transform: rotate(-45deg);
    transition: transform .2s;
}
body.cms-page-view .column.main .gp-accordion details[open] > summary::before {
    margin-top: -8px;
    transform: rotate(45deg);
}
body.cms-page-view .column.main .gp-accordion details > div {
    padding: 0 0 0 45px;
}
body.cms-page-view .column.main .gp-accordion details > div > :last-child {
    margin-bottom: 0;
}
@media (max-width: 1023px) {
    body.cms-page-view .column.main .gp-accordion summary {
        font-size: 16px;
        word-break: break-word;
    }
}
@media (max-width: 767px) {
    body.cms-page-view .column.main .gp-accordion details > div {
        padding-left: 0;
    }
}

/* ---------- Guide pages: teaser images at half width, left or right, like live (full width on phones) ---------- */
@media (min-width: 768px) {
    body.cms-ueberwachungskameras-html .column.main .gp-teaser img,
    body.cms-videoueberwachung1-html .column.main .gp-teaser img,
    body.cms-alarmanlagen-html .column.main .gp-teaser img[data-src*="2022-08-alarmanlage-germanprotect-uebersicht"] {
        display: block;
        width: 49.3%;
        max-width: 100%;
        height: auto;
        margin-left: 0;
        margin-right: auto;
    }
    /* images that are shown at full width on live */
    body.cms-ueberwachungskameras-html .column.main .gp-teaser img[data-src*="2021-Neigung-German-Protect"],
    body.cms-ueberwachungskameras-html .column.main .gp-teaser img[data-src*="Bild_8_B2B_Support"],
    body.cms-videoueberwachung1-html .column.main .gp-teaser img[data-src*="2023-02-german-protect-videoueberwachung-sicherheit"] {
        width: 100%;
    }
    /* images on the right half (the guide page alternates left and right) */
    body.cms-videoueberwachung1-html .column.main .gp-teaser img[data-src*="2022-05-videoueberwachung-german-protect"],
    body.cms-videoueberwachung1-html .column.main .gp-teaser img[data-src*="2022-05-videoueberwachung-nvr"],
    body.cms-videoueberwachung1-html .column.main .gp-teaser img[data-src*="2022-04-Transreceiver-Vernetzung-German-Protect"],
    body.cms-videoueberwachung1-html .column.main .gp-teaser img[data-src*="2022-05-videoueberwachung-bildschirm"],
    body.cms-videoueberwachung1-html .column.main .gp-teaser img[data-src*="2022-05-videoueberwachung-gate"] {
        margin-left: auto;
        margin-right: 0;
    }
}
@media (max-width: 767px) {
    body.cms-ueberwachungskameras-html .column.main .gp-teaser img,
    body.cms-videoueberwachung1-html .column.main .gp-teaser img,
    body.cms-alarmanlagen-html .column.main .gp-teaser img[data-src*="2022-08-alarmanlage-germanprotect-uebersicht"] {
        display: block;
        width: 100%;
        height: auto;
    }
}

/* ---------- Product grids and carousels inside CMS pages: same card as the category pages (live product tile) ----------
 * The widget uses the same card markup as the listings (.gp-card, with its hidden footer: delivery time + "Zum Produkt").
 * Only the look changes; add-to-cart, wishlist and the product links keep working in the markup.
 */
body.cms-page-view .column.main .block-products-list .block-content > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 20px;
}
@media (min-width: 768px) {
    body.cms-page-view .column.main .block-products-list .block-content > .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    body.cms-page-view .column.main .block-products-list .block-content > .grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }
}
body.cms-page-view .column.main :is(.block-products-list, .widget-product-carousel) .gp-card {
    height: 100%;
    padding: 1rem;
    background: #fff;
}
body.cms-page-view .column.main :is(.block-products-list, .widget-product-carousel) .gp-card .gp-card__rating,
body.cms-page-view .column.main :is(.block-products-list, .widget-product-carousel) .gp-card .product-brand-logo,
body.cms-page-view .column.main :is(.block-products-list, .widget-product-carousel) .gp-card .gp-card__actions {
    display: none;
}
body.cms-page-view .column.main :is(.block-products-list, .widget-product-carousel) .gp-card .product-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
body.cms-page-view .column.main :is(.block-products-list, .widget-product-carousel) .gp-card .gp-card__title {
    margin: .25rem 0 .75rem;
    color: #212121;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
}
body.cms-page-view .column.main :is(.block-products-list, .widget-product-carousel) .gp-card .gp-card__title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    min-height: calc(1.35em * 3);
    overflow: hidden;
    overflow-wrap: anywhere;
    color: inherit;
    text-decoration: none;
}
body.cms-page-view .column.main :is(.block-products-list, .widget-product-carousel) .gp-card .gp-card__title a:hover {
    color: #ff6101;
}
body.cms-page-view .column.main :is(.block-products-list, .widget-product-carousel) .gp-card .pt-1 {
    text-align: left;
}
body.cms-page-view .column.main :is(.block-products-list, .widget-product-carousel) .gp-card .gp-card__footer {
    display: block !important; /* overrides the inline display:none default of the card footer */
    margin-top: auto;
    padding-top: .75rem;
}
body.cms-page-view .column.main :is(.block-products-list, .widget-product-carousel) .gp-card__delivery {
    margin: 0 0 .75rem;
    color: #333;
    font-size: .8125rem;
    line-height: 1.35;
}
body.cms-page-view .column.main :is(.block-products-list, .widget-product-carousel) .gp-card__delivery strong {
    color: #2e9e46;
}
body.cms-page-view .column.main :is(.block-products-list, .widget-product-carousel) .gp-card__button {
    display: block;
    width: 100%;
    padding: .7rem 1rem;
    background: #000;
    border-radius: 2px;
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s;
}
body.cms-page-view .column.main :is(.block-products-list, .widget-product-carousel) .gp-card__button:hover,
body.cms-page-view .column.main :is(.block-products-list, .widget-product-carousel) .gp-card__button:focus {
    background: #ff6101;
    color: #fff;
}
@media (max-width: 767px) {
    body.cms-page-view .column.main :is(.block-products-list, .widget-product-carousel) .gp-card {
        padding-left: .5rem;
        padding-right: .5rem;
    }
    body.cms-page-view .column.main :is(.block-products-list, .widget-product-carousel) .gp-card .gp-card__title {
        font-size: .9375rem;
        line-height: 1.3;
    }
    body.cms-page-view .column.main :is(.block-products-list, .widget-product-carousel) .gp-card__button {
        padding: .6rem .5rem;
        font-size: .8125rem;
    }
}

/* ---------- Alarmaufschaltung page ---------- */
/* the page's own row blocks (.dgm-row) use the same 1140px column as everything else */
body.cms-alarmaufschaltung .column.main > .dgm-row {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    clear: both;
}
body.cms-alarmaufschaltung .column.main > .gp-cms-paragraph,
body.cms-alarmaufschaltung .column.main > h1 {
    clear: both;
}
/* text block + infographic: two columns next to each other (live: image teaser "teaser and text") */
@media (min-width: 768px) {
    body.cms-alarmaufschaltung .column.main > .gp-teaser:not(:has(img)):has(+ .gp-teaser img) {
        float: left;
        width: 50%;
        max-width: none;
        margin: 0 0 20px 0;
        padding: 24px 24px 0;
        box-sizing: border-box;
    }
    body.cms-alarmaufschaltung .column.main > .gp-teaser:has(img):is(.gp-teaser:not(:has(img)):has(+ .gp-teaser img) + .gp-teaser) {
        float: right;
        width: 50%;
        max-width: none;
        margin: 0 0 20px 0;
        padding: 4px;
        box-sizing: border-box;
    }
}
body.cms-alarmaufschaltung .column.main > .gp-teaser img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* ---------- Landing pages with a hero image at the top (Kritis, DSGVO, professional video surveillance) ----------
 * live: the hero image fills the content width */
body.cms-kritis-sicherheit-schutz-fuer-kritische-infrastruktur .column.main .gp-teaser img,
body.cms-professionelle-videoueberwachung .column.main .gp-teaser img,
body.cms-videoueberwachung-und-dsgvo-datenschutzkonforme-loesungen .column.main .gp-teaser img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* ---------- Images inside text paragraphs flow inline, like live (the Tailwind reset made them block-level) ---------- */
body.cms-page-view:not([class*="cms-lexikon"]) .column.main .gp-cms-paragraph p img {
    display: inline;
    vertical-align: baseline;
}

/* ---------- Live theme wrapper classes used inside some page contents (roadshow, landing pages) ----------
 * live: .cs-container = full-width row with 15px side padding, .cs-container__inner = centred 1140px column */
body.cms-page-view .column.main .cs-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}
/* the page column is already the container width, so the rows need no side padding */
body.cms-page-view .column.main .cs-container {
    padding-left: 0;
    padding-right: 0;
}
body.cms-page-view .column.main .cs-container__inner {
    position: relative;
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- B2B project support ----------
 * The content blocks start with the page builder's element title (a heading that repeats the real heading inside the
 * section right below it). Live does not show it. */
body.cms-b2b-projektsupport .column.main .gp-cms-paragraph > h1:first-child:has(+ section),
body.cms-b2b-projektsupport .column.main .gp-cms-paragraph > h2:first-child:has(+ section) {
    display: none;
}
/* on phones the flex columns of the sections may shrink below their content width and long words wrap */
@media (max-width: 767px) {
    body.cms-b2b-projektsupport .column.main .gp-cms-paragraph section > div,
    body.cms-b2b-projektsupport .column.main .gp-cms-paragraph section > img {
        min-width: 0;
    }
    body.cms-b2b-projektsupport .column.main .gp-cms-paragraph section {
        overflow-wrap: break-word;
    }
}

/* ---------- YouTube click-to-play inside pages (script: templates/gp-cms-scripts.phtml) ---------- */
body.cms-page-view .column.main .video-container {
    width: 100%;
    max-width: none;
    margin: 0 auto 1.5rem;
}
body.cms-page-view .column.main .youtube {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    background: #000;
    cursor: pointer;
}
body.cms-page-view .column.main .youtube img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .85;
    transition: opacity .2s ease;
}
body.cms-page-view .column.main .youtube:hover img,
body.cms-page-view .column.main .youtube:focus img {
    opacity: 1;
}
body.cms-page-view .column.main .youtube .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 90px;
    height: 60px;
    margin: -30px 0 0 -45px;
    background: #333;
    border-radius: 6px;
    opacity: .8;
}
body.cms-page-view .column.main .youtube:hover .play-button {
    opacity: 1;
}
body.cms-page-view .column.main .youtube .play-button::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 32px;
    border-style: solid;
    border-width: 15px 0 15px 26px;
    border-color: transparent transparent transparent #fff;
}
body.cms-page-view .column.main .youtube.is-playing {
    cursor: default;
}
body.cms-page-view .column.main .youtube iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------- Photo gallery: one image at a time, swipe or use the buttons (live: image slider) ---------- */
body.cms-page-view .column.main .gp-gallery-wrap {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0 auto 20px;
}
body.cms-page-view .column.main .gp-gallery {
    display: flex;
    gap: 0;
    width: 100%;
    max-width: none;
    margin: 0 auto 20px;
    padding-inline: max(0px, calc((100% - 878px) / 2));
    scroll-padding-inline: max(0px, calc((100% - 878px) / 2));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    box-sizing: border-box;
}
body.cms-page-view .column.main .gp-gallery-wrap .gp-gallery {
    margin-bottom: 0;
    scrollbar-width: none;
}
body.cms-page-view .column.main .gp-gallery-wrap .gp-gallery::-webkit-scrollbar {
    display: none;
}
body.cms-page-view .column.main .gp-gallery > img {
    flex: 0 0 min(878px, 100%);
    width: min(878px, 100%);
    max-width: none;
    height: auto;
    scroll-snap-align: center;
}
body.cms-page-view .column.main .gp-gallery__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    background: rgba(255, 255, 255, .9);
    border: 1px solid #ddd;
    border-radius: 50%;
    cursor: pointer;
}
body.cms-page-view .column.main .gp-gallery__nav::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid #ff6101;
    border-right: 2px solid #ff6101;
}
body.cms-page-view .column.main .gp-gallery__nav--prev {
    left: 8px;
}
body.cms-page-view .column.main .gp-gallery__nav--next {
    right: 8px;
}
body.cms-page-view .column.main .gp-gallery__nav--prev::before {
    margin: -5px 0 0 -3px;
    transform: rotate(-135deg);
}
body.cms-page-view .column.main .gp-gallery__nav--next::before {
    margin: -5px 0 0 -7px;
    transform: rotate(45deg);
}
body.cms-page-view .column.main .gp-gallery__nav:disabled {
    opacity: .35;
    cursor: default;
}

/* ---------- Versand in die Schweiz ----------
 * Two page builder element titles are left in the content: "CSS" (in front of the page's style block) and
 * "Für unsere Schweizer Kunden" (a title in front of the real heading). Live does not show them. */
body.cms-versand-in-die-schweiz-mit-meineinkauf-ch .column.main > h2:has(+ style),
body.cms-versand-in-die-schweiz-mit-meineinkauf-ch .column.main .gp-cms-paragraph > h2:first-child:has(+ h3) {
    display: none;
}
/* the brand logo tables fill the column (the logos shrink with their cells) instead of growing to the logos' width */
body.cms-versand-in-die-schweiz-mit-meineinkauf-ch .column.main .gp-cms-paragraph table {
    width: 100%;
    table-layout: fixed;
}
body.cms-versand-in-die-schweiz-mit-meineinkauf-ch .column.main .gp-cms-paragraph table img {
    max-width: 100%;
    height: auto;
}

/* ---------- Base text size of CMS page contents ----------
 * live's page text is 14px (root font size 10px); contents that are not inside the text wrappers inherit it */
body.cms-page-view .column.main {
    font-size: 14px;
    line-height: 20px;
}

/* ---------- Kritis: page builder element titles ----------
 * Blocks start with a heading like "Header: Schutz vor ...", "Text: ...", "Headline: ..." or "Bild Desktop: ..."
 * (not shown on live). The real stage headings sit inside .kritis-stage-heading, so they stay. */
body.cms-kritis-sicherheit-schutz-fuer-kritische-infrastruktur .column.main .gp-cms-paragraph > h2:first-child {
    display: none;
}

/* ---------- Hikvision roadshow ----------
 * The page's own CSS is written in rem for live's 10px root font size; the same pixel values here (1rem = 10px) */
body.cms-hikvision-roadshow .top-roadshow {
    padding-top: 100px;
    padding-bottom: 80px;
}
body.cms-hikvision-roadshow .top-roadshow img {
    display: inline-block;
    margin-bottom: 30px;
}
body.cms-hikvision-roadshow .top-roadshow ul {
    margin: 30px 0;
}
body.cms-hikvision-roadshow .top-roadshow ul li:before {
    margin: 0 10px;
}
body.cms-hikvision-roadshow .top-roadshow ul i {
    margin-left: 10px;
    margin-right: 10px;
}
body.cms-hikvision-roadshow .top-roadshow button {
    margin: 10px auto 30px;
}
body.cms-hikvision-roadshow .below-banner {
    margin: 30px auto;
}
body.cms-hikvision-roadshow .video-block {
    margin-bottom: 30px;
}
body.cms-hikvision-roadshow .video-block-left p {
    margin-bottom: 25px;
}
body.cms-hikvision-roadshow .cs-container.cs-container--paragraph strong,
body.cms-hikvision-roadshow .video-block strong {
    margin-bottom: 20px;
}
body.cms-hikvision-roadshow .cs-container.cs-container--paragraph span,
body.cms-hikvision-roadshow .video-block span {
    margin-bottom: 30px;
}
body.cms-hikvision-roadshow .cs-container.cs-container--paragraph {
    margin-bottom: 10px;
    padding-top: 30px;
    padding-bottom: 30px;
}
body.cms-hikvision-roadshow .cs-container.cs-container--paragraph .field .label {
    margin-bottom: 5px;
    font-size: 14px;
}
body.cms-hikvision-roadshow .cs-container.cs-container--paragraph .webforms .field {
    margin-bottom: 10px;
}
body.cms-hikvision-roadshow .video-block img {
    max-width: 100%;
    height: auto;
}
@media (max-width: 767px) {
    body.cms-hikvision-roadshow .top-roadshow ul li {
        margin: 10px 0;
    }
}

/* ---------- Stellenangebote ----------
 * The banner photo of this page no longer exists anywhere (the original was on the old staging host), so the image
 * is hidden; its overlay text ("Spannende Stellenangebote bei GermanProtect") is shown as a normal centred heading. */
body.cms-stellenangebote .column.main .head_img {
    display: none;
}
body.cms-stellenangebote .column.main .head_pos {
    position: static;
}
body.cms-stellenangebote .column.main .head_img_text {
    position: static;
    min-width: 0;
    padding: 0;
    margin: 0 0 20px;
    background: none;
    transform: none;
    text-align: center;
}
body.cms-stellenangebote .column.main .head_img_text h2 {
    margin: 10px 0;
    color: #212121;
    font-size: 26px;
    font-weight: 700;
    line-height: 28.6px;
    text-transform: uppercase;
}
body.cms-stellenangebote .column.main .head_img_text h3 {
    margin: 0;
    color: #212121;
    font-size: 24px;
    font-weight: 500;
    line-height: 26.4px;
}

/* ---------- Content blocks that ended up outside the page container ----------
 * Some page contents have unbalanced HTML, so the browser closes the page wrappers early and a block (for example the
 * form of "Alarmaufschaltung") becomes a direct child of the page body. It gets the same container as the breadcrumbs. */
body.cms-page-view > .gp-cms-paragraph,
body.cms-page-view > .page-wrapper > .gp-cms-paragraph {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}
/* the same width steps as the theme container */
@media (min-width: 640px) {
    body.cms-page-view > .gp-cms-paragraph,
    body.cms-page-view > .page-wrapper > .gp-cms-paragraph { max-width: 40rem; }
}
@media (min-width: 768px) {
    body.cms-page-view > .gp-cms-paragraph,
    body.cms-page-view > .page-wrapper > .gp-cms-paragraph { max-width: 48rem; }
}
@media (min-width: 1024px) {
    body.cms-page-view > .gp-cms-paragraph,
    body.cms-page-view > .page-wrapper > .gp-cms-paragraph { max-width: 64rem; }
}
@media (min-width: 1280px) {
    body.cms-page-view > .gp-cms-paragraph,
    body.cms-page-view > .page-wrapper > .gp-cms-paragraph { max-width: 80rem; }
}
@media (min-width: 1536px) {
    body.cms-page-view > .gp-cms-paragraph,
    body.cms-page-view > .page-wrapper > .gp-cms-paragraph { max-width: 96rem; }
}