/* =========================================================================
   Coastal Charm — page components
   Booking engine and blog. Builds on the tokens in style.css.
   ========================================================================= */

/* ---------- Subpages: header is solid from the top, JS or no JS ---------- */
.site-header.always-solid{
  background:rgba(251,247,240,.94);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  box-shadow:0 1px 0 rgba(9,4,57,.08);
}
.always-solid .brand__name{color:var(--ink)}
.always-solid .brand__tag{color:var(--muted)}
.always-solid .nav__link{color:var(--text)}
.always-solid .nav-toggle span{background:var(--ink)}
@media (max-width:900px){
  .always-solid .nav__link{color:var(--sand)}
  .nav-open .always-solid .nav-toggle span{background:var(--cream)}
}

/* ---------- Subpages: headline has to clear the fixed header ------------- */
.page-head{padding-top:calc(80px + clamp(2.5rem,1.5rem + 4vw,5rem))}
.page-head .h2{margin-bottom:1.2rem}
.wrap--reading{max-width:760px}

/* =========================================================================
   Booking app
   ========================================================================= */
.booking-app{display:grid;gap:clamp(1.5rem,1rem + 2vw,2.5rem);align-items:start}
@media (min-width:1000px){.booking-app{grid-template-columns:1fr 390px}}

.units{border:0;padding:0;margin:0 0 1.5rem;display:block}
.units__group{
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--muted);margin:0 0 .55rem;
}
.units__group:not(:first-of-type){margin-top:1.25rem}
.units__group span{color:var(--accent-text)}
.units__row{display:grid;gap:.6rem;grid-template-columns:1fr}
@media (min-width:560px){.units__row{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.units__row{grid-template-columns:repeat(4,1fr)}}
/* Zwei Domes bleiben auch auf breiten Schirmen zweispaltig, damit sie
   nicht schmaler dargestellt werden als die vier Classic Tents. */
@media (min-width:1100px){.units__row:has(> .unit:nth-child(2):last-child){grid-template-columns:1fr 1fr}}
.unit{position:relative;display:block}
.unit input{position:absolute;opacity:0;pointer-events:none}
.unit__box{
  display:block;padding:1rem 1.15rem;border:1px solid var(--sand-2);
  border-radius:var(--radius);background:var(--white);cursor:pointer;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.unit input:checked + .unit__box{border-color:var(--terracotta);box-shadow:0 0 0 1px var(--terracotta)}
.unit input:focus-visible + .unit__box{outline:2px solid var(--terracotta);outline-offset:2px}
.unit__name{display:block;font-weight:600;font-size:.9375rem}
.unit__meta{display:block;font-size:.8125rem;color:var(--muted);margin-top:.2rem}

.cal{border:1px solid var(--sand-2);border-radius:var(--radius-lg);background:var(--white);padding:1.25rem}
.cal__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.cal__nav{
  width:38px;height:38px;border:1px solid var(--sand-2);background:var(--white);
  border-radius:var(--radius);font-size:1.25rem;line-height:1;color:var(--ink);
  transition:background .2s var(--ease),opacity .2s var(--ease);
}
.cal__nav:hover:not(:disabled){background:var(--sand)}
.cal__nav:disabled{opacity:.3;cursor:not-allowed}
.cal__legend{display:flex;gap:1.1rem;font-size:.75rem;color:var(--muted);flex-wrap:wrap;justify-content:center}
.cal__legend span{display:flex;align-items:center;gap:.4rem}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot--free{background:var(--terracotta)}
.dot--off{background:var(--sand-2)}

.cal__months{display:grid;gap:1.5rem}
@media (min-width:720px){.cal__months{grid-template-columns:1fr 1fr;gap:1.75rem}}
.cal__title{font-family:var(--font-display);font-size:1.1rem;text-align:center;margin-bottom:.75rem}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal__dow{font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  text-align:center;padding-bottom:.4rem}
.cal__pad{aspect-ratio:1}
.cal__day{
  aspect-ratio:1;border:0;background:var(--sand);border-radius:3px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-size:.8125rem;color:var(--text);padding:0;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.cal__day:hover:not(:disabled){background:var(--gold)}
.cal__n{font-weight:500;line-height:1}
.cal__p{font-size:.5625rem;color:var(--muted);line-height:1}
/* Below ~430px a 40px cell cannot carry both a date and a price legibly —
   the date wins and the rate is read from the summary instead. */
@media (max-width:430px){
  .cal__p{display:none}
  .cal__n{font-size:.875rem}
}
.cal__day.is-off{background:transparent;color:var(--sand-2);cursor:not-allowed}
.cal__day.is-off .cal__p{display:none}
.cal__day.is-between{background:var(--sand-2)}
.cal__day.is-start,.cal__day.is-end{background:var(--terracotta);color:var(--on-orange);font-weight:600}
.cal__day.is-start .cal__p,.cal__day.is-end .cal__p{color:rgba(20,16,63,.75)}
.cal__flash{
  margin:1rem 0 0;padding:.75rem 1rem;background:var(--gold);color:var(--ink);
  border-radius:var(--radius);font-size:.8125rem;
}
.cal__hint{margin:1rem 0 0;font-size:.8125rem;color:var(--muted)}

.booking-app__side{
  background:var(--ink);color:var(--sand);border-radius:var(--radius-lg);
  padding:clamp(1.5rem,1rem + 1.5vw,2rem);
}
.side__title{font-size:1.5rem;margin-bottom:1.25rem}
.side__sub{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--font-body);font-weight:600;color:var(--gold);margin:2rem 0 .9rem}

.quote__empty{font-size:.9375rem;color:var(--on-dark-dim);margin:0}
.quote__list{margin:0;display:grid;gap:.1rem}
.quote__list > div{display:flex;justify-content:space-between;gap:1rem;
  padding:.5rem 0;font-size:.875rem;border-bottom:1px solid rgba(249,162,1,.16)}
.quote__list dt{margin:0}
.quote__list dd{margin:0;white-space:nowrap}
.quote__list > div:first-child{font-weight:600;font-size:.9375rem;
  border-bottom:1px solid rgba(249,162,1,.4);padding-bottom:.7rem;margin-bottom:.3rem}
.quote__night dt,.quote__night dd{color:var(--on-dark-dim)}
.quote__extra dt,.quote__extra dd{color:var(--water)}
.quote__total{font-family:var(--font-display);font-size:1.2rem;color:var(--gold);
  border-bottom:0;padding-top:.85rem;margin-top:.3rem;
  border-top:1px solid rgba(249,162,1,.4)}
.quote__note{font-size:.75rem;color:var(--on-dark-dim);margin-top:.9rem}
.quote__warn{font-size:.8125rem;color:var(--ink);background:var(--gold);
  padding:.7rem .9rem;border-radius:var(--radius);margin-top:.9rem}

.extras{display:grid;gap:.5rem}
.extra{display:flex;align-items:center;gap:.7rem;font-size:.875rem;cursor:pointer;
  padding:.6rem .8rem;border:1px solid rgba(249,162,1,.22);border-radius:var(--radius);
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.extra:hover{border-color:var(--gold);background:rgba(255,255,255,.04)}
.extra input{accent-color:var(--terracotta);width:16px;height:16px;flex:0 0 auto}
.extra__label{flex:1}
.extra__price{color:var(--gold);white-space:nowrap;font-size:.8125rem}
.booking-app .form{margin-top:2rem}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* =========================================================================
   Blog — index
   ========================================================================= */
.post-grid{display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.post-card{text-decoration:none;color:inherit;display:flex;flex-direction:column;
  border-radius:var(--radius-lg);overflow:hidden;background:var(--white);
  border:1px solid var(--sand-2);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.post-card__media{overflow:hidden;aspect-ratio:16/9;background:var(--sand-2)}
.post-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.post-card:hover .post-card__media img{transform:scale(1.05)}
.post-card__body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.post-card__k{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--accent-text)}
.post-card__body h2{font-size:1.3rem;line-height:1.18}
.post-card__body p{font-size:.9rem;color:var(--muted);margin:0}
.post-card__meta{font-size:.75rem;color:var(--muted);margin-top:auto;padding-top:.5rem}
@media (min-width:900px){
  .post-card--lead{grid-column:span 2;flex-direction:row}
  .post-card--lead .post-card__media{aspect-ratio:auto;flex:1 1 55%}
  .post-card--lead .post-card__body{flex:1 1 45%;justify-content:center;padding:2rem 2.25rem}
  .post-card--lead .post-card__body h2{font-size:1.9rem}
}

/* =========================================================================
   Blog — single post
   ========================================================================= */
.post__head{padding-top:calc(80px + clamp(2rem,1.5rem + 3vw,4rem));padding-bottom:2rem}
.post__title{font-size:clamp(2rem,1.3rem + 3vw,3.4rem);margin-bottom:1.1rem;text-wrap:balance}
.post__lead{font-size:var(--fs-lead);color:var(--muted);line-height:1.55}
.post__meta{font-size:.8125rem;color:var(--muted);margin-top:1.25rem;
  padding-top:1.25rem;border-top:1px solid var(--sand-2)}
.post__hero{margin:0 0 clamp(2rem,1rem + 3vw,3.5rem)}
.post__hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
@media (min-width:1100px){
  .post__hero{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
  .post__hero img{border-radius:var(--radius-lg)}
}

.prose{font-size:1.09rem;line-height:1.75}
.prose h2{font-size:clamp(1.5rem,1.2rem + 1.1vw,2.05rem);margin:2.75rem 0 1rem}
.prose h3{font-size:clamp(1.2rem,1.05rem + .55vw,1.45rem);margin:2rem 0 .75rem}
.prose p{margin:0 0 1.25em}
.prose a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--terracotta-d)}
.prose .prose-list{margin:0 0 1.4em;padding-left:1.3em;list-style:disc}
.prose ol.prose-list{list-style:decimal}
.prose .prose-list li{margin-bottom:.55em;padding-left:.2em}
.prose blockquote{margin:2rem 0;padding:1.1rem 1.5rem;background:var(--sand);
  border-left:3px solid var(--terracotta);border-radius:0 var(--radius) var(--radius) 0}
.prose blockquote p{margin:0;font-size:1rem;color:var(--muted)}
.prose hr{border:0;border-top:1px solid var(--sand-2);margin:2.75rem 0}
.prose code{background:var(--sand);padding:.12em .4em;border-radius:3px;font-size:.9em}
.prose img{border-radius:var(--radius);margin:1.75rem 0}

.table-scroll{overflow-x:auto;margin:1.75rem 0;-webkit-overflow-scrolling:touch}
.table-scroll table{border-collapse:collapse;width:100%;font-size:.9375rem;min-width:420px}
.table-scroll th,.table-scroll td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--sand-2)}
.table-scroll th{font-family:var(--font-body);font-weight:600;font-size:.75rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--sand)}

.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:2.5rem 0 0;padding:0}
.tags li{font-size:.75rem;color:var(--muted);background:var(--sand);
  padding:.32rem .8rem;border-radius:100px}

.post__cta{background:var(--ink);color:var(--sand);border-radius:var(--radius-lg);
  padding:clamp(1.75rem,1.2rem + 2vw,2.5rem);margin:3rem 0 0}
.post__cta h2{font-size:1.5rem;margin:0 0 .8rem;color:var(--gold)}
.post__cta p{font-size:.9375rem;color:var(--on-dark);margin-bottom:1.5rem}

.rel-title{font-size:1.5rem;margin:clamp(3rem,2rem + 3vw,5rem) 0 1.5rem}
.rel-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  padding-bottom:clamp(3rem,2rem + 3vw,5rem)}
.rel-card{text-decoration:none;color:inherit;display:block}
.rel-card img{border-radius:var(--radius);aspect-ratio:16/9;object-fit:cover;
  width:100%;margin-bottom:.8rem;transition:opacity .3s var(--ease)}
.rel-card:hover img{opacity:.85}
.rel-card__k{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--accent-text);display:block;margin-bottom:.3rem}
.rel-card h3{font-size:1.08rem;line-height:1.25}

/* Bildnachweis unter dem Beitragsbild. Bei CC-BY(-SA) ist das Lizenzbedingung. */
.post__credit{
  max-width:var(--maxw);margin:.6rem auto 0;padding-inline:var(--gutter);
  font-size:.75rem;color:var(--muted);
}
.post__credit a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.post__credit a:hover{color:var(--accent-text)}

/* Nachweisliste auf der Credits-Seite */
.credit-list{max-width:820px;margin-inline:auto;border-top:1px solid var(--sand-2)}
.credit-list li{display:grid;gap:.15rem;padding:1rem 0;border-bottom:1px solid var(--sand-2)}
.credit-list strong{font-size:.9375rem}
.credit-list span{font-size:.8125rem;color:var(--muted)}
.credit-list a{color:var(--accent-text)}