/* ==========================================================================
   Kolibri Immobilien – Theme-Stylesheet

    1. Schriften
    2. Design-Tokens
    3. Reset & Basis
    4. Layout
    5. Typografie
    6. Buttons
    7. Logo
    8. Header / Navigation
    9. Startseite: Hero
   10. Portfolio & Inserat-Karten
   11. Inserat-Detailseite
   12. Lightbox
   13. Karten
   14. Seiteninhalte, Kontaktseite & 404
   15. Footer
   16. Helfer
   ========================================================================== */


/* 1. Schriften
   ==========================================================================
   Geladen sind ausschließlich 400, 600 und 700. Im CSS werden deshalb auch
   nur diese Werte benutzt: deklariert man 500 oder 800, fällt der Browser
   auf 400 bzw. 700 zurück, und die Angabe täuscht ein Gewicht vor, das es
   gar nicht gibt. Sollen die Zwischenstufen echt sein, müssen die passenden
   woff2-Dateien ergänzt werden.
   ========================================================================== */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter-v20-latin-regular.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter-v20-latin-600.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/inter-v20-latin-700.woff2") format("woff2");
}


/* 2. Design-Tokens
   ========================================================================== */

:root {
    --color-navy: #00055E;
    --color-red: #B3153A;
    --color-red-accent: #B81E40;
    --color-logo-mark: #B6193D;
    --color-logo-text: #313131;

    --color-surface: #FFFFFF;
    --color-surface-muted: #EFEFEF;
    --color-surface-tint: #E8E9F2;

    --font-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --header-height: 6rem;

    /* Wie weit die Infobox der Detailseite in den Inhalt darunter ragt.
       Der Inhaltsbereich reserviert denselben Wert als Abstand. */
    --hero-overhang: 100px;

    --container-max: 1320px;
    --container-padding: 1.5rem;
    --gutter: 1.5rem;

    --radius-card: 1rem;
    --radius-pill: 2rem;
    --radius-media: 0.5rem;
}


/* 3. Reset & Basis
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: var(--header-height);
}

body {
    margin: 0;
    padding-top: var(--header-height);
    background-color: var(--color-surface);
    color: var(--color-navy);
    font-family: var(--font-base);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6,
p, dl, dd, figure, blockquote {
    margin-block: 0;
}

p {
    margin-bottom: 1rem;
}

ul, ol {
    margin-block: 0 1rem;
    padding-inline-start: 1.5rem;
}

img, svg, video, iframe {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

a {
    color: inherit;
    text-decoration: none;
}

strong, b {
    font-weight: 700;
}

button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

:where(a, button, [tabindex]):focus-visible {
    outline: 3px solid var(--color-red-accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* 4. Layout
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}


/* 5. Typografie
   ========================================================================== */

h1 {
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 2rem;
}

h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
}

h3 {
    font-size: 1rem;
    font-weight: 600;
}

h4 {
    font-size: 1.25rem;
    font-weight: 400;
}

h5 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

h6 {
    font-weight: 400;
    line-height: 1.5;
}


/* 6. Buttons
   ========================================================================== */

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn--outline {
    background: var(--color-surface);
    border: 2px solid var(--color-navy);
    color: var(--color-navy);
}

.btn--outline:hover,
.btn--outline:focus-visible {
    background: var(--color-navy);
    color: var(--color-surface);
}


/* 7. Logo
   ========================================================================== */

.logo {
    width: 222px;
    height: auto;
}

.logo__mark {
    fill: var(--color-logo-mark);
}

.logo__text path {
    fill: var(--color-logo-text);
}

.logo--inverted .logo__mark,
.logo--inverted .logo__text path {
    fill: var(--color-surface);
}


.logo--header {
    width: 200px;
}


/* 8. Header / Navigation
   ========================================================================== */

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    background-color: var(--color-surface);
    box-shadow: 0 1px 12px rgba(0, 5, 94, 0.08);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--header-height);
}

.site-header__brand {
    display: flex;
}

.site-header__list {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-header__link {
    position: relative;
    display: inline-block;
    padding-block: 0.25rem;
    color: var(--color-navy);
    font-size: 1rem;
    font-weight: 400;
}

.site-header__link::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.site-header__link:hover::after,
.site-header__link.is-current::after {
    transform: scaleX(1);
}

.site-header__cta {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    border: 2px solid var(--color-navy);
    border-radius: var(--radius-pill);
    background: var(--color-navy);
    color: var(--color-surface);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.site-header__cta:hover,
.site-header__cta:focus-visible {
    background: transparent;
    color: var(--color-navy);
}

/* Startseite: über dem Hero ohne eigenen Hintergrund.
   Der Verlauf sichert die Lesbarkeit vor dem hellen Himmel. */
.has-transparent-header {
    padding-top: 0;
}

.site-header--transparent {
    background-color: transparent;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
    box-shadow: none;
}

.site-header--transparent .logo__mark,
.site-header--transparent .logo__text path {
    fill: var(--color-surface);
}

.site-header--transparent .site-header__link {
    color: var(--color-surface);
}

.site-header--transparent .site-header__cta {
    border-color: var(--color-surface);
    background: transparent;
    color: var(--color-surface);
}

.site-header--transparent .site-header__cta:hover,
.site-header--transparent .site-header__cta:focus-visible {
    background: var(--color-surface);
    color: var(--color-navy);
}

.site-header--transparent.is-scrolled {
    background-color: var(--color-surface);
    background-image: none;
    box-shadow: 0 1px 12px rgba(0, 5, 94, 0.08);
}

.site-header--transparent.is-scrolled .logo__mark {
    fill: var(--color-logo-mark);
}

.site-header--transparent.is-scrolled .logo__text path {
    fill: var(--color-logo-text);
}

.site-header--transparent.is-scrolled .site-header__link {
    color: var(--color-navy);
}

.site-header--transparent.is-scrolled .site-header__cta {
    border-color: var(--color-navy);
    background: var(--color-navy);
    color: var(--color-surface);
}

.site-header--transparent.is-scrolled .site-header__cta:hover,
.site-header--transparent.is-scrolled .site-header__cta:focus-visible {
    background: transparent;
    color: var(--color-navy);
}

/* Umschalter fürs mobile Menü */
.site-header__toggle {
    display: none;
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
}

.site-header__toggle-icon,
.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
    position: absolute;
    left: 50%;
    width: 1.5rem;
    height: 2px;
    margin-left: -0.75rem;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.site-header__toggle-icon {
    top: 50%;
    margin-top: -1px;
}

.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
    content: "";
    left: 0;
    margin-left: 0;
}

.site-header__toggle-icon::before {
    top: -0.5rem;
}

.site-header__toggle-icon::after {
    top: 0.5rem;
}

[aria-expanded="true"] .site-header__toggle-icon {
    background: transparent;
}

[aria-expanded="true"] .site-header__toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
}

[aria-expanded="true"] .site-header__toggle-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

@media (max-width: 767px) {
    :root {
        --header-height: 4.75rem;
    }

    .logo--header {
        width: 150px;
    }

    .site-header__toggle {
        display: block;
        color: var(--color-navy);
    }

    .site-header--transparent:not(.is-scrolled) .site-header__toggle {
        color: var(--color-surface);
    }

    .site-header__nav {
        display: none;
        position: absolute;
        inset: 100% 0 auto 0;
        background: var(--color-surface);
        box-shadow: 0 8px 20px rgba(0, 5, 94, 0.12);
    }

    .site-header__nav.is-open {
        display: block;
    }

    .site-header__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem var(--container-padding) 1rem;
    }

    .site-header__link,
    .site-header--transparent .site-header__link {
        display: block;
        padding-block: 0.75rem;
        color: var(--color-navy);
    }

    .site-header__cta,
    .site-header--transparent .site-header__cta {
        display: block;
        margin-top: 0.75rem;
        border-color: var(--color-navy);
        background: var(--color-navy);
        color: var(--color-surface);
        text-align: center;
    }
}


/* 9. Startseite: Hero
   ========================================================================== */

.hero {
    display: flex;
    min-height: 95vh;
    padding-block: var(--header-height) 5rem;
    color: var(--color-surface);
    background-color: #D3D3D3;
    background-image:
        linear-gradient(204deg, rgba(0, 0, 0, 0) 42.26%, rgba(0, 0, 0, 0.5) 69.2%),
        url("../img/Villa-Kolibri-1920.webp");
    background-position: 50% 0;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero__inner {
    display: flex;
    flex-direction: column;
}


.hero__text {
    max-width: 42%;
    margin-top: auto;
    padding-bottom: 5rem;
}

/* Passender Zuschnitt je Viewport. Die Originaldatei mit 3024 px kommt nur
   noch auf sehr breiten Bildschirmen zum Einsatz. */
@media (min-width: 768px) and (max-width: 1024px) {
    .hero {
        background-image:
            linear-gradient(204deg, rgba(0, 0, 0, 0) 42.26%, rgba(0, 0, 0, 0.5) 69.2%),
            url("../img/Villa-Kolibri-1200.webp");
    }
}

@media (min-width: 1601px) {
    .hero {
        background-image:
            linear-gradient(204deg, rgba(0, 0, 0, 0) 42.26%, rgba(0, 0, 0, 0.5) 69.2%),
            url("../img/Villa-Kolibri.webp");
    }
}

@media (max-width: 767px) {
    /* Auf schmalen Viewports liegt der Text vor dem hellen Himmel –
       deshalb hier ein vertikaler Verlauf statt des diagonalen. */
    .hero {
        min-height: 70vh;
        /* Der fixierte Header liegt darüber – entsprechend Luft nach oben. */
        padding-block: calc(var(--header-height) + 1.5rem) 3rem;
        background-image:
            linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.7) 100%),
            url("../img/Villa-Kolibri-800.webp");
    }

    .hero__text {
        max-width: none;
        padding-top: 2rem;
        padding-bottom: 1rem;
    }
}


/* 10. Portfolio & Inserat-Karten
   ========================================================================== */

.portfolio {
    padding-block: 10rem;
    background: url("../img/bg-immo.webp") center / cover no-repeat;
}

.portfolio__intro {
    max-width: 50%;
    margin-left: auto;
    margin-bottom: 1.5rem;
    text-align: right;
}

.portfolio__lead {
    font-size: 2.25rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.portfolio__lead strong {
    font-weight: 700;
    color: var(--color-navy);
}

.portfolio__title {
    font-weight: 400;
    margin-top: 4rem;
}

.portfolio__title strong {
    font-weight: 700;
}

@media (max-width: 767px) {
    .portfolio {
        padding-block: 4rem;
    }

    .portfolio__intro {
        max-width: none;
        text-align: left;
    }

    .portfolio__lead {
        font-size: 1.5rem;
    }
}

.portfolio__filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block: 1rem 2rem;
}

.portfolio__filter-btn {
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--color-red-accent);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-red-accent);
    font-size: 1rem;
    font-weight: 400;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.portfolio__filter-btn:hover,
.portfolio__filter-btn.is-active {
    background: var(--color-red-accent);
    color: var(--color-surface);
}

.portfolio__empty {
    margin-top: 1.5rem;
}

.inserat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gutter);
}

@media (min-width: 768px) {
    .inserat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .inserat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.inserat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: 0 4px 20px rgba(0, 5, 94, 0.08);
}

.inserat-card--sold {
    background: var(--color-surface-muted);
}

.inserat-card__badge {
    position: absolute;
    top: 0;
    right: 20px;
    z-index: 2;
    margin: 0;
    padding: 6px 12px;
    border-radius: 0 0 8px 8px;
    background: var(--color-navy);
    color: var(--color-surface);
    font-size: 1rem;
}

/* Hauptbild oben, Kategorie-Icon als Plakette darauf */
.inserat-card__media {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--color-surface-tint);
}

/* Absolut positioniert, damit das Bild die Box nicht aufziehen kann:
   height:100% greift ohne feste Elternhöhe nicht, das Bild bestimmt dann
   seine Höhe aus dem eigenen Seitenverhältnis und überstimmt aspect-ratio.
   Bei 4:3-Aufnahmen wurden Karten dadurch 440 statt 391 px hoch – und der
   Sprung passierte erst beim Nachladen, was zusätzlich Layout-Shift war. */
.inserat-card__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inserat-card--sold .inserat-card__media img {
    filter: grayscale(0.6);
}

.inserat-card__icon {
    display: block;
    color: var(--color-red-accent);
    fill: var(--color-red-accent);
}

.inserat-card__icon svg {
    width: 75px;
    height: auto;
}

.inserat-card__icon--badge {
    position: absolute;
    right: 1rem;
    bottom: -1.25rem;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: 0 2px 10px rgba(0, 5, 94, 0.12);
}

.inserat-card__icon--badge svg {
    width: 2.25rem;
}

/* Ohne Bild bleibt es beim bisherigen Aufbau */
.inserat-card > .inserat-card__icon {
    padding: 2rem 2rem 0;
}

.inserat-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 2rem;
}

.inserat-card__media + .inserat-card__body {
    padding-top: 2.25rem;
}

.inserat-card__title {
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.inserat-card__details {
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.inserat-card .btn {
    align-self: flex-start;
    margin-top: auto;
}


/* 11. Inserat-Detailseite
   ========================================================================== */

.property-hero {
    display: flex;
    align-items: flex-end;
    min-height: 500px;
    background: var(--color-surface-tint) center / cover no-repeat;
}

.property-hero--has-image {
    min-height: 80vh;
}

.property-hero__inner {
    display: flex;
    justify-content: flex-end;
}

.property-hero__info {
    width: 100%;
    padding: 2.5rem;
    background: var(--color-surface-muted);
    color: var(--color-navy);
}

.property-hero__info h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

@media (min-width: 992px) {
    .property-hero__info {
        position: relative;
        bottom: calc(-1 * var(--hero-overhang));
        width: 41.666%;
    }
}

.property-hero__details,
.property-specs {
    display: grid;
    grid-template-columns: auto 1fr;
    margin: 0;
}

.property-hero__details {
    gap: 0.25rem 0.5rem;
}

.property-specs {
    gap: 0.5rem 1rem;
}

.property-hero__details dt,
.property-specs dt {
    font-weight: 700;
}

.property-hero__details dd,
.property-specs dd {
    margin: 0;
}

.property-content {
    padding-block: 4rem;
}

/* Ab dieser Breite ragt die Infobox des Heros um --hero-overhang in diesen
   Bereich hinein. Der Abstand nach oben reserviert den Platz, sonst liegt
   die Box über den Objektfakten. */
@media (min-width: 992px) {
    .property-content {
        padding-top: calc(4rem + var(--hero-overhang));
    }
}

.property-content__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gutter);
}

@media (min-width: 992px) {
    .property-content__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.property-content__block {
    margin-bottom: 2rem;
}

.property-content__block h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-red);
    margin-bottom: 0.5rem;
}

.property-content__block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.property-content__block ul li {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 0.25rem;
}

.property-content__block ul li::before {
    content: "-";
    position: absolute;
    left: 0;
}

.property-gallery {
    padding: 2rem 0 4rem;
}

.property-gallery__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gutter);
}

@media (min-width: 768px) {
    .property-gallery__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.property-gallery__item {
    display: block;
    width: 100%;
    border-radius: var(--radius-media);
    overflow: hidden;
}

.property-gallery__item img {
    display: block;
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: var(--radius-media);
    transition: transform 0.3s ease;
}

.property-gallery__item:hover img {
    transform: scale(1.03);
}

.property-contact {
    padding-block: 3rem;
    background: var(--color-surface-tint);
}

.property-contact__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.property-contact__text {
    text-align: right;
}

.property-contact p {
    margin-bottom: 0.25rem;
}

.property-contact__label {
    font-weight: 700;
}

.property-contact__email {
    margin-bottom: 0;
}


/* 12. Lightbox
   ========================================================================== */

.lightbox {
    width: min(90vw, 1140px);
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: var(--radius-media);
    background: var(--color-surface);
    overflow: visible;
}

.lightbox::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.lightbox__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 1;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-navy);
    font-size: 1.75rem;
    line-height: 1;
}

.lightbox__image {
    display: block;
    width: 100%;
    border-radius: var(--radius-media);
}


/* 13. Karten
   ==========================================================================
   Google-Karte auf der Inserat-Detailseite. Bis zur Freigabe liegt ein
   Platzhalter über der leeren Leinwand, es wird nichts von Google
   geladen. Der Marker kommt aus einem <template>-Element und wird von
   karte.js in die Karte gesetzt.
   ========================================================================== */

.karte {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    min-height: 20rem;
    border-radius: var(--radius-card);
    background-color: var(--color-surface-tint);
    background-image:
        linear-gradient(rgba(0, 5, 94, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 5, 94, 0.05) 1px, transparent 1px);
    background-size: 2.5rem 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 5, 94, 0.08);
}

@media (max-width: 767px) {
    .karte {
        aspect-ratio: 4 / 5;
    }
}

.karte__leinwand {
    position: absolute;
    inset: 0;
}

.karte__freigabe {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.karte__freigabe-inhalt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 30rem;
    padding: 2rem;
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: 0 4px 20px rgba(0, 5, 94, 0.08);
    text-align: center;
}

.karte__freigabe-icon {
    color: var(--color-red-accent);
}

.karte__freigabe-text {
    margin: 0;
    font-size: 0.875rem;
}

.karte__freigabe-text a {
    color: inherit;
    text-decoration: underline;
}

.karte__merken {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}

.karte__merken input {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--color-navy);
}

.karte__fehler {
    position: absolute;
    inset: auto 1rem 1rem;
    z-index: 1;
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-media);
    background: var(--color-surface);
    font-size: 0.875rem;
}

.karte__widerruf {
    margin: 0.5rem 0 0;
    text-align: right;
}

.karte__link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    text-decoration: underline;
    cursor: pointer;
}

/* Marker: dieselbe Plakette wie auf den Inserat-Karten, kleiner */
.karte-marker {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 2px solid var(--color-red-accent);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-red-accent);
    box-shadow: 0 2px 10px rgba(0, 5, 94, 0.25);
}

.karte-marker svg {
    width: 2.25rem;
    height: auto;
}

.karte-marker--verkauft {
    border-color: #8A8A8A;
    color: #8A8A8A;
}

/* Einbindung auf der Detailseite */
.property-map {
    padding: 0 0 3rem;
}

.property-map__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-red);
    margin-bottom: 0.5rem;
}

.property-map__hinweis {
    margin: 0 0 1rem;
    font-size: 1rem;
}

.property-map__aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin-top: 1rem;
}

.property-map__extern {
    font-size: 1rem;
    text-decoration: underline;
}

.property-map__meldung {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.875rem;
}

.property-map__meldung:empty {
    display: none;
}


/* 14. Seiteninhalte, Kontaktseite & 404
   ========================================================================== */

.page-section {
    padding-block: 4rem;
}

.entry-content a {
    color: var(--color-red);
    text-decoration: underline;
}

.entry-content h2,
.entry-content h3 {
    margin-top: 2.5rem;
}

.teaser {
    margin-bottom: 2.5rem;
}


.kontakt-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gutter);
    margin-top: 3rem;
}

@media (min-width: 768px) {
    .kontakt-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.kontakt-card {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border-radius: var(--radius-card);
    background: var(--color-surface-tint);
}

.kontakt-card h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-red);
    margin-bottom: 1rem;
}

.kontakt-card__address {
    font-style: normal;
    line-height: 1.6;
}

.kontakt-card__line {
    margin-bottom: 0.5rem;
}

.kontakt-card__label {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
}

.kontakt-card a:not(.btn) {
    text-decoration: underline;
}

.kontakt-card .btn {
    align-self: flex-start;
    margin-top: 1.5rem;
}


.objektdaten__lage {
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.inserat-card__daten {
    display: grid;
    /* Die Bezeichnungen kommen aus der Redaktion und werden mitunter sehr
       lang ("Gesamte mietbare Bürofläche"). Ohne Begrenzung frisst die
       erste Spalte den Platz und der Wert bricht dreizeilig um. */
    grid-template-columns: minmax(0, auto) minmax(5.5rem, max-content);
    gap: 0.25rem 0.4rem;
    margin: 0;
    font-size: 0.8125rem;
}

.inserat-card__daten dt {
    font-weight: 700;
}

.inserat-card__daten dd {
    margin: 0;
    text-wrap: pretty;
}

/* Ausstattungsmerkmale: gepflegte Liste, keine Fließtext-Aufzählung mehr */
.property-ausstattung {
    margin: 0;
    padding-left: 1.1rem;
}

.property-ausstattung li {
    margin-bottom: 0.35rem;
}

/* Hervorgehobene Ausstattungspunkte im Hero haben keine Bezeichnung
   und stehen deshalb über beide Spalten. */
.objektdaten__einzeln {
    grid-column: 1 / -1;
}

.inserat-card__details .objektdaten__lage {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}


/* 15. Footer
   ========================================================================== */

.site-footer {
    padding-block: 4rem;
    background-color: var(--color-red);
    color: var(--color-surface);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: var(--gutter);
}

@media (min-width: 992px) {
    .site-footer__inner {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer__brand {
        text-align: right;
    }
}

.site-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.875rem;
}

.site-footer__title {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 0.25rem;
}

.site-footer__nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.site-footer__nav a {
    text-decoration: underline;
}


/* 16. Helfer
   ========================================================================== */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100vh;
    left: 1rem;
    z-index: 100;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-media);
    background: var(--color-surface);
    color: var(--color-navy);
    font-size: 1rem;
}

.skip-link:focus {
    top: 1rem;
}

.print-only {
    display: none;
}

[hidden] {
    display: none !important;
}