/* =========================================================
    1. DESIGN TOKENS
    ========================================================= */

:root {
    --green-950: #183027;
    --green-900: #203a30;
    --green-800: #274538;
    --green-700: #365c4b;
    --green-100: #e9f0eb;

    --cream: #f7f4ec;
    --paper: #fffdf8;

    --terracotta: #a76549;
    --terracotta-dark: #874d38;

    --text: #25302b;
    --muted: #66716b;

    --border: #d9ded8;

    --focus: #c85c25;

    --max-width: 1180px;
    --radius: 18px;
    --radius-large: 24px;

    --shadow:
    0 12px 35px rgba(24, 48, 39, 0.09);
}


/* =========================================================
    2. RESET / BASE
    ========================================================= */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    margin: 0;

    background: var(--paper);
    color: var(--text);

    font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

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

img {
    display: block;
    width: 100%;
    height: auto;
}

a {
    color: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

::selection {
    background: var(--green-700);
    color: white;
}


/* =========================================================
    3. ACCESSIBILITY
    ========================================================= */

.skip-link {
    position: fixed;
    z-index: 1000;

    top: 0;
    left: 1rem;

    transform: translateY(-150%);

    padding: 0.75rem 1rem;

    background: var(--green-950);
    color: white;

    font-weight: 750;
    text-decoration: none;

    border-radius: 0 0 8px 8px;
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 4px;
    border-radius: 4px;
}

.visually-hidden {
    position: absolute !important;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);

    white-space: nowrap;
    border: 0;
}


/* =========================================================
    4. TYPOGRAPHY
    ========================================================= */

h1,
h2,
h3 {
    margin-top: 0;

    color: var(--green-950);

    font-family:
    Georgia,
    "Times New Roman",
    serif;

    font-weight: 500;
    line-height: 1.1;
}

h1 {
    max-width: 800px;

    margin-bottom: 1.25rem;

    font-size:
    clamp(2.8rem, 7vw, 5.8rem);

    letter-spacing: -0.04em;
}

h2 {
    margin-bottom: 1rem;

    font-size:
    clamp(2rem, 4vw, 3.4rem);

    letter-spacing: -0.025em;
}

h3 {
    margin-bottom: 0.5rem;

    font-size: 1.45rem;
}

p {
    margin-top: 0;
}

.eyebrow {
    margin-bottom: 0.65rem;

    color: var(--terracotta);

    font-size: 0.8rem;
    font-weight: 800;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}


/* =========================================================
    5. LAYOUT
    ========================================================= */

.container {
    width: min(
    calc(100% - 2rem),
    var(--max-width)
    );

    margin-inline: auto;
}

section {
    padding: 6rem 0;
}

.section-intro {
    max-width: 700px;
    margin-bottom: 3rem;
}

.section-intro > p:last-child {
    color: var(--muted);
    font-size: 1.05rem;
}

.two-column {
    display: grid;

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

    gap: clamp(2rem, 7vw, 6rem);

    align-items: center;
}


/* =========================================================
    6. BUTTONS
    ========================================================= */

.button {
    display: inline-flex;

    min-height: 48px;

    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    padding: 0.7rem 1.15rem;

    border: 2px solid transparent;
    border-radius: 999px;

    background: var(--green-800);
    color: white;

    font-weight: 750;
    text-decoration: none;

    transition:
    transform 180ms ease,
    background-color 180ms ease;
}

.button:hover {
    transform: translateY(-2px);
    background: var(--green-950);
}

.button.light {
    background: var(--paper);
    color: var(--green-950);
}

.button.light:hover {
    background: white;
}

.button.secondary {
    border-color: rgba(255, 255, 255, 0.7);
    background: transparent;
}

.button.secondary:hover {
    background: rgba(255, 255, 255, 0.12);
}


/* =========================================================
    7. HEADER
    ========================================================= */

header {
    position: sticky;
    top: 0;
    z-index: 50;

    background:
    rgba(255, 253, 248, 0.95);

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

    backdrop-filter: blur(12px);
}

.nav {
    min-height: 76px;

    display: flex;
    align-items: center;

    gap: 1rem;
}

.brand {
    flex-shrink: 0;

    color: var(--green-950);

    font-family:
    Georgia,
    "Times New Roman",
    serif;

    font-size: 1.3rem;
    font-weight: 700;

    line-height: 1.05;

    text-decoration: none;
}

.brand small {
    display: block;

    margin-top: 0.3rem;

    color: var(--muted);

    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 600;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.header-address {
    display: flex;
    flex-direction: column;

    margin-left: auto;
    margin-right: 1rem;

    color: var(--muted);

    font-size: 0.76rem;
    line-height: 1.4;
}

.header-address strong {
    color: var(--green-950);
    font-weight: 750;
}

.header-address a {
    text-decoration: none;
}

.header-address a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

nav ul {
    display: flex;
    align-items: center;
    gap: 1.25rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

nav a {
    font-size: 0.92rem;
    font-weight: 650;

    text-decoration: none;
}

nav a:hover {
    color: var(--terracotta);
}

.nav-cta {
    display: inline-flex;

    padding: 0.55rem 0.95rem;

    border-radius: 999px;

    background: var(--green-800);
    color: white;
}

.nav-cta:hover {
    color: white;
    background: var(--green-950);
}


/* =========================================================
    8. HERO
    ========================================================= */

.hero {
    min-height:
    min(760px, calc(100vh - 76px));

    display: grid;
    align-items: end;

    position: relative;
    isolation: isolate;

    overflow: hidden;

    background:
    linear-gradient(
        90deg,
        rgba(24, 48, 39, 0.91) 0%,
        rgba(24, 48, 39, 0.67) 42%,
        rgba(24, 48, 39, 0.12) 100%
    ),
    linear-gradient(
        0deg,
        rgba(24, 48, 39, 0.74),
        transparent 60%
    ),
    url("images/hagmann-landscape.jpg")
    center / cover;

    color: white;
}

.hero-inner {
    width: min(
    calc(100% - 2rem),
    var(--max-width)
    );

    margin-inline: auto;

    padding:
    7rem 0
    5rem;
}

.hero h1 {
    color: white;
}

.hero-copy {
    max-width: 650px;

    margin-bottom: 2rem;

    color: rgba(255, 255, 255, 0.92);

    font-size:
    clamp(1.05rem, 2vw, 1.25rem);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 0.75rem;
}


/* =========================================================
    9. STATUS / RETIREMENT NOTICE
    ========================================================= */

.notice-wrap {
    background: var(--green-100);
}

.notice {
    display: grid;

    grid-template-columns: auto 1fr;

    gap: 1.25rem;

    align-items: start;

    padding:
    2rem 0;
}

.notice-mark {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--green-800);
    color: white;

    font-weight: 800;
}

.notice h2 {
    margin-bottom: 0.45rem;

    font-family: inherit;
    font-size: 1.35rem;
    font-weight: 750;
}

.notice p {
    max-width: 800px;
    margin-bottom: 0;
}


/* =========================================================
    10. ABOUT
    ========================================================= */

.property-photo {
    min-height: 440px;

    border-radius: var(--radius);

    background:
    linear-gradient(
        135deg,
        rgba(39, 69, 56, 0.08),
        rgba(167, 101, 73, 0.16)
    ),
    url("images/hagmann-house.jpg")
    center / cover;

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


/* =========================================================
    11. ROOMS
    ========================================================= */

.rooms {
    background: var(--cream);
}

.room-grid {
    display: grid;

    grid-template-columns:
    repeat(4, 1fr);

    gap: 1rem;
}

.room {
    overflow: hidden;

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

    border-radius: var(--radius);

    background: var(--paper);
}

.room-image {
    aspect-ratio: 4 / 3;

    background-position: center;
    background-size: cover;
}

.room:nth-child(1) .room-image {
    background-image:
    url("images/mohnblume.jpg");
}

.room:nth-child(2) .room-image {
    background-image:
    url("images/sonnenblume.jpg");
}

.room:nth-child(3) .room-image {
    background-image:
    url("images/kornblume.jpg");
}

.room:nth-child(4) .room-image {
    background-image:
    url("images/margarite.jpg");
}

.room-content {
    padding: 1.35rem;
}

.room h3 {
    margin-bottom: 0.5rem;

    font-size: 1.35rem;
}

.room p {
    margin-bottom: 0;

    color: var(--muted);

    font-size: 0.95rem;
}


/* =========================================================
    12. AMENITIES
    ========================================================= */

.amenity-grid {
    display: grid;

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

    gap: 1rem;
}

.amenity {
    padding: 1.5rem;

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

    border-radius: var(--radius);

    background: var(--paper);
}

.amenity-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    margin-bottom: 1rem;

    border-radius: 12px;

    background: var(--green-100);
    color: var(--green-800);

    font-size: 1.05rem;
    font-weight: 800;
}

.amenity h3 {
    margin-bottom: 0.35rem;

    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 750;
}

.amenity p {
    margin-bottom: 0;

    color: var(--muted);

    font-size: 0.92rem;
}


/* =========================================================
    13. REGION
    ========================================================= */

.region {
    color: white;
    background: var(--green-800);
}

.region h2,
.region h3 {
    color: white;
}

.region .eyebrow {
    color: #e3b09b;
}

.region .section-intro > p:last-child {
    color: rgba(255, 255, 255, 0.78);
}

.places {
    display: grid;

    grid-template-columns:
    repeat(4, 1fr);

    gap: 1rem;
}

.place {
    min-height: 180px;

    display: flex;
    flex-direction: column;
    justify-content: end;

    padding: 1.4rem;

    border:
    1px solid rgba(255, 255, 255, 0.16);

    border-radius: var(--radius);

    background:
    rgba(255, 255, 255, 0.06);
}

.place h3 {
    margin-bottom: 0.35rem;
}

.place p {
    margin-bottom: 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: 0.9rem;
}


/* =========================================================
    14. CONTACT / MAP
    ========================================================= */

.contact {
    background: var(--cream);
}

.contact-card {
    display: grid;

    grid-template-columns:
    1fr 1fr;

    overflow: hidden;

    border-radius: var(--radius-large);

    background: var(--green-950);

    color: white;

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

.contact-copy {
    padding:
    clamp(2rem, 5vw, 4rem);
}

.contact-copy h2 {
    color: white;
}

.contact-copy .eyebrow {
    color: #e3b09b;
}

.contact-copy > p {
    color: rgba(255, 255, 255, 0.78);
}

.contact-details {
    display: grid;
    gap: 1rem;

    margin: 2rem 0;
}

.contact-detail-label {
    font-size: 0.78rem;

    color:
    rgba(255, 255, 255, 0.6);

    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.contact-details a {
    color: white;

    font-size: 1.05rem;
    font-weight: 700;

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

.contact-address {
    color: white;
    font-weight: 700;
}

.map-container {
    min-height: 420px;

    position: relative;

    background: #dfe5df;
}

.map-container iframe {
    display: block;

    width: 100%;
    height: 420px;

    border: 0;
}

.map-link {
    position: absolute;

    left: 1rem;
    bottom: 1rem;

    display: inline-flex;

    min-height: 48px;

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

    padding:
    0.7rem 1rem;

    border-radius: 999px;

    background: white;
    color: var(--green-950);

    font-weight: 750;
    text-decoration: none;

    box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.18);
}

.map-link:hover {
    background: var(--green-100);
}


/* =========================================================
    15. FOOTER
    ========================================================= */

footer {
    padding: 2rem 0;

    background: #12251e;
    color: rgba(255, 255, 255, 0.68);

    font-size: 0.85rem;
}

.footer-inner {
    display: flex;

    flex-wrap: wrap;

    gap: 1rem 2rem;

    align-items: center;
    justify-content: space-between;
}

footer a {
    color: white;
}


/* =========================================================
    16. TABLET
    ========================================================= */

@media (max-width: 1000px) {
    .room-grid {
    grid-template-columns:
        repeat(2, 1fr);
    }

    .amenity-grid {
    grid-template-columns:
        repeat(2, 1fr);
    }

    .places {
    grid-template-columns:
        repeat(2, 1fr);
    }

    .two-column {
    gap: 3rem;
    }
}


/* =========================================================
    17. SMALL TABLET
    ========================================================= */

@media (max-width: 850px) {
    .header-address {
    display: none;
    }

    .nav {
    justify-content: space-between;
    }

    nav ul {
    gap: 0.7rem;
    }

    .two-column,
    .contact-card {
    grid-template-columns: 1fr;
    }

    .property-photo {
    min-height: 360px;
    }

    .map-container,
    .map-container iframe {
    min-height: 360px;
    height: 360px;
    }
}


/* =========================================================
    18. PHONE
    ========================================================= */

@media (max-width: 680px) {
    html {
    scroll-padding-top: 76px;
    }

    header {
    position: sticky;
    }

    .nav {
    min-height: 76px;

    padding:
        0.8rem 0;
    }

    nav ul {
    justify-content: flex-end;
    }

    nav li:not(:last-child) {
    display: none;
    }

    .nav-cta {
    display: inline-flex;
    }

    .hero {
    min-height: 680px;

    background:
        linear-gradient(
        0deg,
        rgba(24, 48, 39, 0.93),
        rgba(24, 48, 39, 0.2)
        ),
        url("images/hagmann-landscape.jpg")
        center / cover;
    }

    .hero-inner {
    padding:
        5rem 0
        3rem;
    }

    .hero-actions {
    display: grid;
    }

    .hero-actions .button {
    width: 100%;
    }

    section {
    padding: 4.5rem 0;
    }

    .notice {
    grid-template-columns: 1fr;
    }

    .room-grid,
    .amenity-grid,
    .places {
    grid-template-columns: 1fr;
    }

    .room-image {
    aspect-ratio: 16 / 10;
    }

    .place {
    min-height: 140px;
    }

    .property-photo {
    min-height: 300px;
    }

    .map-container,
    .map-container iframe {
    min-height: 320px;
    height: 320px;
    }

    .map-link {
    right: 1rem;
    left: 1rem;

    width: auto;
    }

    .footer-inner {
    align-items: flex-start;
    flex-direction: column;
    }
}


/* =========================================================
    19. REDUCED MOTION
    ========================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
    scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    }
}


/* =========================================================
    20. HIGH CONTRAST / FORCED COLORS
    ========================================================= */

@media (forced-colors: active) {
    .button,
    .nav-cta,
    .map-link {
    border: 2px solid ButtonText;
    }

    :focus-visible {
    outline: 3px solid Highlight;
    }
}