/* Immo-Kacheln (Filter + Ferienhäuser A–Z): Icons, Fakten, Alphabet-Timeline.
   Wird per enqueue_block_assets im Frontend UND im Block-Editor geladen,
   damit die Editor-Vorschau (ServerSideRender) genauso aussieht. */

/* ---------------------------------------------------------------------
   Ferienhäuser A–Z (blocks/immo-az): Alphabet-Sidebar links, Gruppen rechts.
   Wrapper/Karten nutzen die Filter-Klassen -> gleiche Optik wie die Suche.
   --------------------------------------------------------------------- */
.osm-immo-az__nav {
    flex-basis: 11rem !important;                    /* schmaler als die Filter-Sidebar */
}
.osm-immo-az__nav-title {
    margin: 0 0 0.6rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pn-immos-muted);
}
.osm-immo-az__letters {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.35rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.osm-immo-az__letters::before {                        /* durchgehende Timeline-Linie */
    content: "";
    position: absolute;
    left: 0.4rem;
    top: 0.6rem;
    bottom: 0.6rem;
    width: 2px;
    background: #F3E38A;                              /* passt zum Sonnen-Kasten */
}
.osm-immo-az__letters li {
    position: relative;
}
.osm-immo-az__letters li::before {                     /* Knoten auf der Linie */
    content: "";
    position: absolute;
    left: calc(-1.35rem + 0.4rem + 1px - 5px);
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--global-palette9);
    border: 2px solid #F3E38A;
    box-sizing: border-box;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.osm-immo-az__letters li:has(a)::before {
    border-color: var(--global-palette1);
}
.osm-immo-az__letters li:has(a:hover)::before,
.osm-immo-az__letters li:has(a.is-active)::before {
    background: var(--global-palette14);
    border-color: var(--global-palette3);
    transform: scale(1.25);
}
.osm-immo-az__letters a,
.osm-immo-az__letter--empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.18rem 0.5rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.2;
    text-decoration: none;
}
.osm-immo-az__letters a {
    color: var(--global-palette3);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.osm-immo-az__letters a:hover,
.osm-immo-az__letters a:focus-visible {
    background: var(--global-palette9);
    color: var(--global-palette1);
}
.osm-immo-az__letters a.is-active {
    background: var(--global-palette14);
    color: var(--global-palette3);
}
.osm-immo-az__count {
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.65;
}
.osm-immo-az__letter--empty {
    color: #c4c4c4;
    font-weight: 500;
}
.osm-immo-az__group {
    scroll-margin-top: 6.5rem;                       /* Anker landen unter dem Sticky-Header */
    margin-bottom: 2.5rem;
}
.osm-immo-az__heading {                               /* bleibt beim Scrollen durch die Gruppe oben stehen */
    position: sticky;
    top: calc(var(--osm-sticky-offset, 5.2rem) - 8px);   /* direkt an die Header-Unterkante, kein Spalt */
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.25rem;
    padding: 0.75rem 0 0.5rem;
    background: var(--global-palette9);
    font-size: 1.6rem;
}
.osm-immo-az__heading span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 8px;
    background: var(--global-palette14);
    color: var(--global-palette3);
}
.osm-immo-az__heading::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--pn-immos-border);
}
@media (max-width: 782px) {
    .osm-immo-az__letters { flex-direction: row; flex-wrap: wrap; padding-left: 0; gap: 0.25rem; }
    .osm-immo-az__letters::before, .osm-immo-az__letters li::before { display: none; }
    .osm-immo-az__letters a, .osm-immo-az__letter--empty { border: 1px solid var(--pn-immos-border); padding: 0.25rem 0.55rem; }
    .osm-immo-az__count { display: none; }
}

/* ---------------------------------------------------------------------
   Hauskacheln: Fakten als Icon statt Textlabel (inc/immo-card-fields.php)
   --------------------------------------------------------------------- */
.pn-immos-property-card__fact:has(> dt.pn-immos-fact-icon) {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.pn-immos-property-card__fact > dt.pn-immos-fact-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    margin: 0;
    border-radius: 6px;
    background: var(--global-palette7);
    color: var(--global-palette1);
}
.pn-immos-property-card__fact > dt.pn-immos-fact-icon svg {
    width: 1rem;
    height: 1rem;
}
.pn-immos-property-card__fact:has(> dt.pn-immos-fact-icon) > dd {
    margin: 0;
    padding-top: 0.15rem;
}
/* Keine Wortbrüche mitten im Wort in den Fakten – lieber sauber silbentrennen. */
.pn-immos-property-card__fact > dd {
    word-break: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* ---------------------------------------------------------------------
   Details-Block auf der Immobilienseite: Labels fett, Werte normal,
   Besonderheiten/Ausstattung als Chips (inc/immo-details.php)
   --------------------------------------------------------------------- */
.pn-immos-property-details__row dt {
    font-weight: 700;
    color: var(--global-palette3);
}
.pn-immos-property-details__row dd {
    font-weight: 400;
    color: var(--global-palette4);
}
.pn-immos-property-details__row--chips {
    display: block;
}
.pn-immos-property-details__row--chips dt {
    margin-bottom: 0.5rem;
}
.pn-immos-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    text-align: left;
}
.pn-immos-chip {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border: 1px solid rgba(50, 156, 189, 0.22);
    border-radius: 999px;
    background: var(--global-palette9);
    font-size: 0.74rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--global-palette4);
}
.pn-immos-chip[hidden] { display: none; }
/* "+ N weitere": bewusst anders als die Merkmal-Chips (Meerblau, gestrichelt, klickbar) */
.pn-immos-chip--more {
    cursor: pointer;
    border: 1px dashed var(--global-palette1);
    background: rgba(50, 156, 189, 0.08);
    color: var(--global-palette2);
    font-weight: 700;
    font-family: inherit;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.pn-immos-chip--more:hover,
.pn-immos-chip--more:focus-visible {
    background: var(--global-palette1);
    border-style: solid;
    color: var(--global-palette9);
    outline: none;
}

/* ---------------------------------------------------------------------
   Sonnen-Kasten + Filter-Chips: ein Look für Filterformular (Zeile, Spalte,
   Kompakt), A–Z-Sidebar und Details-Kasten - hell-gelber Verlauf statt Grau.
   Filter-Chips sehen aus wie .pn-immos-chip, ausgewählt = Meerblau.
   Hier statt in pn-styles.css, damit die Editor-Vorschau (ServerSideRender)
   dem Frontend entspricht.
   --------------------------------------------------------------------- */
.wp-block-pn-immos-property-filter.pn-immos-property-filter .pn-immos-property-filter__form,
.pn-immos-property-filter__form.osm-immo-az__nav,
.osm-immo__facts .pn-immos-property-details__inner {
    background: linear-gradient(180deg, #FFFBE6 0%, #FFF6CC 100%);
    border: 1px solid #F3E38A;
    border-top: 5px solid var(--global-palette14);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(233, 199, 28, 0.18);
}
.wp-block-pn-immos-property-filter.pn-immos-property-filter .pn-immos-filter-field label,
.wp-block-pn-immos-property-filter.pn-immos-property-filter .pn-immos-filter-checkboxes legend,
.osm-immo-az__nav-title {
    color: var(--global-palette4);
}
.wp-block-pn-immos-property-filter.pn-immos-property-filter .pn-immos-filter-field select {
    border-color: #F3E38A;
    background-color: var(--global-palette9);
}
.wp-block-pn-immos-property-filter.pn-immos-property-filter .pn-immos-property-filter__checkbox-groups {
    border-top-color: rgba(233, 199, 28, 0.45);
}
.wp-block-pn-immos-property-filter.pn-immos-property-filter .pn-immos-filter-checkboxes label {
    gap: 0.3rem;
    padding: 0.12rem 0.55rem;
    border: 1px solid rgba(50, 156, 189, 0.22);
    border-radius: 999px;
    background: var(--global-palette9);
    font-size: 0.74rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    color: var(--global-palette4);
}
.wp-block-pn-immos-property-filter.pn-immos-property-filter .pn-immos-filter-checkboxes label:hover {
    border-color: var(--global-palette1);
    color: var(--global-palette2);
}
.wp-block-pn-immos-property-filter.pn-immos-property-filter .pn-immos-filter-checkboxes label:has(input:checked) {
    background: var(--global-palette1);
    border-color: var(--global-palette1);
    color: var(--global-palette9);
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   pn-immos: Filter-Chips (Besonderheiten / Ausstattung)

   Das Fieldset trägt .pn-immos-filter-field mit, das im Plugin-Stylesheet
   flex-direction: column setzt (Label über Dropdown) - dadurch landet jeder
   Chip auf einer eigenen Zeile. Hier per höherer Spezifität auf eine
   kompakte, umbrechende Reihe umgestellt. Chip-Optik und Sonnen-Kasten
   stehen weiter unten in dieser Datei.
   --------------------------------------------------------------------- */
.pn-immos-property-filter .pn-immos-filter-checkboxes {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem;
}
/* ---------------------------------------------------------------------
   pn-immos: Block-Stil "Kompakt" (siehe inc/immo-filter-compact.php)
   Das Plugin-JS blendet den Submit-Button aus, sobald es läuft - im
   Kurzfilter ist er aber der einzige Weg zur Suchseite.
   --------------------------------------------------------------------- */
.pn-immos-property-filter.is-style-compact .pn-immos-property-filter__actions button[type="submit"] {
    display: inline-block;
}
.pn-immos-property-filter.is-style-compact .pn-immos-property-filter__actions {
    justify-content: flex-end;
}
.pn-immos-property-filter.is-style-compact .pn-immos-property-filter__form {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   pn-immos: Farbvariablen des Plugins auf die Marke mappen
   (Filter-, Karten- und Detail-Blöcke). Das Plugin definiert die Variablen
   auf seinen Block-Wrappern; :root im Child Theme wird von der höheren
   Spezifität des Wrappers überstimmt - daher direkt am Wrapper.
   --------------------------------------------------------------------- */
.wp-block-pn-immos-property-filter.pn-immos-property-filter,
.wp-block-pn-immos-property-details.pn-immos-property-details {
    --pn-immos-accent: var(--global-palette1);
    --pn-immos-accent-ink: var(--global-palette9);
    --pn-immos-ink: var(--global-palette3);
    --pn-immos-muted: var(--global-palette5);
    --pn-immos-border: #e6e6e6;
    --pn-immos-surface: var(--global-palette9);
    --pn-immos-surface-sunken: var(--global-palette7);
    --pn-immos-radius: 12px;
    --pn-immos-radius-sm: 6px;
}
/* Fokus-Ring in Markenfarbe statt Neon-Grün */
.wp-block-pn-immos-property-filter.pn-immos-property-filter :is(select, input, button):focus-visible,
.wp-block-pn-immos-property-filter.pn-immos-property-filter .pn-immos-filter-checkboxes label:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(50, 156, 189, 0.35);
}

/* ---------------------------------------------------------------------
   pn-immos: Besonderheiten begrenzt (alle Layouts) - nur die wichtigsten
   sichtbar, Rest über "+ N weitere" (inc/immo-filter-sidebar.php).
   --------------------------------------------------------------------- */
.pn-immos-property-filter .pn-immos-filter-checkboxes--limited:not(.is-expanded) .pn-immos-chip--extra {
    display: none;
}
.pn-immos-property-filter.pn-immos-property-filter--sidebar .pn-immos-filter-checkboxes {
    flex: 1 1 100%;                                /* Plugin: flex 0 0 auto + min-width 14rem -> würde einzeilig überlaufen */
    width: 100%;
    min-width: 0;
    align-items: flex-start;                       /* Chips fließen wie im Details-Kasten, innerhalb der Sidebar */
    gap: 0.25rem;
}
.pn-immos-property-filter.pn-immos-property-filter--sidebar .pn-immos-filter-checkboxes legend {
    width: 100%;
}
.pn-immos-filter-more {                            /* Optik: .pn-immos-chip--more (pn-immo-cards.css) */
    align-self: flex-start;
    margin-top: 0.15rem;
    font-size: 0.74rem;
    line-height: 1.3;
}

/* ---------------------------------------------------------------------
   pn-immos: Spalten-Layout kompakt (Sidebar soll in die Viewport-Höhe passen)
   --------------------------------------------------------------------- */
.pn-immos-property-filter.pn-immos-property-filter--sidebar .pn-immos-property-filter__form {
    flex-basis: 17.5rem;
    padding: 1rem;
    gap: 0.75rem;
    top: 5.5rem;                                  /* unter dem Sticky-Header bleiben */
    max-height: calc(100vh - 6.5rem);             /* Sicherheitsnetz für kleine Viewports */
    overflow-y: auto;
    scrollbar-width: thin;
}
.pn-immos-property-filter.pn-immos-property-filter--sidebar .pn-immos-property-filter__fields {
    gap: 0.5rem;
}
.pn-immos-property-filter.pn-immos-property-filter--sidebar .pn-immos-filter-field {
    gap: 0.2rem;
    min-width: 0;
}
.pn-immos-property-filter.pn-immos-property-filter--sidebar .pn-immos-filter-field label,
.pn-immos-property-filter.pn-immos-property-filter--sidebar .pn-immos-filter-checkboxes legend {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
}
.pn-immos-property-filter.pn-immos-property-filter--sidebar .pn-immos-filter-field select {
    padding: 0.33rem 2rem 0.33rem 0.6rem;
    font-size: 0.84rem;
    line-height: 1.3;
    background-position: right 0.65rem center;
}
.pn-immos-property-filter.pn-immos-property-filter--sidebar .pn-immos-property-filter__checkbox-groups {
    padding-top: 0.6rem;
    gap: 0.75rem;
}
.pn-immos-property-filter.pn-immos-property-filter--sidebar .pn-immos-filter-checkboxes legend {
    margin-bottom: 0.25rem;
}
.pn-immos-property-filter.pn-immos-property-filter--sidebar .pn-immos-property-filter__actions {
    gap: 0.75rem;
    flex-wrap: wrap;
}
.pn-immos-property-filter.pn-immos-property-filter--sidebar .pn-immos-property-filter__actions button {
    padding: 0.5rem 1.1rem;
    font-size: 0.82rem;
}
.pn-immos-property-filter.pn-immos-property-filter--sidebar .pn-immos-property-filter__reset {
    font-size: 0.78rem;
}
/* Kurze Zahlenfelder zweispaltig; alles mit langen Werten bleibt volle Breite. */
.pn-immos-property-filter.pn-immos-property-filter--sidebar .pn-immos-property-filter__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 0.5rem;
}
.pn-immos-property-filter.pn-immos-property-filter--sidebar .pn-immos-filter-field {
    grid-column: 1 / -1;
}
.pn-immos-property-filter.pn-immos-property-filter--sidebar .pn-immos-filter-field:has(select[name="personen"]),
.pn-immos-property-filter.pn-immos-property-filter--sidebar .pn-immos-filter-field:has(select[name="badezimmer"]),
.pn-immos-property-filter.pn-immos-property-filter--sidebar .pn-immos-filter-field:has(select[name="schlafzimmer"]),
.pn-immos-property-filter.pn-immos-property-filter--sidebar .osm-stepper {
    grid-column: auto;
}

/* ---------------------------------------------------------------------
   pn-immos: Schieberegler (min–max) und Plus/Minus-Stepper
   (inc/immo-filter-controls.php, JS in pn-scripts.js)
   --------------------------------------------------------------------- */
.osm-range__value {
    margin-left: 0.35rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--global-palette2);
}
.osm-range__track {
    position: relative;
    height: 2rem;
    margin: 0 0.5rem;
}
.osm-range__track::before {                          /* Schiene */
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
    background: #F3E38A;
}
.osm-range__fill {                                    /* gewählter Bereich */
    position: absolute;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
    background: var(--global-palette1);
}
.osm-range__track input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    left: -0.5rem; right: -0.5rem;
    width: calc(100% + 1rem);
    top: 0;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    pointer-events: none;                             /* nur die Daumen reagieren */
    outline: none;
}
.osm-range__track input[type="range"]::-webkit-slider-runnable-track { background: none; height: 2rem; }
.osm-range__track input[type="range"]::-moz-range-track { background: none; height: 2rem; }
.osm-range__track input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 18px; height: 18px;
    margin-top: calc(1rem - 9px);
    border-radius: 50%;
    border: 2px solid var(--global-palette9);
    background: var(--global-palette1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: grab;
}
.osm-range__track input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid var(--global-palette9);
    background: var(--global-palette1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: grab;
}
.osm-range__track input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(50, 156, 189, 0.35); }
.osm-range__track input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(50, 156, 189, 0.35); }
.osm-range__track input.osm-range__hi { z-index: 2; }
.osm-range__track input.osm-range__lo.is-top { z-index: 3; }

.osm-stepper__ctl {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #F3E38A;
    border-radius: 6px;
    background: var(--global-palette9);
    overflow: hidden;
}
.osm-stepper__btn {
    width: 2.1rem;
    padding: 0;
    border: 0;
    background: rgba(50, 156, 189, 0.08);
    color: var(--global-palette2);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.osm-stepper__btn:hover:not(:disabled) { background: var(--global-palette1); color: var(--global-palette9); }
.osm-stepper__btn:disabled { color: var(--global-palette6); cursor: default; }
.osm-stepper__val {
    flex: 1 1 auto;
    min-width: 4.5rem;
    padding: 0.33rem 0.4rem;
    text-align: center;
    font-size: 0.84rem;
    line-height: 1.3;
    color: var(--global-palette3);
}

/* ---------------------------------------------------------------------
   Hauskacheln: responsive Spalten (Kadence-Breakpoints 1024 / 767) und
   "Details ansehen"-Varianten (inc/immo-card-cta.php)
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .pn-immos-property-filter .pn-immos-property-filter__results {
        grid-template-columns: repeat(var(--pn-immos-columns-tablet, 2), 1fr);
    }
}
@media (max-width: 767px) {
    .pn-immos-property-filter .pn-immos-property-filter__results {
        grid-template-columns: repeat(var(--pn-immos-columns-mobile, 1), 1fr);
        gap: 1.25rem;
    }
}
.pn-immos-property-card__cta--button,
.pn-immos-property-card__cta--button-orange,
.pn-immos-property-card__cta--outline {
    justify-content: center;
    padding: 0.6rem 1.1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.2;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pn-immos-property-card__cta--button { background: var(--global-palette1); color: var(--global-palette9); }
.pn-immos-property-card__cta--button:hover { background: var(--global-palette2); color: var(--global-palette9); }
.pn-immos-property-card__cta--button-orange { background: var(--global-palette10); color: var(--global-palette9); }
.pn-immos-property-card__cta--button-orange:hover { background: #E04A00; color: var(--global-palette9); }
.pn-immos-property-card__cta--outline { border: 2px solid var(--global-palette1); color: var(--global-palette1); padding: calc(0.6rem - 2px) calc(1.1rem - 2px); }
.pn-immos-property-card__cta--outline:hover { background: var(--global-palette1); color: var(--global-palette9); }