/* =================================================================
       WPPM – Pet Manager Styles
       Modernes Design für Archiv + Einzelansicht

       Elementor-Kompatibilität:
       - Globale Elementor Fonts werden übernommen
       - Globale Primary-/Accent-/Text-Farben werden übernommen
       - Eigene Variablen können jederzeit überschrieben werden
       ================================================================= */

:root {
    /* -------------------------------------------------------------
       Typografie
       ------------------------------------------------------------- */

    --wppm-font-fallback:
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Roboto,
            Helvetica,
            Arial,
            sans-serif;

    --wppm-font:
            var(--e-global-typography-text-font-family, var(--wppm-font-fallback));

    --wppm-font-heading:
            var(
                    --e-global-typography-primary-font-family,
                    var(--wppm-font)
            );

    /* -------------------------------------------------------------
       Farben
       Erste Wahl ist die Astra-Palette der Seite (auf den Hundeseiten lädt
       Elementor seine globalen Farben nicht), dann Elementor, dann dieselben
       Werte fest: Akzent #CF6D47, Überschriften #421812, Text #303F50,
       Ränder #F5EDE6, Hintergrund #FBF8F5.
       ------------------------------------------------------------- */

    --wppm-color-brand:
            var(--ast-global-color-0, var(--e-global-color-primary, #421812));

    --wppm-color-accent:
            var(--ast-global-color-1, var(--e-global-color-accent, #cf6d47));

    --wppm-color-heading:
            var(--ast-global-color-0, var(--e-global-color-primary, #421812));

    --wppm-color-text:
            var(--ast-global-color-2, var(--e-global-color-text, #303f50));

    --wppm-color-brand-contrast: #fff;

    --wppm-color-text-muted: #5f7085;
    --wppm-color-text-subtle: #8a96a6;

    --wppm-color-bg: #fff;
    --wppm-color-bg-muted: #fbf8f5;
    --wppm-color-bg-soft: #fbf8f5;
    --wppm-color-bg-image: #f5ede6;

    --wppm-color-border: #f5ede6;
    --wppm-color-border-soft: #eadcd1;

    /* Semantische Farben */

    --wppm-color-success: #19763a;
    --wppm-color-success-bg: #e8f6ed;
    --wppm-color-success-dot: #32a65a;

    --wppm-color-danger: #b42318;
    --wppm-color-danger-bg: #fdf0ef;
    --wppm-color-danger-dot: #e05248;

    --wppm-color-neutral-bg: #f3ece7;   /* warm wie die Seite (Creme/Braun) statt kühlgrau */
    --wppm-color-neutral-text: #6b5a54;
    --wppm-color-neutral-dot: #c4b3aa;

    /* -------------------------------------------------------------
       Layout
       ------------------------------------------------------------- */

    --wppm-width-archive: 1240px;
    --wppm-width-single: 1080px;

    --wppm-radius-xl: 24px;
    --wppm-radius-lg: 18px;
    --wppm-radius-md: 14px;
    --wppm-radius-sm: 10px;
    --wppm-radius-pill: 999px;

    --wppm-shadow-card:
            0 2px 8px rgba(20, 30, 35, .04),
            0 12px 32px rgba(20, 30, 35, .06);

    --wppm-shadow-hover:
            0 8px 18px rgba(20, 30, 35, .08),
            0 22px 48px rgba(20, 30, 35, .10);

    --wppm-transition:
            180ms ease;
}


/* =================================================================
   Basis
   ================================================================= */

.wppm-archive,
.wppm-pet {
    font-family: var(--wppm-font);
    color: var(--wppm-color-text);
}

.wppm-archive *,
.wppm-pet *,
.wppm-archive *::before,
.wppm-archive *::after,
.wppm-pet *::before,
.wppm-pet *::after {
    box-sizing: border-box;
}


/* =================================================================
   Elementor-Kompatibilität
   ================================================================= */

body .wppm-archive h1,
body .wppm-archive h2,
body .wppm-archive h3,
body .wppm-pet h1,
body .wppm-pet h2 {
    font-family: var(--wppm-font-heading);
    color: var(--wppm-color-heading);
    text-transform: none;
    letter-spacing: normal;
}

body .wppm-archive a.wppm-card,
body .wppm-archive a.wppm-card:hover,
body .wppm-archive a.wppm-card:visited {
    color: inherit;
    text-decoration: none;
}

body .wppm-pet__print-btn {
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
}

/* Elementor / Theme img defaults überschreiben */

body .wppm-card__image img,
body .wppm-pet__hero img,
body .wppm-pet__thumbs img {
    height: 100% !important;
    max-width: none;
}


/* =================================================================
   Status
   ================================================================= */

/* Farbe je Status; Status ohne eigene Farbe bleiben grau */

.wppm-status-pill,
.wppm-status-filter__item {
    --wppm-status-bg: var(--wppm-color-neutral-text);
    --wppm-status-text: #fff;
}

.wppm-status--status_waiting  { --wppm-status-bg: #303f50; --wppm-status-text: #fff; }    /* In der Slowakei: Schiefer (Haupttext der Seite) */
.wppm-status--status_foster   { --wppm-status-bg: #2b6a6e; --wppm-status-text: #fff; }    /* Auf Pflegestelle: Petrol (Orange wäre zu nah am Button) */
.wppm-status--status_reserved { --wppm-status-bg: #facc15; --wppm-status-text: #422006; } /* Reserviert: gelb */
.wppm-status--status_adopted  { --wppm-status-bg: #15803d; --wppm-status-text: #fff; }    /* Vermittelt: grün */
.wppm-status-filter__item--all { --wppm-status-bg: var(--wppm-color-brand); --wppm-status-text: var(--wppm-color-brand-contrast); }

.wppm-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 13px 7px 10px;

    border-radius: var(--wppm-radius-pill);

    background: var(--wppm-status-bg);
    color: var(--wppm-status-text);

    font-size: .76rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;

    box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
}

.wppm-status-pill__icon {
    width: 1.3em;
    height: 1.3em;

    flex: 0 0 auto;
}


/* -------------------------------------------------------------
   Statusleiste der Übersicht (Legende und Filter zugleich)
   ------------------------------------------------------------- */

.wppm-status-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin: 0 0 20px;
}

.wppm-status-filter__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 40px;
    padding: 0 14px;

    border: 1px solid var(--wppm-color-border-soft);
    border-radius: var(--wppm-radius-pill);

    background: var(--wppm-color-bg);
    color: var(--wppm-color-text);

    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;

    transition:
            border-color var(--wppm-transition),
            background var(--wppm-transition),
            color var(--wppm-transition);
}

body .wppm-archive a.wppm-status-filter__item {
    text-decoration: none;
}

/* Icon in der Statusfarbe; gelb wäre auf Weiß zu blass, dort gilt die dunkle Schriftfarbe */
.wppm-status-filter__item .wppm-status-pill__icon {
    width: 18px;
    height: 18px;

    color: var(--wppm-status-bg);
}

.wppm-status-filter__item.wppm-status--status_reserved .wppm-status-pill__icon {
    color: #a16207;
}

.wppm-status-filter__item:hover {
    border-color: var(--wppm-status-bg);
}

.wppm-status-filter__item.is-active {
    border-color: var(--wppm-status-bg);

    background: var(--wppm-status-bg);
    color: var(--wppm-status-text);
}

.wppm-status-filter__item.is-active .wppm-status-pill__icon {
    color: inherit;
}

.wppm-status-filter__count {
    min-width: 22px;
    padding: 3px 7px;

    border-radius: var(--wppm-radius-pill);

    background: rgba(0, 0, 0, .07);

    font-size: .74rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.wppm-status-filter__item.is-active .wppm-status-filter__count {
    background: rgba(255, 255, 255, .25);
}


/* =================================================================
   ARCHIV
   ================================================================= */

.wppm-archive {
    width: 100%;
    max-width: var(--wppm-width-archive);

    margin: 0 auto;
    padding: 64px 24px 80px;
}


/* -------------------------------------------------------------
   Header
   ------------------------------------------------------------- */

.wppm-archive__header {
    max-width: 720px;
    margin-bottom: 38px;
}

.wppm-archive__header h1 {
    margin: 0 0 10px;

    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.035em;
}

.wppm-archive__header p {
    margin: 0;

    color: var(--wppm-color-text-muted);

    font-size: 1.05rem;
    line-height: 1.6;
}


/* -------------------------------------------------------------
   Seitenleiste mit Filtern (WppmPetFilter, wppm-filter.js)
   Läuft beim Scrollen mit; unter 900px ein Fenster über der Liste
   ------------------------------------------------------------- */

.wppm-archive__layout {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}

/* Übersicht ohne Filter (Verwaltung, z. B. „Koffer gepackt“): Karten über die ganze Breite */
.wppm-archive .wppm-archive__layout--plain {
    grid-template-columns: minmax(0, 1fr);
}

.wppm-sidebar {
    position: sticky;
    top: 24px;

    max-height: calc(100vh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;

    padding: 18px 20px 20px;

    background:
            linear-gradient(
                    135deg,
                    var(--wppm-color-bg-muted),
                    var(--wppm-color-bg-soft)
            );

    border: 1px solid var(--wppm-color-border);
    border-radius: var(--wppm-radius-xl);
}

body.admin-bar .wppm-sidebar {
    top: 56px;
    max-height: calc(100vh - 80px);
}

.wppm-sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding-bottom: 6px;
}

body .wppm-archive .wppm-sidebar__title {
    margin: 0;

    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
}

/* Schließen, „… Hunde anzeigen“ und der Knopf „Filter“ nur für das Fenster auf dem Handy */
.wppm-sidebar__close,
.wppm-sidebar__foot,
.wppm-results__filter-btn {
    display: none;
}

.wppm-archive .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* Eine Filtergruppe, aufklappbar wie im Shop */

.wppm-facet {
    padding: 14px 0;

    border-bottom: 1px solid var(--wppm-color-border-soft);
}

.wppm-facet__label {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0;

    color: var(--wppm-color-heading);

    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .01em;
    list-style: none;
}

.wppm-facet--plain .wppm-facet__label {
    margin-bottom: 8px;
}

summary.wppm-facet__label {
    cursor: pointer;
}

summary.wppm-facet__label::-webkit-details-marker {
    display: none;
}

/* Pfeil rechts, zeigt nach oben, solange die Gruppe offen ist */
summary.wppm-facet__label::after {
    content: "";

    width: 8px;
    height: 8px;
    margin: -3px 4px 0 auto;

    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

    transform: rotate(45deg);
    transition: transform var(--wppm-transition);
}

details[open] > summary.wppm-facet__label::after {
    margin-top: 3px;
    transform: rotate(-135deg);
}

.wppm-facet__badge {
    min-width: 20px;
    padding: 3px 6px;

    border-radius: var(--wppm-radius-pill);

    background: var(--wppm-color-accent);
    color: #fff;

    font-size: .7rem;
    line-height: 1;
    text-align: center;
}

body .wppm-archive .wppm-facet__options {
    display: flex;
    flex-direction: column;
    gap: 2px;

    margin: 10px 0 0;
    padding: 0;

    list-style: none;
}

.wppm-facet__options li {
    margin: 0;
}

.wppm-check {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 4px 0;

    font-size: .92rem;
    line-height: 1.3;

    cursor: pointer;
}

body .wppm-archive .wppm-check input {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;
    margin: 0;

    accent-color: var(--wppm-color-accent);
    cursor: inherit;
}

.wppm-check__count {
    color: var(--wppm-color-text-subtle);
    font-size: .82rem;
}

.wppm-check:hover .wppm-check__label {
    color: var(--wppm-color-heading);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Keine Tiere mit dieser Auswahl: bleibt sichtbar, lässt sich aber nicht anhaken */
.wppm-check.is-disabled {
    opacity: .45;
    cursor: default;
}

.wppm-check.is-disabled:hover .wppm-check__label {
    color: inherit;
    text-decoration: none;
}

body .wppm-archive .wppm-facet input[type="search"],
body .wppm-archive .wppm-range__field input {
    width: 100%;
    min-height: 44px;

    padding: 0 14px;

    border: 1px solid var(--wppm-color-border-soft);
    border-radius: var(--wppm-radius-sm);

    background: var(--wppm-color-bg);
    color: var(--wppm-color-text);
    box-shadow: none;

    font-family: inherit;
    font-size: .92rem;
    line-height: normal;

    outline: none;

    transition:
            border-color var(--wppm-transition),
            box-shadow var(--wppm-transition);
}

body .wppm-archive .wppm-facet input[type="search"]:hover,
body .wppm-archive .wppm-range__field input:hover {
    border-color: #c7ccd0;
}

body .wppm-archive .wppm-facet input[type="search"]:focus,
body .wppm-archive .wppm-range__field input:focus {
    border-color: var(--wppm-color-accent);

    box-shadow:
            0 0 0 3px
            color-mix(
                    in srgb,
                    var(--wppm-color-accent) 14%,
                    transparent
            );
}


/* Alter: Schieber mit zwei Griffen, darunter die Zahlen (wie der Preis im Shop) */

.wppm-range {
    margin-top: 14px;
}

/* Ohne JavaScript nur die Felder */
.wppm-range__slider {
    display: none;
}

.wppm-js .wppm-range__slider {
    position: relative;
    display: block;

    height: 24px;
    margin: 0 9px 12px;
}

/* Spur von Griffmitte zu Griffmitte: Die Regler sind 18px breiter als der Schieber, die Griffe 18px groß */
.wppm-range__track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;

    height: 4px;
    margin-top: -2px;

    border-radius: 2px;
    background: var(--wppm-color-border-soft);
}

.wppm-range__fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% * var(--wppm-range-from-n, 0));
    right: calc(100% * (1 - var(--wppm-range-to-n, 1)));

    border-radius: 2px;
    background: var(--wppm-color-accent);
}

/* Zwei Regler übereinander; anfassen lassen sich nur die Griffe */
body .wppm-archive .wppm-range__slider input[type="range"] {
    position: absolute;
    top: 0;
    left: -9px;

    width: calc(100% + 18px);
    height: 24px;
    margin: 0;
    padding: 0;

    background: transparent;
    border: 0;
    box-shadow: none;

    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.wppm-range__slider input[type="range"].is-top {
    z-index: 2;
}

/* Astra gibt jedem Schieber eine eigene Spur (8,6px hoch, grauer Schatten darunter) und schiebt den Griff nach oben:
   hier unsichtbar über die ganze Höhe, der Griff mittig darauf */
body .wppm-archive .wppm-range__slider input[type="range"]::-webkit-slider-runnable-track {
    height: 24px;

    border: 0;
    border-radius: 0;

    background: transparent;
    box-shadow: none;
}

body .wppm-archive .wppm-range__slider input[type="range"]::-moz-range-track {
    height: 24px;

    border: 0;
    border-radius: 0;

    background: transparent;
    box-shadow: none;
}

body .wppm-archive .wppm-range__slider input[type="range"]::-webkit-slider-thumb {
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    margin-top: 3px;

    border: 2px solid var(--wppm-color-accent);
    border-radius: 50%;

    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);

    cursor: grab;
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
}

body .wppm-archive .wppm-range__slider input[type="range"]::-moz-range-thumb {
    box-sizing: border-box;
    width: 18px;
    height: 18px;

    border: 2px solid var(--wppm-color-accent);
    border-radius: 50%;

    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);

    cursor: grab;
    pointer-events: auto;
}

.wppm-range__slider input[type="range"]:focus-visible::-webkit-slider-thumb {
    outline: 3px solid color-mix(in srgb, var(--wppm-color-accent) 35%, transparent);
    outline-offset: 1px;
}

.wppm-range__slider input[type="range"]:focus-visible::-moz-range-thumb {
    outline: 3px solid color-mix(in srgb, var(--wppm-color-accent) 35%, transparent);
    outline-offset: 1px;
}

.wppm-range__inputs {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: .88rem;
}

.wppm-range__field {
    flex: 1 1 0;
    min-width: 0;
}

body .wppm-archive .wppm-range__field input {
    padding: 0 8px;
    text-align: center;
    -moz-appearance: textfield;
}

/* Ohne Pfeile im Zahlenfeld, die nehmen bei der schmalen Leiste der Zahl den Platz */
body .wppm-archive .wppm-range__field input::-webkit-outer-spin-button,
body .wppm-archive .wppm-range__field input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.wppm-range__sep,
.wppm-range__unit {
    color: var(--wppm-color-text-muted);
}


/* Unter den Filtern: „Hunde anzeigen“ nur ohne JavaScript, „Filter zurücksetzen“ sobald etwas gesetzt ist */

.wppm-filters__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;

    padding-top: 16px;
}

.wppm-js .wppm-filters__actions:not(:has(.wppm-filters__reset)) {
    display: none;
}

body .wppm-archive .wppm-filters__submit {
    min-height: 44px;

    padding: 0 22px;

    border: 0;
    border-radius: var(--wppm-radius-sm);

    background: var(--wppm-color-brand);
    color: var(--wppm-color-brand-contrast);
    box-shadow: none;

    font-family: inherit;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;

    cursor: pointer;
}

.wppm-js .wppm-filters__submit {
    display: none;
}

body .wppm-archive .wppm-filters__reset {
    color: var(--wppm-color-text-muted);

    font-size: .88rem;
    font-weight: 600;

    text-decoration: underline;
    text-underline-offset: 3px;
}

body .wppm-archive .wppm-filters__reset:hover {
    color: var(--wppm-color-heading);
}


/* Gesetzte Filter über den Karten, einzeln zu entfernen */

body .wppm-archive .wppm-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;

    margin: 0 0 22px;
    padding: 0;

    list-style: none;
}

.wppm-chips li {
    margin: 0;
}

body .wppm-archive a.wppm-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 34px;
    padding: 0 12px 0 14px;

    border: 1px solid var(--wppm-color-border-soft);
    border-radius: var(--wppm-radius-pill);

    background: var(--wppm-color-bg-muted);
    color: var(--wppm-color-text);

    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;

    transition: border-color var(--wppm-transition);
}

body .wppm-archive a.wppm-chip:hover {
    border-color: var(--wppm-color-accent);
}

.wppm-chip__x {
    font-size: 1.1rem;
    line-height: 1;
}

body .wppm-archive a.wppm-chips__reset {
    margin-left: 4px;

    color: var(--wppm-color-text-muted);

    font-size: .84rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* Seiten unter den Karten */

.wppm-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;

    margin-top: 36px;
}

body .wppm-archive .wppm-pagination a,
.wppm-pagination__page.is-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 40px;
    min-height: 40px;
    padding: 0 12px;

    border: 1px solid var(--wppm-color-border-soft);
    border-radius: var(--wppm-radius-pill);

    background: var(--wppm-color-bg);
    color: var(--wppm-color-text);

    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}

.wppm-pagination__step {
    gap: 6px;
}

body .wppm-archive .wppm-pagination a:hover {
    border-color: var(--wppm-color-accent);
}

.wppm-pagination__page.is-current {
    border-color: var(--wppm-color-brand);
    background: var(--wppm-color-brand);
    color: var(--wppm-color-brand-contrast);
}

.wppm-pagination__gap {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;

    min-width: 20px;
    padding-bottom: 8px;

    color: var(--wppm-color-text-muted);
}

.wppm-pagination__gap--small {
    display: none;
}

@media (max-width: 600px) {
    .wppm-pagination__gap--small {
        display: inline-flex;
    }

    .wppm-pagination__gap--wide {
        display: none;
    }

    .wppm-pagination {
        gap: 4px;
    }

    body .wppm-archive .wppm-pagination a,
    .wppm-pagination__page.is-current {
        min-width: 38px;
        min-height: 38px;
        padding: 0 8px;
    }

    .wppm-pagination__label,
    body .wppm-archive .wppm-pagination .wppm-pagination__page--far {
        display: none;
    }
}


/* Während die Treffer neu laden */

.wppm-results {
    min-width: 0;
    scroll-margin-top: 90px;
    transition: opacity var(--wppm-transition);
}

.wppm-archive.is-loading .wppm-results {
    opacity: .5;
}

body .wppm-archive .wppm-archive__empty a {
    display: inline-block;
    margin-left: 4px;

    color: var(--wppm-color-heading);
    text-decoration: underline;
}


/* Handy und schmale Tablets: Filter als Fenster, das der Knopf „Filter“ öffnet */

@media (max-width: 900px) {

    .wppm-archive__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    /* Ohne JavaScript: Filter oben, nicht mitlaufend */
    .wppm-sidebar,
    body.admin-bar .wppm-sidebar {
        position: static;
        max-height: none;
    }

    .wppm-js .wppm-sidebar,
    body.admin-bar .wppm-js .wppm-sidebar {
        position: fixed;
        inset: 0;
        z-index: 100000;

        display: flex;
        flex-direction: column;

        max-height: none;
        padding: 0;

        border: 0;
        border-radius: 0;
        background: var(--wppm-color-bg);

        visibility: hidden;
        transform: translateX(-100%);
        transition:
                transform 240ms ease,
                visibility 0s linear 240ms;
    }

    .wppm-js.is-filter-open .wppm-sidebar,
    body.admin-bar .wppm-js.is-filter-open .wppm-sidebar {
        visibility: visible;
        transform: none;
        transition: transform 240ms ease;
    }

    .wppm-js .wppm-sidebar__head {
        padding: 14px 16px;
        border-bottom: 1px solid var(--wppm-color-border-soft);
    }

    .wppm-js .wppm-filters {
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;

        padding: 0 16px;
    }

    body .wppm-archive.wppm-js .wppm-sidebar__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 40px;
        height: 40px;
        padding: 0;

        border: 0;
        border-radius: 50%;

        background: var(--wppm-color-bg-muted);
        color: var(--wppm-color-heading);
        box-shadow: none;

        font-size: 1.6rem;
        line-height: 1;
    }

    .wppm-js .wppm-sidebar__foot {
        display: block;

        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));

        border-top: 1px solid var(--wppm-color-border-soft);
    }

    body .wppm-archive .wppm-sidebar__show {
        width: 100%;
        min-height: 48px;

        border: 0;
        border-radius: var(--wppm-radius-sm);

        background: var(--wppm-color-brand);
        color: var(--wppm-color-brand-contrast);
        box-shadow: none;

        font-family: inherit;
        font-size: .95rem;
        font-weight: 700;
        letter-spacing: normal;
        text-transform: none;
    }

    body .wppm-archive.wppm-js .wppm-results__filter-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;

        min-height: 42px;
        margin: 0 0 18px;
        padding: 0 18px;

        border: 1px solid var(--wppm-color-border-soft);
        border-radius: var(--wppm-radius-pill);

        background: var(--wppm-color-bg);
        color: var(--wppm-color-heading);
        box-shadow: none;

        font-family: inherit;
        font-size: .92rem;
        font-weight: 700;
        letter-spacing: normal;
        text-transform: none;
    }

    .wppm-results__filter-count {
        min-width: 20px;
        padding: 3px 6px;

        border-radius: var(--wppm-radius-pill);

        background: var(--wppm-color-accent);
        color: #fff;

        font-size: .72rem;
        line-height: 1;
        text-align: center;
    }
}

html.wppm-no-scroll {
    overflow: hidden;
}


/* -------------------------------------------------------------
   Empty
   ------------------------------------------------------------- */

.wppm-archive__empty {
    padding: 80px 24px;

    border: 1px dashed var(--wppm-color-border-soft);
    border-radius: var(--wppm-radius-xl);

    color: var(--wppm-color-text-subtle);

    text-align: center;
}


/* -------------------------------------------------------------
   Karten
   ------------------------------------------------------------- */

.wppm-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* „Zuhause gefunden“: Überschrift je Transport (Monat), darunter dessen Karten */
.wppm-archive .wppm-archive__group-title {
    margin: 0 0 16px;

    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.2;
}

.wppm-archive .wppm-archive__grid + .wppm-archive__group-title {
    margin-top: 40px;
}

.wppm-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    background: var(--wppm-color-bg);

    border: 1px solid var(--wppm-color-border);
    border-radius: var(--wppm-radius-lg);

    color: inherit;
    text-decoration: none;

    box-shadow: var(--wppm-shadow-card);

    transition:
            transform var(--wppm-transition),
            box-shadow var(--wppm-transition),
            border-color var(--wppm-transition);
}

.wppm-card:hover {
    transform: translateY(-5px);

    border-color: var(--wppm-color-border-soft);

    box-shadow: var(--wppm-shadow-hover);
}


/* -------------------------------------------------------------
   Kartenbild
   ------------------------------------------------------------- */

.wppm-card__image {
    position: relative;

    width: 100%;
    aspect-ratio: 4 / 4.5;

    overflow: hidden;

    background: var(--wppm-color-bg-image);
}

.wppm-card__image::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
            linear-gradient(
                    to top,
                    rgba(0, 0, 0, .14),
                    transparent 30%
            );
}

.wppm-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
            transform 500ms cubic-bezier(.2, .7, .2, 1);
}

.wppm-card:hover .wppm-card__image img {
    transform: scale(1.045);
}

/* Ohne Foto kein dunkler Verlauf über dem Platzhalter */
.wppm-card__image--empty::after {
    display: none;
}

/* Hund ohne Foto: Vereinslogo blass auf der Bildfläche (WppmPetView::photoPlaceholder) */
.wppm-photo-placeholder {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.wppm-photo-placeholder__logo {
    width: 40%;
    max-width: 200px;
    aspect-ratio: 478 / 499;

    background: url("../images/platzhalter-logo.png") center / contain no-repeat;

    opacity: .16;
}

.wppm-photo-placeholder__caption {
    color: var(--wppm-color-text-muted);

    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.wppm-card__status {
    position: absolute;
    z-index: 2;

    top: 14px;
    right: 14px;
}


/* -------------------------------------------------------------
   Karteninhalt
   ------------------------------------------------------------- */

.wppm-card__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 5px;

    padding: 18px 18px 19px;
}

/* In der Übersicht ein h2 (unter Gruppen h3): gegen die Überschriften-Größen des Themes absichern */
.wppm-card .wppm-card__name {
    margin: 0;

    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
}

.wppm-card__markers {
    margin: 2px 0;
}

.wppm-card__meta {
    margin: 0;

    color: var(--wppm-color-text-muted);

    font-size: .86rem;
    line-height: 1.5;
}

.wppm-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-top: auto;
    padding-top: 15px;

    color: var(--wppm-color-text-muted);

    font-size: .82rem;
}

.wppm-card__fee {
    color: var(--wppm-color-text);

    font-size: .86rem;
    font-weight: 800;
}


/* =================================================================
   EINZELANSICHT
   ================================================================= */

.wppm-pet {
    width: 100%;
    max-width: var(--wppm-width-single);

    margin: 0 auto;
    padding: 36px 16px 64px;

    line-height: 1.6;
}


/* -------------------------------------------------------------
   Fußzeile: Infostand und Print Button
   ------------------------------------------------------------- */

.wppm-pet__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;

    margin-top: 12px;
}

.wppm-pet__print-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin: 0;
    padding: 9px 15px;

    border: 1px solid var(--wppm-color-border);
    border-radius: var(--wppm-radius-pill);

    background: var(--wppm-color-bg);
    color: var(--wppm-color-text-muted);

    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;

    cursor: pointer;

    transition:
            background var(--wppm-transition),
            border-color var(--wppm-transition),
            color var(--wppm-transition);
}

.wppm-pet__print-btn:hover {
    background: var(--wppm-color-bg-muted);
    border-color: var(--wppm-color-border-soft);
    color: var(--wppm-color-text);
}

/* Hinweis für Bearbeiter, wenn das Tier nicht auf der Webseite erscheint (nicht im Ausdruck) */
.wppm-pet__preview-note {
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    background: #fffbeb;
    color: #78350f;
    font-size: .9rem;
}

@media print {
    .wppm-pet__preview-note {
        display: none;
    }
}


/* -------------------------------------------------------------
   Hero + Informationen
   ------------------------------------------------------------- */

.wppm-pet__top {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    align-items: start;
    gap: 36px;

    margin-bottom: 40px;
}

.wppm-pet__media {
    position: relative;
    min-width: 0;
}

.wppm-pet__hero {
    position: relative;

    width: 100%;
    aspect-ratio: 4 / 3;

    overflow: hidden;

    margin-bottom: 12px;

    background: var(--wppm-color-bg-image);

    border-radius: var(--wppm-radius-xl);

    box-shadow:
            0 16px 40px rgba(20, 30, 35, .08);
}

.wppm-pet__hero img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* Bilderleiste: Wischen per Touch über natives Scrollen mit Scroll-Snap */
.wppm-pet__slides {
    display: flex;

    width: 100%;
    height: 100%;

    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;

    outline: none;

    touch-action: pan-x pan-y;
}

.wppm-pet__slides::-webkit-scrollbar {
    display: none;
}

.wppm-pet__slides:focus-visible {
    box-shadow: inset 0 0 0 3px var(--wppm-color-accent);
}

.wppm-pet__hero .wppm-pet__slide {
    position: relative;
    flex: 0 0 100%;

    overflow: hidden;

    scroll-snap-align: start;
    scroll-snap-stop: always;

    user-select: none;
    -webkit-user-drag: none;
}

/* Foto immer vollständig zeigen, egal ob Hoch- oder Querformat */
.wppm-pet__hero .wppm-pet__slide-img {
    position: relative;
    object-fit: contain;
}

/* Dasselbe Foto unscharf dahinter füllt die Ränder */
.wppm-pet__hero .wppm-pet__slide-bg {
    position: absolute;
    inset: 0;

    filter: blur(28px) saturate(1.1) brightness(.92);
    transform: scale(1.2);
}

.wppm-pet__hero .wppm-pet__slide img {
    user-select: none;
    -webkit-user-drag: none;
}

/* is-ready setzt das Skript, sobald es mehr als ein Bild gibt */
.wppm-pet__slides.is-ready {
    cursor: grab;
}

/* Während Maus-Ziehen kein Einrasten, sonst ruckelt es */
.wppm-pet__slides.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
}

/* Pfeile (nur bei Maus/Trackpad, auf Touch-Geräten wird gewischt) */
.wppm-pet__hero .wppm-pet__nav {
    position: absolute;
    z-index: 2;
    top: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0 0 4px;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, .9);
    box-shadow: 0 4px 14px rgba(20, 30, 35, .18);
    color: var(--wppm-color-brand);

    font-size: 2rem;
    line-height: 1;

    cursor: pointer;

    opacity: 0;
    transform: translateY(-50%);

    transition:
            opacity var(--wppm-transition),
            background var(--wppm-transition);
}

.wppm-pet__hero .wppm-pet__nav:hover,
.wppm-pet__hero .wppm-pet__nav:focus {
    background: #fff;
    color: var(--wppm-color-brand);
}

.wppm-pet__hero .wppm-pet__nav--prev {
    left: 14px;
}

.wppm-pet__hero .wppm-pet__nav--next {
    right: 14px;
}

.wppm-pet__hero:hover .wppm-pet__nav,
.wppm-pet__hero .wppm-pet__nav:focus-visible {
    opacity: 1;
}

@media (hover: none) {
    .wppm-pet__hero .wppm-pet__nav {
        display: none;
    }
}

.wppm-pet__counter {
    position: absolute;
    z-index: 2;

    right: 14px;
    bottom: 14px;

    padding: 4px 10px;

    border-radius: 999px;

    background: rgba(20, 30, 35, .6);
    color: #fff;

    font-size: .78rem;
    font-weight: 600;
    line-height: 1.4;

    pointer-events: none;
}

/* Nur im Ausdruck sichtbar (Druckkopf, Status beim Namen) */
.wppm-print-head,
.wppm-pet__status--print {
    display: none;
}

.wppm-pet__status--overlay {
    position: absolute;
    z-index: 2;

    top: 16px;
    right: 16px;

    padding: 9px 15px 9px 12px;

    font-size: .86rem;
}


/* -------------------------------------------------------------
   Thumbnails
   ------------------------------------------------------------- */

.wppm-pet__thumbs {
    display: flex;
    gap: 9px;

    overflow-x: auto;
    scrollbar-width: thin;

    /* Platz für Anheben beim Überfahren und den Fokusrahmen, sonst schneidet overflow ab */
    padding: 4px;
    margin: -4px;
}

/* Theme-Button-Styles (Astra, Elementor) neutralisieren */
.wppm-pet__thumbs .wppm-pet__thumb,
.wppm-pet__thumbs .wppm-pet__thumb:hover,
.wppm-pet__thumbs .wppm-pet__thumb:focus {
    flex: 0 0 76px;

    width: 76px;
    height: 76px; /* das img hat height: 100% !important (Theme-Override oben) */
    margin: 0;
    padding: 0;

    border: 0;
    border-radius: var(--wppm-radius-sm);

    background: none;
    box-shadow: none;

    line-height: 0;

    cursor: pointer;
}

.wppm-pet__thumbs .wppm-pet__thumb:focus-visible {
    outline: 2px solid var(--wppm-color-accent);
    outline-offset: 2px;
}

.wppm-pet__thumbs img {
    display: block;

    width: 76px;
    height: 76px;

    object-fit: cover;

    border: 2px solid transparent;
    border-radius: var(--wppm-radius-sm);

    opacity: .72;

    user-select: none;
    -webkit-user-drag: none;

    transition:
            opacity var(--wppm-transition),
            border-color var(--wppm-transition),
            transform var(--wppm-transition);
}

.wppm-pet__thumb:hover img {
    opacity: 1;
    transform: translateY(-2px);
}

.wppm-pet__thumb.is-active img {
    opacity: 1;
    border-color: var(--wppm-color-accent);
}


/* -------------------------------------------------------------
   Pet Info
   ------------------------------------------------------------- */

.wppm-pet__info {
    min-width: 0;
    padding-top: 4px;
}

.wppm-pet__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    margin-bottom: 6px;
}

.wppm-pet__header h1 {
    margin: 0;

    font-size: clamp(2.2rem, 4.4vw, 3.3rem);
    font-weight: 800;
    line-height: .98;

    letter-spacing: -.04em;
}

.wppm-pet__subline {
    margin: 0 0 18px;

    color: var(--wppm-color-text-muted);

    font-size: 1.05rem;
    line-height: 1.55;
}

/* Aufenthaltsort mit Link, z. B. zur Seite des Shelters */
.wppm-pet__location-link {
    color: var(--wppm-color-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.wppm-pet__location-link:hover,
.wppm-pet__location-link:focus-visible {
    color: var(--wppm-color-heading);
}


/* -------------------------------------------------------------
   Fakten
   ------------------------------------------------------------- */

.wppm-pet__facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    gap: 8px;
}

.wppm-pet__fact {
    min-width: 0;

    padding: 10px 13px;

    background: var(--wppm-color-bg-muted);

    border: 1px solid var(--wppm-color-border);

    border-radius: var(--wppm-radius-sm);
}

.wppm-pet__fact-label {
    display: flex;
    align-items: center;

    margin-bottom: 3px;

    color: var(--wppm-color-text-subtle);

    font-size: .68rem;
    font-weight: 700;
    line-height: 1.3;

    text-transform: uppercase;
    letter-spacing: .07em;
}

.wppm-pet__fact-value {
    display: block;

    font-size: .98rem;
    font-weight: 700;

    line-height: 1.35;
}


/* -------------------------------------------------------------
   Auf einen Blick
   ------------------------------------------------------------- */

.wppm-pet__glance {
    margin-top: 20px;
}

body .wppm-pet .wppm-pet__glance-title {
    margin: 0 0 9px;

    color: var(--wppm-color-text-subtle);

    font-family: var(--wppm-font);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.3;

    text-transform: uppercase;
    letter-spacing: .07em;
}

.wppm-pet__glance-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.wppm-glance {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin: 0;
    padding: 6px 12px 6px 7px;

    border-radius: var(--wppm-radius-pill);

    background: var(--wppm-color-neutral-bg);
    color: var(--wppm-color-text);

    font-size: .88rem;
    font-weight: 600;
    line-height: 1.25;
}

.wppm-glance::before {
    content: "•";

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 18px;
    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: #fff;
    color: var(--wppm-color-neutral-text);

    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
}

.wppm-glance--yes {
    background: var(--wppm-color-success-bg);
}

.wppm-glance--yes::before {
    content: "✓";
    color: var(--wppm-color-success);
}

.wppm-glance--no {
    background: var(--wppm-color-danger-bg);
}

.wppm-glance--no::before {
    content: "×";
    color: var(--wppm-color-danger);
}


/* -------------------------------------------------------------
   Adoption anfragen: Kasten mit Knopf, Ablauf und Link
   (neben dem Foto und noch einmal in „Wie geht es weiter?“)
   ------------------------------------------------------------- */

.wppm-adopt-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;

    max-width: 440px;
    margin-top: 22px;
    padding: 18px;

    border: 1px solid var(--wppm-color-border-soft);
    border-radius: var(--wppm-radius-lg);

    background: var(--wppm-color-bg);
    box-shadow: 0 1px 2px rgba(66, 24, 18, .04), 0 8px 24px rgba(66, 24, 18, .05);
}

body .wppm-pet a.wppm-adopt-btn,
body .wppm-pet a.wppm-adopt-btn:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    padding: 15px 22px;

    border: 2px solid var(--wppm-color-accent);
    border-radius: var(--wppm-radius-md);

    background: var(--wppm-color-accent);
    color: #fff;

    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;

    box-shadow: 0 6px 16px rgba(207, 109, 71, .28);

    transition:
            filter var(--wppm-transition),
            transform var(--wppm-transition),
            box-shadow var(--wppm-transition);
}

body .wppm-pet a.wppm-adopt-btn svg {
    flex: none;
    transition: transform var(--wppm-transition);
}

body .wppm-pet a.wppm-adopt-btn:hover,
body .wppm-pet a.wppm-adopt-btn:focus-visible {
    color: #fff;
    filter: brightness(.93);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(207, 109, 71, .34);
}

body .wppm-pet a.wppm-adopt-btn:hover svg,
body .wppm-pet a.wppm-adopt-btn:focus-visible svg {
    transform: translateX(3px);
}

/* Reserviert: „Trotzdem anfragen“ als Umriss-Knopf, darüber der Hinweis in Gelb wie die Statusplakette */
body .wppm-pet a.wppm-adopt-btn--secondary,
body .wppm-pet a.wppm-adopt-btn--secondary:visited {
    background: transparent;
    color: var(--wppm-color-accent);
    box-shadow: none;
}

body .wppm-pet a.wppm-adopt-btn--secondary:hover,
body .wppm-pet a.wppm-adopt-btn--secondary:focus-visible {
    background: var(--wppm-color-accent);
    color: #fff;
    filter: none;
    box-shadow: none;
}

.wppm-adopt-note {
    margin: 0;
    padding: 10px 12px;

    border-left: 4px solid #facc15;
    border-radius: var(--wppm-radius-sm);

    background: #fefce8;
    color: #422006;

    font-size: .92rem;
    line-height: 1.45;
}

/* Ablauf in zwei Schritten mit Symbol, umbricht je Schritt statt mitten im Satz */
.wppm-adopt-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;

    margin: 0;
    padding: 0;

    list-style: none;

    color: var(--wppm-color-text);

    font-size: .9rem;
    line-height: 1.4;
}

.wppm-adopt-steps li {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin: 0;
}

.wppm-adopt-steps svg {
    flex: none;

    width: 17px;
    height: 17px;

    color: var(--wppm-color-accent);
}

body .wppm-pet a.wppm-adopt-process {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding-top: 12px;

    border-top: 1px solid var(--wppm-color-border);

    color: var(--wppm-color-accent);

    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
}

body .wppm-pet a.wppm-adopt-process:hover,
body .wppm-pet a.wppm-adopt-process:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* -------------------------------------------------------------
   Markierungen: Notfall, Senior, Schon lange bei uns
   (WppmPetView::markersHtml, Steckbrief und Karten)
   ------------------------------------------------------------- */

.wppm-markers {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wppm-marker {
    display: inline-block;
    padding: 3px 10px;

    border-radius: 999px;

    background: #f1e7df;
    color: var(--wppm-color-heading);

    font-size: .78rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.wppm-marker--emergency {
    background: var(--wppm-color-danger);
    color: #fff;
}

.wppm-marker--senior {
    background: #ede4f3;
    color: #4b2a63;
}

.wppm-marker--long-stay {
    background: #e3eff0;
    color: #1f5256;
}


/* -------------------------------------------------------------
   Ende des Steckbriefs: „Wie geht es weiter?“ (nicht im Ausdruck)
   ------------------------------------------------------------- */

.wppm-next-wrap {
    margin-top: 36px;
}

/* Trennlinie zwischen Anfrage-Banner und „Keine Adoption?“ */
.wppm-next .wppm-pet__divider {
    margin: 10px 0;
}

.wppm-next {
    display: grid;
    gap: 22px;
}

/* Anfrage: abgehobenes Banner in der Akzentfarbe, links Foto und Text, rechts der weiße Kasten mit dem Knopf */
.wppm-next__adopt {
    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    align-items: center;
    gap: 24px 40px;

    padding: 34px 36px;

    border-radius: var(--wppm-radius-xl);

    background: #cf6d47;
    background:
            radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .18), transparent 45%),
            linear-gradient(135deg, var(--wppm-color-accent), color-mix(in srgb, var(--wppm-color-accent) 72%, #421812));
    color: #fff;

    box-shadow: 0 18px 40px rgba(207, 109, 71, .28);
}

/* Große, blasse Pfote als Wasserzeichen unten links */
.wppm-next__adopt::before {
    content: "";

    position: absolute;
    left: -30px;
    bottom: -46px;

    width: 190px;
    height: 190px;

    background: #fff;
    opacity: .08;

    transform: rotate(-18deg);

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cellipse cx=%275.2%27 cy=%2710.2%27 rx=%272.1%27 ry=%272.7%27/%3E%3Cellipse cx=%279.4%27 cy=%275.6%27 rx=%272.2%27 ry=%272.9%27/%3E%3Cellipse cx=%2714.6%27 cy=%275.6%27 rx=%272.2%27 ry=%272.9%27/%3E%3Cellipse cx=%2718.8%27 cy=%2710.2%27 rx=%272.1%27 ry=%272.7%27/%3E%3Cpath d=%27M12 11.2c-2.9 0-6.2 3.7-6.2 6.5 0 1.8 1.4 2.9 3.1 2.9 1.3 0 2.1-.6 3.1-.6s1.8.6 3.1.6c1.7 0 3.1-1.1 3.1-2.9 0-2.8-3.3-6.5-6.2-6.5z%27/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cellipse cx=%275.2%27 cy=%2710.2%27 rx=%272.1%27 ry=%272.7%27/%3E%3Cellipse cx=%279.4%27 cy=%275.6%27 rx=%272.2%27 ry=%272.9%27/%3E%3Cellipse cx=%2714.6%27 cy=%275.6%27 rx=%272.2%27 ry=%272.9%27/%3E%3Cellipse cx=%2718.8%27 cy=%2710.2%27 rx=%272.1%27 ry=%272.7%27/%3E%3Cpath d=%27M12 11.2c-2.9 0-6.2 3.7-6.2 6.5 0 1.8 1.4 2.9 3.1 2.9 1.3 0 2.1-.6 3.1-.6s1.8.6 3.1.6c1.7 0 3.1-1.1 3.1-2.9 0-2.8-3.3-6.5-6.2-6.5z%27/%3E%3C/svg%3E") center / contain no-repeat;

    pointer-events: none;
}

.wppm-next__adopt > * {
    position: relative;
}

.wppm-next__adopt-text {
    display: flex;
    align-items: center;
    gap: 20px;
}

.wppm-next__adopt-photo {
    flex: none;

    width: 96px;
    height: 96px;

    border: 4px solid #fff;
    border-radius: 50%;

    object-fit: cover;

    box-shadow: 0 8px 20px rgba(66, 24, 18, .25);
}

body .wppm-pet .wppm-next__adopt h2 {
    margin: 0 0 8px;

    color: #fff;

    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    line-height: 1.15;
}

.wppm-next__adopt p {
    margin: 0;

    color: rgba(255, 255, 255, .92);

    font-size: 1.02rem;
    line-height: 1.55;
}

.wppm-next__adopt .wppm-adopt-actions {
    max-width: none;
    margin-top: 0;

    border-color: transparent;
    box-shadow: 0 14px 34px rgba(66, 24, 18, .22);
}

/* Helfen ohne Adoption: Kacheln mit Symbol in einer getönten Fläche wie bei den Angaben */
.wppm-next__help {
    padding: 26px 24px 24px;

    border: 1px solid var(--wppm-color-border);
    border-radius: var(--wppm-radius-xl);

    background: var(--wppm-color-bg-muted);
}

body .wppm-pet .wppm-next__title {
    margin: 0 0 20px;

    font-size: 1.3rem;
    text-align: center;
}

.wppm-support {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.wppm-support__tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;

    margin: 0;
    padding: 20px 18px 18px;

    border: 1px solid var(--wppm-color-border);
    border-radius: var(--wppm-radius-lg);

    background: var(--wppm-color-bg);
    box-shadow: 0 1px 2px rgba(66, 24, 18, .04), 0 8px 24px rgba(66, 24, 18, .05);
}

.wppm-support__icon {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    background: #f6e6dd;
    background: color-mix(in srgb, var(--wppm-color-accent) 14%, #fff);
    color: var(--wppm-color-accent);
}

.wppm-support__icon svg {
    width: 24px;
    height: 24px;
}

body .wppm-pet .wppm-support__tile h3 {
    margin: 4px 0 0;

    font-size: 1.08rem;
    line-height: 1.25;
}

.wppm-support__tile p {
    flex-grow: 1;

    margin: 0;

    color: var(--wppm-color-text-muted);

    font-size: .9rem;
    line-height: 1.5;
}

body .wppm-pet a.wppm-support__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    margin-top: 6px;
    padding: 8px 18px;

    border: 2px solid var(--wppm-color-accent);
    border-radius: var(--wppm-radius-pill);

    background: transparent;
    color: var(--wppm-color-accent);

    font-family: inherit;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;

    cursor: pointer;

    transition:
            background var(--wppm-transition),
            color var(--wppm-transition);
}

body .wppm-pet a.wppm-support__link:hover,
body .wppm-pet a.wppm-support__link:focus-visible {
    background: var(--wppm-color-accent);
    color: #fff;
    text-decoration: none;
}

/* Teilen: kleine Knöpfe, „Link kopieren“ blendet wppm-steckbrief.js ein */
.wppm-share {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body .wppm-pet .wppm-share__link,
body .wppm-pet .wppm-share button.wppm-share__copy {
    display: inline-flex;
    align-items: center;

    min-height: 36px;
    margin-top: 6px;
    padding: 6px 12px;

    border: 1px solid var(--wppm-color-border-soft);
    border-radius: var(--wppm-radius-pill);

    background: var(--wppm-color-bg);
    color: var(--wppm-color-heading);

    font-family: inherit;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;

    cursor: pointer;
}

body .wppm-pet .wppm-share__link:hover,
body .wppm-pet .wppm-share__link:focus-visible,
body .wppm-pet .wppm-share button.wppm-share__copy:hover,
body .wppm-pet .wppm-share button.wppm-share__copy:focus-visible {
    border-color: var(--wppm-color-accent);
    color: var(--wppm-color-accent);
    text-decoration: none;
}

/* Sonst gewinnen die Knopf-Regeln oben gegen das hidden-Attribut */
.wppm-share [hidden] {
    display: none !important;
}

/* Fußzeile darunter: links zurück, rechts Infostand und Drucken */
.wppm-next-wrap + .wppm-pet__bottom {
    margin-top: 26px;
}

.wppm-pet__bottom-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}

body .wppm-pet a.wppm-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 9px 16px 9px 12px;

    border: 1px solid var(--wppm-color-border-soft);
    border-radius: var(--wppm-radius-pill);

    background: var(--wppm-color-bg);
    color: var(--wppm-color-accent);

    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;

    transition:
            background var(--wppm-transition),
            border-color var(--wppm-transition);
}

body .wppm-pet a.wppm-back-link:hover,
body .wppm-pet a.wppm-back-link:focus-visible {
    border-color: var(--wppm-color-accent);
    background: var(--wppm-color-bg-muted);
    text-decoration: none;
}

.wppm-back-link svg {
    flex-shrink: 0;
    transition: transform var(--wppm-transition);
}

.wppm-back-link:hover svg,
.wppm-back-link:focus-visible svg {
    transform: translateX(-3px);
}

/* Derselbe Link über dem Foto */
.wppm-pet__back {
    margin: 0 0 18px;
}

@media (max-width: 1023px) {
    .wppm-support {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wppm-next__adopt {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 599px) {
    .wppm-adopt-actions {
        max-width: none;
    }

    .wppm-next__adopt {
        padding: 24px 16px 16px;
    }

    .wppm-next__adopt-text {
        gap: 14px;
    }

    .wppm-next__adopt-photo {
        width: 68px;
        height: 68px;
        border-width: 3px;
    }

    .wppm-next__help {
        padding: 22px 12px 12px;
    }

    .wppm-support {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    /* Quer: Symbol links, Text und Knopf rechts, damit die vier Kacheln nicht so lang werden */
    .wppm-support__tile {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 4px;
        align-items: start;

        padding: 16px 14px;
    }

    .wppm-support__tile > * {
        grid-column: 2;
    }

    .wppm-support__tile > .wppm-support__icon {
        grid-column: 1;
        grid-row: 1 / span 3;

        width: 40px;
        height: 40px;
    }

    body .wppm-pet .wppm-support__tile h3 {
        margin-top: 2px;
    }

    body .wppm-pet a.wppm-support__link {
        justify-self: start;
    }
}


/* -------------------------------------------------------------
   „?“ mit Erklärung (WppmPetView::helpButton(), wppm-hilfe.js)
   ------------------------------------------------------------- */

/* Theme-Button-Styles (Astra, Elementor) neutralisieren */
body .wppm-pet .wppm-help,
body .wppm-pet .wppm-help:hover,
body .wppm-pet .wppm-help:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 17px;
    height: 17px;
    margin: 0 0 0 6px;
    padding: 0;

    border: 1.5px solid currentColor;
    border-radius: 50%;

    background: transparent;
    box-shadow: none;
    color: var(--wppm-color-text-subtle);

    font-family: var(--wppm-font);
    font-size: .66rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;

    cursor: help;
}

body .wppm-pet .wppm-help:hover,
body .wppm-pet .wppm-help:focus-visible {
    color: var(--wppm-color-accent);
}

body .wppm-pet .wppm-help:focus-visible {
    outline: 2px solid var(--wppm-color-accent);
    outline-offset: 2px;
}

.wppm-help__text {
    max-width: min(300px, calc(100vw - 24px));
    margin: auto;
    padding: 10px 13px;

    border: 0;
    border-radius: var(--wppm-radius-sm);

    background: #252a2e;
    color: #fff;
    box-shadow: 0 10px 28px rgba(20, 30, 35, .25);

    font-family: var(--wppm-font);
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    white-space: normal;
}

/* Vom Skript neben den Knopf gesetzt; ohne Skript bleibt die Erklärung mittig im Fenster */
.wppm-help__text.is-placed {
    inset: auto;
    margin: 0;
}


/* =================================================================
   Inhaltsbereiche
   ================================================================= */

/* Angaben als Karten, paarweise nebeneinander (Verträglichkeit + Eigenschaften, Gesundheit + Wünsche) */
.wppm-pet__sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: start;
    gap: 18px;
}

.wppm-pet__sections + .wppm-pet__sections {
    margin-top: 18px;
}

.wppm-pet__sections .wppm-pet__section {
    min-width: 0;

    margin: 0;
    padding: 18px 20px 10px;

    background: var(--wppm-color-bg);

    border: 1px solid var(--wppm-color-border);
    border-radius: var(--wppm-radius-lg);

    box-shadow: 0 1px 2px rgba(66, 24, 18, .04), 0 8px 24px rgba(66, 24, 18, .05);

    break-inside: avoid;
}

/* Verträglichkeit und Eigenschaften in einer getönten Fläche mit gemeinsamem Hinweis */
.wppm-pet__group {
    margin-bottom: 18px;
    padding: 18px;

    border-radius: var(--wppm-radius-xl);

    background: var(--wppm-color-bg-muted);
    background: color-mix(in srgb, var(--wppm-color-accent) 8%, #fff);
}

.wppm-pet__group .wppm-pet__sections {
    align-items: stretch; /* das Paar gleich hoch */
}

/* Karte über die ganze Breite (Gesundheit, Wünsche) */
.wppm-pet__sections .wppm-pet__section--wide {
    grid-column: 1 / -1;
}

/* Gesundheit: Zustand und Vorsorge nebeneinander, schmal untereinander */
.wppm-pet__health-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
}

.wppm-pet__health-cols .wppm-attr-list {
    display: flex;
    columns: auto;
}

@media screen and (max-width: 720px) {
    .wppm-pet__health-cols {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Untereinander braucht die zweite Liste eine Linie zur ersten */
    .wppm-pet__health-cols .wppm-attr-list + .wppm-attr-list {
        border-top: 1px solid var(--wppm-color-border);
    }
}

.wppm-pet__section--wide .wppm-attr-list {
    display: block;

    columns: 2 300px;
    column-gap: 40px;
}

.wppm-pet__section--wide .wppm-attr-row {
    break-inside: avoid;
}

/* In Spalten endet jede Spalte mit einer Zeile, nur die letzte ist :last-child. Darum Linie oben statt unten
   und die oberste Linie jeder Spalte abschneiden, sonst hängt unter der linken Spalte ein Strich */
.wppm-pet__sections--wishes .wppm-attr-list {
    margin-top: -1px;

    clip-path: inset(1px 0 0 0);
}

.wppm-pet__sections--wishes .wppm-attr-row {
    border-top: 1px solid var(--wppm-color-border);
    border-bottom: 0;
}

.wppm-pet__group-note {
    display: flex;
    align-items: center;
    gap: 14px;

    margin: 0 0 16px;
    padding: 2px 6px;
}

.wppm-pet__group-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 38px;
    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: var(--wppm-color-bg);
    color: var(--wppm-color-accent);

    box-shadow: 0 2px 8px rgba(66, 24, 18, .08);
}

.wppm-pet__group-icon svg {
    width: 20px;
    height: 20px;
}

.wppm-pet__group-note p {
    margin: 0;

    color: var(--wppm-color-text);

    font-size: .95rem;
    line-height: 1.5;
}

.wppm-pet__section--full {
    max-width: 820px;
    margin-bottom: 0;
}

.wppm-pet__section h2 {
    position: relative;

    margin: 0 0 14px;
    padding-bottom: 10px;

    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;

    letter-spacing: -.015em;
}

.wppm-pet__sections .wppm-pet__section h2 {
    margin-bottom: 6px;

    font-size: 1.12rem;
}

.wppm-pet__section h2::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 38px;
    height: 3px;

    border-radius: 3px;

    background: var(--wppm-color-accent);
}

.wppm-pet__description {
    margin: 0;

    color: var(--wppm-color-text);

    font-size: 1rem;
    line-height: 1.75;
}

.wppm-pet__description p {
    margin: 0 0 .8em;
}

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

/* Trennlinie mit Pfote zwischen „Über mich“ und den Angaben */
.wppm-pet__divider {
    display: flex;
    align-items: center;
    gap: 16px;

    margin: 30px 0 28px;

    color: var(--wppm-color-accent);
}

.wppm-pet__divider::before,
.wppm-pet__divider::after {
    content: "";

    flex: 1 1 0;
    height: 2px;

    border-radius: 2px;
}

.wppm-pet__divider::before {
    background: linear-gradient(to right, transparent, currentColor);
    opacity: .35;
}

.wppm-pet__divider::after {
    background: linear-gradient(to left, transparent, currentColor);
    opacity: .35;
}

.wppm-pet__divider-paw {
    flex: 0 0 auto;

    width: 30px;
    height: 30px;

    transform: rotate(-14deg);
}



/* =================================================================
   Attribute
   ================================================================= */

.wppm-attr-list {
    display: flex;
    flex-direction: column;

    margin: 0;
    padding: 0;

    list-style: none;
}

/* Zeilen ohne eigenen Kasten, nur durch Linien getrennt */
.wppm-attr-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin: 0;
    padding: 9px 0;

    border-bottom: 1px solid var(--wppm-color-border);

    font-size: .94rem;
    line-height: 1.45;
}

.wppm-attr-row:last-child {
    border-bottom: 0;
}

.wppm-attr-row__marker {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 20px;

    width: 20px;
    height: 20px;

    margin-top: 0;

    border-radius: 50%;

    background: var(--wppm-color-neutral-bg);
    color: var(--wppm-color-neutral-text);

    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
}

.wppm-attr-row__marker::before {
    content: "•";
}

.wppm-attr-row--yes .wppm-attr-row__marker {
    background: var(--wppm-color-success-bg);
    color: var(--wppm-color-success);
}

.wppm-attr-row--yes .wppm-attr-row__marker::before {
    content: "✓";
}

.wppm-attr-row--no .wppm-attr-row__marker {
    background: var(--wppm-color-danger-bg);
    color: var(--wppm-color-danger);
}

.wppm-attr-row--no .wppm-attr-row__marker::before {
    content: "×";
}

/* Bezeichnung links, „?“ dahinter, Wert rechtsbündig */
.wppm-attr-row__text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline; /* bricht der Wert um, bleibt die Bezeichnung auf Höhe seiner ersten Zeile */
    gap: 0 10px;

    flex: 1 1 auto;
    min-width: 0;
}

.wppm-attr-row__label {
    font-weight: 700;
}

.wppm-attr-row__text .wppm-help {
    margin-left: -4px !important; /* rückt an die Bezeichnung, die Lücke kommt vom gap */
}

/* Füllt den Rest neben der Bezeichnung und bricht dort um, statt als Ganzes unter die Bezeichnung zu rutschen
   (z. B. „Gesund, keine Erkrankungen bekannt“ in der halben Spalte des Ausdrucks) */
.wppm-attr-row__value {
    flex: 1 1 0;
    min-width: min-content;

    margin-left: auto;

    color: var(--wppm-color-text);

    text-align: right;
}

.wppm-attr-row--yes .wppm-attr-row__value {
    color: var(--wppm-color-success);
    font-weight: 600;
}

.wppm-attr-row--no .wppm-attr-row__value {
    color: var(--wppm-color-danger);
    font-weight: 600;
}

.wppm-attr-row--unknown .wppm-attr-row__value {
    color: var(--wppm-color-text-subtle);
}

/* Freitext (Training, Krankheiten, Wünsche) läuft normal hinter der Bezeichnung weiter */
.wppm-attr-row--neutral .wppm-attr-row__text {
    display: block;
}

.wppm-attr-row--neutral .wppm-attr-row__label::after {
    content: ":";
}

.wppm-attr-row--neutral .wppm-attr-row__value {
    margin-left: 0;
    text-align: left;
}

/* Datum des letzten Änderungsstands, ganz unten im Steckbrief */
.wppm-pet__info-date {
    margin: 0;

    color: var(--wppm-color-text-muted);

    font-size: .86rem;
}


/* =================================================================
   Schutzgebühr
   ================================================================= */

.wppm-pet__fee {
    display: inline-flex;
    align-items: center;

    padding: 12px 18px;

    background: var(--wppm-color-bg-muted);

    border: 1px solid var(--wppm-color-border);
    border-radius: var(--wppm-radius-md);

    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
}


/* =================================================================
   Testbetrieb (includes/testbetrieb.php)
   ================================================================= */

.wppm-testbetrieb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;

    margin: 0 0 24px;
    padding: 14px 18px;

    background: #fff4d6;
    color: #5c3d00;

    border: 2px dashed #d99a00;
    border-radius: var(--wppm-radius-md);

    font-family: var(--wppm-font);
    font-size: 1rem;
    line-height: 1.45;
}

.wppm-testbetrieb__titel {
    flex: none;

    padding: 3px 10px;

    background: #d99a00;
    color: #fff;

    border-radius: var(--wppm-radius-pill);

    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wppm-testbetrieb__text {
    flex: 1 1 280px;
    margin: 0;

    text-wrap: pretty;
}

/* Über den Galerien schmaler und mittig, in der Schrift der Seite */
.wppm-gallery .wppm-testbetrieb {
    max-width: 920px;
    margin: 0 auto 28px;

    font-family: inherit;
    font-size: .95rem;
}

body .wppm-gallery .wppm-testbetrieb__text {
    margin: 0;
}

.wppm-slider-wrapper .wppm-testbetrieb {
    margin-bottom: 16px;
}


/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 1100px) {

    .wppm-archive__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wppm-pet__top {
        grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
        gap: 30px;
    }
}


@media (max-width: 820px) {

    .wppm-archive {
        padding-top: 44px;
    }

    .wppm-archive__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wppm-pet {
        padding: 28px 16px 56px;
    }

    .wppm-pet__top {
        display: flex;
        flex-direction: column;
        gap: 24px;
        margin-bottom: 32px;
    }

    .wppm-pet__media {
        width: 100%;
    }

    .wppm-pet__hero {
        aspect-ratio: 4 / 3;
    }

    .wppm-pet__info {
        padding-top: 0;
    }
}


@media (max-width: 560px) {

    .wppm-archive {
        padding: 34px 16px 60px;
    }

    .wppm-archive__header {
        margin-bottom: 28px;
    }

    .wppm-archive__header h1 {
        font-size: 2.2rem;
    }

    .wppm-archive__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .wppm-card__image {
        aspect-ratio: 4 / 3;
    }

    .wppm-pet {
        padding: 20px 16px 48px;
    }

    .wppm-pet__top {
        gap: 20px;
        margin-bottom: 28px;
    }

    .wppm-pet__hero {
        aspect-ratio: 4 / 3;
        border-radius: var(--wppm-radius-lg);
    }

    .wppm-pet__header h1 {
        font-size: 2.3rem;
    }

    .wppm-pet__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body .wppm-pet a.wppm-adopt-btn {
        width: 100%;
    }

    .wppm-pet__sections {
        gap: 14px;
    }

    .wppm-pet__sections + .wppm-pet__sections {
        margin-top: 14px;
    }

    .wppm-pet__sections .wppm-pet__section {
        padding: 16px 16px 8px;
    }

    .wppm-pet__group {
        margin-left: -8px;
        margin-right: -8px;
        padding: 14px 8px 8px;
    }

    .wppm-pet__group-note {
        align-items: flex-start;
        gap: 11px;
    }

    .wppm-pet__group-note p {
        font-size: .9rem;
    }

    .wppm-pet__divider {
        margin: 24px 0 22px;
    }
}


@media (max-width: 380px) {

    .wppm-card__body {
        padding: 16px;
    }
}


/* =================================================================
   PRINT – Steckbrief als A4-Blatt
   Aufbau wie am Bildschirm, nur flacher: Kopf mit Logo und Stand, Foto
   neben Name, Eckdaten und „Auf einen Blick“, „Über mich“, dann die
   getönten Flächen mit Hinweis und weißen Karten. Der Link zur Seite steht
   im Kopf, ein Fuß rutschte oft allein auf eine zweite Seite.
   Hinweis und Karten einer Fläche bleiben auf einer Seite.
   Das Foto wird nie beschnitten.
   ================================================================= */

@page {
    size: A4;
    margin: 8mm 12mm;
}

@media print {

    header,
    footer,
    nav,
    #masthead,
    #colophon,
    #wpadminbar,
    .site-header,
    .site-footer,
    .widget-area,
    #sidebar,
    .ast-breadcrumbs-wrapper,
    .cookie-notice,
    .comments-area,
    #ast-scroll-top,
    .ast-scroll-top-icon,
    #cmplz-cookiebanner-container,
    .cmplz-cookiebanner {
        display: none !important;
    }

    html,
    body {
        background: #fff !important;
    }

    html {
        margin-top: 0 !important; /* Platz der Admin-Leiste */
    }

    /* Theme-Container ohne Innenabstand, damit die Seite die volle Breite hat */
    .site-content > .ast-container,
    .site-content .ast-container,
    #primary,
    #content {
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .wppm-pet {
        max-width: none;
        margin: 0;
        padding: 0;

        font-size: 9.5pt;
        line-height: 1.45;

        /* Farbflächen und Markierungen mitdrucken */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .wppm-pet__print-btn,
    .wppm-pet__back,
    .wppm-pet__bottom,
    .wppm-pet__divider,
    .wppm-pet__thumbs,
    .wppm-pet__sections--wishes,
    .wppm-help,
    .wppm-help__text,
    .wppm-pet__info-date,
    .wppm-pet__status--overlay,
    .wppm-pet__nav,
    .wppm-pet__counter,
    .wppm-pet__slide-bg,
    .wppm-pet__slide + .wppm-pet__slide,
    .wppm-pet__media--empty {
        display: none !important;
    }

    /* Button „Adoption anfragen“ ist auf Papier nicht anklickbar, ebenso Teilen und „Wie geht es weiter?“ */
    .wppm-adopt-actions,
    .wppm-next-wrap {
        display: none !important;
    }


    /* -------------------------------------------------------------
       Kopf
       ------------------------------------------------------------- */

    .wppm-print-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6mm;

        margin-bottom: 4mm;
        padding-bottom: 2.5mm;

        border-bottom: 1.5pt solid var(--wppm-color-accent);
    }

    .wppm-print-head__brand {
        display: flex;
        align-items: center;
        gap: 3mm;
    }

    body .wppm-print-head__logo {
        display: block;

        width: auto;
        height: 11mm !important;
        max-width: 45mm;

        object-fit: contain;
    }

    .wppm-print-head__site {
        font-family: var(--wppm-font-heading);
        font-size: 12pt;
        font-weight: 800;

        white-space: nowrap;
    }

    .wppm-print-head__meta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;

        color: var(--wppm-color-text-muted);
        text-align: right;

        font-size: 8pt;
        line-height: 1.3;
    }

    .wppm-print-head__kind {
        color: var(--wppm-color-text);

        font-size: 9pt;
        font-weight: 800;

        text-transform: uppercase;
        letter-spacing: .12em;
    }

    .wppm-print-head__url {
        color: var(--wppm-color-text);
        font-weight: 700;
    }


    /* -------------------------------------------------------------
       Foto + Eckdaten
       ------------------------------------------------------------- */

    .wppm-pet__top {
        display: grid;
        grid-template-columns: 78mm minmax(0, 1fr);
        align-items: start;
        gap: 6mm;

        margin-bottom: 4mm;

        break-inside: avoid;
    }

    /* Ohne Foto (Platzhalter nicht gedruckt) nehmen die Eckdaten die ganze Breite */
    .wppm-pet__media--empty + .wppm-pet__info {
        grid-column: 1 / -1;
    }

    .wppm-pet__hero {
        width: 100%;
        height: auto;
        aspect-ratio: auto;

        margin: 0;

        border-radius: 3mm;
        box-shadow: none;
        background: none;
    }

    .wppm-pet__slides {
        display: block;
        height: auto;
        overflow: visible;
    }

    .wppm-pet__hero .wppm-pet__slide {
        display: block;
    }

    /* Natürliches Seitenverhältnis, Hochformat wird nur in der Höhe begrenzt */
    body .wppm-pet__hero .wppm-pet__slide-img {
        position: static;
        display: block;

        width: 100%;
        height: auto !important;
        max-height: 82mm;

        object-fit: contain;

        border-radius: 3mm;
    }

    .wppm-pet__info {
        padding-top: 1mm;
    }

    .wppm-pet__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 2.5mm;

        margin-bottom: 1.5mm;
    }

    .wppm-pet__header h1 {
        order: 2;

        font-size: 24pt;
        line-height: 1.05;
        letter-spacing: -.02em;
    }

    .wppm-pet__status,
    .wppm-status-pill,
    .wppm-pet__status--print {
        order: 1;

        display: inline-flex;

        padding: 1.4mm 3mm;

        font-size: 8pt;
    }

    .wppm-pet__subline {
        margin: 0 0 3.5mm;

        color: var(--wppm-color-text-muted);

        font-size: 10.5pt;
    }

    /* Im Ausdruck nur der Name des Ortes */
    .wppm-pet__location-link {
        color: inherit;
        text-decoration: none;
    }

    .wppm-pet__location-link::after {
        content: none !important;
    }

    .wppm-pet__facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2mm;
    }

    .wppm-pet__fact {
        padding: 1.6mm 2.6mm;

        border-radius: 2mm;

        break-inside: avoid;
    }

    .wppm-pet__fact:hover {
        transform: none;
    }

    .wppm-pet__fact-label {
        margin-bottom: .6mm;

        font-size: 6.5pt;
    }

    .wppm-pet__fact-value {
        font-size: 10.5pt;
    }

    .wppm-pet__glance {
        margin-top: 3mm;
    }

    body .wppm-pet .wppm-pet__glance-title {
        margin-bottom: 1.5mm;

        font-size: 6.5pt;
    }

    .wppm-pet__glance-list {
        gap: 1.5mm;
    }

    .wppm-glance {
        gap: 1.5mm;

        padding: 1mm 2.5mm 1mm 1.2mm;

        font-size: 8pt;
    }

    .wppm-glance::before {
        flex-basis: 3.6mm;
        width: 3.6mm;
        height: 3.6mm;

        font-size: 6pt;
    }


    /* -------------------------------------------------------------
       Inhaltsbereiche
       ------------------------------------------------------------- */

    .wppm-pet__section h2 {
        margin: 0 0 2mm;
        padding-bottom: 1.5mm;

        font-size: 12pt;

        break-after: avoid;
    }

    .wppm-pet__section h2::after {
        width: 9mm;
        height: 1.2pt;
    }

    .wppm-pet__section.wppm-pet__section--full {
        max-width: none;
        margin-bottom: 5mm;
    }

    .wppm-pet__description {
        font-size: 9pt;
        line-height: 1.5;
    }

    .wppm-pet__description p {
        margin-bottom: 1.6mm;
    }

    /* Getönte Fläche mit Hinweis; bleibt mit ihren Karten auf einer Seite.
       Abstand nur zwischen den Flächen: einer unter der letzten ragte über die Seite und erzeugte eine leere zweite */
    .wppm-pet__group {
        margin: 0;
        padding: 3mm;

        border-radius: 3mm;

        break-inside: avoid;
    }

    .wppm-pet__group + .wppm-pet__group {
        margin-top: 3.5mm;
    }

    .wppm-pet__group-note {
        align-items: center;
        gap: 2.5mm;

        margin: 0 0 2.5mm;
        padding: 0 1mm;
    }

    .wppm-pet__group-icon {
        flex-basis: 6mm;
        width: 6mm;
        height: 6mm;

        box-shadow: none;
    }

    .wppm-pet__group-icon svg {
        width: 3.6mm;
        height: 3.6mm;
    }

    .wppm-pet__group-note p {
        font-size: 8pt;
        line-height: 1.4;
    }

    .wppm-pet__sections {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3mm;
    }

    .wppm-pet__group + .wppm-pet__sections {
        margin-top: 0;
    }

    .wppm-pet__sections .wppm-pet__section {
        padding: 2.8mm 3.5mm 1.2mm;

        border: .5pt solid var(--wppm-color-border-soft);
        border-radius: 2mm;

        box-shadow: none;

        break-inside: avoid;
    }

    .wppm-pet__sections .wppm-pet__section h2 {
        margin-bottom: 1mm;

        font-size: 10.5pt;
    }

    .wppm-pet__health-cols {
        gap: 0 6mm;
    }

    .wppm-pet__section--wide .wppm-attr-list {
        column-gap: 6mm;
    }

    .wppm-attr-row {
        gap: 2mm;

        padding: 1.1mm 0;

        border-bottom: .5pt solid var(--wppm-color-border);

        font-size: 8.5pt;
        line-height: 1.35;
    }

    .wppm-attr-row__marker {
        flex-basis: 3.8mm;

        width: 3.8mm;
        height: 3.8mm;

        font-size: 6pt;
    }


    .wppm-testbetrieb {
        margin-bottom: 3mm;
        padding: 1.5mm 3.5mm;

        font-size: 9pt;
    }

    a[href]::after {
        content: none !important;
    }
}


/* -------------------------------------------------------------
   Verwaltung für Bearbeiter (includes/verwaltung.php)
   ------------------------------------------------------------- */

/* Leiste auf Steckbrief und Übersicht, nur für angemeldete Bearbeiter */
.wppm-editbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;

    margin: 0 0 20px;
    padding: 10px 14px;

    background: var(--wppm-color-bg-muted);
    border: 1px solid var(--wppm-color-border-soft);
    border-radius: var(--wppm-radius-md);

    font-family: var(--wppm-font);
    font-size: .9rem;
}

.wppm-editbar__label {
    color: var(--wppm-color-text-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.wppm-editbar__button {
    display: inline-block;
    padding: 6px 16px;

    background: var(--wppm-color-accent);
    color: var(--wppm-color-brand-contrast);
    border-radius: 999px;

    font-weight: 700;
    text-decoration: none;
}

.wppm-editbar__button:hover,
.wppm-editbar__button:focus {
    color: var(--wppm-color-brand-contrast);
    filter: brightness(.92);
}

.wppm-editbar__link {
    color: var(--wppm-color-heading);
    text-decoration: underline;
}

@media print {
    .wppm-editbar {
        display: none;
    }
}

/* Seite der Verwaltung: Tierliste und Formular wie im Backend (PrimeVue), in der Breite der Seite */
.wppm-verwaltung {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 1440px;

    margin: 0 auto;
    padding: 28px 20px 56px;

    color: var(--wppm-color-text);
    font-family: var(--wppm-font);
    font-size: 14px;

    /* Speichern-Leiste des Formulars: oben bleiben, unter der WordPress-Leiste, falls es sie gibt */
    --wppm-actions-top: var(--wp-admin--admin-bar--height, 0px);
}

/* Die Tierliste nutzt die ganze Fensterbreite, sonst muss man bei vielen Spalten seitlich scrollen */
.wppm-verwaltung--liste {
    max-width: none;
    padding-left: clamp(16px, 2vw, 40px);
    padding-right: clamp(16px, 2vw, 40px);
}

.wppm-verwaltung__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 32px;

    margin-bottom: 20px;
    padding-bottom: 16px;

    border-bottom: 1px solid var(--wppm-color-border-soft);
}

.wppm-verwaltung__head h1 {
    margin: 0;

    color: var(--wppm-color-heading);
    font-family: var(--wppm-font-heading);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.2;
}

.wppm-verwaltung__head p {
    margin: 6px 0 0;
    color: var(--wppm-color-text-muted);
    font-size: 14px;
}

.wppm-verwaltung__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;

    font-size: 14px;
}

.wppm-verwaltung__nav a {
    color: var(--wppm-color-heading);
}

.wppm-verwaltung__user {
    color: var(--wppm-color-text-muted);
}

.wppm-verwaltung__denied {
    padding: 14px 18px;

    background: var(--wppm-color-danger-bg);
    color: var(--wppm-color-danger);
    border-radius: var(--wppm-radius-md);
}

/* Das Formular bringt aus dem Backend 20px Innenabstand mit (inline), hier gibt ihn die Seite */
.wppm-verwaltung #wppm-newpet {
    padding: 0 !important;
}

/* Das Theme gestaltet Knöpfe und Eingabefelder selbst (Abstände, Farben, Ecken). In der Verwaltung gelten
   die Styles der Tierliste und des Formulars, wie im Backend. */
.wppm-verwaltung .wppm-photo__remove,
.wppm-verwaltung .wppm-photo__tools button,
.wppm-verwaltung .wppm-col-filter {
    padding: 0;
    line-height: 1;
    box-shadow: none;
}

.wppm-verwaltung .wppm-photo__remove {
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: #b91c1c;
}

.wppm-verwaltung .wppm-photo__tools button {
    border-radius: 4px;
    background: rgba(255, 255, 255, .9);
    color: #1e293b;
}

.wppm-verwaltung .wppm-photos__add {
    padding: 8px;
    border-radius: 6px;
    background: #fff;
    color: #475569;
    line-height: 1.3;
}

.wppm-verwaltung .wppm-link-button,
.wppm-verwaltung .wppm-status-tab {
    box-shadow: none;
}

.wppm-verwaltung .wppm-link-button {
    padding: 0;
    background: none;
    color: #2563eb;
}

.wppm-verwaltung .wppm-status-tab:not(.is-active) {
    background: #fff;
    color: #334155;
}

.wppm-verwaltung .wppm-status-tab.is-active {
    background: #1e293b;
    color: #fff;
}

.wppm-verwaltung .wppm-history summary {
    font-size: 13px;
}

.wppm-verwaltung .p-inputtext,
.wppm-verwaltung .p-textarea {
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
}

.wppm-verwaltung .p-datatable,
.wppm-verwaltung .p-paginator {
    font-size: 14px;
}

.wppm-verwaltung table,
.wppm-verwaltung th,
.wppm-verwaltung td {
    margin: 0;
    border-left: 0;
    border-right: 0;
}

.wppm-verwaltung .p-button-text,
.wppm-verwaltung .p-datatable-row-toggle-button,
.wppm-verwaltung .p-paginator button {
    box-shadow: none;
}

/* Das Theme gibt jedem Knopf 12 × 24 px Polster; der Aufklapp-Pfeil machte seine Spalte so doppelt so breit */
.wppm-verwaltung .p-datatable-row-toggle-button {
    width: 28px;
    height: 28px;
    padding: 0;
}

/* Handy: Ränder um die Tierliste und in den Zellen schmaler, damit mehr Spalten auf den Bildschirm passen */
@media (max-width: 767px) {
    .wppm-verwaltung--liste {
        padding-left: 10px;
        padding-right: 10px;
    }

    .wppm-verwaltung #wppm-database .p-tabpanels {
        padding-left: 0;
        padding-right: 0;
    }

    .wppm-verwaltung #wppm-database .wppm-admin-datatable .p-datatable-thead > tr > th,
    .wppm-verwaltung #wppm-database .wppm-admin-datatable .p-datatable-tbody > tr:not(.p-datatable-row-expansion) > td {
        padding-left: 5px;
        padding-right: 5px;
    }

    /* Filter- und Sortiersymbol unter den Spaltennamen, damit sie die Spalten nicht breiter machen als den Inhalt */
    .wppm-verwaltung #wppm-database .wppm-admin-datatable .p-datatable-column-header-content {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: start;
        align-items: center;
        gap: 2px 4px;
    }

    .wppm-verwaltung #wppm-database .wppm-admin-datatable .p-datatable-column-title {
        grid-column: 1 / -1;
    }

    .wppm-verwaltung #wppm-database .wppm-col-filter {
        margin: 0;
    }
}

/* -------------------------------------------------------------
   Anmeldung für Mitglieder (includes/anmeldung.php)
   ------------------------------------------------------------- */

.wppm-anmelden-seite {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    width: 100%;
    min-width: 0;

    padding: clamp(32px, 6vw, 72px) 16px;

    background: var(--wppm-color-bg-muted);
    color: var(--wppm-color-text);
    font-family: var(--wppm-font);
}

.wppm-anmelden-seite *,
.wppm-anmelden-seite *::before,
.wppm-anmelden-seite *::after {
    box-sizing: border-box;
}

.wppm-anmelden__card {
    width: 100%;
    max-width: 420px;
    padding: clamp(24px, 5vw, 36px);

    background: var(--wppm-color-bg);
    border: 1px solid var(--wppm-color-border);
    border-radius: var(--wppm-radius-lg);
    box-shadow: var(--wppm-shadow-card);
}

.wppm-anmelden__label {
    color: var(--wppm-color-accent);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wppm-anmelden-seite h1 {
    margin: 4px 0 8px;

    color: var(--wppm-color-heading);
    font-family: var(--wppm-font-heading);
    font-size: clamp(1.7rem, 4vw, 2.1rem);
    line-height: 1.2;
}

.wppm-anmelden__intro {
    margin: 0 0 22px;
    color: var(--wppm-color-text-muted);
    font-size: .95rem;
    line-height: 1.5;
}

.wppm-anmelden__fehler {
    margin: 0 0 18px;
    padding: 10px 14px;

    background: var(--wppm-color-danger-bg);
    color: var(--wppm-color-danger);
    border-radius: var(--wppm-radius-sm);

    font-size: .9rem;
}

.wppm-anmelden__form {
    display: flex;
    flex-direction: column;
}

.wppm-anmelden__form > label:not(.wppm-anmelden__merken) {
    margin-bottom: 6px;
    color: var(--wppm-color-heading);
    font-size: .9rem;
    font-weight: 600;
}

/* Das Theme gestaltet Eingabefelder und Knöpfe selbst; hier gelten die Farben und Ecken der Steckbriefe */
.wppm-anmelden-seite input[type="text"],
.wppm-anmelden-seite input[type="password"] {
    width: 100%;
    margin: 0 0 16px;
    padding: 11px 14px;

    background: var(--wppm-color-bg);
    color: var(--wppm-color-text);
    border: 1px solid var(--wppm-color-border-soft);
    border-radius: var(--wppm-radius-sm);
    box-shadow: none;

    font-family: inherit;
    font-size: 1rem; /* ab 16px zoomt iOS beim Tippen nicht ins Feld */
    line-height: 1.4;
}

.wppm-anmelden-seite input[type="text"]:focus,
.wppm-anmelden-seite input[type="password"]:focus {
    border-color: var(--wppm-color-accent);
    outline: 2px solid color-mix(in srgb, var(--wppm-color-accent) 25%, transparent);
    outline-offset: 0;
}

.wppm-anmelden__pwd {
    position: relative;
    display: block;
}

.wppm-anmelden__pwd input[type="password"],
.wppm-anmelden__pwd input[type="text"] {
    padding-right: 96px;
}

.wppm-anmelden__zeigen {
    position: absolute;
    top: 6px;
    right: 6px;

    padding: 6px 12px;

    background: var(--wppm-color-bg-muted);
    color: var(--wppm-color-heading);
    border: 0;
    border-radius: var(--wppm-radius-pill);
    box-shadow: none;

    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.wppm-anmelden__zeigen:hover,
.wppm-anmelden__zeigen:focus {
    background: var(--wppm-color-border);
    color: var(--wppm-color-heading);
}

.wppm-anmelden__merken {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0 0 20px;

    font-size: .9rem;
    cursor: pointer;
}

.wppm-anmelden__merken input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--wppm-color-accent);
}

.wppm-anmelden__submit {
    width: 100%;
    padding: 12px 20px;

    background: var(--wppm-color-accent);
    color: var(--wppm-color-brand-contrast);
    border: 0;
    border-radius: var(--wppm-radius-pill);
    box-shadow: none;

    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.wppm-anmelden__submit:hover,
.wppm-anmelden__submit:focus {
    background: var(--wppm-color-accent);
    color: var(--wppm-color-brand-contrast);
    filter: brightness(.92);
}

.wppm-anmelden__links {
    margin: 18px 0 0;
    text-align: center;
    font-size: .9rem;
}

.wppm-anmelden__hinweis {
    margin: 18px 0 0;
    padding-top: 16px;

    border-top: 1px solid var(--wppm-color-border);
    color: var(--wppm-color-text-muted);

    font-size: .85rem;
    text-align: center;
}

.wppm-anmelden__links a,
.wppm-anmelden__hinweis a {
    color: var(--wppm-color-heading);
    text-decoration: underline;
}


/* =================================================================
   ÜBERSICHTEN MIT KOPF („Zuhause gesucht“, „Zuhause gefunden“)
   Wie die übrigen Seiten der Website: Foto-Kopf mit Plakette, Überschriften
   in Playfair Display mit einem Wort in Koralle, Abschnitte auf Creme,
   braune Abschlussleiste. Farben wie die Elementor-Seiten (Koralle #E77E58,
   Creme #FDF6ED, Braun #421812). Siehe archive-pet.php, template-parts/overview/.
   ================================================================= */

/* Volle Breite auch im Flex-Container des Themes (.ast-container), sonst schrumpft sie auf den Inhalt.
   Die Galerien (shortcodes/gallery.php) nutzen dieselben Farben. */
.wppm-overview,
.wppm-gallery {
    width: 100%;
    min-width: 0;

    --wppm-overview-width: 1200px;

    --wppm-coral: #e77e58;
    --wppm-coral-hover: #d66c47;
    --wppm-coral-dark: #b4532f;    /* Koralle für kleine Schrift auf Weiß und Creme */
    --wppm-coral-light: #f2a383;   /* Koralle auf Braun */
    --wppm-coral-soft: #fbe3d8;
    --wppm-cream: #fdf6ed;
    --wppm-brown: #421812;
    --wppm-brown-cta: #6e2f22;

    --wppm-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --wppm-shadow-lift: 0 10px 30px rgba(66, 24, 18, .08);
    --wppm-shadow-soft: 0 4px 16px rgba(66, 24, 18, .06);
}

/* „Zuhause gesucht“ breiter, damit mehr Hunde auf einen Blick zu sehen sind */
.wppm-overview.is-wide {
    --wppm-overview-width: 1440px;
}

.wppm-overview.has-hero {
    --wppm-font: "Nunito", var(--wppm-font-fallback);
    --wppm-font-heading: var(--wppm-font-display);
    --wppm-color-heading: var(--wppm-brown);

    font-family: var(--wppm-font);
    color: var(--wppm-color-text);
}

.wppm-overview.has-hero *,
.wppm-overview.has-hero *::before,
.wppm-overview.has-hero *::after {
    box-sizing: border-box;
}

body .wppm-overview.has-hero h1,
body .wppm-overview.has-hero h2,
body .wppm-overview.has-hero h3,
body .wppm-overview.has-hero h4 {
    font-family: var(--wppm-font-heading);
    color: var(--wppm-color-heading);
    text-transform: none;
    letter-spacing: normal;
}

.wppm-accent {
    color: var(--wppm-coral);
}

.wppm-overview .wppm-icon {
    flex: none;
}

.wppm-overview__notes {
    max-width: calc(var(--wppm-overview-width) + 48px);
    margin: 0 auto;
    padding: 0 24px;
}

.wppm-overview__notes > :first-child {
    margin-top: 24px;
}


/* -------------------------------------------------------------
   Knöpfe
   ------------------------------------------------------------- */

body .wppm-overview a.wppm-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 48px;
    padding: 0 24px;

    border: 2px solid var(--wppm-coral);
    border-radius: 6px;

    background: var(--wppm-coral);
    color: #fff;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;

    transition: background var(--wppm-transition), border-color var(--wppm-transition), color var(--wppm-transition);
}

body .wppm-overview a.wppm-button:hover,
body .wppm-overview a.wppm-button:focus-visible {
    border-color: var(--wppm-coral-hover);
    background: var(--wppm-coral-hover);
    color: #fff;
}

body .wppm-overview a.wppm-button--outline {
    border-color: #fff;
    background: transparent;
}

body .wppm-overview a.wppm-button--outline:hover,
body .wppm-overview a.wppm-button--outline:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, .12);
}

body .wppm-overview a.wppm-button--light {
    border: 1px solid var(--wppm-color-border-soft);
    background: #fff;
    color: var(--wppm-brown);
}

body .wppm-overview a.wppm-button--light:hover,
body .wppm-overview a.wppm-button--light:focus-visible {
    border-color: var(--wppm-coral);
    background: #fff;
    color: var(--wppm-brown);
}


/* -------------------------------------------------------------
   Kopf: Foto über die ganze Breite, Freisteller rechts unten
   ------------------------------------------------------------- */

.wppm-hero {
    position: relative;
    overflow: hidden;

    background:
            linear-gradient(90deg, rgba(20, 10, 8, .78) 0%, rgba(20, 10, 8, .55) 55%, rgba(20, 10, 8, .22) 100%),
            url("../images/uebersicht-hintergrund.webp") center / cover no-repeat,
            #2a1510;
    color: #fff;
}

.wppm-hero__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 32px;

    max-width: calc(var(--wppm-overview-width) + 48px);
    margin: 0 auto;
    padding: 96px 24px 0;
}

.wppm-hero__text {
    flex: 1 1 520px;
    min-width: 0;
    padding-bottom: 120px;
}

.wppm-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 6px 14px;

    border: 1px solid rgba(231, 126, 88, .6);
    border-radius: var(--wppm-radius-pill);

    background: rgba(66, 24, 18, .55);
    color: #fff;

    font-size: .95rem;
    font-weight: 600;
}

.wppm-hero__badge svg {
    color: var(--wppm-coral);
}

body .wppm-overview.has-hero .wppm-hero__title {
    margin: 22px 0 0;

    color: #fff;

    font-size: clamp(2.4rem, 5vw, 3.75rem);
    font-weight: 600;
    line-height: 1.1;
}

body .wppm-overview .wppm-hero__accent {
    color: var(--wppm-coral);
}

.wppm-hero__lead {
    max-width: 600px;
    margin: 24px 0 0;

    color: #fbefe7;

    font-size: 1.15rem;
    line-height: 1.65;
}

.wppm-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 32px;
}

.wppm-hero__image {
    display: flex;
    flex: 0 1 460px;
    align-self: flex-end;
    justify-content: center;
}

.wppm-overview--zuhause-gesucht .wppm-hero__image {
    flex-basis: 600px;
}

body .wppm-overview .wppm-hero__image img {
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;
    margin-bottom: -4px;
}


/* -------------------------------------------------------------
   Creme-Fläche unter dem Kopf, Kacheln ragen in den Kopf hinein
   ------------------------------------------------------------- */

.wppm-overview.has-hero .wppm-overview__body {
    background: var(--wppm-cream);
}

.wppm-overview__lift {
    position: relative;
    z-index: 2;

    max-width: calc(var(--wppm-overview-width) + 48px);
    margin: -56px auto 0;
    padding: 0 24px;
}

.wppm-stats,
.wppm-steps {
    display: grid;
    gap: 20px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.wppm-stats {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.wppm-steps {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.wppm-stat,
.wppm-step {
    margin: 0;

    border-radius: 16px;

    background: #fff;
    box-shadow: var(--wppm-shadow-lift);
}

.wppm-stat {
    display: flex;
    align-items: center;
    gap: 18px;

    padding: 26px 28px;
}

.wppm-stat__icon,
.wppm-travel__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    border-radius: 50%;

    background: var(--wppm-coral-soft);
    color: var(--wppm-coral-dark);
}

.wppm-stat__number {
    display: block;

    color: var(--wppm-brown);

    font-family: var(--wppm-font-display);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
}

.wppm-stat__text {
    display: block;

    margin-top: 6px;

    font-size: .95rem;
    line-height: 1.45;
}

.wppm-step {
    padding: 24px;
}

.wppm-step__number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border-radius: 50%;

    background: var(--wppm-coral);
    color: #fff;

    font-weight: 800;
}

body .wppm-overview .wppm-step__title {
    margin: 16px 0 0;

    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.25;
}

.wppm-step p {
    margin: 8px 0 0;

    font-size: .95rem;
    line-height: 1.6;
}

/* Nur solange ein Transport unterwegs ist */
body .wppm-overview a.wppm-travel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;

    margin-top: 28px;
    padding: 18px 24px;

    border: 1px dashed var(--wppm-coral);
    border-radius: 14px;

    background: #fff;
    color: var(--wppm-brown);

    text-decoration: none;
}

.wppm-travel__icon {
    width: 48px;
    height: 48px;
}

.wppm-travel__text {
    flex: 1 1 320px;

    font-size: 1.05rem;
}

.wppm-travel__more {
    color: var(--wppm-coral-dark);

    font-weight: 700;
}


/* -------------------------------------------------------------
   Liste auf der Creme-Fläche
   ------------------------------------------------------------- */

.wppm-overview .wppm-archive {
    max-width: calc(var(--wppm-overview-width) + 48px);
}

.wppm-overview.has-hero .wppm-archive {
    padding-top: 56px;
    padding-bottom: 88px;
}

.wppm-overview.has-hero .wppm-archive__header {
    max-width: none;
    margin-bottom: 28px;
}

body .wppm-overview.has-hero .wppm-archive__header h2 {
    margin: 0 0 8px;

    font-size: clamp(2rem, 3.5vw, 2.5rem);
    font-weight: 600;
    line-height: 1.15;
}

.wppm-overview.has-hero .wppm-archive__header p {
    color: var(--wppm-color-text);

    font-size: 1.05rem;
}

/* „Zuhause gefunden“: Überschrift links, Name und Jahre rechts */
.wppm-archive__header--bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.wppm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.wppm-archive .wppm-toolbar .wppm-facet {
    padding: 0;

    border: 0;
}

body .wppm-archive .wppm-toolbar input[type="search"] {
    width: 260px;
    min-height: 48px;
    padding: 0 18px;

    border-radius: var(--wppm-radius-pill);
}

.wppm-years {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wppm-results > .wppm-years {
    margin-bottom: 20px;
}

body .wppm-archive a.wppm-year {
    display: inline-flex;
    align-items: center;

    min-height: 44px;
    padding: 0 18px;

    border: 1px solid var(--wppm-color-border-soft);
    border-radius: var(--wppm-radius-pill);

    background: #fff;
    color: var(--wppm-color-heading);

    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
}

body .wppm-archive a.wppm-year:hover {
    border-color: var(--wppm-coral, var(--wppm-color-accent));
}

body .wppm-archive a.wppm-year.is-active {
    border-color: var(--wppm-color-heading);

    background: var(--wppm-color-heading);
    color: #fff;
}

.wppm-overview.has-hero .wppm-sidebar {
    border: 0;

    background: #fff;
    box-shadow: var(--wppm-shadow-soft);
}

.wppm-overview.has-hero .wppm-archive__grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.wppm-overview.has-hero .wppm-archive__grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 22px;
}

/* Überschrift je Transport mit Linie und Zahl der Hunde */
.wppm-archive__group-head {
    display: flex;
    align-items: center;
    gap: 18px;

    margin: 0 0 22px;
}

.wppm-archive__group-head::after {
    content: "";

    flex: 1;
    order: 1;

    height: 1px;

    background: var(--wppm-color-border-soft);
}

.wppm-archive__grid + .wppm-archive__group-head {
    margin-top: 52px;
}

body .wppm-archive .wppm-archive__group-head .wppm-archive__group-title {
    margin: 0;

    white-space: nowrap;
}

body .wppm-overview.has-hero .wppm-archive__group-title {
    font-size: 1.75rem;
    font-weight: 600;
}

.wppm-archive__group-count {
    order: 2;

    color: var(--wppm-coral-dark, var(--wppm-color-accent));

    font-size: .95rem;
    font-weight: 700;
    white-space: nowrap;
}


/* -------------------------------------------------------------
   Karten mit Eckdaten und Knopf
   ------------------------------------------------------------- */

.wppm-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;

    margin: 4px 0 0;
    padding: 0;

    list-style: none;

    color: var(--wppm-color-text-muted);

    font-size: .86rem;
}

.wppm-card__facts li {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin: 0;
}

.wppm-card__facts .wppm-icon {
    color: var(--wppm-coral-dark, var(--wppm-color-accent));
}

.wppm-card__location {
    display: flex;
    align-items: center;
    gap: 6px;

    color: var(--wppm-color-text-muted);

    font-size: .86rem;
}

/* Knopf immer unten, auch wenn die Karten daneben mehr Text haben */
.wppm-card__body > :nth-last-child(2) {
    margin-bottom: 10px;
}

.wppm-card__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 46px;
    margin-top: auto;
    padding: 0 16px;

    border-radius: 6px;

    background: var(--wppm-coral, var(--wppm-color-accent));
    color: #fff;

    font-size: .95rem;
    font-weight: 700;
    text-align: center;

    transition: background var(--wppm-transition);
}

.wppm-card:hover .wppm-card__button {
    background: var(--wppm-coral-hover, var(--wppm-color-accent));
}

body .wppm-overview.has-hero .wppm-card .wppm-card__name {
    font-size: 1.4rem;
    font-weight: 600;
}

/* „Zuhause gefunden“: kleine Fotokarten mit Herz */
.wppm-card.wppm-card--compact .wppm-card__image {
    aspect-ratio: 1 / 1;
}

.wppm-card--compact .wppm-card__body {
    gap: 2px;

    padding: 14px 16px 16px;
}

.wppm-card--compact .wppm-card__body > :nth-last-child(2) {
    margin-bottom: 0;
}

body .wppm-overview.has-hero .wppm-card--compact .wppm-card__name {
    font-size: 1.2rem;
}

.wppm-card__heart {
    position: absolute;
    z-index: 2;

    top: 10px;
    right: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .92);
    color: var(--wppm-coral, var(--wppm-color-accent));
}

/* Ein Jahr je Seite: unten zum Jahr davor bzw. danach */
.wppm-year-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin-top: 56px;
    padding: 18px 22px;

    border-radius: 16px;

    background: #fff;
    box-shadow: var(--wppm-shadow-soft, var(--wppm-shadow-card));
}

.wppm-year-nav__side {
    display: flex;
    flex: 1 1 140px;
}

.wppm-year-nav__side--end {
    justify-content: flex-end;
}

.wppm-year-nav__text {
    flex: 1 1 260px;

    color: var(--wppm-color-text-muted);

    font-size: .95rem;
    text-align: center;
}


/* -------------------------------------------------------------
   Abschnitte unter der Liste
   ------------------------------------------------------------- */

.wppm-section {
    padding: 88px 24px;

    background: #fff;
}

.wppm-section__inner {
    max-width: var(--wppm-overview-width);
    margin: 0 auto;
}

body .wppm-overview .wppm-section__title {
    margin: 0;

    font-size: clamp(2rem, 3.5vw, 2.5rem);
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
}

.wppm-section__lead {
    max-width: 640px;
    margin: 12px auto 0;

    font-size: 1.05rem;
    line-height: 1.6;
    text-align: center;
}

.wppm-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;

    margin: 40px 0 0;
    padding: 0;

    list-style: none;
}

/* Kacheln gleich hoch, Links unten bündig */
.wppm-tile {
    display: flex;
    flex-direction: column;

    margin: 0;
    padding: 26px;

    border-radius: 16px;

    background: var(--wppm-cream);
}

.wppm-tile__icon {
    color: var(--wppm-coral-dark);
}

body .wppm-overview .wppm-tile h3 {
    margin: 14px 0 0;

    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.25;
}

.wppm-tile p {
    margin: 8px 0 18px;

    font-size: .95rem;
    line-height: 1.6;
}

body .wppm-overview a.wppm-tile__link {
    margin-top: auto;

    color: var(--wppm-coral-dark);

    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
}

body .wppm-overview a.wppm-tile__link:hover {
    text-decoration: underline;
}

.wppm-portals {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-top: 56px;
}

.wppm-portals__label {
    margin-right: 6px;

    color: var(--wppm-brown);

    font-weight: 700;
}

body .wppm-overview a.wppm-portals__link {
    display: inline-flex;
    align-items: center;

    min-height: 40px;
    padding: 0 16px;

    border: 1px solid var(--wppm-color-border-soft);
    border-radius: var(--wppm-radius-pill);

    color: var(--wppm-brown);

    font-size: .95rem;
    text-decoration: none;
}

body .wppm-overview a.wppm-portals__link:hover {
    border-color: var(--wppm-coral);
}

.wppm-quote {
    max-width: 1000px;
    margin: 0 auto;
    padding: 56px 48px;

    border-radius: 20px;

    background: linear-gradient(180deg, #fdf0e6 0%, var(--wppm-cream) 100%);

    text-align: center;
}

.wppm-quote__mark {
    color: var(--wppm-coral);
}

body .wppm-overview .wppm-quote blockquote {
    margin: 22px 0 0;
    padding: 0;

    border: 0;

    color: var(--wppm-brown);

    font-family: var(--wppm-font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-style: normal;
    font-weight: 500;
    line-height: 1.35;
}

.wppm-quote figcaption {
    margin-top: 18px;

    color: var(--wppm-color-text-muted);

    font-size: .95rem;
}

/* Braune Abschlussleiste; bei zwei Spalten stehen die Knöpfe auf einer Linie */
.wppm-cta {
    padding: 84px 24px;

    background: var(--wppm-brown-cta);
    color: #fff;
}

.wppm-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 32px;

    max-width: var(--wppm-overview-width);
    margin: 0 auto;
}

.wppm-cta__inner--columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: stretch;
    gap: 48px;
}

.wppm-cta__column {
    display: flex;
    flex: 1 1 520px;
    flex-direction: column;
    align-items: flex-start;
}

body .wppm-overview .wppm-cta h2 {
    margin: 0;

    color: #fff;

    font-size: clamp(2rem, 3.5vw, 2.5rem);
    font-weight: 600;
    line-height: 1.15;
}

body .wppm-overview .wppm-cta .wppm-accent {
    color: var(--wppm-coral-light);
}

.wppm-cta p {
    max-width: 560px;
    margin: 18px 0 28px;

    color: #f6e3da;

    font-size: 1.05rem;
    line-height: 1.65;
}

.wppm-cta__inner:not(.wppm-cta__inner--columns) p {
    margin-bottom: 0;
}

.wppm-cta__column .wppm-button {
    margin-top: auto;
}

.wppm-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}


@media (max-width: 820px) {

    .wppm-hero__inner {
        padding-top: 64px;
    }

    .wppm-hero__text {
        padding-bottom: 24px;
    }

    .wppm-hero__image {
        flex-basis: 100%;
    }

    body .wppm-overview .wppm-hero__image img {
        max-width: 380px;
    }

    .wppm-section,
    .wppm-cta {
        padding: 64px 16px;
    }

    .wppm-quote {
        padding: 40px 24px;
    }
}


@media (max-width: 560px) {

    .wppm-hero__inner {
        padding: 48px 16px 0;
    }

    .wppm-overview__lift,
    .wppm-overview__notes {
        padding: 0 16px;
    }

    .wppm-overview__lift {
        margin-top: -32px;
    }

    .wppm-toolbar,
    .wppm-toolbar__search {
        width: 100%;
    }

    body .wppm-archive .wppm-toolbar input[type="search"] {
        width: 100%;
    }

    .wppm-overview.has-hero .wppm-archive__grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    body .wppm-archive .wppm-archive__group-head .wppm-archive__group-title {
        white-space: normal;
    }

    .wppm-cta__inner--columns {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* =================================================================
   Galerien für die Startseite ([wppm_pet_gallery], shortcodes/gallery.php)
   Quer scrollbare Leiste, --wppm-gallery-visible Karten bzw. Fotos auf
   einmal (auf schmalen Bildschirmen weniger), Pfeile per wppm-pet-gallery.js.
   ================================================================= */

.wppm-gallery {
    /* Eigene Ebene: Elementor legt Verzierungen des Abschnitts (Hintergrund-Formen) sonst über die Galerie */
    position: relative;
    z-index: 1;

    --wppm-gallery-gap: 20px;
    --wppm-gallery-n: var(--wppm-gallery-visible, 4);

    font-family: "Nunito", var(--wppm-font-fallback);
    color: var(--wppm-color-text);
}

.wppm-gallery *,
.wppm-gallery *::before,
.wppm-gallery *::after {
    box-sizing: border-box;
}

.wppm-gallery--photos {
    --wppm-gallery-gap: 14px;
}

.wppm-gallery__head {
    margin: 0 0 24px;

    text-align: center;
}

body .wppm-gallery .wppm-gallery__title {
    margin: 0 0 10px;

    color: var(--wppm-brown);

    font-family: var(--wppm-font-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 600;
    line-height: 1.15;
    text-transform: none;
    letter-spacing: normal;
}

.wppm-gallery__title span {
    color: var(--wppm-coral);
}

.wppm-gallery__text {
    max-width: 640px;
    margin: 0 auto;

    font-size: 1.05rem;
    line-height: 1.6;
}

.wppm-gallery__viewport {
    position: relative;
}

body .wppm-gallery .wppm-gallery__track {
    display: flex;
    gap: var(--wppm-gallery-gap);

    margin: 0;
    padding: 6px 2px 22px;

    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-behavior: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;

    list-style: none;

    cursor: grab;
}

.wppm-gallery__track::-webkit-scrollbar {
    display: none;
}

/* Beim Ziehen mit der Maus (wppm-pet-gallery.js) kein Einrasten und keine Textauswahl */
body .wppm-gallery .wppm-gallery__track.is-dragging {
    scroll-snap-type: none;

    cursor: grabbing;
    user-select: none;
}

.wppm-gallery__track.is-dragging a {
    pointer-events: none;
}

.wppm-gallery__track:focus-visible {
    outline: 2px solid var(--wppm-coral);
    outline-offset: 2px;
}

body .wppm-gallery .wppm-gallery__item {
    flex: 0 0 calc((100% - (var(--wppm-gallery-n) - 1) * var(--wppm-gallery-gap)) / var(--wppm-gallery-n));

    display: flex;

    min-width: 0;
    margin: 0;

    scroll-snap-align: start;
}

.wppm-gallery__item > .wppm-card {
    width: 100%;
}

body .wppm-gallery a.wppm-card,
body .wppm-gallery a.wppm-card:hover,
body .wppm-gallery a.wppm-card:visited {
    color: inherit;
    text-decoration: none;
}

/* Gegen Absatz- und Listenabstände von Theme und Elementor */
body .wppm-gallery .wppm-card__meta {
    margin: 0;
}

body .wppm-gallery .wppm-card__facts {
    margin: 4px 0 10px;
    padding: 0;
}

body .wppm-gallery .wppm-card__facts li {
    margin: 0;
}

/* Ruht die Vermittlung (WppmPetOverview::cardsClickable): Karte ohne Link, Knopf ausgegraut */
.wppm-card.is-paused:hover {
    transform: none;

    border-color: var(--wppm-color-border);

    box-shadow: var(--wppm-shadow-card);
}

.wppm-card.is-paused:hover .wppm-card__image img {
    transform: none;
}

.wppm-card__button.is-disabled,
.wppm-card:hover .wppm-card__button.is-disabled {
    background: #d9d6d2;
    color: #6b6560;

    cursor: default;
}

body .wppm-gallery .wppm-card .wppm-card__name {
    color: var(--wppm-brown);

    font-family: var(--wppm-font-display);
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

/* Nur Fotos: quadratisch, abgerundet, beim Darüberfahren leicht vergrößert */
.wppm-gallery__photo {
    display: block;

    width: 100%;
    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: var(--wppm-radius-lg);

    background: var(--wppm-color-bg-image);
    box-shadow: var(--wppm-shadow-card);
}

body .wppm-gallery .wppm-gallery__photo img {
    display: block;

    width: 100%;
    height: 100% !important;
    max-width: none;

    object-fit: cover;

    transition: transform 500ms cubic-bezier(.2, .7, .2, 1);
}

.wppm-gallery__photo:hover img {
    transform: scale(1.06);
}

/* Pfeile mittig auf den Bildern, außen leicht über den Rand */
body .wppm-gallery .wppm-gallery__nav {
    position: absolute;
    z-index: 3;
    top: calc(50% - 30px);

    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #fff;
    color: var(--wppm-brown);
    box-shadow: var(--wppm-shadow-lift);

    cursor: pointer;
}

body .wppm-gallery .wppm-gallery__nav[hidden] {
    display: none;
}

.wppm-gallery__nav:hover {
    color: var(--wppm-coral-dark);
}

.wppm-gallery__nav--prev {
    left: -14px;
}

.wppm-gallery__nav--prev .wppm-icon {
    transform: rotate(180deg);
}

.wppm-gallery__nav--next {
    right: -14px;
}

.wppm-gallery__nav .wppm-icon {
    width: 20px;
    height: 20px;
}

.wppm-gallery__more {
    margin: 10px 0 0;

    text-align: center;
}

body .wppm-gallery a.wppm-gallery__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 48px;
    padding: 0 26px;

    border-radius: 6px;

    background: var(--wppm-coral);
    color: #fff;

    font-weight: 700;
    text-decoration: none;

    transition: background var(--wppm-transition);
}

body .wppm-gallery a.wppm-gallery__button:hover {
    background: var(--wppm-coral-hover);
    color: #fff;
}

@media (max-width: 1024px) {
    .wppm-gallery--cards {
        --wppm-gallery-n: min(var(--wppm-gallery-visible, 4), 3);
    }

    .wppm-gallery--photos {
        --wppm-gallery-n: min(var(--wppm-gallery-visible, 6), 4);
    }
}

@media (max-width: 768px) {
    .wppm-gallery--cards {
        --wppm-gallery-n: min(var(--wppm-gallery-visible, 4), 2);
    }

    .wppm-gallery--photos {
        --wppm-gallery-n: min(var(--wppm-gallery-visible, 6), 3);
    }

    /* Auf Handy und Tablet wischt man, die Pfeile lägen über den Namen */
    body .wppm-gallery .wppm-gallery__nav {
        display: none;
    }
}

/* Handy: die nächste Karte schaut am Rand hervor, damit man sieht, dass es weitergeht */
@media (max-width: 480px) {
    .wppm-gallery--cards {
        --wppm-gallery-n: 1.15;
        --wppm-gallery-gap: 14px;
    }

    .wppm-gallery--photos {
        --wppm-gallery-n: 2.3;
        --wppm-gallery-gap: 10px;
    }
}