/*
Theme Name: Bergblick
Theme URI: https://example.com/
Author: OpenAI
Description: WordPress-Theme auf Basis der gelieferten Bergblick HTML-Vorlage.
Version: 1.0.3
Text Domain: bergblick
*/

:root{--ink:#25302b;--muted:#6f7772;--paper:#f5f2ec;--white:#fff;--line:#ddd8cf;--accent:#536b5d}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;color:var(--ink);background:var(--paper);font-family:"DM Sans",sans-serif;line-height:1.55}
a{color:inherit;text-decoration:none}.container{width:min(1180px,calc(100% - 40px));margin:auto}
header{position:absolute;z-index:5;left:0;right:0;top:0;color:#fff;padding:25px 0}
nav{display:flex;align-items:center;justify-content:space-between}.logo{font-family:"Playfair Display";font-size:30px;letter-spacing:.06em}.navlinks{display:flex;gap:28px;font-size:14px}.navlinks a{opacity:.92}.menu{display:none;background:none;border:0;color:white;font-size:27px}
.hero{min-height:88vh;display:grid;place-items:center;color:white;text-align:center;position:relative;background-position:center;background-size:cover}.hero h1{font:600 clamp(58px,10vw,128px)/.9 "Playfair Display";margin:0 0 20px;letter-spacing:-.03em}.eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase}.hero p{font-size:20px;margin:0 auto 32px;max-width:620px}.btn{display:inline-block;padding:14px 23px;border:1px solid rgba(255,255,255,.75);font-size:13px;letter-spacing:.08em;text-transform:uppercase;transition:.25s}.btn:hover{background:white;color:var(--ink)}
.booking{background:#fff;box-shadow:0 18px 50px rgba(30,40,35,.12);padding:18px;margin-top:-45px;position:relative;z-index:3}.booking form{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:12px}.field{border:1px solid var(--line);padding:10px 14px}.field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.field input,.field select{border:0;background:transparent;width:100%;font:inherit;color:var(--ink);outline:0}.booking .submit{border:0;background:var(--ink);color:#fff;padding:0 26px;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
section{padding:105px 0}.intro{display:grid;grid-template-columns:1fr 1.2fr;gap:90px;align-items:start}.kicker{color:var(--accent);font-size:12px;text-transform:uppercase;letter-spacing:.18em}.intro h2,.sectionhead h2{font:500 clamp(38px,5vw,66px)/1.05 "Playfair Display";margin:12px 0 20px}.intro p{color:var(--muted);max-width:650px;font-size:17px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:#fff}.card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.cardbody{padding:24px}.card h3{font:500 30px "Playfair Display";margin:0 0 6px}.meta{font-size:13px;color:var(--muted);margin-bottom:15px}.textlink{font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.dark{background:#29352f;color:#fff}.dark .kicker{color:#bdcbbf}.dark p{color:#d4dad5}.features{display:grid;grid-template-columns:repeat(4,1fr);gap:35px;margin-top:45px}.feature{border-top:1px solid rgba(255,255,255,.25);padding-top:18px}.feature strong{display:block;font:500 25px "Playfair Display";margin-bottom:8px}
.split{display:grid;grid-template-columns:1fr 1fr;min-height:580px}.split img{width:100%;height:100%;object-fit:cover}.splitcopy{padding:80px clamp(30px,7vw,100px);display:flex;flex-direction:column;justify-content:center}.splitcopy h2{font:500 clamp(38px,5vw,62px)/1.05 "Playfair Display";margin:12px 0 20px}.splitcopy p{color:var(--muted);max-width:520px}
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:280px 280px;gap:12px}.gallery img{width:100%;height:100%;object-fit:cover}.gallery img:first-child{grid-row:1/3}.cta{background-position:center;background-size:cover;color:#fff;text-align:center;padding:130px 20px}.cta h2{font:500 clamp(45px,7vw,78px)/1 "Playfair Display";margin:10px auto 25px}.cta p{max-width:580px;margin:0 auto 30px}
footer{background:#202924;color:#dce1dd;padding:60px 0 25px}.footergrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px}.footerlogo{font:500 38px "Playfair Display";color:white}.footergrid h4{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:#aeb8b1}.footergrid p,.footergrid a{font-size:14px;color:#bfc7c1;display:block;margin:8px 0}.copy{border-top:1px solid rgba(255,255,255,.12);margin-top:45px;padding-top:20px;font-size:12px;color:#8f9b93}
@media(max-width:800px){.navlinks{display:none}.menu{display:block}.navlinks.open{display:flex;position:absolute;top:72px;left:20px;right:20px;background:#29352f;padding:20px;flex-direction:column;gap:15px}.hero{min-height:78vh}.booking{margin:0 20px}.booking form,.intro,.split{grid-template-columns:1fr}.booking .submit{height:52px}.cards,.features{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr;grid-template-rows:220px 220px 220px}.gallery img:first-child{grid-row:auto;grid-column:1/3}.split img{height:420px}.splitcopy{padding:65px 25px}.footergrid{grid-template-columns:1fr 1fr}.footergrid>div:first-child{grid-column:1/-1}}
@media(max-width:480px){.container{width:min(100% - 28px,1180px)}section{padding:75px 0}.hero p{font-size:17px}.gallery{grid-template-columns:1fr;grid-template-rows:260px 200px 200px 200px}.gallery img:first-child{grid-column:auto}.footergrid{grid-template-columns:1fr}}

/* WordPress menu markup: visual behavior remains identical to the original HTML links. */
.navlinks ul,.footerlinks ul{list-style:none;margin:0;padding:0}.navlinks ul{display:flex;gap:28px}.navlinks li,.footerlinks li{margin:0;padding:0}.navlinks a{display:block}.footerlinks a{display:block}
.formnotice{margin:0 0 14px;font-size:13px;color:var(--muted)}
@media(max-width:800px){.navlinks.open ul{display:flex;flex-direction:column;gap:15px}}
/* ==========================================
   BERGBLICK TEST – HEADER & SEITENMENÜ
   ========================================== */

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  height:76px;
  padding:0;
  z-index:9000;
  background:rgba(31,45,40,.30);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.site-header-inner{
  position:relative;
  width:100%;
  height:100%;
  margin:0;
  padding:0 32px;
}

/* Logo exakt mittig */
.site-header .logo{
  position:absolute;
  left:32px;
  top:50%;
  transform:translateY(-50%);
  margin:0;
  padding:0;
  color:#fff;
  font-family:"Playfair Display",serif;
  font-size:30px;
  font-weight:600;
  line-height:1;
  letter-spacing:.06em;
}

/* Hamburger exakt mittig */
.site-header .menu-toggle{
  position:absolute;
  right:32px;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.site-header .menu-toggle span{
  display:block;
  width:28px;
  height:2px;
  margin:0;
  padding:0;
  background:#fff;
}

/* ==========================================
   BERGBLICK TEST – SEITENMENÜ
   ========================================== */

/* Abdunklung der Seite */
.menu-overlay{
  position:fixed;
  inset:0;
  z-index:9100;

  background:rgba(20,28,24,.38);

  opacity:0;
  visibility:hidden;

  transition:
    opacity .3s ease,
    visibility .3s ease;
}

.menu-overlay.open{
  opacity:1;
  visibility:visible;
}


/* Seitenmenü rechts */
.side-menu{
  position:fixed;
  top:0;
  right:0;

  width:min(340px,84vw);
  height:100vh;

  z-index:9200;

  padding:110px 34px 40px;

  background:rgba(41,53,47,.92);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  color:#fff;

  transform:translateX(100%);

  transition:transform .35s ease;

  box-shadow:-18px 0 45px rgba(0,0,0,.14);
	
	display:flex;
flex-direction:column;
}

.side-menu.open{
  transform:translateX(0);
}


/* Schließen-X */
.side-menu-close{
  position:absolute;

  top:20px;
  right:24px;

  width:38px;
  height:38px;

  margin:0;
  padding:0;

  border:0;
  background:transparent;

  color:#fff;

  font-size:30px;
  line-height:1;

  cursor:pointer;

  opacity:.9;
}


/* Menüpunkte */
.side-menu-nav ul{
  list-style:none;
  margin:0;
  padding:0;
}

.side-menu-nav li{
  margin:0;
  padding:0;

  border-bottom:1px solid rgba(255,255,255,.12);
}

.side-menu-nav a{
  display:block;

  padding:17px 0;

  color:#fff;

  font-family:"Playfair Display",serif;
  font-size:24px;
  font-weight:500;
  line-height:1.2;

  transition:
    opacity .2s ease,
    transform .2s ease;
}

.side-menu-nav a:hover{
  opacity:.72;
  transform:translateX(4px);
}


/* Seite hinter Menü nicht scrollen */
body.side-menu-open{
  overflow:hidden;
}


/* ==========================================
   MOBILE
   ========================================== */

@media(max-width:800px){

  /* Header */
  .site-header{
    height:66px;
  }

  .site-header-inner{
    padding:0 18px;
  }

  .site-header .logo{
    left:18px;
    font-size:25px;
  }

  .site-header .menu-toggle{
    right:18px;
    width:40px;
    height:40px;
  }

  .site-header .menu-toggle span{
    width:26px;
  }

  /* Seitenmenü */
  .side-menu{
    width:min(330px,92vw);
    padding:90px 28px 34px;
  }

  .side-menu-close{
    top:14px;
    right:18px;
  }

  .side-menu-nav a{
    font-size:23px;
    padding:16px 0;
  }
}
/* Logo unten im Seitenmenü */
.side-menu-logo{
  position:static !important;

  margin-top:auto !important;
  padding-top:40px !important;
  padding-bottom:20px !important;

  text-align:center !important;

  color:rgba(255,255,255,.72) !important;

  font-family:"Playfair Display",serif !important;
  font-size:30px !important;
  font-weight:600 !important;
  letter-spacing:.06em !important;
  line-height:1 !important;

  width:100% !important;
}
/* ===== Seitenmenü Mobil – final ===== */
@media (max-width: 800px) {

  .side-menu {
    width: min(320px, 88vw) !important;
    padding: 90px 28px 28px !important;
  }

  .side-menu-nav {
    width: 100% !important;
  }

  .side-menu-nav ul {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .side-menu-nav a {
    font-size: 22px !important;
    line-height: 1.2 !important;
    padding: 16px 0 !important;
  }

  .side-menu-close {
    top: 22px !important;
    right: 22px !important;
  }

  .side-menu-logo {
    margin-top: auto !important;
    padding: 30px 0 12px !important;
    font-size: 25px !important;
    text-align: center !important;
  }

}
/* =========================================
   FOOTER – BERGBLICK
   ========================================= */

.site-footer {
  background: #202924;
  color: #dce1dd;
  padding: 70px 0 28px;
}

.site-footer .footergrid {
  display: grid;
  grid-template-columns: 1.45fr .9fr 1.2fr 1.25fr;
  gap: 55px;
  align-items: start;
}


/* Logo */

.site-footer .footerlogo {
  font: 500 38px "Playfair Display";
  color: #fff;
  margin-bottom: 20px;
}

.site-footer .footer-hosts {
  font-family: "Playfair Display";
  font-size: 17px;
  color: #fff;
  margin-bottom: 22px;
}


/* Überschriften */

.site-footer h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .20em;
  color: #aeb8b1;
  margin: 8px 0 25px;
}


/* Texte */

.site-footer p,
.site-footer a {
  font-size: 14px;
  color: #bfc7c1;
}

.site-footer p {
  margin: 8px 0;
}

.site-footer a {
  display: block;
  margin: 9px 0;
}


/* Instagram */

.footer-instagram p {
  font-family: "Playfair Display";
  font-size: 18px;
  line-height: 1.5;
  color: #e4e7e4;
  margin-bottom: 24px;
}

.instagram-button {
  border: 1px solid rgba(255,255,255,.55);
  padding: 15px 17px;
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100%;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px !important;
  transition: .25s ease;
}

.instagram-button:hover {
  background: #fff;
  color: #202924 !important;
}

.instagram-icon {
  font-size: 22px;
  line-height: 1;
}

.instagram-arrow {
  margin-left: auto;
  font-size: 17px;
}


/* Untere Footer-Zeile */

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15);
  margin-top: 55px;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-footer .copy {
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #8f9b93;
}

.footer-tagline {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: #aeb8b1;
}

.footer-tagline span {
  display: block;
  width: 45px;
  height: 1px;
  background: rgba(255,255,255,.55);
}


/* Tablet */

@media (max-width: 1000px) {

  .site-footer .footergrid {
    grid-template-columns: 1fr 1fr;
    gap: 45px 60px;
  }

}


/* Smartphone */

@media (max-width: 600px) {

  .site-footer {
    padding: 55px 0 25px;
  }

  .site-footer .footergrid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .footer-bottom {
    margin-top: 45px;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .footer-tagline {
    font-size: 9px;
  }

  .instagram-button {
    max-width: 330px;
  }

}
.apartment-details-open {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

/* =========================================
   ANFRAGEFORMULAR – GÄSTE-FELD FOKUS
   ========================================= */

select[name="guests"] {
  transition:
    box-shadow .25s ease,
    background .25s ease;
}

select[name="guests"].guest-field-focus {
  box-shadow: 0 0 0 2px var(--accent);
  background: #faf8f3;
}