/* =========================================================
   HOTELS · Themenseite
   Die Seite laeuft auf body.p-dest und benutzt dieselben
   Bausteine wie marokko.html und malediven.html:
   hero, intro-grid, reg, reg-tile, reg-panel, dots, fav,
   contact. Breite und Rhythmus kommen damit aus style.css.
   Hier stehen nur die drei Dinge, die es dort noch nicht gibt:
   die Haeuserreihe im Panel, der Platzhalterkasten und der
   Exkurs.
   ========================================================= */

/* ---- Platzhalter fuer Bild und Grafik ---- */
.ht-ph{width:100%;height:100%;display:block;
  background:linear-gradient(160deg,var(--tatami),#cfc4b2)}

/* ---- Gegenargument im Themenpanel ---- */
.p-dest .reg-panel .ht-gegen{margin-top:12px;padding-left:16px;
  border-left:1px solid var(--hinoki)}

/* ---- Fuenf Haeuser im Themenpanel ----
   Gleiches Format und gleiche Beschriftung wie die Themenkacheln
   darueber, damit die Seite nicht zwei Kartenarten zeigt. */
.ht-liste{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:22px}
.ht-karte{position:relative;border:0;padding:0;border-radius:6px;overflow:hidden;
  aspect-ratio:4/5;background:var(--tatami);cursor:pointer;display:block;width:100%;
  font-family:inherit;text-align:left}
.ht-karte img,.ht-karte .ht-ph{width:100%;height:100%;object-fit:cover;
  transition:transform .7s ease}
.ht-karte:hover img,.ht-karte:hover .ht-ph{transform:scale(1.05)}
/* Verlauf fuer die Lesbarkeit der Beschriftung. Liegt auf ::after,
   weil ::before die zustandsabhaengige Abdunklung traegt. Vorher
   standen beide auf ::before und der Verlauf war wirkungslos. */
.ht-karte::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(20,26,25,.82) 0%,rgba(20,26,25,.18) 48%,transparent 74%)}
.ht-karte .cap{position:absolute;inset:auto 0 0 0;padding:14px 15px;color:var(--washi);z-index:2}
.ht-karte .cap .claim{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  opacity:.8}
.ht-karte .cap .nm{display:block;font-size:14.5px;font-weight:400;margin-top:3px;line-height:1.25}
.ht-karte .nr{position:absolute;top:10px;left:12px;z-index:2;font-size:11px;color:var(--washi);
  opacity:.7;letter-spacing:.14em}

/* ---- Platzhalterkasten ---- */
.ht-blocker{border:1px dashed var(--line);border-radius:8px;
  padding:clamp(26px,3.4vw,40px);text-align:center;color:var(--bambus);
  background:rgba(199,168,124,.05);margin-top:20px}
.ht-blocker span{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--hinoki);margin-bottom:8px}
.ht-blocker p{font-size:15px;max-width:52ch;margin:0 auto}

/* ---- Wusstest du ----
   Nutzt know-grid, know-head, know-body und know-figure aus
   style.css, also exakt dieselbe Vorlage wie auf marokko.html
   und malediven.html. Bild damit 16/11.
   Nicht dunkel: Hero und Hoteltipp liegen bereits auf Dark,
   ein drittes schwarzes Band waere zu viel. Tatami setzt den
   Abschnitt genauso klar ab und bleibt hell. */
.ht-exkurs{background:var(--tatami);padding:clamp(44px,5.4vw,76px) 0}
.ht-exkurs .eyebrow{color:var(--bambus)}
.ht-exkurs .know-body .fine{font-size:12px;color:var(--bambus);opacity:.75;margin-top:16px}

/* ---- Tablet ---- */
@media(max-width:900px){
  /* Gleicher Bruchpunkt wie beim Themenraster in style.css:
     ab hier wird gewischt statt gerastert. */
  .ht-liste{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ht-liste::-webkit-scrollbar{display:none}
  .ht-karte{flex:0 0 62%;scroll-snap-align:center}
}

/* ---- Handy: Haeuserreihe als Wischer, gleich wie die Themenkacheln ---- */
@media(max-width:560px){
  .ht-karte{flex:0 0 78%}
  .ht-blocker{padding:24px 18px}
}

/* Hinweis unter dem Hoteltipp */
.ht-hinweis{margin-top:16px;font-size:13.5px;color:var(--bambus);max-width:60ch;
  padding-left:16px;border-left:1px solid var(--hinoki)}


/* ---- Haeuser-Kompass ----
   Der Kompass bringt seine eigene Gestaltung mit und liegt auf
   Washi. Er sitzt hier zwischen dem Themenblock auf Tatami und
   dem Hoteltipp auf Dark und bricht die dunkle Folge auf. */
.ht-kompass{padding:clamp(38px,4.6vw,64px) 0}
.ht-kompass-box{margin-top:22px;border:1px solid var(--line);border-radius:8px;
  overflow:hidden;background:var(--washi)}
.ht-kompass-box #kompass{border-radius:0;min-height:0}

/* Die Hoehen des Kompasses stehen in kompass-haeuser.css und sind dort
   nach Bildschirmbreite gestaffelt. Hier wird nichts ueberschrieben,
   sonst waeren die Handy-Regeln wieder wirkungslos. */
@media(max-width:560px){
  /* Der Kompass bringt eigene Innenabstaende mit. Zusammen mit dem
     Rand von .wrap blieben auf 390 Pixel nur rund 310 Pixel Inhalt.
     Darum laeuft der Kasten hier von Kante zu Kante. */
  .ht-kompass-box{margin-inline:-20px;border-left:0;border-right:0;border-radius:0}
}


/* ---- Abdunklung der Haeuserkacheln ----
   Gleiche Sprache und gleiche Staerke wie .reg-tile in style.css:
   50 Prozent dunkel, das gewaehlte Bild ist frei.
   Auf dem Handy ist das Haus in der Mitte des Wischers hell. */
.ht-karte::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(27,35,34,.5);opacity:1;transition:opacity .35s ease}
.ht-karte:hover::before{opacity:.45}

@media(min-width:901px){
  /* Auf dem Desktop stehen alle Haeuser nebeneinander, dort waere
     eine Abdunklung ohne Auswahl nur dunkel. */
  .ht-karte::before{opacity:.45}
  .ht-karte:hover::before{opacity:0}
}
@media(max-width:900px){
  .ht-karte.mitte::before{opacity:0}
  /* Punktezeile: .dots kommt aus style.css und wird dort ab 900
     im Abschnitt .reg eingeblendet. Hier nur der Abstand. */
  .ht-liste+.dots{margin-top:14px}
}