/* =========================================================
   Hundepension.LA – Site Kit
   Version 0.1.4
   ========================================================= */

:root {
    --hp-font-kicker: 0.82rem;
    --hp-font-title-main: clamp(2.5rem, 5vw, 4.2rem);
    --hp-font-title-section: clamp(2rem, 3.8vw, 3.2rem);
    --hp-font-card-title: 1.55rem;
    --hp-font-lead: 1.2rem;
    --hp-font-text: 1.05rem;
    --hp-font-card-text: 1rem;
    --hp-font-link: 0.95rem;
    --hp-color-text: #242424;
    --hp-color-muted: #575757;
    --hp-color-accent: #555048;
    --hp-color-light: #f3f1ec;
    --hp-color-dark: #202820;
    --hp-hero-progress: 0;
}

/* HEADER */
.hp-home-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 18px 40px;
    background: transparent;
    transition: background-color 0.5s ease, box-shadow 0.5s ease;
}
.hp-home-header > * { width: 100%; max-width: none !important; }
.hp-home-header .wp-block-group.is-layout-flex,
.hp-home-header .wp-block-group-is-layout-flex { width: 100%; justify-content: space-between; }
.hp-home-header .wp-block-navigation { width: auto; margin-left: auto; justify-content: flex-end; }
.hp-home-header .wp-block-navigation a { color: #111; text-decoration: none; transition: color .35s ease, opacity .20s ease; }
.hp-home-header .wp-block-navigation a:hover { opacity: .65; }
.hp-home-header.is-scrolled { background: rgba(255,255,255,.97); box-shadow: 0 2px 14px rgba(0,0,0,.10); }
.hp-home-header.is-scrolled .wp-block-navigation a { color: #111; }
.hp-home-header + .wp-block-post-content { margin-block-start: 0 !important; padding-block-start: 0 !important; }
.hp-home-header + .wp-block-post-content > .wp-block-cover:first-child { margin-block-start: 0 !important; }
body:has(.hp-home-header) .wp-site-blocks { padding-top: 0 !important; }
body.admin-bar .hp-home-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .hp-home-header { top: 46px; } }

/* HERO / LOGOS */
.hp-hero-logo {
    opacity: calc(1 - var(--hp-hero-progress));
    transform: scale(calc(1 - (var(--hp-hero-progress) * .20)));
    transform-origin: center center;
    will-change: opacity, transform;
}
.hp-header-logo {
    opacity: var(--hp-hero-progress);
    transform: translateY(calc((1 - var(--hp-hero-progress)) * -8px)) scale(calc(.90 + (var(--hp-hero-progress) * .10)));
    pointer-events: none;
    will-change: opacity, transform;
}
.hp-home-header.is-scrolled .hp-header-logo { pointer-events: auto; }
.hp-header-logo img { display: block; width: 150px; height: auto; }

/* TYPOGRAFIE – unterstützt Alt-Klassen + Gutenberg-Stile */
.hp-kicker, .is-style-hp-kicker {
    margin-top: 0; margin-bottom: 18px; color: var(--hp-color-accent);
    font-size: var(--hp-font-kicker) !important; font-weight: 600 !important; line-height: 1.3 !important;
    letter-spacing: .12em !important; text-transform: uppercase; text-align: center;
}
.hp-title-main, .is-style-hp-title-main {
    margin-top: 0; margin-bottom: 30px; color: var(--hp-color-text);
    font-size: var(--hp-font-title-main) !important; font-weight: 400 !important; line-height: 1.08 !important;
    letter-spacing: -.025em; text-align: center;
}
.hp-title-section, .is-style-hp-title-section {
    margin-top: 0; margin-bottom: 55px; color: var(--hp-color-text);
    font-size: var(--hp-font-title-section) !important; font-weight: 400 !important; line-height: 1.12 !important;
    letter-spacing: -.02em; text-align: center;
}
.hp-card-title, .is-style-hp-card-title {
    margin-top: 24px; margin-bottom: 14px; color: var(--hp-color-text);
    font-size: var(--hp-font-card-title) !important; font-weight: 500 !important; line-height: 1.2 !important; text-align: left;
}
.hp-text-lead, .is-style-hp-lead {
    margin-top: 0; margin-bottom: 22px; color: var(--hp-color-text);
    font-size: var(--hp-font-lead) !important; font-weight: 400 !important; line-height: 1.65 !important; text-align: center;
}
.hp-text, .is-style-hp-text {
    margin-top: 0; margin-bottom: 20px; color: var(--hp-color-text);
    font-size: var(--hp-font-text) !important; font-weight: 400 !important; line-height: 1.65 !important;
}
.hp-card-text, .is-style-hp-card-text {
    margin-top: 0; margin-bottom: 20px; color: var(--hp-color-muted);
    font-size: var(--hp-font-card-text) !important; font-weight: 400 !important; line-height: 1.6 !important; text-align: left;
}
.hp-text-link, .is-style-hp-text-link {
    margin-top: 10px; margin-bottom: 0; font-size: var(--hp-font-link) !important;
    font-weight: 600 !important; line-height: 1.4 !important; text-align: left;
}
.hp-text-link a, .is-style-hp-text-link a {
    color: var(--hp-color-text); text-decoration: none; border-bottom: 1px solid currentColor;
    transition: opacity .2s ease, padding-left .2s ease;
}
.hp-text-link a:hover, .is-style-hp-text-link a:hover { opacity: .65; padding-left: 4px; }

/* EINLEITUNG */
.hp-home-content { box-sizing: border-box; width: 100%; padding: 110px 30px; background: #fff; }
.hp-home-content > .wp-block-group { max-width: 850px; margin-left: auto !important; margin-right: auto !important; }

/* HIGHLIGHTS */
.hp-highlights { box-sizing: border-box; width: 100%; padding: 100px 30px 110px; background: var(--hp-color-light); }
.hp-highlight-grid {
    display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px;
    width: 100%; max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important;
}
.hp-highlight-grid > .wp-block-column {
    display: grid; grid-template-columns: 180px minmax(0,1fr); grid-template-rows: auto auto 1fr;
    column-gap: 28px; row-gap: 0; align-items: start; min-width: 0; margin: 0 !important; padding: 24px;
    background: rgba(255,255,255,.65); box-sizing: border-box;
}
.hp-highlight-grid .wp-block-image { grid-column: 1; grid-row: 1 / span 4; width: 180px; height: 180px; margin: 0; overflow: hidden; }
.hp-highlight-grid .wp-block-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.hp-highlight-grid > .wp-block-column:hover .wp-block-image img { transform: scale(1.04); }
.hp-highlight-grid .hp-card-title, .hp-highlight-grid .is-style-hp-card-title,
.hp-highlight-grid .hp-card-text, .hp-highlight-grid .is-style-hp-card-text,
.hp-highlight-grid .hp-text-link, .hp-highlight-grid .is-style-hp-text-link { grid-column: 2; }
.hp-highlight-grid .hp-card-title, .hp-highlight-grid .is-style-hp-card-title { margin-top: 2px; margin-bottom: 12px; }
.hp-highlight-grid .hp-card-text, .hp-highlight-grid .is-style-hp-card-text { margin-bottom: 16px; }
.hp-highlight-grid .hp-text-link, .hp-highlight-grid .is-style-hp-text-link { margin-top: 0; }

/* GALERIE */
.hp-gallery-section {
    box-sizing: border-box; width: 100vw !important; max-width: none !important;
    margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
    padding: 100px 40px 110px; background: #fff; overflow: hidden;
}
.hp-auto-gallery {
    --hp-gallery-gap: 24px; display: block !important; width: min(1320px,calc(100vw - 80px)) !important;
    max-width: none !important; margin-left: auto !important; margin-right: auto !important; overflow: hidden; position: relative;
}
.hp-gallery-track {
    display: flex; width: max-content; transform: translate3d(0,0,0); will-change: transform;
    animation-name: hp-gallery-marquee; animation-duration: var(--hp-gallery-duration,60s);
    animation-timing-function: linear; animation-iteration-count: infinite;
}
.hp-gallery-set { display: flex; flex: none; gap: var(--hp-gallery-gap); padding-right: var(--hp-gallery-gap); box-sizing: border-box; }
.hp-gallery-set > .wp-block-image {
    flex: 0 0 var(--hp-gallery-item-width,400px) !important; width: var(--hp-gallery-item-width,400px) !important;
    max-width: none !important; margin: 0 !important; aspect-ratio: 4 / 3; overflow: hidden;
}
.hp-gallery-set > .wp-block-image img {
    display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; transition: transform .5s ease;
}
.hp-gallery-trigger {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}
.hp-gallery-set > .wp-block-image:hover img,
.hp-gallery-trigger:focus-visible img { transform: scale(1.025); }
.hp-gallery-trigger:focus-visible { outline: 3px solid var(--hp-color-dark); outline-offset: -3px; }
.hp-gallery-lightbox-open { overflow: hidden; }
.hp-gallery-lightbox {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 28px 72px;
    background: rgba(0, 0, 0, 0.88);
}
.hp-gallery-lightbox img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 56px);
    max-height: calc(100dvh - 56px);
    object-fit: contain;
}
.hp-gallery-lightbox-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}
.hp-gallery-lightbox-close:hover,
.hp-gallery-lightbox-close:focus-visible { background: rgba(255, 255, 255, 0.28); }
@keyframes hp-gallery-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(var(--hp-gallery-shift,-1000px),0,0); } }
.hp-auto-gallery:hover .hp-gallery-track, .hp-auto-gallery:focus-within .hp-gallery-track { animation-play-state: paused; }
.hp-gallery-lightbox-open .hp-gallery-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hp-gallery-track { animation-play-state: paused !important; } }
@media (prefers-reduced-motion: reduce) { .hp-price-notice { transition: none; transform: none; } }
@media screen and (max-width: 650px) {
    .hp-gallery-lightbox { padding: 22px; }
    .hp-gallery-lightbox img { max-height: calc(100vh - 44px); max-height: calc(100dvh - 44px); }
}

/* ÖFFNUNGSZEITEN */
.hp-hours-section {
    box-sizing: border-box; width: 100vw !important; max-width: none !important;
    margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
    padding: 95px 40px 105px; background: var(--hp-color-dark); color: #fff;
}
.hp-hours-section .hp-kicker, .hp-hours-section .is-style-hp-kicker { color: rgba(255,255,255,.60) !important; text-align: center; }
.hp-hours-section .hp-title-section, .hp-hours-section .is-style-hp-title-section { color: #fff !important; text-align: center; margin-bottom: 65px; }
.hp-hours-cards { width: 100%; max-width: 1250px !important; margin-left: auto !important; margin-right: auto !important; gap: 0 !important; align-items: stretch !important; }
.hp-hours-cards > .wp-block-column { box-sizing: border-box; padding: 10px 45px 15px; min-width: 0; }
.hp-hours-cards > .wp-block-column + .wp-block-column { border-left: 1px solid rgba(255,255,255,.18); }
.hp-hours-days { margin: 0 0 22px; color: rgba(255,255,255,.58); font-size: .82rem !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: .11em !important; text-transform: uppercase; }
.hp-hours-time { margin: 0; color: #fff; font-size: clamp(1.65rem,2.2vw,2.25rem) !important; font-weight: 300 !important; line-height: 1.65 !important; letter-spacing: -.015em; }
.hp-hours-info-title { margin: 0 0 18px; color: #fff; font-size: clamp(1.5rem,2vw,2rem) !important; font-weight: 400 !important; line-height: 1.25 !important; }
.hp-hours-info-text { margin: 0; max-width: 320px; color: rgba(255,255,255,.70); font-size: 1rem !important; font-weight: 400 !important; line-height: 1.65 !important; }

/* PREISE */
.hp-prices-section {
    box-sizing: border-box; width: 100vw !important; max-width: none !important;
    margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
    padding: 105px 40px 120px; background: var(--hp-color-light); color: var(--hp-color-text);
}
.hp-price-subtitle { margin: 0 0 30px; color: var(--hp-color-text); font-size: clamp(1.55rem,2.4vw,2.1rem) !important; font-weight: 400 !important; line-height: 1.2 !important; text-align: center; }
.hp-price-intro { margin: -14px auto 38px; color: var(--hp-color-muted); font-size: .95rem !important; line-height: 1.6 !important; text-align: center; }
.hp-price-footnote { margin: 25px 0 0; color: var(--hp-color-muted); font-size: .9rem !important; line-height: 1.5 !important; text-align: center; }
.hp-price-notice {
    box-sizing: border-box;
    width: min(100%, 760px);
    margin: -15px auto 65px;
    padding: 18px 24px;
    border: 1px solid rgba(32, 40, 32, 0.20);
    border-left: 4px solid var(--hp-color-dark);
    background: rgba(255, 255, 255, 0.72);
    color: var(--hp-color-text);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.hp-price-notice.is-visible { opacity: 1; transform: translateY(0); }
.hp-price-notice p { margin: 0 !important; font-size: 1rem !important; line-height: 1.55 !important; text-align: center; }
.hp-price-notice a { color: var(--hp-color-text); font-weight: 600; text-underline-offset: 3px; }
.hp-price-included {
    width: 100%;
    max-width: 1520px;
    margin: 0 auto 100px;
}
.hp-price-included-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 22px 18px;
    width: 100%;
}
.hp-price-included-item {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
    min-width: 0;
    margin: 0 !important;
    padding-left: 0;
    color: var(--hp-color-text);
    font-size: 1rem !important;
    line-height: 1.5 !important;
}
.hp-price-included-item::before {
    content: "✓";
    position: static;
    display: block;
    font-weight: 600;
    line-height: 1.5;
}
.hp-price-included-note-inline { color: var(--hp-color-muted); font-size: .82rem; }
.hp-price-overnight { width: 100%; max-width: 1200px; margin: 0 auto 105px; }
.hp-pricing-cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 24px;
    width: 100%;
    align-items: stretch;
}
.hp-price-card {
    box-sizing: border-box;
    min-height: 355px;
    height: 100%;
    padding: 38px 40px 35px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-self: stretch;
}
.hp-price-card-title { margin: 0 0 30px; color: var(--hp-color-text); font-size: 1.45rem !important; font-weight: 500 !important; line-height: 1.25 !important; }

.hp-pricing-cards > .wp-block-group,
.hp-pricing-cards > .hp-price-card {
    height: 100% !important;
}

.hp-price-card > .wp-block-group,
.hp-price-card > .wp-block-heading,
.hp-price-card > p {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

.hp-price-card-title {
    min-height: 2.6em;
}

.hp-price-row { display: flex !important; width: 100%; justify-content: space-between !important; align-items: baseline !important; gap: 25px; margin: 0 !important; padding: 11px 0; }
.hp-price-label {
    margin: 0 !important;
    color: var(--hp-color-muted);
    font-size: 1rem !important;
    line-height: 1.5 !important;
    flex: 1 1 auto;
    min-width: 0;
}
.hp-price-value {
    flex: 0 0 100px;
    width: 100px;
    margin: 0 !important;
    color: var(--hp-color-text);
    font-size: 1.35rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    text-align: right;
}
.hp-price-extension {
    margin-top: auto !important;
    padding-top: 22px;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
}
.hp-daycare-section { width: 100%; max-width: 1200px; margin: 0 auto 105px; }
.hp-daycare-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    align-items: stretch;
}
.hp-daycare-item {
    box-sizing: border-box;
    min-height: 150px;
    padding: 26px 22px;
    text-align: center;
    display: grid;
    grid-template-rows: minmax(3.2em, auto) auto;
    align-content: center;
    justify-items: center;
}
.hp-daycare-item + .hp-daycare-item { border-left: 1px solid rgba(0,0,0,.08); }
.hp-daycare-label {
    width: 100%;
    margin: 0 0 14px;
    color: var(--hp-color-muted);
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.hp-daycare-price {
    margin: 0;
    color: var(--hp-color-text);
    font-size: 1.65rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    align-self: start;
}
.hp-addons-section { width: 100%; max-width: 900px; margin: 0 auto 100px; }
.hp-addon-list { width: 100%; border-top: 1px solid rgba(0,0,0,.12); }
.hp-addon-row { display: flex !important; width: 100%; justify-content: space-between !important; align-items: center !important; gap: 30px; padding: 22px 5px; border-bottom: 1px solid rgba(0,0,0,.12); }
.hp-addon-label { margin: 0; color: var(--hp-color-text); font-size: 1rem !important; line-height: 1.55 !important; }
.hp-addon-price { flex: none; margin: 0; color: var(--hp-color-text); font-size: 1.25rem !important; font-weight: 500 !important; white-space: nowrap; }
.hp-price-notes { box-sizing: border-box; width: 100%; max-width: 1050px; margin-left: auto !important; margin-right: auto !important; padding: 40px 45px; background: rgba(255,255,255,.55); border-left: 3px solid var(--hp-color-text); }
.hp-price-notes-title { margin: 0 0 25px; color: var(--hp-color-text); font-size: 1.3rem !important; font-weight: 500 !important; line-height: 1.3 !important; }
.hp-price-note { margin: 0 0 15px; color: var(--hp-color-muted); font-size: .95rem !important; line-height: 1.65 !important; }
.hp-price-note:last-child { margin-bottom: 0; }

/* RESPONSIVE */
@media screen and (max-width: 900px) {
    .hp-highlight-grid { grid-template-columns: 1fr; gap: 24px; }
    .hp-gallery-section { padding-left: 25px; padding-right: 25px; }
    .hp-auto-gallery { --hp-gallery-gap: 20px; width: calc(100vw - 50px) !important; }
    .hp-hours-section { padding: 80px 30px 90px; }
    .hp-hours-cards > .wp-block-column { padding: 10px 25px 15px; }
    .hp-prices-section { padding: 85px 30px 95px; }
    .hp-price-included-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .hp-daycare-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .hp-daycare-item:nth-child(3) { border-left: none; border-top: 1px solid rgba(0,0,0,.08); }
    .hp-daycare-item:nth-child(4) { border-top: 1px solid rgba(0,0,0,.08); }
}
@media screen and (max-width: 650px) {
    .hp-home-header { padding: 14px 20px; }
    .hp-header-logo img { width: 110px; }
    .hp-home-content { padding: 75px 20px 85px; }
    .hp-highlights { padding: 75px 20px 85px; }
    .hp-highlight-grid { grid-template-columns: 1fr; gap: 28px; }
    .hp-highlight-grid > .wp-block-column { grid-template-columns: 110px minmax(0,1fr); column-gap: 18px; padding: 18px; }
    .hp-highlight-grid .wp-block-image { width: 110px; height: 110px; }
    .hp-gallery-section { padding: 75px 20px 85px; }
    .hp-auto-gallery { --hp-gallery-gap: 16px; width: calc(100vw - 40px) !important; }
    .hp-hours-section { padding: 70px 22px 75px; }
    .hp-hours-section .hp-title-section, .hp-hours-section .is-style-hp-title-section { margin-bottom: 45px; }
    .hp-hours-cards { display: block !important; }
    .hp-hours-cards > .wp-block-column { padding: 0 0 35px; margin: 0 0 35px; border-left: none !important; border-bottom: 1px solid rgba(255,255,255,.18); }
    .hp-hours-cards > .wp-block-column:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .hp-hours-time { font-size: 1.7rem !important; }
    .hp-prices-section { padding: 70px 20px 80px; }
    .hp-price-included { margin-bottom: 75px; }
    .hp-price-notice { margin-bottom: 52px; padding: 16px 18px; }
    .hp-price-included-grid { grid-template-columns: 1fr; gap: 15px; }
    .hp-pricing-cards { grid-template-columns: 1fr; }
    .hp-price-card { padding: 30px 25px; }
    .hp-price-row { gap: 15px; }
    .hp-price-label { font-size: .93rem !important; }
    .hp-price-value { font-size: 1.2rem !important; }
    .hp-daycare-grid { grid-template-columns: 1fr; }
    .hp-daycare-item, .hp-daycare-item:nth-child(3), .hp-daycare-item:nth-child(4) { border-left: none !important; border-top: 1px solid rgba(0,0,0,.08); }
    .hp-daycare-item:first-child { border-top: none; }
    .hp-addon-row { align-items: flex-start !important; gap: 15px; }
    .hp-price-notes { padding: 30px 25px; }
}


/* =========================================================
   0.1.4 – PREISBEREICH: ROBUSTE FINAL-OVERRIDES
   Diese Regeln stehen absichtlich am Dateiende.
   ========================================================= */


/* ---------------------------------------------------------
   IM PREIS BEREITS ENTHALTEN
   Einfache vertikale Liste statt 4-spaltigem Raster.
   --------------------------------------------------------- */

.hp-price-included {
    max-width: 900px !important;
}

.hp-price-included-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.hp-price-included-item {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    align-items: start !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

.hp-price-included-item::before {
    content: "✓" !important;

    position: static !important;

    display: block !important;

    width: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    font-weight: 600 !important;
    line-height: 1.5 !important;

    transform: none !important;
}

.hp-price-included-note-inline {
    display: inline !important;
    white-space: nowrap !important;
}


/* ---------------------------------------------------------
   ÜBERNACHTUNG
   Alle vier Karten exakt gleich groß.
   --------------------------------------------------------- */

.hp-pricing-cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 350px !important;
    align-items: stretch !important;
}

.hp-pricing-cards > .hp-price-card,
.hp-pricing-cards > .wp-block-group.hp-price-card {
    box-sizing: border-box !important;

    height: 350px !important;
    min-height: 350px !important;
    max-height: 350px !important;

    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;

    gap: 0 !important;
}

.hp-price-card > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

.hp-price-card-title {
    min-height: 3.1em !important;
    margin: 0 0 24px 0 !important;
}

.hp-price-row,
.hp-price-card .hp-price-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 105px !important;
    align-items: baseline !important;

    width: 100% !important;

    gap: 20px !important;

    margin: 0 !important;
    padding: 11px 0 !important;
}

.hp-price-label {
    min-width: 0 !important;
    margin: 0 !important;
}

.hp-price-value {
    width: 105px !important;
    min-width: 105px !important;

    margin: 0 !important;

    justify-self: end !important;
    text-align: right !important;
}

.hp-price-extension {
    margin-top: auto !important;
    padding-top: 22px !important;
}


/* ---------------------------------------------------------
   TAGESBETREUUNG
   Alle Labels und Preise exakt gleich ausrichten.
   --------------------------------------------------------- */

.hp-daycare-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
}

.hp-daycare-item,
.hp-daycare-grid > .wp-block-group.hp-daycare-item {
    box-sizing: border-box !important;

    min-height: 155px !important;

    padding: 24px 18px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 12px !important;

    text-align: center !important;
}

.hp-daycare-item > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

.hp-daycare-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 46px !important;

    margin: 0 !important;

    text-align: center !important;
}

.hp-daycare-price {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    align-self: auto !important;

    text-align: center !important;
}


/* ---------------------------------------------------------
   Tablet / Smartphone
   --------------------------------------------------------- */

@media screen and (max-width: 900px) {

    .hp-pricing-cards {
        grid-auto-rows: auto !important;
    }

    .hp-pricing-cards > .hp-price-card,
    .hp-pricing-cards > .wp-block-group.hp-price-card {
        height: auto !important;
        min-height: 320px !important;
        max-height: none !important;
    }
}

@media screen and (max-width: 650px) {

    .hp-pricing-cards {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
    }

    .hp-pricing-cards > .hp-price-card,
    .hp-pricing-cards > .wp-block-group.hp-price-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .hp-daycare-grid {
        grid-template-columns: 1fr !important;
    }

    .hp-daycare-item,
    .hp-daycare-grid > .wp-block-group.hp-daycare-item {
        min-height: 130px !important;
    }
}


/* =========================================================
   0.1.5 – FINALER PREIS-HOTFIX
   ========================================================= */

/* Liste optisch unter der Überschrift ausrichten */
.hp-price-included-grid {
    width: min(100%, 720px) !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.hp-price-included-item {
    grid-template-columns: 18px minmax(0, 1fr) !important;
    column-gap: 12px !important;
}

/* JS setzt die effektive Kartenhöhe */
.hp-pricing-cards {
    grid-auto-rows: auto !important;
}

.hp-pricing-cards > .hp-price-card,
.hp-pricing-cards > .wp-block-group.hp-price-card {
    min-height: 0 !important;
    max-height: none !important;
    height: auto;
}

.hp-price-card .hp-price-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 105px !important;
    width: 100% !important;
    align-items: baseline !important;
    gap: 20px !important;
}

.hp-price-card .hp-price-value {
    width: 105px !important;
    min-width: 105px !important;
    justify-self: end !important;
    text-align: right !important;
}

/* Tagesbetreuung – JS gleicht Labelhöhen aus */
.hp-daycare-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.hp-daycare-label {
    width: 100% !important;
    margin: 0 0 14px 0 !important;
    text-align: center !important;
}

.hp-daycare-price {
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
}


/* =========================================================
   0.1.6 – KORREKTUR RESPONSIVE-KONFLIKTE
   Muss am Dateiende stehen.
   ========================================================= */

/* ---------------------------------------------------------
   IM PREIS ENTHALTEN:
   Unter dem linken Beginn der Überschrift ausrichten.
   --------------------------------------------------------- */

@media screen and (min-width: 651px) {
    .hp-price-included-grid {
        width: calc(100% - 180px) !important;
        max-width: none !important;
        margin-left: 180px !important;
        margin-right: 0 !important;
    }
}

@media screen and (max-width: 650px) {
    .hp-price-included-grid {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* ---------------------------------------------------------
   ÜBERNACHTUNG:
   Keine nachträgliche Tablet-Regel darf die JS-Höhe
   wieder auf auto setzen.
   --------------------------------------------------------- */

@media screen and (min-width: 651px) {
    .hp-prices-section .hp-pricing-cards > .hp-price-card,
    .hp-prices-section .hp-pricing-cards > .wp-block-group.hp-price-card {
        align-self: stretch !important;
        max-height: none !important;
    }
}


/* ---------------------------------------------------------
   TAGESBETREUUNG:
   Gleiche Innenstruktur in allen vier Feldern.
   --------------------------------------------------------- */

.hp-prices-section .hp-daycare-grid > .hp-daycare-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 12px !important;

    padding: 24px 18px !important;

    text-align: center !important;
}

.hp-prices-section .hp-daycare-grid > .hp-daycare-item > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

.hp-prices-section .hp-daycare-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    margin: 0 !important;

    text-align: center !important;
}

.hp-prices-section .hp-daycare-price {
    width: 100% !important;

    margin: 0 !important;

    text-align: center !important;
}


/* =========================================================
   0.1.7 – WORDPRESS FLOW-MARGIN FIX
   ========================================================= */

/*
 * WordPress versieht die Eltern mit "is-layout-flow".
 * Dadurch erhalten normalerweise alle Kinder außer dem
 * ersten einen margin-block-start von 1.2rem.
 *
 * In unseren CSS-Grids darf dieser Flow-Margin nicht gelten.
 */


/* ---------------------------------------------------------
   ÜBERNACHTUNG
   Alle vier Karten exakt an derselben Oberkante.
   --------------------------------------------------------- */

.hp-prices-section .hp-pricing-cards > .hp-price-card,
.hp-prices-section .hp-pricing-cards > .wp-block-group.hp-price-card {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ---------------------------------------------------------
   TAGESBETREUUNG
   Alle vier Felder exakt an derselben Oberkante.
   --------------------------------------------------------- */

.hp-prices-section .hp-daycare-grid > .hp-daycare-item,
.hp-prices-section .hp-daycare-grid > .wp-block-group.hp-daycare-item {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ---------------------------------------------------------
   IM PREIS BEREITS ENTHALTEN
   Noch etwas weiter nach rechts.
   --------------------------------------------------------- */

@media screen and (min-width: 651px) {

    .hp-price-included-grid {
        width: calc(100% - 220px) !important;
        max-width: none !important;

        margin-left: 220px !important;
        margin-right: 0 !important;
    }

}


/* =========================================================
   0.2.0 – VORLAGEN / KONTAKT
   ========================================================= */

.hp-home-hero .wp-block-cover__image-background {
    object-position: 55% 37%;
}

.hp-contact-section {
    box-sizing: border-box;
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 105px 40px 32px;
    background: #202820;
    color: #fff;
}

.hp-contact-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    gap: 90px;
    width: 100%;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: start;
}

.hp-contact-copy .hp-kicker { text-align: left; }

.hp-contact-title {
    margin: 0 0 28px;
    color: #fff;
    font-size: clamp(2.2rem, 4vw, 3.6rem) !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
}

.hp-contact-text {
    max-width: 680px;
    margin: 0 0 34px;
    color: rgba(255,255,255,.76);
    font-size: 1.08rem !important;
    line-height: 1.65 !important;
}

.hp-contact-buttons { gap: 14px !important; }
.hp-contact-buttons .wp-block-button__link {
    border: 1px solid #fff;
    background: #fff;
    color: #202820;
}
.hp-contact-buttons .is-style-outline .wp-block-button__link {
    background: transparent;
    color: #fff;
}

.hp-contact-details {
    box-sizing: border-box;
    padding: 30px 34px;
    border-left: 1px solid rgba(255,255,255,.25);
    color: rgba(255,255,255,.82);
}
.hp-contact-details-title {
    margin: 0 0 22px;
    color: #fff;
    font-size: 1.45rem !important;
}
.hp-contact-details p { line-height: 1.75 !important; }
.hp-contact-details a { color: #fff; text-decoration: none; }

.hp-contact-legal {
    width: 100%;
    max-width: 1200px !important;
    margin: 80px auto 0 !important;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.55);
    font-size: .86rem !important;
}
.hp-contact-legal p { margin: 0 !important; }
.hp-contact-legal .wp-block-navigation { color: rgba(255,255,255,.72); font-size: .86rem !important; }

/* Patterns use WordPress flow containers; remove automatic child top margins in our custom grids. */
.hp-highlight-grid > *,
.hp-hours-cards > *,
.hp-pricing-cards > *,
.hp-daycare-grid > * {
    margin-block-start: 0 !important;
}

@media screen and (max-width: 782px) {
    .hp-contact-section { padding: 80px 24px 28px; }
    .hp-contact-grid { grid-template-columns: 1fr; gap: 52px; }
    .hp-contact-details { border-left: 0; border-top: 1px solid rgba(255,255,255,.25); padding: 30px 0 0; }
    .hp-contact-legal { margin-top: 60px !important; gap: 18px !important; }
}


/* =========================================================
   0.3.0 – NAVIGATION / TEAM / FOOTER
   ========================================================= */

/* Sprunglinks: Ziel nicht unter dem fixierten Header verstecken. */
#galerie,
#oeffnungszeiten,
#preise,
#team {
    scroll-margin-top: 90px;
}

@media (prefers-reduced-motion: no-preference) {
    html:has(.hp-home-header) {
        scroll-behavior: smooth;
    }
}

/* ---------------------------------------------------------
   TEAM
   --------------------------------------------------------- */

.hp-team-section {
    box-sizing: border-box;

    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding: 105px 40px 115px;

    background: #ffffff;
    color: var(--hp-color-text);
}

.hp-team-intro {
    max-width: 760px !important;

    margin: -22px auto 60px !important;

    color: var(--hp-color-muted);

    font-size: 1.05rem !important;
    line-height: 1.65 !important;

    text-align: center;
}

.hp-team-grid {
    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 55px 30px;

    width: 100%;
    max-width: 1180px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

.hp-team-grid > .hp-team-member {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

.hp-team-grid > .hp-team-group-photo {
    grid-column: 1 / -1;
    margin: 0 !important;
}

.hp-team-group-photo {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: hidden;
    background: #ece9e2;
}

.hp-team-group-photo img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    /* Preserve the ratio from HTML width/height for lazy images using sizes="auto". */
    object-fit: contain;
}

.hp-team-member {
    min-width: 0;
    text-align: center;
}

.hp-team-photo {
    width: 100% !important;

    margin: 0 !important;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #ece9e2;
}

.hp-team-photo img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover;

    transition: transform 0.55s ease;
}

.hp-team-member:hover .hp-team-photo img {
    transform: scale(1.025);
}

.hp-team-name {
    margin: 20px 0 0 !important;

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

    font-size: 1.28rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;

    text-align: center;
}

/* ---------------------------------------------------------
   KONTAKT
   --------------------------------------------------------- */

/* Die Legal-Leiste ist jetzt ein eigener Footer. */
.hp-contact-section {
    padding-bottom: 105px;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.hp-site-footer {
    box-sizing: border-box;

    width: 100vw !important;
    max-width: none !important;

    margin: 0 calc(50% - 50vw) !important;

    padding: 30px 40px;

    background: #ffffff;

    border-top: 1px solid rgba(0, 0, 0, 0.09);

    color: var(--hp-color-text);
}

.hp-site-footer-inner {
    width: 100%;
    max-width: 1250px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    align-items: center !important;
}

.hp-footer-logo {
    margin: 0 !important;
}

.hp-footer-logo img {
    display: block;

    width: 175px !important;
    height: auto !important;
}

.hp-footer-nav {
    margin-left: auto !important;

    font-size: 0.95rem !important;
}

.hp-footer-nav a {
    color: var(--hp-color-text);
    text-decoration: none;
}

.hp-footer-nav a:hover {
    opacity: 0.62;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media screen and (max-width: 900px) {

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

@media screen and (max-width: 650px) {

    #galerie,
    #oeffnungszeiten,
    #preise,
    #team {
        scroll-margin-top: 75px;
    }

    .hp-team-section {
        padding: 75px 20px 85px;
    }

    .hp-team-intro {
        margin-bottom: 42px !important;
    }

    .hp-team-grid {
        grid-template-columns: 1fr;

        gap: 42px;
    }

    .hp-team-photo {
        max-width: 430px;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hp-site-footer {
        padding: 28px 22px;
    }

    .hp-site-footer-inner {
        flex-direction: column !important;

        justify-content: center !important;

        gap: 24px !important;
    }

    .hp-footer-nav {
        margin-left: 0 !important;
    }

    .hp-footer-nav .wp-block-navigation__container {
        justify-content: center !important;
    }
}


/* =========================================================
   0.3.1 – TEAM NAME + ROLLE
   ========================================================= */

.hp-team-name {
    margin-bottom: 5px !important;
    font-weight: 600 !important;
}

.hp-team-role {
    margin: 0 !important;

    color: var(--hp-color-muted);

    font-size: 0.95rem !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;

    text-align: center;
}


/* =========================================================
   0.3.2 – HIGHLIGHTS FULL WIDTH
   ========================================================= */

.hp-highlights {
    box-sizing: border-box !important;

    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding-left: 40px !important;
    padding-right: 40px !important;

    overflow: hidden;
}

@media screen and (max-width: 650px) {
    .hp-highlights {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}


/* =========================================================
   0.3.3 – LOGO / SOCIALS / STATISCHE INHALTSSEITEN
   ========================================================= */

.hp-header-actions {
    gap: 20px !important;
    align-items: center !important;
}

.hp-header-socials {
    display: flex;
    align-items: center;
    gap: 10px;

    flex: 0 0 auto;
}

.hp-header-socials a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    color: currentColor;

    text-decoration: none;

    opacity: 0.82;

    transition: opacity 0.2s ease, transform 0.2s ease;
}

.hp-header-socials a:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.hp-header-socials svg {
    display: block;

    width: 21px;
    height: 21px;

    fill: currentColor;
}


/* ---------------------------------------------------------
   Inhaltsseiten: keine Hero- oder Scroll-Effekte.
   --------------------------------------------------------- */

.hp-static-header {
    box-sizing: border-box;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding: 18px 40px !important;

    position: relative;
    z-index: 10;

    background: #ffffff;

    border-bottom: 1px solid rgba(0, 0, 0, 0.08);

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

    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.035);
}

.hp-static-header > .wp-block-group {
    width: 100%;
    max-width: 1250px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

.hp-static-header-logo {
    margin: 0 !important;
}

.hp-static-header-logo img {
    display: block;

    width: 150px !important;
    height: auto !important;
}

.hp-static-page {
    box-sizing: border-box;

    width: 100% !important;
    max-width: none !important;

    min-height: 60vh;

    padding: 85px 40px 110px !important;

    background: #ffffff;
}

.hp-static-page > * {
    max-width: 900px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

.hp-static-page-title {
    margin-bottom: 45px !important;

    font-size: clamp(2.2rem, 4vw, 3.4rem) !important;
    font-weight: 400 !important;
    line-height: 1.12 !important;
}

.hp-static-page .wp-block-post-content {
    font-size: 1rem;
    line-height: 1.72;
}

.hp-static-page .wp-block-post-content h2,
.hp-static-page .wp-block-post-content h3,
.hp-static-page .wp-block-post-content h4 {
    margin-top: 2.2em;
    margin-bottom: 0.65em;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media screen and (max-width: 900px) {

    .hp-header-actions {
        gap: 12px !important;
    }

    .hp-header-socials {
        gap: 7px;
    }
}

@media screen and (max-width: 650px) {

    .hp-static-header {
        padding: 14px 20px !important;
    }

    .hp-static-header-logo img {
        width: 125px !important;
    }

    .hp-static-page {
        padding: 60px 22px 80px !important;
    }

    .hp-static-page-title {
        margin-bottom: 32px !important;
    }

    .hp-header-socials a {
        width: 23px;
        height: 23px;
    }

    .hp-header-socials svg {
        width: 19px;
        height: 19px;
    }
}


/* =========================================================
   0.3.4 – INHALTSSEITEN HEADER / TITEL
   ========================================================= */

/*
 * Der Header der Inhaltsseiten verwendet nun dieselben
 * horizontalen Außenabstände wie der Startseiten-Header.
 */
.hp-static-header {
    position: sticky !important;
    top: 0;
    left: 0;
    right: 0;

    z-index: 1000;

    width: 100% !important;
    max-width: none !important;

    padding: 18px 40px !important;
}

/* Kein 1250px-Innenlimit: Logo und Navigation sitzen wie auf der Startseite. */
.hp-static-header > .wp-block-group {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    justify-content: space-between !important;
}

/* Flex-Gruppen wirklich auf die gesamte Headerbreite ziehen. */
.hp-static-header .wp-block-group.is-layout-flex,
.hp-static-header .wp-block-group-is-layout-flex {
    width: 100%;

    justify-content: space-between;
}

/* Navigation + Socials an den rechten Rand. */
.hp-static-header .hp-header-actions {
    width: auto !important;

    margin-left: auto !important;

    justify-content: flex-end !important;
}

.hp-static-header .wp-block-navigation {
    width: auto;

    margin-left: auto;

    justify-content: flex-end;
}

/* WordPress-Adminleiste beim eingeloggten Bearbeiten berücksichtigen. */
body.admin-bar .hp-static-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .hp-static-header {
        top: 46px;
    }
}

/* Seitentitel auf Inhaltsseiten mittig. */
.hp-static-page-title {
    text-align: center !important;
}

/* Mobil dieselben Außenabstände wie der Startseiten-Header. */
@media screen and (max-width: 650px) {
    .hp-static-header {
        padding: 14px 20px !important;
    }
}


/* =========================================================
   0.3.5 – EINHEITLICHE HORIZONTALE AUSRICHTUNG
   ========================================================= */

/*
 * Das WordPress-Post-Content-Layout besitzt eigene globale
 * Innenabstände. Für unsere Startseite übernehmen die einzelnen
 * HP-Sektionen die horizontalen Abstände selbst.
 */
body:has(.hp-home-hero) .wp-block-post-content {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/*
 * Alle großen Startseiten-Sektionen liegen exakt auf der Mitte
 * des Viewports. Dadurch gibt es keine schleichende Verschiebung
 * durch WordPress "constrained"- oder "global padding"-Layouts.
 */
.hp-home-content,
.hp-highlights,
.hp-gallery-section,
.hp-hours-section,
.hp-prices-section,
.hp-team-section,
.hp-contact-section {
    box-sizing: border-box !important;

    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}


/* ---------------------------------------------------------
   EINLEITUNG
   "Urlaub für Ihren Hund" + Überschrift + Texte exakt mittig.
   --------------------------------------------------------- */

.hp-home-content {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.hp-home-content > .wp-block-group {
    box-sizing: border-box !important;

    width: min(850px, 100%) !important;
    max-width: 850px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}

.hp-home-content .hp-kicker,
.hp-home-content .hp-title-main,
.hp-home-content .hp-text-lead {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
}


/* ---------------------------------------------------------
   Überschriften der übrigen Bereiche ebenfalls immer auf
   der echten Seitenmitte halten.
   --------------------------------------------------------- */

.hp-highlights > .hp-kicker,
.hp-highlights > .hp-title-section,
.hp-gallery-section > .hp-kicker,
.hp-gallery-section > .hp-title-section,
.hp-hours-section > .hp-kicker,
.hp-hours-section > .hp-title-section,
.hp-prices-section > .hp-kicker,
.hp-prices-section > .hp-title-section,
.hp-team-section > .hp-kicker,
.hp-team-section > .hp-title-section {
    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
}


/*
 * Die eigentlichen Inhaltsraster behalten ihre gewünschte
 * Maximalbreite, werden aber immer symmetrisch zentriert.
 */
.hp-highlight-grid,
.hp-auto-gallery,
.hp-hours-cards,
.hp-price-overnight,
.hp-daycare-section,
.hp-addons-section,
.hp-price-notes,
.hp-team-grid,
.hp-contact-grid {
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ---------------------------------------------------------
   Smartphone
   --------------------------------------------------------- */

@media screen and (max-width: 650px) {

    .hp-home-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}


/* =========================================================
   0.3.8 – TABLET / MOBILE FULL VIEWPORT WIDTH
   ========================================================= */

body:has(.hp-home-hero) {
    overflow-x: clip;
}

body:has(.hp-home-hero) .wp-site-blocks,
body:has(.hp-home-hero) .wp-block-post-content {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.hp-home-hero,
.hp-home-content,
.hp-highlights,
.hp-gallery-section,
.hp-hours-section,
.hp-prices-section,
.hp-team-section,
.hp-contact-section,
.hp-site-footer {
    box-sizing: border-box !important;
    position: relative;
    left: 50%;
    width: 100vw !important;
    width: 100dvw !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%);
}

.hp-home-header {
    box-sizing: border-box !important;
    width: 100vw !important;
    width: 100dvw !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media screen and (max-width: 1100px) {
    body:has(.hp-home-hero) .has-global-padding {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .hp-home-content,
    .hp-highlights,
    .hp-gallery-section,
    .hp-hours-section,
    .hp-prices-section,
    .hp-team-section,
    .hp-contact-section {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .hp-gallery-section .hp-auto-gallery {
        width: 100% !important;
        max-width: none !important;
    }
}

@media screen and (max-width: 650px) {
    /* Einheitlicher, großzügiger Seitenrand für Smartphones inklusive iOS-Safe-Area. */
    .hp-home-header,
    .hp-static-header {
        padding-left: calc(32px + env(safe-area-inset-left)) !important;
        padding-right: calc(32px + env(safe-area-inset-right)) !important;
    }

    .hp-home-content,
    .hp-highlights,
    .hp-gallery-section,
    .hp-hours-section,
    .hp-prices-section,
    .hp-team-section,
    .hp-contact-section {
        padding-left: calc(36px + env(safe-area-inset-left)) !important;
        padding-right: calc(36px + env(safe-area-inset-right)) !important;
    }

    .hp-site-footer,
    .hp-static-page {
        padding-left: calc(32px + env(safe-area-inset-left)) !important;
        padding-right: calc(32px + env(safe-area-inset-right)) !important;
    }

    /* Gutenberg kann innere Layout-Container bis an die Full-Bleed-Kante ziehen.
       Deshalb den sichtbaren Inhalt zusätzlich unabhängig vom Außencontainer begrenzen. */
    .hp-home-header > .wp-block-group,
    .hp-static-header > .wp-block-group,
    .hp-site-footer-inner,
    .hp-home-content > .wp-block-group,
    .hp-highlight-grid,
    .hp-hours-cards,
    .hp-auto-gallery,
    .hp-price-included,
    .hp-price-overnight,
    .hp-daycare-section,
    .hp-addons-section,
    .hp-price-notes,
    .hp-team-grid,
    .hp-contact-grid {
        box-sizing: border-box !important;
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hp-highlights > .hp-kicker,
    .hp-highlights > .hp-title-section,
    .hp-gallery-section > .hp-kicker,
    .hp-gallery-section > .hp-title-section,
    .hp-hours-section > .hp-kicker,
    .hp-hours-section > .hp-title-section,
    .hp-prices-section > .hp-kicker,
    .hp-prices-section > .hp-title-section,
    .hp-team-section > .hp-kicker,
    .hp-team-section > .hp-title-section {
        box-sizing: border-box !important;
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* iOS: Abstand zum Viewportrand sichern, auch innerhalb des Full-Bleed-Aufbaus. */
    .hp-prices-section .hp-price-included {
        width: calc(100% - 16px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hp-prices-section .hp-price-notes {
        padding-left: 38px !important;
    }

    .hp-prices-section .hp-price-notes > .hp-price-notes-title,
    .hp-prices-section .hp-price-notes > .hp-price-note {
        margin-left: 18px !important;
        margin-right: 12px !important;
    }

    .hp-price-notice {
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}