:root { --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)
); --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; --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; --wppm-color-neutral-text: #6b5a54;
--wppm-color-neutral-dot: #c4b3aa; --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;
} .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;
} 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;
} body .wppm-card__image img,
body .wppm-pet__hero img,
body .wppm-pet__thumbs img {
height: 100% !important;
max-width: none;
}  .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; } .wppm-status--status_foster   { --wppm-status-bg: #2b6a6e; --wppm-status-text: #fff; } .wppm-status--status_reserved { --wppm-status-bg: #facc15; --wppm-status-text: #422006; } .wppm-status--status_adopted  { --wppm-status-bg: #15803d; --wppm-status-text: #fff; } .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;
} .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;
} .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);
} .wppm-archive {
width: 100%;
max-width: var(--wppm-width-archive);
margin: 0 auto;
padding: 64px 24px 80px;
} .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;
} .wppm-archive__layout {
display: grid;
grid-template-columns: 270px minmax(0, 1fr);
gap: 36px;
align-items: start;
} .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;
} .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;
} .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;
} 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;
} .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
);
} .wppm-range {
margin-top: 14px;
} .wppm-range__slider {
display: none;
}
.wppm-js .wppm-range__slider {
position: relative;
display: block;
height: 24px;
margin: 0 9px 12px;
} .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);
} 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;
} 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;
} 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);
} .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);
} 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;
} .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;
}
} .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;
} @media (max-width: 900px) {
.wppm-archive__layout {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
} .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;
} .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;
} .wppm-archive__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
} .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);
} .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);
} .wppm-card__image--empty::after {
display: none;
} .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(//hundepfotensaarpfalz.de/wp-content/plugins/hundepfoten-pet-manager/assets/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;
} .wppm-card__body {
display: flex;
flex-direction: column;
flex-grow: 1;
gap: 5px;
padding: 18px 18px 19px;
} .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;
} .wppm-pet {
width: 100%;
max-width: var(--wppm-width-single);
margin: 0 auto;
padding: 36px 16px 64px;
line-height: 1.6;
} .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);
} .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;
}
} .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;
} .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;
} .wppm-pet__hero .wppm-pet__slide-img {
position: relative;
object-fit: contain;
} .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;
} .wppm-pet__slides.is-ready {
cursor: grab;
} .wppm-pet__slides.is-dragging {
scroll-snap-type: none;
cursor: grabbing;
} .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;
} .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;
} .wppm-pet__thumbs {
display: flex;
gap: 9px;
overflow-x: auto;
scrollbar-width: thin; padding: 4px;
margin: -4px;
} .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; 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);
} .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;
} .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);
} .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;
} .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);
} .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);
} 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;
} .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;
} .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;
} .wppm-next-wrap {
margin-top: 36px;
} .wppm-next .wppm-pet__divider {
margin: 10px 0;
}
.wppm-next {
display: grid;
gap: 22px;
} .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);
} .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);
} .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;
} .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;
} .wppm-share [hidden] {
display: none !important;
} .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);
} .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;
} .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;
}
}  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;
} .wppm-help__text.is-placed {
inset: auto;
margin: 0;
}  .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;
} .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; } .wppm-pet__sections .wppm-pet__section--wide {
grid-column: 1 / -1;
} .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);
} .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;
} .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;
} .wppm-rich > :first-child {
margin-top: 0;
}
.wppm-rich > :last-child {
margin-bottom: 0;
}
.wppm-rich p,
.wppm-rich ul,
.wppm-rich ol,
.wppm-rich blockquote {
margin: 0 0 .8em;
}
.wppm-rich ul,
.wppm-rich ol {
padding-left: 1.4em;
}
.wppm-rich li + li {
margin-top: .2em;
}
.wppm-rich h3,
.wppm-rich h4 {
margin: 1.2em 0 .4em;
color: var(--wppm-color-heading);
line-height: 1.3;
}
.wppm-rich h3 {
font-size: 1.15em;
}
.wppm-rich h4 {
font-size: 1em;
}
.wppm-rich blockquote {
padding: .2em 0 .2em 1em;
border-left: 3px solid var(--wppm-color-border);
color: var(--wppm-color-text-muted);
font-style: italic;
}
.wppm-rich hr {
margin: 1.2em 0;
border: 0;
border-top: 1px solid var(--wppm-color-border);
}
.wppm-rich a {
color: var(--wppm-color-accent);
} .wppm-rich__table {
overflow-x: auto;
max-width: 100%;
margin: 0 0 .8em;
}
.wppm-rich table {
margin: 0;
border-collapse: collapse;
font-size: .95em;
}
.wppm-rich th,
.wppm-rich td {
padding: .35em .6em;
border: 1px solid var(--wppm-color-border);
color: var(--wppm-color-text);
text-align: left;
vertical-align: top;
}
.wppm-rich th {
background: var(--wppm-color-bg-muted);
color: var(--wppm-color-heading);
font-weight: 600;
} .wppm-attr-row__value.wppm-rich {
margin-top: .2em;
} .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);
} .wppm-attr-list {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
} .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: "×";
} .wppm-attr-row__text {
display: flex;
flex-wrap: wrap;
align-items: baseline; 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; } .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);
} .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;
} .wppm-pet__info-date {
margin: 0;
color: var(--wppm-color-text-muted);
font-size: .86rem;
} .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;
} .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;
} .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;
} @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;
}
} @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; } .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; -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;
} .wppm-adopt-actions,
.wppm-next-wrap {
display: none !important;
} .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;
} .wppm-pet__top {
display: grid;
grid-template-columns: 78mm minmax(0, 1fr);
align-items: start;
gap: 6mm;
margin-bottom: 4mm;
break-inside: avoid;
} .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;
} 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;
} .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;
} .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,
.wppm-rich ul,
.wppm-rich ol,
.wppm-rich__table {
margin-bottom: 1.6mm;
} .wppm-rich__table {
overflow: visible;
}
.wppm-rich tr {
break-inside: avoid;
} .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;
}
}  .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;
}
} .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; --wppm-actions-top: var(--wp-admin--admin-bar--height, 0px);
} .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);
} .wppm-verwaltung #wppm-newpet {
padding: 0 !important;
} .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;
} .wppm-verwaltung .p-datatable-row-toggle-button {
width: 28px;
height: 28px;
padding: 0;
} @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;
} .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;
}
} .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;
} .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; 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;
}  .wppm-overview,
.wppm-gallery {
width: 100%;
min-width: 0;
--wppm-overview-width: 1200px;
--wppm-coral: #e77e58;
--wppm-coral-hover: #d66c47;
--wppm-coral-dark: #b4532f; --wppm-coral-light: #f2a383; --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);
} .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;
} 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);
} .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(//hundepfotensaarpfalz.de/wp-content/plugins/hundepfoten-pet-manager/assets/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;
} .elementor-widget-image[class*="wppm-hund-"],
.wppm-hero__image {
position: relative;
} .wppm-kopfhund {
position: absolute;
z-index: 5;
right: max(0px, calc(var(--wppm-kh-r, 30px) - 30px));
bottom: 32px;
font-family: var(--wppm-font, "Nunito", sans-serif);
text-align: left;
}
@media (max-width: 1024px) {
.wppm-kopfhund {
right: max(0px, calc(var(--wppm-kh-r-t, var(--wppm-kh-r, 30px)) - 30px));
}
}
@media (max-width: 767px) {
.wppm-kopfhund {
right: max(0px, calc(var(--wppm-kh-r-m, var(--wppm-kh-r-t, var(--wppm-kh-r, 30px))) - 30px));
}
} .wppm-hero__image .wppm-kopfhund {
right: 6%;
bottom: 22px;
}
.wppm-kopfhund__knopf {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: 1.5px solid currentColor;
border-radius: 50%;
color: #fff;
opacity: .45;
cursor: pointer;
list-style: none;
font: italic 700 13px/1 Georgia, "Times New Roman", serif;
transition: opacity .2s;
}
.wppm-kopfhund__knopf::-webkit-details-marker {
display: none;
}
.wppm-kopfhund__knopf:hover,
.wppm-kopfhund__knopf:focus-visible,
.wppm-kopfhund[open] .wppm-kopfhund__knopf {
opacity: 1;
}
.wppm-kopfhund__knopf:focus-visible {
outline: 2px solid var(--wppm-coral, #e77e58);
outline-offset: 2px;
}
.wppm-kopfhund__blase {
position: absolute;
right: 0;
bottom: calc(100% + 8px);
width: max-content;
max-width: min(260px, 80vw);
padding: 10px 14px;
border-radius: 10px;
background: #fff;
box-shadow: 0 6px 22px rgba(20, 10, 8, .35);
color: var(--wppm-brown, #421812);
font-size: .9rem;
line-height: 1.45;
}
body .wppm-kopfhund__blase a {
display: block;
margin-top: 2px;
color: var(--wppm-coral-dark, #b4532f);
font-weight: 700;
text-decoration: underline;
} .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;
} 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;
} .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;
} .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-scroll {
margin-bottom: 20px;
} .wppm-years__more {
display: none;
}
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;
} .wppm-archive__group-head {
display: flex;
align-items: center;
gap: 18px;
margin: 0;
padding: 6px 0;
cursor: pointer;
list-style: none;
}
.wppm-archive__group-head::-webkit-details-marker {
display: none;
}
.wppm-archive__group[open] > .wppm-archive__group-head {
margin-bottom: 16px;
}
.wppm-archive__group + .wppm-archive__group {
margin-top: 18px;
}
.wppm-archive__group[open] + .wppm-archive__group {
margin-top: 44px;
}
.wppm-archive__group-head:hover .wppm-archive__group-title {
color: var(--wppm-coral-dark, var(--wppm-color-accent));
}
.wppm-archive__group-head:focus-visible {
outline: 2px solid var(--wppm-coral, var(--wppm-color-accent));
outline-offset: 4px;
border-radius: 6px;
} .wppm-archive__group-toggle {
position: relative;
flex: none;
order: 3;
width: 36px;
height: 36px;
border: 1px solid var(--wppm-color-border-soft);
border-radius: 50%;
background: #fff;
transition: background var(--wppm-transition), border-color var(--wppm-transition);
}
.wppm-archive__group-toggle::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 9px;
height: 9px;
margin: -7px 0 0 -5px;
border-right: 2px solid var(--wppm-color-heading);
border-bottom: 2px solid var(--wppm-color-heading);
transform: rotate(45deg);
transition: transform var(--wppm-transition), margin var(--wppm-transition);
}
.wppm-archive__group[open] .wppm-archive__group-toggle::before {
margin-top: -3px;
transform: rotate(-135deg);
}
.wppm-archive__group-head:hover .wppm-archive__group-toggle {
border-color: var(--wppm-coral, var(--wppm-color-accent));
}
.wppm-archive__group-head::after {
content: "";
flex: 1;
order: 1;
height: 1px;
background: var(--wppm-color-border-soft);
}
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;
} .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;
} .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;
} .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));
} .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;
} .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;
} .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;
} .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: 40px 16px 0;
}
.wppm-hero__text {
padding-bottom: 56px;
}
.wppm-hero__image {
display: none;
}
.wppm-hero__lead {
margin-top: 16px;
font-size: 1.02rem;
line-height: 1.55;
}
.wppm-hero__actions {
margin-top: 22px;
}
.wppm-overview__lift,
.wppm-overview__notes {
padding: 0 16px;
}
.wppm-overview__lift {
margin-top: -32px;
} .wppm-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
border-radius: 16px;
background: #fff;
box-shadow: var(--wppm-shadow-lift);
}
.wppm-stat {
display: block;
padding: 16px 8px;
border-radius: 0;
background: none;
box-shadow: none;
text-align: center;
}
.wppm-stat + .wppm-stat {
border-left: 1px solid var(--wppm-color-border-soft);
}
.wppm-stat__icon {
width: 36px;
height: 36px;
margin: 0 auto 10px;
}
.wppm-stat__icon svg {
width: 18px;
height: 18px;
}
.wppm-stat__number {
font-size: 1.4rem;
white-space: nowrap;
}
.wppm-stat__text {
font-size: .76rem;
line-height: 1.35;
}
.wppm-overview.has-hero .wppm-archive {
padding-top: 40px;
}
.wppm-toolbar,
.wppm-toolbar__search {
width: 100%;
}
body .wppm-archive .wppm-toolbar input[type="search"] {
width: 100%;
} .wppm-years {
flex-wrap: nowrap;
width: calc(100% + 32px);
margin: 0 -16px;
padding: 2px 16px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.wppm-years::-webkit-scrollbar {
display: none;
} .wppm-years-scroll {
position: relative;
width: 100%;
}
.wppm-years-scroll.has-more .wppm-years {
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 96px), transparent calc(100% - 16px));
mask-image: linear-gradient(90deg, #000 calc(100% - 96px), transparent calc(100% - 16px));
}
.wppm-years-scroll.has-less .wppm-years {
-webkit-mask-image: linear-gradient(90deg, transparent 16px, #000 64px);
mask-image: linear-gradient(90deg, transparent 16px, #000 64px);
}
.wppm-years-scroll.has-more.has-less .wppm-years {
-webkit-mask-image: linear-gradient(90deg, transparent 16px, #000 64px, #000 calc(100% - 96px), transparent calc(100% - 16px));
mask-image: linear-gradient(90deg, transparent 16px, #000 64px, #000 calc(100% - 96px), transparent calc(100% - 16px));
}
body .wppm-archive .wppm-years__more {
position: absolute;
top: 50%;
right: 0;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-top: -20px;
padding: 0;
border: 1px solid var(--wppm-color-border-soft);
border-radius: 50%;
background: #fff;
box-shadow: var(--wppm-shadow-soft, 0 2px 8px rgba(0, 0, 0, .12));
color: var(--wppm-color-heading);
opacity: 0;
pointer-events: none;
transition: opacity var(--wppm-transition);
}
.wppm-years__more::before {
content: "";
width: 9px;
height: 9px;
margin-left: -4px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
}
body .wppm-archive .wppm-years-scroll.has-more .wppm-years__more {
opacity: 1;
pointer-events: auto;
} .wppm-year-nav {
flex-direction: column;
gap: 12px;
padding: 20px 16px;
}
.wppm-year-nav__text {
flex: none;
order: -1;
}
.wppm-year-nav__side,
.wppm-year-nav__side--end {
flex: none;
order: 1;
justify-content: center;
}
.wppm-year-nav__side--end {
order: 0;
}
.wppm-year-nav__side:not(:has(a)) {
display: none;
}
body .wppm-archive a.wppm-year {
flex: none;
min-height: 40px;
padding: 0 16px;
}
.wppm-overview.has-hero .wppm-archive__grid--compact {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.wppm-archive__group-head {
gap: 12px;
}
body .wppm-overview.has-hero .wppm-archive__group-title {
font-size: 1.35rem;
}
.wppm-archive__group[open] + .wppm-archive__group {
margin-top: 32px;
}
.wppm-cta__inner--columns {
grid-template-columns: minmax(0, 1fr);
}
} .wppm-gallery { 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;
} 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;
} 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;
} .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;
} .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);
} 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);
} body .wppm-gallery .wppm-gallery__nav {
display: none;
}
} @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;
}
}