/* Zusätzliche Styles für Reisebegleiter & Hotelübersicht.
   Diese Datei kommt ZUSÄTZLICH zu deinem vorhandenen style.css. */

.subpage{background:var(--cream)}
.subpage-header{position:absolute;background:transparent}
.subpage-header .active{opacity:.65}
.page-hero{min-height:570px;padding:150px 0 100px;display:flex;align-items:flex-end;color:#fff}
.green-hero{background:var(--green)}
.page-hero h1{max-width:900px;margin:0;font:500 clamp(48px,7vw,78px)/1.02 "Playfair Display",serif}
.page-hero h1 em{font-style:normal;color:#ead7bc}
.page-hero .eyebrow{color:#e7ddce}
.page-hero p:last-child{max-width:600px;margin:28px 0 0;font-size:18px;opacity:.92}
.page-intro{text-align:center;padding:110px 0 75px}
.page-intro h2{max-width:850px;margin:auto}
.page-intro>p:last-child{max-width:680px;margin:28px auto 0;font-size:17px}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:15px 0 120px}
.guide-card{position:relative;background:#fff;padding:34px 30px 36px;min-height:300px;transition:.25s}
.guide-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(48,52,47,.08)}
.guide-number{font:500 18px "Playfair Display",serif;color:var(--terracotta);margin-bottom:38px}
.guide-card .eyebrow{color:var(--green);margin-bottom:10px}
.guide-card h3{font-size:29px;margin-bottom:14px}
.guide-card p:not(.eyebrow){font-size:15px;line-height:1.7;margin:0 0 22px}
.guide-card .text-link{position:absolute;bottom:32px}
.quiet-card{background:var(--sand)}
.green-note{padding:105px 0;background:var(--green);color:#fff}
.green-note .eyebrow{color:#d8c9af}
.green-note h2{font-size:clamp(38px,5vw,60px)}

.hotel-intro{padding-bottom:85px}
.hotel-list{padding-bottom:120px}
.hotel-item{display:grid;grid-template-columns:1.08fr 1fr;min-height:540px;background:#fff;margin-bottom:30px}
.hotel-item.reverse{grid-template-columns:1fr 1.08fr}
.hotel-item.reverse .hotel-image{order:2}
.hotel-image{min-height:540px;background-size:cover;background-position:center}
.hotel-lanta{background:linear-gradient(135deg,#91b8a2,#d6c59f 50%,#6c9a9c)}
.hotel-phangan{background:linear-gradient(135deg,#7e9c93,#d7bd91 50%,#6e8580)}
.hotel-placeholder{background:linear-gradient(135deg,#b7ad94,#e9dfcd 55%,#879784)}
.hotel-copy{padding:65px 60px;display:flex;flex-direction:column;justify-content:center}
.hotel-copy .eyebrow{color:var(--green)}
.hotel-copy h2{font-size:clamp(34px,4vw,48px);margin-bottom:22px}
.hotel-copy>p:not(.eyebrow){font-size:16px;max-width:520px;margin:0 0 25px}
.hotel-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.hotel-tags span{padding:7px 11px;background:var(--cream);font-size:12px;color:var(--green-dark)}
.hotel-copy .text-link{align-self:flex-start}
.favorites-list{padding:5px 0 120px}
.region-group{padding:58px 0;border-top:1px solid rgba(48,52,47,.16)}
.region-group:first-child{border-top:0;padding-top:10px}
.region-heading{display:grid;grid-template-columns:1fr 2fr;gap:30px;align-items:end;margin-bottom:28px}
.region-heading .eyebrow{color:var(--green);margin:0}
.region-heading h2{font-size:clamp(34px,4vw,48px)}
.favorite-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.favorite-card{min-height:210px;padding:34px;background:#fff;display:flex;flex-direction:column;transition:.25s}
.favorite-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(48,52,47,.07)}
.favorite-card .eyebrow{color:var(--green)}
.favorite-card h3{max-width:440px;margin:12px 0 30px;font-size:clamp(24px,3vw,31px)}
.favorite-card span{margin-top:auto;color:#7b7f78;font-size:13px}
.hotel-closing{background:var(--sand);padding:105px 0;text-align:center}
.hotel-closing .eyebrow{color:var(--green)}
.hotel-closing p:last-child{font-size:17px;margin:25px auto 0;max-width:600px}

@media(max-width:900px){
.guide-grid{grid-template-columns:1fr 1fr}
.hotel-item,.hotel-item.reverse{grid-template-columns:1fr}
.hotel-item.reverse .hotel-image{order:0}
.hotel-image{min-height:380px}
.hotel-copy{padding:50px 35px}
.region-heading{grid-template-columns:1fr}
}
@media(max-width:600px){
.page-hero{min-height:540px;padding:125px 0 75px}
.page-hero h1{font-size:clamp(44px,14vw,65px)}
.page-hero p:last-child{font-size:16px}
.page-intro{padding:80px 0 55px}
.guide-grid{grid-template-columns:1fr;padding-bottom:80px}
.guide-card{min-height:280px}
.hotel-image{min-height:300px}
.hotel-copy{padding:40px 26px}
.favorites-list{padding-bottom:80px}
.region-group{padding:42px 0}
.favorite-grid{grid-template-columns:1fr}
.favorite-card{min-height:185px;padding:28px 24px}
.hotel-closing,.green-note{padding:80px 0}
}