/* Pension Dorn — front-end styles (design cloned & adapted; content from PHP fields). */

:root { --cream:#f7f1e6; --cream-light:#fbf8f2; --ink:#292522; --muted:#686665; --green:#2e4a34; --green-dark:#203c29; --line:#e2dfda; --card:#fffdfa; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size:16px; line-height:1.42; }
button, input, select, textarea { font:inherit; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--green); }
h1,h2,h3,p { margin-top:0; }
.container { width:min(1120px, calc(100% - 48px)); margin-inline:auto; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:16px; top:12px; background:#fff; padding:8px 14px; border-radius:10px; z-index:100; }

/* Buttons */
.button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:9px 16px; border:1px solid transparent; border-radius:13px; background:var(--green); color:#fff; cursor:pointer; font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap; }
.button:hover { background:var(--green-dark); color:#fff; }
.button.secondary { background:rgba(255,255,255,.92); color:var(--green); border-color:rgba(0,0,0,.08); }
.button.ghost { background:transparent; color:var(--green); }

/* Header */
.site-header { position:sticky; top:0; z-index:20; min-height:100px; display:flex; align-items:center; background:#fff; border-bottom:1px solid rgba(42,37,33,.06); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; color:var(--ink); text-decoration:none; gap:13px; }
.brand svg, .brand-mark { width:52px; height:52px; flex:0 0 auto; color:var(--green); border-radius:13px; }
.brand-logo { width:240px; height:64px; flex:0 0 auto; object-fit:contain; }
.brand-custom { display:flex; align-items:center; }
.brand-custom .custom-logo-link { display:inline-flex; }
.brand-custom .custom-logo { max-height:60px; width:auto; height:auto; display:block; }
.brand strong { display:block; font-size:21px; letter-spacing:-.6px; line-height:1.1; }
.brand small { display:block; margin-top:2px; font-size:13px; color:#716e69; }
.desktop-nav { display:flex; align-items:center; gap:30px; margin-left:auto; }
.desktop-nav a { color:#56514d; text-decoration:none; font-size:15px; font-weight:650; }
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { color:var(--green); }
.header-cta { flex:0 0 auto; }
.mobile-menu { display:none; }

/* Hero */
.hero { position:relative; min-height:460px; display:flex; align-items:flex-start; overflow:hidden; color:#fff; background:#2c352c center 52%/cover no-repeat; }
.hero::before { content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(90deg, rgba(11,25,18,.72) 0%, rgba(15,25,17,.46) 42%, rgba(20,23,20,.24) 72%, rgba(20,20,20,.14) 100%); }
.hero::after { content:""; position:absolute; inset:auto 0 0; z-index:0; height:145px; background:linear-gradient(transparent, var(--cream)); }
.hero-content { position:relative; z-index:1; padding-top:88px; padding-bottom:48px; }
.hero.subhero { min-height:300px; }
.hero.subhero .hero-content { padding-top:60px; }
.eyebrow { display:inline-block; border-radius:100px; padding:5px 13px; background:rgba(39,45,39,.58); font-size:13px; font-weight:650; color:#fff; margin:0 0 4px; }
.hero h1 { max-width:720px; margin:18px 0 16px; font-size:clamp(30px,5vw,48px); line-height:1.11; letter-spacing:-1.4px; font-weight:350; }
.hero-copy { max-width:560px; margin-bottom:26px; font-size:18px; color:#f5f5f3; }
.actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* Cards */
.card { background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:0 2px 3px rgba(36,29,20,.09); }
.intro { position:relative; z-index:2; }
.intro-card { padding:33px 35px 29px; margin-top:-46px; }
.intro-card p { color:var(--muted); margin-bottom:11px; }
.intro .actions { margin-top:24px; }
.content { padding-block:42px 78px; }
h2 { font-weight:420; letter-spacing:-.8px; font-size:clamp(23px,3vw,30px); line-height:1.15; margin-bottom:10px; }
h3 { font-size:20px; line-height:1.2; letter-spacing:-.4px; margin-bottom:10px; font-weight:700; }
.section-head { margin-bottom:24px; }
.section-head h2 { margin-bottom:8px; }
.section-head p { color:var(--muted); max-width:640px; margin:0; }

/* Feature grid */
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:42px; }
.feature { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.feature img { height:170px; width:100%; object-fit:cover; }
.feature-body { padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.feature p { color:var(--muted); font-size:15px; line-height:1.34; margin-bottom:16px; flex:1; }
.text-link { font-size:14px; font-weight:750; color:#53705d; text-decoration:none; }

/* Rooms */
.room { display:grid; grid-template-columns:minmax(0,420px) 1fr; gap:0; overflow:hidden; margin-bottom:22px; }
.room img { height:100%; width:100%; min-height:260px; max-height:360px; object-fit:cover; }
.room-body { padding:30px 34px; }
.room-body h3 { font-size:22px; }
.room-body .price { color:var(--green); font-weight:750; font-size:17px; margin:2px 0 12px; }
.room-body ul { margin:0; padding-left:18px; color:var(--muted); font-size:15px; line-height:1.5; }

/* Price / distance tables */
.price-card { padding:30px 34px; margin-bottom:22px; }
.price-table, .dist-table { width:100%; border-collapse:collapse; }
.price-table th, .price-table td, .dist-table td { text-align:left; padding:12px 8px; border-bottom:1px solid var(--line); font-size:15px; vertical-align:top; }
.price-table th { color:#625f5c; font-weight:700; }
.price-table td.amount, .dist-table td.km { color:var(--green); font-weight:700; white-space:nowrap; text-align:right; }
.price-note { color:var(--muted); font-size:14px; margin-top:14px; }

/* Amenities */
.amenities { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px 20px; }
.amenities li { position:relative; padding-left:22px; color:var(--muted); font-size:15px; }
.amenities li::before { content:""; position:absolute; left:0; top:.55em; width:10px; height:10px; border-radius:50%; background:var(--green); opacity:.85; }

/* Gallery */
.gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.gallery img { aspect-ratio:4/3; object-fit:cover; border-radius:14px; border:1px solid var(--line); width:100%; }
.room-gallery-block { margin:-2px 0 28px; }
.room-gallery-block h3 { margin-bottom:14px; }
.room-gallery img { aspect-ratio:3/4; }
.apartment-gallery-block, .region-gallery-block { margin:38px 0 42px; }
.apartment-gallery { grid-template-columns:repeat(3,1fr); }
.apartment-gallery img { aspect-ratio:4/3; }
.region-gallery { grid-template-columns:repeat(3,1fr); }
.region-gallery img { aspect-ratio:4/3; }
.apartment-section { scroll-margin-top:110px; margin-top:64px; padding-top:58px; border-top:1px solid var(--line); }
.apartment-section > .section-head .eyebrow { color:var(--green-dark); background:#e3eadf; border:1px solid #c8d5c7; }

/* Destination cards */
.dest-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:42px; }
.dest { overflow:hidden; }
.dest-image { display:block; width:100%; height:190px; object-fit:cover; }
.dest-body { padding:20px 22px 19px; }
.dest .tag { display:inline-block; font-size:12px; font-weight:700; color:#53705d; background:#eef1ec; border-radius:100px; padding:4px 11px; margin-bottom:12px; }
.dest h3 { margin-bottom:8px; }
.dest p { color:var(--muted); font-size:15px; line-height:1.45; margin:0; }
.image-credit { display:block; margin-top:14px; color:#7b7772; font-size:11px; line-height:1.35; }
.image-credit a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.region-photo { display:grid; grid-template-columns:minmax(260px, .8fr) 1.2fr; overflow:hidden; margin:0 0 42px; }
.region-photo img { width:100%; height:300px; object-fit:cover; object-position:center 44%; }
.region-photo figcaption { align-self:center; padding:28px 34px; color:var(--muted); font-size:16px; line-height:1.55; }

/* Info + contact */
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:42px; }
.info-card { padding:28px 30px; }
.info-card h3 { margin-bottom:12px; }
.info-card p { color:var(--muted); margin:0 0 6px; font-size:15px; line-height:1.5; }
.contact-card { padding:30px 34px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.contact-card h2 { margin-bottom:5px; }
.contact-card p { margin:0; color:var(--muted); }
.contact-actions { display:flex; align-items:center; gap:26px; }
.contact-actions .phone { color:#53705d; font-weight:700; white-space:nowrap; }
.contact-actions .phone a { color:inherit; text-decoration:none; }

/* Booking / form */
.booking { padding:32px 35px 30px; margin-bottom:42px; }
.booking-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.booking-head p { color:var(--muted); margin-bottom:16px; }
.booking .phone { color:var(--muted); font-size:15px; }
.booking .phone strong { display:block; font-weight:700; }
.booking .phone a { color:inherit; text-decoration:none; }
.required-note { color:#797674; font-size:13px; margin:0 0 20px; }
.form-notice { margin:4px 0 20px; padding:13px 15px; border-radius:12px; font-size:14px; }
.form-notice.success { color:#23432e; background:#e7f2e9; border:1px solid #bfd6c4; }
.form-notice.error { color:#702b2b; background:#f8eaea; border:1px solid #e6c3c3; }
.pd-form { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pd-honeypot { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
.pd-form .full { grid-column:1 / -1; }
.pd-form label { display:block; margin-bottom:6px; color:#625f5c; font-size:14px; font-weight:700; }
.pd-form input, .pd-form select, .pd-form textarea { width:100%; border:1px solid #dbd9d6; border-radius:12px; background:#fff; color:var(--ink); padding:0 13px; height:47px; }
.pd-form textarea { min-height:120px; padding:11px 13px; height:auto; resize:vertical; }
.pd-form .consent { display:flex; gap:10px; align-items:flex-start; color:#64615e; font-size:14px; font-weight:400; }
.pd-form .consent label { font-weight:400; margin:0; }
.pd-form .consent input { width:16px; height:16px; margin-top:3px; }
.pd-form button[disabled] { cursor:wait; opacity:.72; }

/* Prose (legal + generic pages) */
.page-hero { background:var(--cream-light); border-bottom:1px solid var(--line); }
.page-hero .container { padding-block:48px 24px; }
.page-hero h1 { font-size:34px; margin:0; }
.legal-section .container, .prose { padding-block:32px 78px; }
.prose h1 { font-size:34px; margin-bottom:24px; }
.prose h2 { font-size:22px; margin:28px 0 10px; }
.prose p, .prose li { color:var(--muted); font-size:15px; line-height:1.6; max-width:760px; }
.prose a { color:var(--green); }

/* Footer */
.site-footer { padding-top:42px; background:#f3eadb; border-top:1px solid #ded6ca; }
.footer-grid { display:grid; grid-template-columns:1.2fr 1.2fr 1fr; gap:48px; padding-bottom:41px; }
.footer-grid h3 { margin:0 0 11px; font-size:16px; }
.footer-grid p { margin:0; color:#696662; font-size:15px; line-height:1.4; }
.footer-grid a { color:#696662; text-decoration:none; }
.footer-grid a:hover { color:var(--green); }
.footer-map { margin-top:11px; background:#fffdfa; color:#53705d; font-size:14px; padding:8px 13px; border-radius:12px; }
.footer-bottom { min-height:63px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid #dfd7cb; color:#85817d; font-size:13px; gap:16px; }
.footer-legal-links a { color:#85817d; text-decoration:none; margin-left:14px; }
.footer-legal-links a:first-child { margin-left:0; }

@media (max-width:860px) {
  .feature-grid, .dest-grid { grid-template-columns:1fr; }
  .amenities { grid-template-columns:repeat(2,1fr); }
  .info-grid { grid-template-columns:1fr; }
  .room { grid-template-columns:1fr; }
  .region-photo { grid-template-columns:1fr; }
  .region-photo img { height:300px; }
  .room img { min-height:220px; max-height:none; }
  .gallery { grid-template-columns:repeat(3,1fr); }
  .desktop-nav, .header-cta { display:none; }
  .mobile-menu { display:block; position:relative; margin-left:auto; }
  .mobile-menu summary { list-style:none; cursor:pointer; width:44px; height:44px; display:flex; flex-direction:column; justify-content:center; gap:5px; align-items:center; }
  .mobile-menu summary::-webkit-details-marker { display:none; }
  .mobile-menu summary span { width:22px; height:2px; background:var(--ink); }
  .mobile-menu nav { position:absolute; right:0; top:52px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:14px 16px; display:flex; flex-direction:column; gap:12px; min-width:210px; z-index:30; }
  .mobile-menu nav a { color:#56514d; text-decoration:none; font-weight:650; }
}
@media (max-width:700px) {
  .site-header { min-height:76px; }
  .brand svg { width:42px; height:42px; }
  .brand-logo { width:185px; height:50px; }
  .brand strong { font-size:17px; }
  .brand small { font-size:11px; }
  .amenities { grid-template-columns:1fr; }
  .gallery { grid-template-columns:repeat(2,1fr); }
	.apartment-gallery, .region-gallery { grid-template-columns:1fr 1fr; }
  .pd-form { grid-template-columns:1fr; }
  .contact-card, .booking-head { display:block; }
  .contact-actions { margin-top:14px; flex-wrap:wrap; gap:12px; }
  .booking .phone { margin-top:8px; }
  .footer-grid { grid-template-columns:1fr; gap:24px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
  .intro-card { padding:22px 20px; margin-top:-24px; }
  .price-card, .info-card, .room-body { padding:22px 20px; }
}
@media (max-width:360px) {
  .price-card { padding-inline:12px; overflow-x:auto; }
  .price-table th, .price-table td { padding:10px 3px; font-size:12px; }
  .price-table td.amount { white-space:normal; }
}
