/*
 * Text styling for imported CMS pages (agb, datenschutz, lexikon, ratgeber ...).
 * The Hyva reset removes spacing and list styles, so the content converted from the live shop
 * (wrappers .gp-cms-paragraph, .gp-teaser, .gp-accordion, headings placed directly in the page) needs it back.
 * Only these wrappers and top-level headings are touched, so the home page, products and checkout are not affected.
 */
.cms-page-view .gp-cms-paragraph,
.cms-page-view .gp-accordion,
.cms-page-view .gp-teaser {
    line-height: 1.65;
}

.cms-page-view .gp-cms-paragraph p,
.cms-page-view .gp-accordion p,
.cms-page-view .gp-teaser p {
    margin: 0 0 1em;
}

.cms-page-view .gp-cms-paragraph h1,
.cms-page-view .gp-cms-paragraph h2,
.cms-page-view .gp-cms-paragraph h3,
.cms-page-view .gp-cms-paragraph h4,
.cms-page-view .gp-accordion h2,
.cms-page-view .gp-teaser h3,
.cms-page-view .column.main > h1,
.cms-page-view .column.main > h2,
.cms-page-view .column.main > h3 {
    margin: 1.5em 0 0.5em;
    font-weight: 700;
    line-height: 1.25;
}

.cms-page-view .gp-cms-paragraph h1,
.cms-page-view .column.main > h1 { font-size: 1.75rem; }
.cms-page-view .gp-cms-paragraph h2,
.cms-page-view .gp-accordion h2,
.cms-page-view .column.main > h2 { font-size: 1.5rem; }
.cms-page-view .gp-cms-paragraph h3,
.cms-page-view .gp-teaser h3,
.cms-page-view .column.main > h3 { font-size: 1.25rem; }
.cms-page-view .gp-cms-paragraph h4 { font-size: 1.1rem; }

.cms-page-view .gp-cms-paragraph ul,
.cms-page-view .gp-cms-paragraph ol {
    margin: 0 0 1em;
    padding-left: 1.5rem;
}

.cms-page-view .gp-cms-paragraph ul { list-style: disc; }
.cms-page-view .gp-cms-paragraph ol { list-style: decimal; }
.cms-page-view .gp-cms-paragraph li { margin: 0.25em 0; }

.cms-page-view .gp-cms-paragraph a {
    text-decoration: underline;
}

.cms-page-view .gp-cms-paragraph img,
.cms-page-view .gp-teaser img {
    max-width: 100%;
    height: auto;
}

.cms-page-view .gp-cms-paragraph table {
    width: 100%;
    margin: 0 0 1em;
    border-collapse: collapse;
}

.cms-page-view .gp-cms-paragraph th,
.cms-page-view .gp-cms-paragraph td {
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
}

.cms-page-view .column.main > hr,
.cms-page-view .column.main hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid #e5e7eb;
}

.cms-page-view .gp-accordion details {
    border-bottom: 1px solid #e5e7eb;
    padding: 0.75rem 0;
}

.cms-page-view .gp-accordion summary {
    cursor: pointer;
    font-weight: 600;
}

.cms-page-view .gp-accordion details > div {
    padding-top: 0.5rem;
}

.cms-page-view .gp-teaser {
    margin: 0 0 1.5rem;
}

/* long URLs and words must wrap instead of widening the page on phones */
.cms-page-view .gp-cms-paragraph,
.cms-page-view .gp-accordion,
.cms-page-view .gp-teaser {
    overflow-wrap: break-word;
    word-break: normal;
}

/* embedded content, fixed-width tables and web forms must fit narrow screens */
.cms-page-view .column.main iframe,
.cms-page-view .column.main video,
.cms-page-view .column.main embed {
    max-width: 100%;
}

.cms-page-view .gp-cms-paragraph table,
.cms-page-view .gp-teaser table {
    max-width: 100%;
    table-layout: auto;
}

.cms-page-view .gp-cms-paragraph td img,
.cms-page-view .gp-cms-paragraph th img {
    max-width: 100%;
    height: auto;
}

.cms-page-view .column.main fieldset {
    min-width: 0;
    max-width: 100%;
}

.cms-page-view .column.main form .field {
    max-width: 100%;
}

/* phones: tables from the old shop have fixed pixel widths, let them share the screen width instead */
@media (max-width: 767px) {
    .cms-page-view .gp-cms-paragraph table:has(img) {
        width: 100% !important;
        table-layout: fixed;
    }

    .cms-page-view .gp-cms-paragraph table:has(img) td,
    .cms-page-view .gp-cms-paragraph table:has(img) th {
        width: auto !important;
    }
}

/* very wide content (glossary index) scrolls inside its own block instead of widening the whole page */
.cms-page-view .gp-cms-paragraph {
    overflow-x: auto;
}