/*
 * BERKEI Inhaltsseiten - Layout fuer alle Seiten mit der Vorlage
 * "Page with title" (Rechtstexte, Kontakt, Versand, Zahlung, Newsletter ...).
 *
 * Wird nur auf diesen Seiten geladen (includes/content-pages.php). Stufen:
 *   body.berkei-cp-full      Titelbereich, Firmen-Box, Abschnitte, Karten,
 *                            Inhaltsverzeichnis bei langen Texten
 *   body.berkei-cp-compact   nur schmaler Titelbereich (Warenkorb, Kasse ...)
 *
 * Klassen aus dem PHP-Teil:
 *   .berkei-cp-eyebrow / -stand   Label ueber, Stand unter dem Titel
 *   .berkei-cp-company            Firmen-Box
 *   .berkei-cp-heading            Abschnittsueberschrift
 *   .berkei-cp-card               Unterabschnitt als Karte
 *   .berkei-cp-layout / -main / -toc   Spalten mit Inhaltsverzeichnis
 *
 * Text wird nur an "Textpositionen" gestaltet: direkt im Inhalt, in einer
 * Gruppe darin, in den Rechtstext-Generatoren und in den Karten. Formulare,
 * Spalten, Produktraster und Plugin-Bausteine behalten ihr Layout.
 *
 * Die Gruppen des Themes setzen eigene Breiten (80 %, 80rem) und die
 * Farb-Klassen von WordPress arbeiten mit !important - daher die
 * spezifischen Selektoren und an einigen Stellen !important.
 *
 * @package BerkeiScriptCollection
 * @created 2026-09-25
 * @version 3.0
 */

body.berkei-content-page {
    --berkei-cp-accent: var(--berkei-color-secondary, #e56b28);
    --berkei-cp-accent-soft: #fdf1ea;
    --berkei-cp-dark: #1b2226;
    --berkei-cp-text: #3b434a;
    --berkei-cp-muted: #66717a;
    --berkei-cp-surface: #f6f7f8;
    --berkei-cp-border: rgba(29, 35, 39, 0.09);
    --berkei-cp-radius: 10px;
    --berkei-cp-measure: 46rem;
    --berkei-cp-toc-width: 16rem;
    /* Links dunkel fuer den Titel, rechts offen fuer die Gipfel. */
    --berkei-cp-hero-overlay: linear-gradient(90deg, rgba(14, 20, 28, 0.9) 0%, rgba(14, 20, 28, 0.62) 45%, rgba(14, 20, 28, 0.12) 100%);
}

/* =========================================================
   Titelbereich
   ========================================================= */

body.berkei-content-page main > .wp-block-group:has(.wp-block-post-title) {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    min-height: clamp(210px, 26vw, 330px);
    box-sizing: border-box;
    margin-top: var(--berkei-page-top-gap, clamp(0.75rem, 2vw, 1.25rem)) !important;
    margin-bottom: clamp(1.75rem, 4vw, 3rem) !important;
    padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.5rem) !important;
    border-radius: var(--berkei-cp-radius);
    background-color: var(--berkei-cp-dark) !important;
    /*
     * Bergmotiv aus der Mediathek (uploads/2025/10/4fd5058a-...png, 1,5 MB),
     * hier verkleinert auf 47 KB. Die erste Zeile ist der Rueckfall fuer
     * Browser ohne image-set(). Eigenes Bild: Filter berkei_content_page_hero_image.
     */
    background-image: var(--berkei-cp-hero-overlay), url("../img/page-hero-1600.jpg");
    background-image: var(--berkei-cp-hero-overlay), image-set(url("../img/page-hero-1600.webp") type("image/webp"), url("../img/page-hero-1600.jpg") type("image/jpeg"));
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 70% 45%;
    color: #fff !important;
}

body.berkei-content-page main > .wp-block-group:has(.wp-block-post-title) > .wp-block-group {
    width: 100%;
    padding: 0 !important;
}

body.berkei-content-page .berkei-cp-eyebrow {
    margin: 0 0 0.7rem !important;
    color: var(--berkei-cp-accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    line-height: 1.2;
    text-transform: uppercase;
}

body.berkei-content-page main .wp-block-post-title,
body.berkei-content-page main .wp-block-post-title.has-text-color {
    margin: 0 !important;
    color: #fff !important;
    /* 5.6vw: "Datenschutzerklaerung" passt ab 360px Breite in eine Zeile. */
    font-size: clamp(1.35rem, 5.6vw, 3.4rem) !important;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: none !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
    /* Noch schmaler: an der Silbe trennen, wo der Browser es kann, sonst umbrechen. */
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}

body.berkei-content-page main .wp-block-post-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 1rem;
    border-radius: 2px;
    background: var(--berkei-cp-accent);
}

body.berkei-content-page .berkei-cp-stand {
    margin: 0.9rem 0 0 !important;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    letter-spacing: 0.01em;
}

/* Kompakt: Warenkorb, Kasse, Konto - schmal, damit das Formular oben bleibt. */
body.berkei-cp-compact main > .wp-block-group:has(.wp-block-post-title) {
    min-height: 0;
    margin-bottom: clamp(1.25rem, 3vw, 2rem) !important;
    padding: clamp(1.1rem, 3vw, 1.75rem) clamp(1.25rem, 4vw, 2.5rem) !important;
}

body.berkei-cp-compact main .wp-block-post-title,
body.berkei-cp-compact main .wp-block-post-title.has-text-color {
    font-size: clamp(1.3rem, 3vw, 2rem) !important;
}

body.berkei-cp-compact main .wp-block-post-title::after {
    width: 40px;
    margin-top: 0.65rem;
}

/* =========================================================
   Spalten mit Inhaltsverzeichnis (nur lange Texte)
   ========================================================= */

body.berkei-content-page .berkei-cp-layout {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 3rem;
    max-width: calc(var(--berkei-cp-measure) + var(--berkei-cp-toc-width) + 3rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.berkei-content-page .berkei-cp-main {
    flex: 1 1 auto;
    min-width: 0;
    max-width: var(--berkei-cp-measure);
}

body.berkei-content-page .berkei-cp-toc {
    order: 2;
    flex: 0 0 var(--berkei-cp-toc-width);
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 1.1rem 0.9rem 1rem;
    border: 1px solid var(--berkei-cp-border);
    border-radius: var(--berkei-cp-radius);
    background: var(--berkei-cp-surface);
}

body.berkei-content-page .berkei-cp-toc__title {
    display: block;
    margin: 0 0 0.6rem;
    padding: 0 0.5rem;
    color: var(--berkei-cp-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    list-style: none;
    cursor: default;
}

body.berkei-content-page .berkei-cp-toc__title::-webkit-details-marker {
    display: none;
}

body.berkei-content-page .berkei-cp-toc__list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

body.berkei-content-page .berkei-cp-toc__list li {
    margin: 0 !important;
}

body.berkei-content-page .berkei-cp-toc__list a {
    display: flex;
    gap: 0.7rem;
    padding: 0.42rem 0.5rem;
    border-left: 3px solid transparent;
    border-radius: 0 6px 6px 0;
    color: var(--berkei-cp-text);
    font-size: 0.875rem;
    line-height: 1.35;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.berkei-content-page .berkei-cp-toc__list a:hover,
body.berkei-content-page .berkei-cp-toc__list a:focus-visible {
    background: #fff;
    color: var(--berkei-cp-dark);
}

body.berkei-content-page .berkei-cp-toc__list a.is-active {
    border-left-color: var(--berkei-cp-accent);
    background: var(--berkei-cp-accent-soft);
    color: var(--berkei-cp-dark);
    font-weight: 600;
}

body.berkei-content-page .berkei-cp-toc__num {
    flex: 0 0 1.4rem;
    color: var(--berkei-cp-accent);
    font-weight: 700;
    text-align: right;
}

/* =========================================================
   Textspalte - nur an Textpositionen
   ========================================================= */

/* Kuerzere Zeilen. */
body.berkei-content-page :is(.entry-content, .entry-content > .wp-block-group, .berkei-cp-main, .berkei-cp-main > .wp-block-group) > :is(p, ul, ol, h2, h3, h4, h5, h6, table, blockquote, .berkei-cp-company, .berkei-cp-card, .erecht24-legal-texts, #cmplz-document) {
    max-width: var(--berkei-cp-measure) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Im Spaltenlayout gibt .berkei-cp-main die Breite vor. */
body.berkei-content-page .berkei-cp-main :is(.wp-block-group, .erecht24-legal-texts, #cmplz-document) {
    max-width: none !important;
}

body.berkei-content-page :is(.entry-content, .entry-content > .wp-block-group, .berkei-cp-main, .berkei-cp-main > .wp-block-group, .erecht24-legal-texts, #cmplz-document, .berkei-cp-card) > :is(p, ul, ol, table, blockquote) {
    color: var(--berkei-cp-text);
    font-size: 1.0625rem;
    line-height: 1.75;
}

body.berkei-content-page :is(.entry-content, .entry-content > .wp-block-group, .berkei-cp-main, .berkei-cp-main > .wp-block-group, .erecht24-legal-texts, #cmplz-document, .berkei-cp-card) > p {
    margin-top: 0;
    margin-bottom: 1.1em;
}

body.berkei-content-page :is(.entry-content, .entry-content > .wp-block-group, .berkei-cp-main, .berkei-cp-main > .wp-block-group, .erecht24-legal-texts, #cmplz-document, .berkei-cp-card) > :is(ul, ol) {
    padding-left: 1.25em;
    margin: 0 0 1.25em;
}

body.berkei-content-page :is(.entry-content, .entry-content > .wp-block-group, .berkei-cp-main, .berkei-cp-main > .wp-block-group, .erecht24-legal-texts, #cmplz-document, .berkei-cp-card) > :is(ul, ol) > li + li {
    margin-top: 0.35em;
}

body.berkei-content-page :is(.entry-content, .entry-content > .wp-block-group, .berkei-cp-main, .berkei-cp-main > .wp-block-group, .erecht24-legal-texts, #cmplz-document, .berkei-cp-card) > :is(ul, ol) > li::marker {
    color: var(--berkei-cp-accent);
}

body.berkei-content-page :is(.entry-content, .entry-content > .wp-block-group, .berkei-cp-main, .berkei-cp-main > .wp-block-group, .erecht24-legal-texts, #cmplz-document, .berkei-cp-card) > :is(p, ul > li, ol > li) > a {
    color: inherit;
    text-decoration-color: var(--berkei-cp-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

body.berkei-content-page :is(.entry-content, .entry-content > .wp-block-group, .berkei-cp-main, .berkei-cp-main > .wp-block-group, .erecht24-legal-texts, #cmplz-document, .berkei-cp-card) > :is(p, ul > li, ol > li) > a:is(:hover, :focus-visible) {
    color: var(--berkei-cp-accent);
}

/* Complianz-Dropdowns (Cookie-Liste) bleiben kompakt, nur runder. */
body.berkei-content-page #cmplz-document .cmplz-dropdown {
    border-radius: 6px;
}

/* =========================================================
   Ueberschriften
   ========================================================= */

body.berkei-content-page :is(h2, h3, h4, h5, h6)[id] {
    scroll-margin-top: 1.5rem;
}

body.berkei-content-page :is(.entry-content, .entry-content > .wp-block-group, .berkei-cp-main, .berkei-cp-main > .wp-block-group, .entry-content > .wp-block-group > .wp-block-columns > .wp-block-column, .erecht24-legal-texts, #cmplz-document) > .berkei-cp-heading {
    margin: 2.8rem 0 1.1rem !important;
    padding: 0 0 0.8rem !important;
    border: 0 !important;
    color: var(--berkei-cp-dark);
    font-size: 1.2rem !important;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.06em;
    text-transform: uppercase !important;
    /* Das Theme bricht sonst mitten im Wort um; die Texte haben weiche Trennstellen. */
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: manual;
}

body.berkei-content-page .berkei-cp-heading::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 0.75rem;
    border-radius: 2px;
    background: var(--berkei-cp-accent);
}

body.berkei-content-page .berkei-cp-heading .berkei-cp-heading__num {
    display: inline-block;
    min-width: 1.6em;
    color: var(--berkei-cp-accent);
}

/* Erste Ueberschrift nicht so weit absetzen. */
body.berkei-content-page .berkei-cp-company + .berkei-cp-heading,
body.berkei-content-page .wp-block-column > .berkei-cp-heading:first-child,
body.berkei-content-page .berkei-cp-main > .berkei-cp-heading:first-child {
    margin-top: 1.5rem !important;
}

/*
 * Unterebenen (Datenschutz, Cookie-Richtlinie): ruhig, ohne Strich und nie
 * groesser als die Abschnittsueberschrift. Die Groessen des Themes kommen
 * mit !important, daher hier ebenso - aber nur an Textpositionen, damit
 * Produktkarten und Formulare ihre Ueberschriften behalten.
 *
 * :where() statt :is(): sonst gaebe #cmplz-document der Regel ID-Gewicht,
 * und die Karten koennten Abstand und Einrueckung nicht mehr ueberschreiben.
 * Gegen Complianz reicht das !important.
 */
body.berkei-content-page :where(.entry-content, .entry-content > .wp-block-group, .berkei-cp-main, .berkei-cp-main > .wp-block-group, .erecht24-legal-texts, #cmplz-document, .berkei-cp-card) > :is(h2, h3, h4, h5):not(.berkei-cp-heading) {
    margin: 1.8rem 0 0.5rem !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--berkei-cp-dark);
    font-size: 1.05rem !important;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none !important;
}

body.berkei-content-page :where(.entry-content, .entry-content > .wp-block-group, .berkei-cp-main, .berkei-cp-main > .wp-block-group, .erecht24-legal-texts, #cmplz-document, .berkei-cp-card) > :is(h4, h5):not(.berkei-cp-heading) {
    margin-top: 1.4rem !important;
    font-size: 1rem !important;
}

/* =========================================================
   Karten fuer Unterabschnitte
   ========================================================= */

body.berkei-content-page .berkei-cp-card {
    box-sizing: border-box;
    margin-bottom: 1rem !important;
    padding: 1.3rem 1.5rem 0.4rem;
    border: 1px solid var(--berkei-cp-border);
    border-radius: var(--berkei-cp-radius);
    background: #fff;
    box-shadow: 0 1px 3px rgba(29, 35, 39, 0.04);
}

body.berkei-content-page .berkei-cp-card > :first-child {
    margin-top: 0 !important;
}

body.berkei-content-page .berkei-cp-card > :is(p, ul, ol) {
    font-size: 1rem !important;
}

/* Die Ueberschrift der Karte, z. B. "Allgemeine Hinweise". */
body.berkei-content-page .berkei-cp-card > :is(h3, h4, h5):first-child {
    margin-bottom: 0.7rem !important;
    font-size: 1.1rem !important;
}

/* Fragen innerhalb der Karte mit orangem Winkel. */
body.berkei-content-page .berkei-cp-card > :is(h4, h5):not(:first-child) {
    position: relative;
    padding-left: 1.1rem !important;
}

body.berkei-content-page .berkei-cp-card > :is(h4, h5):not(:first-child)::before {
    content: "\203A";
    position: absolute;
    left: 0;
    top: -0.08em;
    color: var(--berkei-cp-accent);
    font-size: 1.35em;
    line-height: 1;
}

/* =========================================================
   Muster-Formular als Dokumentblock (Widerruf)
   ========================================================= */

body.berkei-content-page .berkei-cp-document {
    box-sizing: border-box;
    max-width: var(--berkei-cp-measure);
    margin: 1.25rem auto 1.75rem !important;
    padding: 1.25rem 1.75rem;
    border: 1px solid var(--berkei-cp-border);
    border-radius: var(--berkei-cp-radius);
    background: var(--berkei-cp-surface);
    color: var(--berkei-cp-text);
}

body.berkei-content-page .berkei-cp-document__lines {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

body.berkei-content-page .berkei-cp-document__lines li {
    position: relative;
    margin: 0 !important;
    padding: 0.7rem 0 0.7rem 1.4rem;
    border-bottom: 1px solid var(--berkei-cp-border);
    font-size: 1rem;
    line-height: 1.6;
}

body.berkei-content-page .berkei-cp-document__lines li:last-child {
    border-bottom: 0;
}

/* Kurzer oranger Strich statt des Gedankenstrichs aus der Vorlage. */
body.berkei-content-page .berkei-cp-document__lines li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.45rem;
    width: 0.55rem;
    height: 2px;
    border-radius: 1px;
    background: var(--berkei-cp-accent);
}

body.berkei-content-page .berkei-cp-document__note {
    margin: 0.5rem 0 0 !important;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(29, 35, 39, 0.18);
    color: var(--berkei-cp-muted);
    font-size: 0.875rem;
}

/* =========================================================
   Firmen-Box
   ========================================================= */

body.berkei-content-page .berkei-cp-company {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2.25rem !important;
    padding: 1.3rem 1.5rem;
    border: 1px solid var(--berkei-cp-border);
    border-radius: var(--berkei-cp-radius);
    background: var(--berkei-cp-surface);
}

body.berkei-content-page .berkei-cp-company__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--berkei-cp-accent-soft);
    color: var(--berkei-cp-accent);
}

body.berkei-content-page .berkei-cp-company p.berkei-cp-company__text {
    margin: 0 !important;
    color: var(--berkei-cp-muted);
    font-size: 0.975rem;
    line-height: 1.6;
    text-align: left;
}

body.berkei-content-page .berkei-cp-company__label {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body.berkei-content-page .berkei-cp-company__name {
    display: block;
    color: var(--berkei-cp-dark);
    font-size: 1.1rem;
    font-weight: 700;
}

body.berkei-content-page .berkei-cp-company__address,
body.berkei-content-page .berkei-cp-company__stand {
    display: block;
}

/* Nur bei Themes ohne Titel-Block, sonst steht der Stand unter dem Titel. */
body.berkei-content-page .berkei-cp-company__stand {
    margin-top: 0.35rem;
    font-size: 0.875rem;
}

body.berkei-content-page .berkei-cp-company__link {
    display: inline-block;
    margin-top: 0.45rem;
    color: var(--berkei-cp-accent) !important;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

/* =========================================================
   Mobil und Tablet
   ========================================================= */

/* Muss zu narrow in assets/js/berkei-content-pages.js passen. */
@media (max-width: 1099px) {
    body.berkei-content-page .berkei-cp-layout {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
        max-width: var(--berkei-cp-measure) !important;
    }

    body.berkei-content-page .berkei-cp-main {
        max-width: none;
    }

    body.berkei-content-page .berkei-cp-toc {
        order: 0;
        flex-basis: auto;
        position: static;
        max-height: none;
        padding: 0.35rem 0.6rem;
    }

    body.berkei-content-page .berkei-cp-toc__title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        padding: 0.65rem 0.5rem;
        cursor: pointer;
    }

    body.berkei-content-page .berkei-cp-toc__title::after {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translateY(-2px);
        transition: transform 0.2s ease;
    }

    body.berkei-content-page .berkei-cp-toc details[open] .berkei-cp-toc__title::after {
        transform: rotate(-135deg) translateY(-2px);
    }

    body.berkei-content-page .berkei-cp-toc__list {
        padding-bottom: 0.5rem !important;
    }
}

@media (max-width: 800px) {
    body.berkei-content-page main > .wp-block-group:has(.wp-block-post-title) {
        background-image: var(--berkei-cp-hero-overlay), url("../img/page-hero-800.jpg");
        background-image: var(--berkei-cp-hero-overlay), image-set(url("../img/page-hero-800.webp") type("image/webp"), url("../img/page-hero-800.jpg") type("image/jpeg"));
        background-position: 78% 45%;
    }
}

@media (max-width: 600px) {
    body.berkei-content-page :is(.entry-content, .entry-content > .wp-block-group, .berkei-cp-main, .berkei-cp-main > .wp-block-group, .erecht24-legal-texts, #cmplz-document) > :is(p, ul, ol, table, blockquote) {
        font-size: 1rem;
    }

    body.berkei-content-page .berkei-cp-card {
        padding: 1.1rem 1.1rem 0.3rem;
    }

    body.berkei-content-page .berkei-cp-company {
        align-items: flex-start;
        gap: 0.9rem;
        padding: 1rem 1.1rem;
    }

    body.berkei-content-page .berkei-cp-company__icon {
        width: 42px;
        height: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.berkei-content-page .berkei-cp-toc__list a,
    body.berkei-content-page .berkei-cp-toc__title::after {
        transition: none;
    }
}