/* ============================================================
   components2.css — loaded AFTER style.css (override layer)
   Sara & Jonathan — additional components
   ============================================================ */

/* ============================================================
   1) OLIVE ORNAMENT (content sections, not hero)
   Hero ornaments stay gold, defined by style.css defaults.
   ============================================================ */
section .ornament line{stroke:var(--olive)!important}
section .ornament circle,
section .ornament ellipse{fill:var(--olive)!important}

.hero .ornament,
.page-hero .ornament{/* left untouched — remain gold */}


/* ============================================================
   2) COLLAPSIBLE HOTEL INFO BOX  (<details class="hotel-more">)
   ============================================================ */
.hotel-more{margin-top:.9rem;border-top:1px dashed var(--line);padding-top:.7rem}
.hotel-more summary{
  list-style:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--olive-deep);
  transition:color .25s ease;
}
.hotel-more summary::-webkit-details-marker{display:none}
.hotel-more summary::marker{content:""}
.hotel-more summary:hover{color:var(--gold-deep)}
.hotel-more summary::after{
  content:"\25BE"; /* ▾ */
  display:inline-block;
  font-size:.85em;
  color:var(--gold);
  transition:transform .3s ease;
}
.hotel-more[open] summary::after{transform:rotate(-180deg)}
.hotel-more summary::before{content:"Mehr Infos "}
.hotel-more summary span{display:none} /* allow custom label override if wrapped in span */

.hotel-more-body{
  padding:.75rem .1rem .2rem;
  font-family:var(--body);
  font-size:.86rem;
  line-height:1.75;
  color:var(--text);
}
.hotel-more-body p{margin-bottom:.7rem}
.hotel-more-body p:last-child{margin-bottom:0}


/* ============================================================
   3) HOTEL CARD  (.hotel-card)
   ============================================================ */
.hotel-card{
  background:var(--cream);
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  border-radius:6px;
  padding:1.7rem;
  box-shadow:var(--shadow);
}

.hotel-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:.5rem;
}
.hotel-top h3{
  font-family:var(--serif);
  font-size:1.4rem;
  font-weight:500;
  color:var(--olive-deep);
  margin:0;
}

.hotel-dist{
  flex-shrink:0;
  font-family:var(--sans);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--olive-deep);
  background:var(--beige);
  border:1px solid var(--line);
  border-radius:20px;
  padding:.3rem .8rem;
  white-space:normal;
  max-width:100%;
}

.hotel-rate{
  display:inline-block;
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.03em;
  color:#fff;
  background:var(--gold);
  border-radius:20px;
  padding:.35rem 1rem;
  margin:.4rem 0 .6rem;
}

.hotel-book{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--olive);
  margin-bottom:.8rem;
}

.hotel-links{
  display:flex;
  flex-wrap:wrap;
  gap:1.1rem;
  margin-bottom:.2rem;
}
.hotel-link{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--olive-deep);
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:3px;
  transition:color .25s ease,text-decoration-color .25s ease;
}
.hotel-link:hover{color:var(--gold-deep);text-decoration-color:var(--gold-deep)}

@media (max-width:680px){
  .hotel-card{padding:1.3rem}
  .hotel-top{flex-direction:column;align-items:flex-start;gap:.5rem}
}


/* ============================================================
   4) TIMELINE DUAL IMAGE VARIANT  (.tl-item.dual)
   ============================================================ */
.tl-item.dual .tl-media{display:block}
.tl-media-dual{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.6rem;
}
.tl-media-dual img{
  width:100%;
  height:300px;
  object-fit:cover;
  border-radius:3px;
  box-shadow:var(--shadow);
}

@media (max-width:1040px){
  .tl-media-dual{grid-template-columns:1fr;gap:.6rem}
  .tl-media-dual img{height:240px}
}


/* ============================================================
   5) FOOTER COURIER TAGLINE  (.f-tagline-courier)
   ============================================================ */
.f-tagline-courier{
  font-family:'Courier New',Courier,monospace;
  font-size:.72rem;
  letter-spacing:.02em;
  color:rgba(255,255,255,.6);
}


/* ============================================================
   6) HOME MENU LINK ROW  (.home-menu-links)
   ============================================================ */
.home-menu-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:1.1rem;
  margin-top:1.3rem;
}
.home-menu-links a{
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--olive-deep);
  transition:color .25s ease;
}
.home-menu-links a:hover{color:var(--gold-deep)}

@media (max-width:680px){
  .home-menu-links{gap:.8rem .9rem}
}


/* ============================================================
   7) GOOGLE MAP EMBED — large responsive wrapper (.map-embed-lg)
   Complements existing .map-embed without altering it.
   ============================================================ */
.map-embed-lg{
  position:relative;
  width:100%;
  min-height:460px;
  border-radius:4px;
  overflow:hidden;
  box-shadow:var(--shadow);
  border:0;
}
.map-embed-lg iframe{
  display:block;
  width:100%;
  height:100%;
  min-height:460px;
  border:0;
}

@media (max-width:680px){
  .map-embed-lg,
  .map-embed-lg iframe{min-height:320px}
}