/*
 * DE: Abschnitte der Inhaltsseiten. Ersetzt die Fusion-Builder-Spalten der Demo durch
 *     ein Raster, das von selbst umbricht — vorher standen feste Breiten, dunkle Balken
 *     über jeder Kachel und Knöpfe je nach Textlänge auf verschiedener Höhe.
 * EN: Sections of the content pages. Replaces the demo's Fusion Builder columns with a
 *     grid that wraps on its own — previously there were fixed widths, dark bars above
 *     every tile and buttons at differing heights depending on text length.
 *
 * Inhalt / Contents:
 * - Abschnitt und Innenbreite
 * - Überschriften
 * - Vorteilsliste
 * - Knöpfe der Abschnitte
 * - Kundenstimmen
 * - Fließtext und Formular
 */

/* -------------------------------------------------- Abschnitt und Innenbreite */

.cmwdBlock {
    padding-block: var(--cmwdSpaceSection);
}

.cmwdBlock--light {
    background: var(--cmwdPanel);
}

.cmwdBlock__inner {
    margin-inline: auto;
    max-width: 76rem;
    padding-inline: 1.25rem;
}

.cmwdBlock--narrow .cmwdBlock__inner {
    max-width: 52rem;
}

.cmwdBlock__inner--twocolumn {
    display: grid;
    gap: var(--cmwdSpaceLarge);
    grid-template-columns: 1fr;
}

@media only screen and (min-width: 62rem) {
    .cmwdBlock__inner--twocolumn {
        grid-template-columns: 1fr 1fr;
    }
}

/* ------------------------------------------------------------- Überschriften */

.cmwdBlock__title {
    font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem);
    margin: 0 0 0.5rem;
}

.cmwdBlock__intro {
    color: var(--cmwdMutedText);
    font-size: 1.05rem;
    margin: 0 0 var(--cmwdSpaceLarge);
    max-width: 44rem;
}

/* ---------------------------------------------------------- Vorteilsliste */

.cmwdBenefits {
    display: grid;
    gap: var(--cmwdSpaceSmall) var(--cmwdSpace);
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.cmwdBenefits li {
    padding-left: 1.85rem;
    position: relative;
}

/* DE: Das Häkchen als Zeichen statt als Bilddatei — es skaliert mit der Schrift.
   EN: The check mark as a character instead of an image file — it scales with the type. */
.cmwdBenefits li::before {
    color: var(--cmwdRed);
    content: "✓";
    font-weight: 700;
    left: 0;
    position: absolute;
    top: 0;
}

/* -------------------------------------------------------- Knöpfe der Abschnitte */

.cmwdButton {
    align-items: center;
    border: 2px solid var(--cmwdRed);
    border-radius: var(--cmwdRoundedFull);
    color: var(--cmwdRed);
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 700;
    justify-content: center;
    letter-spacing: 0.05em;
    margin-top: auto;
    padding: 0.7rem 1.4rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.cmwdButton:hover,
.cmwdButton:focus-visible {
    background: var(--cmwdRed);
    box-shadow: var(--cmwdShadow);
    color: var(--cmwdWhite);
}

.cmwdButton--full {
    background: var(--cmwdRed);
    color: var(--cmwdWhite);
}

.cmwdButton--full:hover {
    background: var(--cmwdRedDark);
    border-color: var(--cmwdRedDark);
}

/* ------------------------------------------------------------ Kundenstimmen */

/*
 * DE: Die Stimmen standen als dunkler Text auf rotem Grund und waren kaum zu lesen.
 *     Jetzt jede als eigene Karte mit ruhigem Grund.
 * EN: The testimonials were dark text on a red background and hard to read. Now each
 *     sits in its own card on a calm background.
 */
.cmwdReviews {
    display: grid;
    gap: var(--cmwdSpace);
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.cmwdReview {
    background: var(--cmwdWhite);
    border: 1px solid var(--cmwdRule);
    border-radius: var(--cmwdRoundedLarge);
    margin: 0;
    padding: var(--cmwdSpace);
}

/*
 * DE: Den roten Strich trägt allein das Zitat — die Karte hatte zuvor einen eigenen, sodass
 *     zwei Linien nebeneinander standen.
 * EN: The red rule is carried by the quote alone — the card previously had one of its own,
 *     so two lines stood side by side.
 */
.cmwdReview {
    padding-bottom: var(--cmwdSpace);
}

.cmwdStars {
    color: #e8a13a;
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    line-height: 1;
}

/*
 * DE: Der Strich reicht genau so weit wie der Text. Absätze bringen oben und unten einen
 *     Abstand mit, der den Strich sonst über den ersten und unter den letzten Satz hinaus
 *     verlängert hätte.
 * EN: The rule reaches exactly as far as the text. Paragraphs carry spacing at the top and
 *     bottom that would otherwise extend the rule beyond the first and last sentence.
 */
.cmwdReview__text,
.cmwdDialog__text {
    border-left: 3px solid var(--cmwdRed);
    color: var(--cmwdText);
    flex: 1;
    font-size: 0.96rem;
    line-height: 1.6;
    margin: 0;
    padding: 0 0 0 var(--cmwdSpaceSmall);
    quotes: none;
}

.cmwdReview__text > :first-child,
.cmwdDialog__text > :first-child {
    margin-top: 0;
    padding-top: 0;
}

.cmwdReview__text > :last-child,
.cmwdDialog__text > :last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* --------------------------------------------------- Fließtext und Formular */

/* DE: Die Breite gibt der Abschnitt vor, nicht der Text selbst — sonst steht derselbe
   Text je nach Abschnitt verschieden breit. EN: The section sets the width, not the text
   itself — otherwise the same text stands at differing widths depending on the section. */
.cmwdBodyText {
    max-width: none;
}

.cmwdBodyText p {
    margin-bottom: 0.9rem;
}

.cmwdForm {
    background: var(--cmwdWhite);
    border: 1px solid var(--cmwdRule);
    border-radius: var(--cmwdRoundedLarge);
    padding: var(--cmwdSpace);
}

.cmwdForm .wpcf7 p:last-of-type {
    margin-bottom: 0;
}

/* ----------------------------------------------------- Ganze Bewertung lesen */

/*
 * DE: In der Übersicht steht eine gekürzte Fassung, damit die Karten gleich hoch
 *     bleiben. Der volle Wortlaut öffnet sich im Dialogfenster.
 * EN: The overview shows a shortened version so the cards stay equal in height. The
 *     full wording opens in a dialog.
 */
.cmwdReview {
    display: flex;
    flex-direction: column;
    gap: var(--cmwdSpaceSmall);
}

.cmwdReview__more {
    align-self: flex-start;
    background: none;
    border: 0;
    color: var(--cmwdRed);
    cursor: pointer;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    margin-top: auto;
    padding: 0.2rem 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cmwdReview__more:hover,
.cmwdReview__more:focus-visible {
    color: var(--cmwdRedDark);
}

.cmwdDialog {
    background: var(--cmwdWhite);
    border: 0;
    border-radius: var(--cmwdRoundedLarge);
    box-shadow: 0 24px 60px rgba(20, 23, 28, 0.25);
    color: var(--cmwdText);
    max-width: min(40rem, calc(100vw - 2rem));
    padding: var(--cmwdSpace);
    width: 100%;
}

.cmwdDialog::backdrop {
    background: rgba(20, 23, 28, 0.55);
}

.cmwdDialog__head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--cmwdSpaceSmall);
}

.cmwdDialog__close {
    background: none;
    border: 0;
    border-radius: var(--cmwdRoundedFull);
    color: var(--cmwdMutedText);
    cursor: pointer;
    font-size: 1.5rem;
    height: 2.2rem;
    line-height: 1;
    width: 2.2rem;
}

.cmwdDialog__close:hover,
.cmwdDialog__close:focus-visible {
    background: var(--cmwdPanel);
    color: var(--cmwdText);
}


/* -------------------------------------------------- Karten beim Überfahren */

/*
 * DE: Wie im alten Shop wächst das Bild beim Überfahren leicht an. Der Ausschnitt der
 *     Karte schneidet den Überstand ab, damit nichts über die Kante läuft.
 * EN: As in the old shop the image grows slightly on hover. The card's clipping cuts the
 *     overhang so nothing runs past the edge.
 */
.cmwdCard__image {
    overflow: hidden;
}

.cmwdCard__image img {
    transition: transform 0.35s ease;
}

.cmwdCard:hover .cmwdCard__image img,
.cmwdCard:focus-within .cmwdCard__image img {
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .cmwdCard__image img {
        transition: none;
    }

    .cmwdCard:hover .cmwdCard__image img {
        transform: none;
    }
}

/* DE: Der Knopf stand mit ungleichem Polster in der Karte.
   EN: The button sat in the card with uneven padding. */
.cmwdCard .cmwdButton {
    padding: 0.75rem 1.5rem;
    width: 100%;
}

/* ------------------------------------------- Formular und Fliesstext */

/* DE: Die Felder trugen unterschiedliche Abstände und Schriftgrößen.
   EN: The fields carried differing spacing and type sizes. */
.cmwdForm .wpcf7 input[type="text"],
.cmwdForm .wpcf7 input[type="email"],
.cmwdForm .wpcf7 textarea {
    font-size: 1rem;
    margin-bottom: 0.9rem;
}

.cmwdForm .wpcf7 p,
.cmwdForm #footer-contact-info {
    margin-bottom: 0;
}

/* DE: Der Rahmen liess die Box leer wirken — ein ruhiger Grund füllt sie.
   EN: The border made the box look empty — a calm ground fills it. */
.cmwdForm {
    background: var(--cmwdPanel);
    border: 0;
    padding: var(--cmwdSpaceLarge);
}

/* ------------------------------------------------------------------- Bühne */

/*
 * DE: Ersetzt den Slider der Demo. Die Folien liegen nebeneinander und rasten beim
 *     Wischen ein — das braucht kein Skript und funktioniert auf jedem Gerät. Die
 *     Punkte darunter springen gezielt zu einer Folie.
 * EN: Replaces the demo's slider. The slides lie side by side and snap when swiped —
 *     that needs no scripting and works on any device. The dots below jump to a slide.
 */
.cmwdStage {
    background: var(--cmwdPanel);
    padding-block: var(--cmwdSpaceLarge) var(--cmwdSpace);
    position: relative;
}

.cmwdStage__track {
    display: grid;
    gap: 0;
    grid-auto-columns: 100%;
    grid-auto-flow: column;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.cmwdStage__track::-webkit-scrollbar {
    display: none;
}

.cmwdSlide {
    align-items: center;
    display: grid;
    gap: var(--cmwdSpaceLarge);
    grid-template-columns: 1fr;
    margin-inline: auto;
    max-width: 76rem;
    padding-inline: 1.25rem;
    scroll-snap-align: center;
    width: 100%;
}

@media only screen and (min-width: 56rem) {
    .cmwdSlide {
        grid-template-columns: 1fr 1fr;
    }
}

.cmwdSlide__title {
    font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
    margin: 0 0 0.3rem;
}

.cmwdSlide__below {
    color: var(--cmwdMutedText);
    font-size: 1.1rem;
    margin: 0 0 var(--cmwdSpace);
}

.cmwdSlide__image {
    align-items: center;
    display: flex;
    justify-content: center;
}

.cmwdSlide__image img {
    height: auto;
    max-width: 100%;
    mix-blend-mode: multiply;
}

.cmwdStage__items {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: var(--cmwdSpace);
}

.cmwdStage__item {
    background: var(--cmwdRule);
    border: 0;
    border-radius: var(--cmwdRoundedFull);
    cursor: pointer;
    height: 0.7rem;
    padding: 0;
    transition: background-color 0.2s ease, width 0.2s ease;
    width: 0.7rem;
}

.cmwdStage__item.isActive {
    background: var(--cmwdRed);
    width: 1.8rem;
}

.cmwdStage__item:focus-visible {
    outline: 2px solid var(--cmwdRed);
    outline-offset: 2px;
}

@media only screen and (max-width: 56rem) {
    .cmwdSlide__image {
        order: -1;
    }

    .cmwdSlide__image img {
        max-height: 14rem;
    }
}

/* DE: Pfeile zum Blättern. Sie liegen über der Bühne und laufen um: hinter der letzten
   Folie kommt wieder die erste. EN: Arrows for paging. They sit above the stage and wrap
   around: after the last slide the first returns. */
.cmwdStage__arrow {
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--cmwdRule);
    border-radius: var(--cmwdRoundedFull);
    box-shadow: var(--cmwdShadow);
    color: var(--cmwdText);
    cursor: pointer;
    display: flex;
    font-size: 1.8rem;
    height: 2.9rem;
    justify-content: center;
    line-height: 1;
    padding: 0 0 0.18rem;
    position: absolute;
    top: calc(50% - 1.45rem);
    transition: background-color 0.18s ease, color 0.18s ease, opacity 0.25s ease;
    width: 2.9rem;
    z-index: 2;
}

.cmwdStage__arrow:hover,
.cmwdStage__arrow:focus-visible {
    background: var(--cmwdRed);
    border-color: var(--cmwdRed);
    color: var(--cmwdWhite);
}

/*
 * DE: Die Pfeile liegen über dem Text der Folie. Solange die Maus nicht auf der Bühne ist,
 *     treten sie fast vollständig zurück, damit darunter alles lesbar bleibt. Auf Geräten
 *     ohne Maus bleiben sie sichtbar — dort gäbe es sonst keinen Weg, sie hervorzuholen.
 * EN: The arrows lie above the slide's text. As long as the mouse is not on the stage they
 *     step back almost entirely so everything below stays readable. On devices without a
 *     mouse they stay visible — there would otherwise be no way to bring them out.
 */
@media (hover: hover) {
    .cmwdStage__arrow {
        opacity: 0.15;
    }

    .cmwdStage:hover .cmwdStage__arrow,
    .cmwdStage:focus-within .cmwdStage__arrow {
        opacity: 1;
    }
}

.cmwdStage__arrow--previous {
    left: 1rem;
}

.cmwdStage__arrow--next {
    right: 1rem;
}

@media only screen and (max-width: 56rem) {
    .cmwdStage__arrow {
        height: 2.4rem;
        width: 2.4rem;
    }

    .cmwdStage__arrow--previous {
        left: 0.35rem;
    }

    .cmwdStage__arrow--next {
        right: 0.35rem;
    }
}

/* DE: Zweite Zeile eines Abschnitts — die Überschrift steht bereits darüber.
   EN: Second row of a section — the heading already sits above it. */
.cmwdBlock__inner--ohneAbstand {
    margin-top: var(--cmwdSpace);
}

/*
 * DE: Abschnitte mit farbigem Grund liegen innerhalb der Inhaltsspalte und hörten daher
 *     am Seitenrand auf. Sie brechen jetzt über die volle Fensterbreite aus, während
 *     ihr Inhalt in der gewohnten Breite bleibt.
 * EN: Sections with a coloured ground sit inside the content column and therefore stopped
 *     at the page margin. They now break out to the full window width while their content
 *     keeps its usual measure.
 */
.cmwdStage,
.cmwdBlock--light {
    margin-inline: calc(50% - 50vw);
    width: 100vw;
}

/* ------------------------------------------- Karten mit Eckwerten und Popup */

/*
 * DE: Matratzenkerne und Bezüge stehen in derselben Bauform: Bild, Bezeichnung, Eckwerte
 *     und ein Knopf, der den ausführlichen Text im Popup öffnet. Auf der alten Seite
 *     standen die Angaben als Fließtext untereinander und die Bilder öffneten eine
 *     Lightbox, die mit dem Rest der Seite nichts zu tun hatte.
 * EN: Mattress cores and covers use the same build: image, label, key figures and a button
 *     opening the detailed text in a popup. On the old page the details sat below each
 *     other as running text and the images opened a lightbox unrelated to the rest of the
 *     page.
 */
/*
 * DE: Kerne und Bezüge stehen in höchstens drei Spalten. Mit frei wachsenden Spalten
 *     ergaben sich bei fünf Kernen vier schmale und eine einzelne Karte; drei breite
 *     Spalten lassen Bild und Eckwerte zur Geltung kommen.
 * EN: Cores and covers stand in at most three columns. With freely growing columns five
 *     cores produced four narrow ones and a single card; three wide columns let the image
 *     and key figures come into their own.
 */
.cmwdGrid--tight {
    grid-template-columns: 1fr;
}

@media only screen and (min-width: 38rem) {
    .cmwdGrid--tight {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (min-width: 62rem) {
    .cmwdGrid--tight {
        grid-template-columns: repeat(3, 1fr);
    }
}

.cmwdCard--data .cmwdCard__image {
    aspect-ratio: 3 / 2;
}

.cmwdValues {
    border-top: 1px solid var(--cmwdRule);
    display: grid;
    gap: 0;
    margin: 0;
    padding-top: var(--cmwdSpaceSmall);
}

.cmwdValue {
    align-items: baseline;
    display: flex;
    gap: 0.6rem;
    justify-content: space-between;
    padding: 0.35rem 0;
}

.cmwdValue + .cmwdValue {
    border-top: 1px solid var(--cmwdRule);
}

.cmwdValue dt {
    color: var(--cmwdMutedText);
    font-size: 0.85rem;
    margin: 0;
}

.cmwdValue dd {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0;
    text-align: right;
}

/* -------------------------------------------------------- Popup-Inhalt */

.cmwdDialog__title {
    font-size: 1.25rem;
    margin: 0;
}

/*
 * DE: Im Popup stehen Bild und Eckwerte noch einmal — größer als auf der Karte, weil hier
 *     der Platz dafür da ist. Das Skript holt beides aus der Karte, damit die Seite jede
 *     Angabe nur einmal trägt.
 * EN: The popup shows image and key figures once more — larger than on the card, because
 *     there is room for it here. The script fetches both from the card so the page carries
 *     every detail only once.
 */
.cmwdDialog--data {
    max-width: min(52rem, calc(100vw - 2rem));
}

.cmwdDialog__adopted:not(:empty) {
    display: grid;
    gap: var(--cmwdSpace);
    margin-bottom: var(--cmwdSpace);
}

@media only screen and (min-width: 46rem) {
    .cmwdDialog__adopted:not(:empty) {
        align-items: center;
        grid-template-columns: 1.15fr 1fr;
    }
}

.cmwdDialog__adopted .cmwdCard__image {
    aspect-ratio: 4 / 3;
    background: var(--cmwdPanel);
    border-radius: var(--cmwdRounded);
    display: flex;
    justify-content: center;
    padding: var(--cmwdSpaceSmall);
}

.cmwdDialog__adopted .cmwdCard__image img {
    height: auto;
    max-height: 100%;
    max-width: 100%;
    mix-blend-mode: multiply;
    object-fit: contain;
    width: auto;
}

.cmwdDialog__adopted .cmwdValues {
    border-top: 0;
    padding-top: 0;
}

/*
 * DE: Längere Texte im Popup bekommen eine eigene Höhe, damit das Fenster nicht über den
 *     Bildschirm hinauswächst.
 * EN: Longer texts in the popup get their own height so the window does not grow beyond
 *     the screen.
 */
.cmwdDialog__content {
    max-height: min(60vh, 34rem);
    overflow-y: auto;
}

.cmwdDialog__content p {
    margin: 0 0 0.9rem;
}

.cmwdDialog__content p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------- Hinweis über dem Formular */

/*
 * DE: Der Hinweis auf das Formular stand zuvor am Ende des linken Textes, also weit weg
 *     von den Feldern, auf die er sich bezieht.
 * EN: The note about the form previously sat at the end of the left-hand text, far away
 *     from the fields it refers to.
 */
.cmwdForm__hint {
    border-left: 3px solid var(--cmwdRed);
    color: var(--cmwdText);
    font-size: 0.95rem;
    margin: 0 0 var(--cmwdSpace);
    padding-left: var(--cmwdSpaceSmall);
}

/* --------------------------------------------------------------------- Bild */

/*
 * DE: Ein Bild als eigener Abschnitt. Auf „Über uns“ trug der Fusion Builder es in einer
 *     Spalte mit fester Breite, wodurch es auf schmalen Geräten seitlich abgeschnitten war.
 * EN: An image as a section of its own. On "Über uns" the Fusion Builder carried it in a
 *     column of fixed width, which cut it off at the sides on narrow devices.
 */
.cmwdImage {
    margin: 0;
}

.cmwdImage img {
    display: block;
    height: auto;
    width: 100%;
}

.cmwdImage--wide {
    margin-inline: calc(50% - 50vw);
    width: 100vw;
}

@media only screen and (min-width: 76rem) {
    .cmwdImage--wide img {
        max-height: 26rem;
        object-fit: cover;
    }
}

/* ------------------------------------------------------- Karten auf der Schiene */

/*
 * DE: Dieselben Karten wie im Raster, nur nebeneinander auf einer Schiene. Sie rasten beim
 *     Wischen ein, die Pfeile schieben um eine Karte weiter. Wie bei der Bühne treten die
 *     Pfeile zurück, solange die Maus nicht darüber steht.
 * EN: The same cards as in the grid, only side by side on a rail. They snap when swiped,
 *     the arrows push on by one card. As with the stage the arrows step back as long as
 *     the mouse is not above them.
 */
.cmwdRail {
    position: relative;
}

.cmwdRail__track {
    display: grid;
    gap: var(--cmwdSpace);
    grid-auto-columns: calc((100% - 2 * var(--cmwdSpace)) / 3);
    grid-auto-flow: column;
    overflow-x: auto;
    padding-block: 2px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.cmwdRail__track::-webkit-scrollbar {
    display: none;
}

.cmwdRail__track > * {
    scroll-snap-align: start;
}

@media only screen and (max-width: 62rem) {
    .cmwdRail__track {
        grid-auto-columns: calc((100% - var(--cmwdSpace)) / 2);
    }
}

@media only screen and (max-width: 38rem) {
    .cmwdRail__track {
        grid-auto-columns: 84%;
    }
}

.cmwdRail__arrow {
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--cmwdRule);
    border-radius: var(--cmwdRoundedFull);
    box-shadow: var(--cmwdShadow);
    color: var(--cmwdText);
    cursor: pointer;
    display: flex;
    font-size: 1.6rem;
    height: 2.7rem;
    justify-content: center;
    line-height: 1;
    padding: 0 0 0.16rem;
    position: absolute;
    top: calc(50% - 1.35rem);
    transition: background-color 0.18s ease, color 0.18s ease, opacity 0.25s ease;
    width: 2.7rem;
    z-index: 2;
}

.cmwdRail__arrow:hover,
.cmwdRail__arrow:focus-visible {
    background: var(--cmwdRed);
    border-color: var(--cmwdRed);
    color: var(--cmwdWhite);
}

.cmwdRail__arrow--previous {
    left: -0.9rem;
}

.cmwdRail__arrow--next {
    right: -0.9rem;
}

/* DE: Am Anfang und am Ende der Schiene führt der jeweilige Pfeil nirgendwohin.
   EN: At the rail's start and end the respective arrow leads nowhere. */
.cmwdRail__arrow[disabled] {
    cursor: default;
    opacity: 0 !important;
    pointer-events: none;
}

@media (hover: hover) {
    .cmwdRail__arrow {
        opacity: 0.2;
    }

    .cmwdRail:hover .cmwdRail__arrow,
    .cmwdRail:focus-within .cmwdRail__arrow {
        opacity: 1;
    }
}

/* ------------------------------------------------- Karte mit sichtbarem Text */

/*
 * DE: Zwei Bezüge mit je einem Absatz — hier steht der Text gleich auf der Karte. Ein
 *     Popup würde nur dasselbe noch einmal zeigen.
 * EN: Two covers with one paragraph each — here the text stands on the card right away. A
 *     popup would merely show the same thing again.
 */
.cmwdGrid--two {
    grid-template-columns: 1fr;
}

@media only screen and (min-width: 48rem) {
    .cmwdGrid--two {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cmwdCard--text .cmwdCard__body p {
    color: var(--cmwdMutedText);
    font-size: 0.96rem;
    line-height: 1.6;
    margin: 0 0 0.8rem;
}

.cmwdCard--text .cmwdCard__body p:last-child {
    margin-bottom: 0;
}

.cmwdCard__between {
    border-top: 1px solid var(--cmwdRule);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    margin: 0.4rem 0 0.7rem;
    padding-top: var(--cmwdSpaceSmall);
    text-transform: uppercase;
}

/* ------------------------------------------------- Einträge ohne Kasten */

/*
 * DE: Wo es nichts zu zeigen gibt außer Text, braucht es keinen Kasten. Die Einträge
 *     stehen untereinander, durch einen Strich getrennt.
 * EN: Where there is nothing to show but text, no box is needed. The entries stand below
 *     each other, separated by a rule.
 */
.cmwdEntries {
    display: grid;
    gap: var(--cmwdSpace);
}

.cmwdEntry + .cmwdEntry {
    border-top: 1px solid var(--cmwdRule);
    padding-top: var(--cmwdSpace);
}

.cmwdEntry__title {
    font-size: 1.3rem !important;
    font-weight: 700;
    margin: 0 0 0.7rem !important;
}

.cmwdEntry p {
    color: var(--cmwdMutedText);
    margin: 0 0 0.8rem;
}

.cmwdEntry p:last-child {
    margin-bottom: 0;
}

.cmwdEntry .cmwdCard__between {
    border-top: 0;
    color: var(--cmwdMutedText);
    margin-top: var(--cmwdSpace);
    padding-top: 0;
}


/* --------------------------------------------- Listen und letzter Abschnitt */

/*
 * DE: Aufzählungen standen mit der Einrückung des Browsers — gut 40 Pixel, die auf
 *     schmalen Geräten vom Text abgehen.
 * EN: Lists stood with the browser's indentation — a good 40 pixels that are taken from
 *     the text on narrow devices.
 */
.cmwdBodyText ul,
.cmwdBodyText ol,
.cmwdBlock__inner ul,
.cmwdBlock__inner ol {
    padding-left: 1.2rem;
}

/* DE: Mehrzeilige Punkte liefen ineinander — der Abstand trennt sie voneinander.
   EN: Bullets running over several lines ran into each other — the spacing separates them. */
.cmwdBodyText li,
.cmwdBlock__inner li {
    margin-bottom: 0.8rem;
    padding-left: 0.2rem;
}

.cmwdBodyText li:last-child,
.cmwdBlock__inner li:last-child {
    margin-bottom: 0;
}

/*
 * DE: Der letzte Abschnitt einer Seite grenzt an den Fußbereich — sein Abstand nach unten
 *     verdoppelt sich dort mit dem des Fußes zu einer leeren Fläche.
 * EN: A page's last section borders the footer — its spacing below doubles up with the
 *     footer's own there, into an empty area.
 */
.cmwdBlock:last-child {
    padding-bottom: 0;
}

/* ----------------------------------------------------------------- Lageplan */

.cmwdCard__location {
    margin: 0;
}

.cmwdCard__location iframe {
    aspect-ratio: 16 / 7;
    border: 0;
    border-radius: var(--cmwdRoundedLarge);
    display: block;
    width: 100%;
}

@media only screen and (max-width: 48rem) {
    .cmwdCard__location iframe {
        aspect-ratio: 4 / 3;
    }
}

.cmwdCard__location figcaption {
    color: var(--cmwdMutedText);
    font-size: 0.92rem;
    margin-top: var(--cmwdSpaceSmall);
}

.cmwdCard__location figcaption strong {
    color: var(--cmwdText);
}

.cmwdCard__location figcaption a {
    color: var(--cmwdRed);
    margin-left: 0.5rem;
}