/* ===================================================
   Villa Elbheimat – Stylesheet
   Farbpalette abgeleitet aus den Fotos der Wohnung:
   Olivgrün der Akzentwand, warme Holztöne, Cremetöne
   =================================================== */

/* ── Lokale Schriften (kein Google Fonts CDN) ────── */

@font-face {
   font-family: 'Lato';
   font-style: normal;
   font-weight: 300;
   font-display: swap;
   src: url('../fonts/lato-300-ext.woff2') format('woff2');
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
   font-family: 'Lato';
   font-style: normal;
   font-weight: 300;
   font-display: swap;
   src: url('../fonts/lato-300.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
   font-family: 'Lato';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('../fonts/lato-400-ext.woff2') format('woff2');
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
   font-family: 'Lato';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('../fonts/lato-400.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
   font-family: 'Lato';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url('../fonts/lato-700-ext.woff2') format('woff2');
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
   font-family: 'Lato';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url('../fonts/lato-700.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
   font-family: 'Playfair Display';
   font-style: normal;
   font-weight: 400 700;
   font-display: swap;
   src: url('../fonts/playfair-ext.woff2') format('woff2');
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
   font-family: 'Playfair Display';
   font-style: normal;
   font-weight: 400 700;
   font-display: swap;
   src: url('../fonts/playfair.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
   font-family: 'Playfair Display';
   font-style: italic;
   font-weight: 400;
   font-display: swap;
   src: url('../fonts/playfair-italic-ext.woff2') format('woff2');
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
   font-family: 'Playfair Display';
   font-style: italic;
   font-weight: 400;
   font-display: swap;
   src: url('../fonts/playfair-italic.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

:root {
   --sage:        #4e5f52;
   --sage-dark:   #3a4a3e;
   --cream:       #f3ede3;
   --cream-dark:  #e8e0d2;
   --gold:        #c8a355;
   --gold-dark:   #a8843a;
   --wood:        #8c6e4a;
   --text:        #2b2925;
   --text-muted:  #6b6560;
   --white:       #ffffff;

   --font-heading: 'Playfair Display', Georgia, serif;
   --font-body:    'Lato', Arial, sans-serif;

   --nav-height: 72px;
}

html {
   scroll-behavior: smooth;
}

body {
   font-family: var(--font-body);
   font-size: 1rem;
   line-height: 1.7;
   color: var(--text);
   background-color: var(--cream);
}

/* ── Navigation ─────────────────────────────────── */

.site-header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 200;
}

.main-nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 2.5rem;
   height: var(--nav-height);
   background: rgba(30, 30, 25, 0.30);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   transition: background 0.3s;
}

.main-nav.scrolled {
   background: rgba(42, 45, 38, 0.92);
}

.nav-logo {
   font-family: var(--font-heading);
   font-size: 1.35rem;
   font-weight: 600;
   color: var(--white);
   letter-spacing: 0.06em;
   white-space: nowrap;
}

.nav-links {
   list-style: none;
   display: flex;
   gap: 2.5rem;
}

.nav-links a {
   font-family: var(--font-body);
   font-size: 0.82rem;
   font-weight: 400;
   color: rgba(255, 255, 255, 0.92);
   text-decoration: none;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a:focus,
.nav-links a.nav-active {
   color: var(--gold);
   outline: none;
}

/* nav-logo als Link (Unterseiten) */
a.nav-logo {
   text-decoration: none;
}

a.nav-logo:hover {
   color: var(--gold);
}

.nav-toggle {
   display: none;
   flex-direction: column;
   justify-content: center;
   gap: 6px;
   width: 36px;
   height: 36px;
   background: none;
   border: none;
   cursor: pointer;
   padding: 4px;
}

.nav-toggle span {
   display: block;
   width: 24px;
   height: 1.5px;
   background: var(--white);
   transition: transform 0.3s, opacity 0.3s;
   transform-origin: center;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ── Hero ────────────────────────────────────────── */

.hero {
   position: relative;
   height: 100vh;
   min-height: 600px;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   display: flex;
   align-items: center;
   justify-content: center;
}

.hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.30) 0%,
      rgba(20, 25, 20, 0.55) 60%,
      rgba(20, 25, 20, 0.70) 100%
   );
}

.hero-content {
   position: relative;
   z-index: 1;
   text-align: center;
   color: var(--white);
   padding: 1.5rem 2rem;
   max-width: 900px;
   width: 100%;
}

.hero-eyebrow {
   font-family: var(--font-body);
   font-size: 0.82rem;
   font-weight: 300;
   letter-spacing: 0.28em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.75);
   margin-bottom: 0.6rem;
}

.hero-title {
   font-family: var(--font-heading);
   font-size: clamp(2.8rem, 8vw, 6rem);
   font-weight: 700;
   letter-spacing: 0.03em;
   line-height: 1.1;
   text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
   margin-bottom: 0.6rem;
}

.hero-subtitle {
   font-family: var(--font-body);
   font-size: clamp(0.95rem, 2vw, 1.2rem);
   font-weight: 300;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.82);
   margin-bottom: 3rem;
}

/* ── Navigations-Kacheln ─────────────────────────── */

.hero-tiles {
   display: flex;
   gap: 1rem;
   justify-content: center;
   flex-wrap: wrap;
}

.tile {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   color: var(--white);
   padding: 1rem 1.8rem;
   min-width: 150px;
   border: 1px solid rgba(255, 255, 255, 0.45);
   background: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   transition: background 0.25s, border-color 0.25s, transform 0.25s;
}

.tile:hover,
.tile:focus {
   background: rgba(200, 163, 85, 0.25);
   border-color: var(--gold);
   transform: translateY(-4px);
   outline: none;
}

.tile--accent {
   background: rgba(200, 163, 85, 0.20);
   border-color: var(--gold);
}

.tile--accent:hover,
.tile--accent:focus {
   background: var(--gold);
   color: var(--text);
}

.tile-label {
   font-family: var(--font-body);
   font-size: 0.80rem;
   font-weight: 400;
   letter-spacing: 0.16em;
   text-transform: uppercase;
}

/* ── Allgemeine Inhaltsseiten (für spätere Unterseiten) ── */

.page-content {
   max-width: 960px;
   margin: 0 auto;
   padding: calc(var(--nav-height) + 3rem) 2rem 4rem;
}

.page-title {
   font-family: var(--font-heading);
   font-size: clamp(2rem, 5vw, 3rem);
   font-weight: 600;
   color: var(--sage-dark);
   margin-bottom: 2rem;
}

.page-title::after {
   content: '';
   display: block;
   width: 50px;
   height: 2px;
   background: var(--gold);
   margin-top: 0.6rem;
}

/* ── Seiten-Sektionen ────────────────────────────── */

.section {
   padding: 4rem 2rem;
}

.section-inner {
   max-width: 960px;
   margin: 0 auto;
}

.section--alt {
   background: var(--cream-dark);
}

.section-heading {
   font-family: var(--font-heading);
   font-size: clamp(1.5rem, 3vw, 2rem);
   font-weight: 600;
   color: var(--sage-dark);
   margin-bottom: 1.5rem;
}

.section-heading::after {
   content: '';
   display: block;
   width: 40px;
   height: 2px;
   background: var(--gold);
   margin-top: 0.5rem;
}

/* Zweispaltige Intro-Sektion */
.intro-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 3rem;
   align-items: center;
}

.intro-text p {
   color: var(--text-muted);
   margin-bottom: 1rem;
}

.intro-text p:last-child {
   margin-bottom: 0;
}

.intro-image {
   width: 100%;
   height: 340px;
   object-fit: cover;
}

/* ── Lightbox ────────────────────────────────────── */

.lightbox {
   display: none;
   position: fixed;
   inset: 0;
   z-index: 500;
   background: rgba(0, 0, 0, 0.92);
   align-items: center;
   justify-content: center;
}

.lightbox.active {
   display: flex;
}

.lightbox-figure {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   max-width: 90vw;
   max-height: 90vh;
}

.lightbox-img {
   max-width: 90vw;
   max-height: 80vh;
   object-fit: contain;
   display: block;
   user-select: none;
}

.lightbox-caption {
   color: rgba(255, 255, 255, 0.75);
   font-size: 0.82rem;
   letter-spacing: 0.10em;
   text-transform: uppercase;
   margin-top: 0.8rem;
   text-align: center;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
   position: absolute;
   background: none;
   border: none;
   color: var(--white);
   cursor: pointer;
   line-height: 1;
   z-index: 1;
   transition: color 0.2s;
   -webkit-tap-highlight-color: transparent;
}

.lightbox-close {
   top: 1rem;
   right: 1rem;
   font-size: 2.2rem;
   padding: 0.4rem 0.6rem;
}

.lightbox-prev,
.lightbox-next {
   top: 50%;
   transform: translateY(-50%);
   font-size: 3.5rem;
   padding: 0.5rem 0.8rem;
}

.lightbox-prev { left: 0; }
.lightbox-next { right: 0; }

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
   color: var(--gold);
}

.lightbox-counter {
   position: absolute;
   bottom: 1rem;
   left: 50%;
   transform: translateX(-50%);
   color: rgba(255, 255, 255, 0.55);
   font-family: var(--font-body);
   font-size: 0.78rem;
   letter-spacing: 0.14em;
   white-space: nowrap;
}

/* ── Video ───────────────────────────────────────── */

.video-player {
   display: block;
   width: 100%;
   max-width: 380px;
   aspect-ratio: 9 / 16;
   object-fit: cover;
   margin: 0 auto;
   border-radius: 4px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* ── Fotogalerie ─────────────────────────────────── */

.gallery {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 0.5rem;
}

.gallery-item {
   position: relative;
   overflow: hidden;
   aspect-ratio: 4 / 3;
   cursor: zoom-in;
}

.gallery-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.45s ease;
}

.gallery-item:hover img {
   transform: scale(1.05);
}

.gallery-caption {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 1.2rem 0.8rem 0.6rem;
   background: linear-gradient(transparent, rgba(30, 40, 28, 0.65));
   color: var(--white);
   font-size: 0.78rem;
   letter-spacing: 0.10em;
   text-transform: uppercase;
   opacity: 0;
   transition: opacity 0.3s;
}

.gallery-item:hover .gallery-caption {
   opacity: 1;
}

/* ── Ausstattungsliste ───────────────────────────── */

.amenities-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
   gap: 0.75rem;
   margin-top: 0.5rem;
}

.amenity {
   background: var(--white);
   padding: 0.85rem 1.1rem;
   font-size: 0.88rem;
   color: var(--text);
   border-left: 3px solid var(--gold);
}

a.amenity {
   text-decoration: none;
   display: block;
   transition: border-left-color 0.2s, color 0.2s;
}

a.amenity:hover {
   border-left-color: var(--sage);
   color: var(--sage);
}

/* ── Unterseiten – Navigation immer dunkel ──────── */

body.subpage .main-nav {
   background: rgba(42, 45, 38, 0.96);
}

/* ── Unterseiten – Seitenkopf ───────────────────── */

.subpage-header {
   background: var(--sage-dark);
   color: var(--white);
   padding: calc(var(--nav-height) + 3rem) 2rem 3rem;
   text-align: center;
}

.subpage-header .page-title {
   font-family: var(--font-heading);
   font-size: clamp(2rem, 5vw, 3rem);
   font-weight: 600;
   color: var(--white);
   margin-bottom: 0.8rem;
}

.subpage-header .page-title::after {
   content: '';
   display: block;
   width: 48px;
   height: 2px;
   background: var(--gold);
   margin: 0.6rem auto 0;
}

.subpage-header .page-lead {
   font-size: 1rem;
   font-weight: 300;
   color: rgba(255, 255, 255, 0.80);
   max-width: 600px;
   margin: 0.8rem auto 0;
   letter-spacing: 0.02em;
}

/* ── Kontaktformular ─────────────────────────────── */

.form-section {
   padding: 4rem 2rem 5rem;
}

.form-container {
   max-width: 720px;
   margin: 0 auto;
}

.contact-form {
   display: flex;
   flex-direction: column;
   gap: 1.4rem;
}

.form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1.4rem;
}

.form-row--ort {
   grid-template-columns: 1fr 2fr;
}

.form-group {
   display: flex;
   flex-direction: column;
   gap: 0.45rem;
}

.form-group label {
   font-family: var(--font-body);
   font-size: 0.82rem;
   font-weight: 700;
   letter-spacing: 0.10em;
   text-transform: uppercase;
   color: var(--sage-dark);
}

.required {
   color: var(--gold-dark);
}

.form-group input,
.form-group textarea {
   font-family: var(--font-body);
   font-size: 0.98rem;
   color: var(--text);
   background: var(--white);
   border: 1px solid var(--cream-dark);
   padding: 0.7rem 1rem;
   width: 100%;
   transition: border-color 0.2s, box-shadow 0.2s;
   appearance: none;
   -webkit-appearance: none;
   border-radius: 0;
}

.form-group input:focus,
.form-group textarea:focus {
   outline: none;
   border-color: var(--gold);
   box-shadow: 0 0 0 3px rgba(200, 163, 85, 0.18);
}

.form-group input.invalid,
.form-group textarea.invalid {
   border-color: #b94040;
}

.form-group textarea {
   resize: vertical;
   min-height: 150px;
}

.form-group input[type="date"] {
   cursor: pointer;
}

.required-note {
   font-size: 0.80rem;
   color: var(--text-muted);
   margin-top: -0.4rem;
}

.btn-submit {
   align-self: flex-start;
   font-family: var(--font-body);
   font-size: 0.82rem;
   font-weight: 700;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--text);
   background: var(--gold);
   border: 2px solid var(--gold);
   padding: 0.85rem 2.4rem;
   cursor: pointer;
   transition: background 0.2s, color 0.2s;
}

.btn-submit:hover,
.btn-submit:focus {
   background: var(--gold-dark);
   border-color: var(--gold-dark);
   outline: none;
}

/* ── Statusmeldungen (Erfolg / Fehler aus Perl) ──── */

.status-box {
   max-width: 720px;
   margin: 4rem auto;
   padding: 2.5rem;
   text-align: center;
}

.status-box--success {
   border-top: 4px solid var(--sage);
}

.status-box--error {
   border-top: 4px solid #b94040;
}

.status-box h2 {
   font-family: var(--font-heading);
   font-size: 2rem;
   font-weight: 600;
   color: var(--sage-dark);
   margin-bottom: 0.8rem;
}

.status-box p {
   color: var(--text-muted);
   margin-bottom: 0.5rem;
}

.status-box ul {
   text-align: left;
   display: inline-block;
   margin: 0.5rem 0 1rem;
   color: #b94040;
}

.status-box ul li {
   margin-bottom: 0.3rem;
}

.status-box .btn-back {
   display: inline-block;
   margin-top: 1.2rem;
   font-family: var(--font-body);
   font-size: 0.82rem;
   font-weight: 700;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--white);
   background: var(--sage);
   padding: 0.75rem 2rem;
   text-decoration: none;
   transition: background 0.2s;
}

.status-box .btn-back:hover {
   background: var(--sage-dark);
}

/* ── Rechtliche Seiten (Impressum, Datenschutz) ──── */

.legal-text h2 {
   font-family: var(--font-heading);
   font-size: 1.2rem;
   font-weight: 600;
   color: var(--sage-dark);
   margin: 2rem 0 0.6rem;
}

.legal-text h2:first-child {
   margin-top: 0;
}

.legal-text p {
   color: var(--text-muted);
   margin-bottom: 0.8rem;
}

.legal-text ul {
   color: var(--text-muted);
   margin: 0.4rem 0 0.8rem 1.4rem;
}

.legal-text ul li {
   margin-bottom: 0.3rem;
}

.legal-text a {
   color: var(--sage);
   text-decoration: underline;
}

/* ── Footer ──────────────────────────────────────── */

.site-footer {
   background: var(--sage-dark);
   color: rgba(255, 255, 255, 0.75);
   text-align: center;
   padding: 1.5rem 2rem;
   font-size: 0.82rem;
   letter-spacing: 0.06em;
}

.site-footer a {
   color: var(--gold);
   text-decoration: none;
}

/* ── Responsive ─────────────────────────────────── */

@media (max-width: 768px) {
   .intro-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
   }

   .intro-image {
      height: 260px;
      order: -1;
   }

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

   .form-row,
   .form-row--ort {
      grid-template-columns: 1fr;
   }

   .btn-submit {
      align-self: stretch;
      text-align: center;
   }

   .main-nav {
      padding: 0 1.5rem;
   }

   .nav-links {
      display: none;
      flex-direction: column;
      gap: 0;
      position: absolute;
      top: var(--nav-height);
      left: 0;
      right: 0;
      background: rgba(42, 45, 38, 0.97);
      padding: 0.5rem 0 1rem;
   }

   .nav-links.open {
      display: flex;
   }

   .nav-links li a {
      display: block;
      padding: 0.9rem 1.5rem;
      font-size: 0.88rem;
   }

   .nav-toggle {
      display: flex;
   }

   .hero-subtitle {
      margin-bottom: 2rem;
   }

   .hero-tiles {
      gap: 0.75rem;
   }

   .tile {
      min-width: 130px;
      padding: 0.9rem 1.2rem;
   }
}

@media (max-width: 480px) {
   .hero-tiles {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.65rem;
      width: 100%;
      max-width: 340px;
      margin: 0 auto;
   }

   .tile {
      min-width: unset;
      width: 100%;
   }

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

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

/* ── Umgebung – Ausflugskarten ───────────────────── */

.surroundings-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
   margin-top: 0.5rem;
}

.surroundings-card {
   background: var(--white);
   padding: 1.8rem;
   border-top: 3px solid var(--sage);
}

.surroundings-card h3 {
   font-family: var(--font-heading);
   font-size: 1.05rem;
   font-weight: 600;
   color: var(--sage-dark);
   margin-bottom: 0.9rem;
   padding-bottom: 0.7rem;
   border-bottom: 1px solid var(--cream-dark);
}

.surroundings-card ul {
   list-style: none;
   padding: 0;
}

.surroundings-card ul li {
   font-size: 0.92rem;
   color: var(--text-muted);
   padding: 0.45rem 0;
   border-bottom: 1px solid var(--cream-dark);
   display: flex;
   align-items: baseline;
   gap: 0.55rem;
}

.surroundings-card ul li::before {
   content: '–';
   color: var(--gold);
   flex-shrink: 0;
   font-size: 0.85rem;
}

.surroundings-card ul li:last-child {
   border-bottom: none;
}

.distance-note {
   font-size: 0.78rem;
   color: var(--gold-dark);
   font-weight: 400;
   display: block;
}

.highlight-note {
   font-size: 0.80rem;
   color: var(--sage);
   font-style: italic;
}

/* ── Umgebung – Restaurantkarten ─────────────────── */

.restaurant-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
   margin-top: 0.5rem;
}

.restaurant-card {
   background: var(--white);
   padding: 1.4rem;
   border-bottom: 3px solid var(--gold);
}

.restaurant-card h3 {
   font-family: var(--font-heading);
   font-size: 1.05rem;
   font-weight: 600;
   color: var(--sage-dark);
   margin-bottom: 0.6rem;
}

.restaurant-card h3 a {
   color: var(--text);
   text-decoration: none;
   transition: color 0.2s;
}

.restaurant-card h3 a:hover {
   color: var(--sage);
}

.restaurant-card p {
   font-size: 0.90rem;
   color: var(--text-muted);
   line-height: 1.55;
}

/* ── Externer-Link-Indikator ─────────────────────── */

.restaurant-card h3 a::after,
a.amenity::after {
   content: '';
   display: inline-block;
   width: 0.7em;
   height: 0.7em;
   margin-left: 0.32em;
   vertical-align: middle;
   background-color: currentColor;
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M5 2H2v8h8V7M7 1h4v4M11 1l-5 5' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M5 2H2v8h8V7M7 1h4v4M11 1l-5 5' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   -webkit-mask-size: contain;
   mask-size: contain;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   opacity: 0.75;
   transition: opacity 0.2s;
}

@media (max-width: 768px) {
   .surroundings-grid {
      grid-template-columns: 1fr;
   }

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

@media (max-width: 480px) {
   .restaurant-grid {
      grid-template-columns: 1fr;
   }
}

/* ── Verfügbarkeitskalender ───────────────────────── */

.kalender-widget {
   max-width: 720px;
   margin: 0 auto;
}

.kalender-steuerung {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   margin-bottom: 1.8rem;
}

.kalender-nav {
   background: var(--sage);
   color: var(--white);
   border: none;
   width: 36px;
   height: 36px;
   font-size: 1.3rem;
   line-height: 1;
   cursor: pointer;
   transition: background 0.2s;
}

.kalender-nav:hover,
.kalender-nav:focus {
   background: var(--sage-dark);
   outline: none;
}

.kalender-monatswahl {
   font-family: var(--font-body);
   font-size: 0.88rem;
   color: var(--text);
   background: var(--white);
   border: 1px solid var(--cream-dark);
   padding: 0.5rem 0.8rem;
   cursor: pointer;
   appearance: none;
   -webkit-appearance: none;
   border-radius: 0;
}

.kalender-monate {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2.5rem;
}

.kalender-monatsname {
   font-family: var(--font-heading);
   font-size: 1.05rem;
   font-weight: 600;
   color: var(--sage-dark);
   text-align: center;
   margin-bottom: 0.8rem;
}

.kalender-wochentage {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   margin-bottom: 0.4rem;
}

.kalender-wochentage span {
   text-align: center;
   font-size: 0.68rem;
   font-weight: 700;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: var(--text-muted);
}

.kalender-tage {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 3px;
}

.kalender-tag {
   display: flex;
   align-items: center;
   justify-content: center;
   aspect-ratio: 1;
   font-size: 0.82rem;
   color: var(--text);
}

.kalender-tag--leer {
   background: none;
}

.kalender-tag--frei {
   background: rgba(78, 95, 82, 0.16);
}

.kalender-tag--belegt {
   background: rgba(185, 64, 64, 0.18);
   color: #7a2c2c;
}

.kalender-legende {
   display: flex;
   justify-content: center;
   gap: 1.5rem;
   margin-top: 1.8rem;
   font-size: 0.82rem;
   color: var(--text-muted);
}

.kalender-legende-eintrag {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
}

.kalender-swatch {
   display: inline-block;
   width: 14px;
   height: 14px;
}

.kalender-swatch--frei   { background: rgba(78, 95, 82, 0.35); }
.kalender-swatch--belegt { background: rgba(185, 64, 64, 0.35); }

@media (max-width: 640px) {
   .kalender-monate {
      grid-template-columns: 1fr;
      gap: 2.5rem;
   }
}

/* ── Admin: Buchungsverwaltung ────────────────────── */

.admin-tabelle {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 2.5rem;
}

.admin-tabelle th,
.admin-tabelle td {
   text-align: left;
   padding: 0.7rem 0.9rem;
   border-bottom: 1px solid var(--cream-dark);
   font-size: 0.9rem;
}

.admin-tabelle th {
   font-family: var(--font-body);
   font-size: 0.78rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--sage-dark);
}

.admin-tabelle td.admin-hinweis {
   color: var(--text-muted);
}

.btn-loeschen {
   font-family: var(--font-body);
   font-size: 0.75rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: #b94040;
   background: none;
   border: 1px solid #b94040;
   padding: 0.4rem 0.9rem;
   cursor: pointer;
   transition: background 0.2s, color 0.2s;
}

.btn-loeschen:hover {
   background: #b94040;
   color: var(--white);
}

.btn-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 2.4rem;
   height: 2.4rem;
   flex: none;
   background: var(--sage);
   color: var(--white);
   border: none;
   border-radius: 4px;
   cursor: pointer;
   text-decoration: none;
   transition: background 0.2s;
}

.btn-icon:hover {
   background: var(--sage-dark);
}

.btn-icon svg {
   width: 18px;
   height: 18px;
}

.admin-leer {
   color: var(--text-muted);
   font-style: italic;
   margin-bottom: 2rem;
}

.admin-logout {
   font-size: 0.8rem;
   color: var(--text-muted);
   text-decoration: underline;
}