/*
  Bergzeit Winterberg Website Styles
  ----------------------------------
  Purpose:
  Central design system for the three language versions of the website.

  Structure:
  1. CSS variables and base styles
  2. Header and navigation
  3. Buttons, hero, cards and trust elements
  4. Gallery and image layouts
  5. Amenities, tips, calendar and FAQ
  6. Responsive mobile rules

  Maintenance:
  - Brand colors are defined in :root.
  - Reusable classes such as .container, .btn, .card and .highlight are used across all pages.
  - Keep page-specific styling minimal in HTML.
  - Image paths are relative to this CSS file.
*/


/* 1. Design tokens and base styles */
:root{
  --forest:#16382e; --moss:#6f8b58; --cream:#fff8ec; --sand:#ead8ba; --clay:#b76e42; --night:#111827;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--night);background:radial-gradient(circle at top left,rgba(234,216,186,.65),transparent 32rem),var(--cream);line-height:1.55}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 40px));margin:auto}

/* 2. Header and navigation */
.header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(255,248,236,.9);border-bottom:1px solid rgba(255,255,255,.5);backdrop-filter:blur(18px)}
.header-inner{height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.logo{display:flex;align-items:center;gap:12px;font-weight:900;color:var(--forest)}
.logo-mark{width:42px;height:42px;border-radius:18px;background:var(--forest);color:#fff;display:grid;place-items:center}
.nav{display:flex;gap:24px;font-size:14px;font-weight:750;color:#4b5563}
.nav a:hover{color:var(--forest)}
.header-actions{display:flex;align-items:center;gap:10px}
.lang{display:flex;gap:4px;background:#fff;border-radius:999px;padding:4px;box-shadow:0 8px 30px rgba(17,24,39,.08)}
.lang a{font-size:12px;font-weight:900;color:var(--forest);padding:6px 10px;border-radius:999px}
.lang .active{background:var(--forest);color:#fff}

/* 3. Buttons and reusable interaction states */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:14px 22px;font-weight:900;border:0;transition:.2s ease;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--clay);color:#fff;box-shadow:0 20px 50px rgba(183,110,66,.28)}
.btn-secondary{background:#fff;color:var(--forest);box-shadow:0 20px 50px rgba(17,24,39,.14)}
.btn-outline{border:1px solid rgba(255,255,255,.55);color:#fff}

/* 4. Hero area */
.hero{min-height:92vh;position:relative;overflow:hidden;padding:150px 0 90px;color:#fff}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(22,56,46,.88),rgba(22,56,46,.30)),url("../images/wohnzimmer-terrasse.jpg") center/cover no-repeat}
.hero-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.badge{display:inline-flex;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);padding:10px 16px;font-size:14px;font-weight:800}
h1{font-size:clamp(42px,6vw,76px);line-height:1.02;margin:18px 0 0;font-weight:950;letter-spacing:-.045em;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero p{font-size:19px;max-width:720px;color:rgba(255,255,255,.9)}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.pills span{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:9px 14px;font-size:14px;font-weight:850}

/* 5. Cards, trust boxes and reusable content blocks */
.glass{background:rgba(255,255,255,.86);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.6);border-radius:34px;padding:28px;color:var(--night);box-shadow:0 24px 80px rgba(17,24,39,.14)}
.sticky{position:sticky;top:96px}
.fact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0}
.fact{background:#fff;border-radius:24px;padding:18px}
.fact strong{display:block;font-size:25px;color:var(--clay)}
.fact span{font-size:13px;color:#6b7280}
.quick{background:var(--forest);border-radius:26px;color:#fff;padding:20px;margin-top:18px}
.quick small{color:var(--sand);text-transform:uppercase;letter-spacing:.18em;font-weight:900}
.quick h3{font-size:24px;line-height:1.15;margin:8px 0 16px}
.trust{background:#fff;border-radius:26px;padding:20px;margin-top:18px}
.trust ul{margin:14px 0 0;padding:0;list-style:none;font-size:14px;font-weight:800;color:#4b5563}
.trust li{margin:9px 0}
.section{padding:86px 0}
.section-tight{padding:56px 0}
.kicker{text-transform:uppercase;letter-spacing:.24em;color:var(--clay);font-weight:950;font-size:13px}
h2{font-size:clamp(32px,4vw,55px);line-height:1.05;letter-spacing:-.035em;color:var(--forest);margin:12px 0 0;font-weight:950}
.lead{font-size:18px;color:#4b5563;max-width:850px;margin-top:20px}
.grid-2{display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:center}
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{background:rgba(255,255,255,.9);border:1px solid rgba(22,56,46,.1);border-radius:28px;padding:26px;box-shadow:0 24px 80px rgba(17,24,39,.09)}
.card h3{color:var(--forest);font-size:22px;margin:0 0 10px;font-weight:950}
.card p{color:#4b5563;margin:0}
.dark{background:var(--forest);color:#fff}
.dark h2,.dark h3{color:#fff}
.dark .kicker{color:var(--sand)}
.dark .card{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15);color:#fff}
.dark .card p{color:rgba(255,255,255,.8)}

/* 6. Image galleries */
.gallery-grid{display:grid;grid-template-columns:7fr 5fr;gap:18px}
.gallery-stack{display:grid;gap:18px}
.figure{position:relative;overflow:hidden;border-radius:32px;box-shadow:0 24px 80px rgba(17,24,39,.14)}
.figure img{width:100%;height:100%;object-fit:cover;transition:.7s ease}
.figure:hover img{transform:scale(1.045)}
.figure.large{min-height:520px}
.figure.small{height:250px}
.caption{position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);color:var(--forest);font-weight:950;border-radius:999px;padding:10px 16px;font-size:13px}
.image-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.image-grid .figure{height:320px}
.wide-grid{display:grid;grid-template-columns:8fr 4fr;gap:18px}
.wide-grid .figure{height:480px}
.five-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:18px}
.five-grid .figure{height:300px}
.span-2{grid-column:span 2}
.span-3{grid-column:span 3}

/* 7. Amenities and feature lists */
.inclusive{background:#fff;border:1px solid rgba(22,56,46,.1);border-radius:42px;padding:42px;box-shadow:0 24px 80px rgba(17,24,39,.12)}
.inclusive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature-list{padding:0;margin:18px 0 0;list-style:none;color:#4b5563;font-weight:750;font-size:15px}
.feature-list li{margin:10px 0}
.highlight{border-radius:36px;background:var(--forest);color:#fff;padding:34px;box-shadow:0 24px 80px rgba(17,24,39,.14)}
.highlight h3{font-size:30px;line-height:1.12;margin:10px 0;color:#fff}
.tip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.two-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.tag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}
.tag{background:var(--cream);border:1px solid var(--sand);border-radius:22px;padding:18px}
.tag strong{color:var(--forest)}

/* 8. Airbnb calendar UI */
.calendar-wrap{background:rgba(234,216,186,.55);padding:86px 0}
.calendar-box{background:#fff;border-radius:34px;padding:26px;box-shadow:0 24px 80px rgba(17,24,39,.14)}
.calendar-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.cal-btn{border:0;background:var(--cream);color:var(--forest);border-radius:999px;padding:10px 16px;font-weight:900;cursor:pointer}
.weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;text-align:center}
.weekdays{margin-top:20px;color:#6b7280;font-size:12px;font-weight:900;text-transform:uppercase}
.calendar-grid{margin-top:8px}
.day{aspect-ratio:1;border-radius:16px;display:grid;place-items:center;font-weight:950;font-size:14px}
.day.available{background:#f7f0df;color:var(--forest)}
.day.blocked{background:var(--forest);color:#fff}
.day.empty{background:transparent}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;color:#4b5563;font-size:14px}
.legend span{display:inline-flex;align-items:center;gap:8px}
.dot{width:12px;height:12px;border-radius:999px;background:#f7f0df}
.dot.darkdot{background:var(--forest)}

/* 9. FAQ and footer */
.faq{background:#fff}
.details{border:1px solid #e5e7eb;border-radius:32px;background:var(--cream);overflow:hidden}
details{padding:20px 24px;border-bottom:1px solid #e5e7eb}
details:last-child{border-bottom:0}
summary{cursor:pointer;color:var(--forest);font-weight:950;font-size:18px}
footer{background:var(--forest);color:#fff;padding:40px 0}
.footer-inner{display:flex;justify-content:space-between;gap:20px;align-items:center}
.mobile-cta{display:none}

/* 10. Responsive mobile layout */
@media (max-width:900px){
  .nav{display:none}.hero-grid,.grid-2,.gallery-grid,.wide-grid,.two-grid{grid-template-columns:1fr}
  .card-grid,.inclusive-grid,.tip-grid,.image-grid{grid-template-columns:1fr}
  .five-grid{grid-template-columns:1fr}
  .span-2,.span-3{grid-column:auto}
  .hero{padding-top:120px}
  .figure.large,.wide-grid .figure{min-height:360px;height:360px}
  .header-inner{height:auto;min-height:72px}
  .lang{display:none}
  .footer-inner{flex-direction:column;align-items:flex-start}
  .mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(22,56,46,.96);backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff;padding:12px 20px;box-shadow:0 -18px 60px rgba(17,24,39,.18)}
}