/* =========================================================================
   Startseite – Top-Angebote als Werbe-Kacheln (template-parts/home-offers.php)
   Dunkles Band hebt die Angebote vom sandfarbenen Umfeld ab; jede Kachel
   trägt die Farbe ihres Labels (rot = bester Preis, gold, grün = Marina Hotel).
   ========================================================================= */
.ho{
  --ho-rot:#B3261E; --ho-gold:#B08D57; --ho-gruen:#3E7A4A;
  background:
    radial-gradient(1200px 400px at 85% -10%, rgba(201,168,106,.18), transparent 60%),
    #2A2622;
  color:#fff; padding:64px 0 72px; position:relative; overflow:hidden;
}
.ho-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.ho-eyebrow{display:block;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-l,#C9A86A);font-weight:600;margin-bottom:8px}
.ho-head h2{color:#fff;font-size:clamp(2rem,3.4vw,2.9rem);margin:0}
.ho-all{color:#F1E8DA;text-decoration:none;font-weight:600;font-size:.92rem;letter-spacing:.02em;white-space:nowrap;
  border-bottom:1px solid rgba(241,232,218,.35);padding-bottom:3px;transition:color .2s,border-color .2s}
.ho-all:hover{color:#fff;border-color:#fff}

.ho-track{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

/* ---- Kachel ---- */
.ho-card{position:relative;isolation:isolate;min-height:470px;border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:0 24px 50px -28px rgba(0,0,0,.75);background:#3a332d}
.ho-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transform:scale(1.02);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.ho-shade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,17,14,.10) 0%,rgba(20,17,14,.18) 38%,rgba(20,17,14,.82) 72%,rgba(20,17,14,.94) 100%)}
.ho-card:hover .ho-img{transform:scale(1.08)}

/* farbige Akzentkante oben – wie ein Banner-Rahmen */
.ho-card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--ho-c);z-index:2}
.ho-card--rot{--ho-c:var(--ho-rot)} .ho-card--gold{--ho-c:var(--ho-gold)} .ho-card--gruen{--ho-c:var(--ho-gruen)}

.ho-pill{position:absolute;top:22px;left:22px;z-index:2;background:var(--ho-c);color:#fff;
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:7px 13px;border-radius:999px;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}

/* Störer: runder Werbe-Aufkleber, leicht gedreht */
.ho-stoerer{position:absolute;top:16px;right:16px;z-index:2;width:104px;height:104px;border-radius:50%;
  background:var(--ho-c);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  transform:rotate(-9deg);box-shadow:0 10px 24px -8px rgba(0,0,0,.55);
  outline:2px dashed rgba(255,255,255,.55);outline-offset:-8px;transition:transform .35s cubic-bezier(.3,1.6,.5,1);line-height:1.05;padding:8px}
.ho-stoerer b{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.55rem;font-weight:700}
.ho-stoerer small{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
.ho-card:hover .ho-stoerer{transform:rotate(-2deg) scale(1.06)}

.ho-body{padding:0 26px 26px;position:relative;z-index:1}
.ho-body h3{color:#fff;font-size:clamp(1.65rem,2.2vw,2rem);margin:0 0 6px;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.ho-sub{color:#E9D7B4;font-size:.84rem;font-weight:600;margin-bottom:10px}
.ho-text{color:rgba(255,255,255,.86);font-size:.9rem;line-height:1.55;margin:0 0 18px}

.ho-cta{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#FFFEFB;color:#2A2622;text-decoration:none;font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 18px;border-radius:12px;transition:background .2s,color .2s}
.ho-arrow{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  background:var(--ho-c);color:#fff;font-size:.95rem;transition:transform .25s}
.ho-card:hover .ho-cta{background:var(--ho-c);color:#fff}
.ho-card:hover .ho-arrow{background:#fff;color:var(--ho-c);transform:translateX(4px)}

/* ganze Kachel klickbar, CTA bleibt eigener Link darüber */
.ho-stretch{position:absolute;inset:0;z-index:1}
.ho-card .ho-cta{z-index:3}

/* ---- Tablet ---- */
@media (max-width:1024px){
  .ho-card{min-height:430px}
  .ho-stoerer{width:92px;height:92px}
  .ho-stoerer b{font-size:1.35rem}
}

/* ---- Handy: wischbare Reihe, nächste Kachel blitzt an ---- */
@media (max-width:760px){
  .ho{padding:48px 0 54px}
  .ho-head{align-items:flex-start;flex-direction:column;gap:10px;margin-bottom:20px}
  .ho-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 -16px;padding:4px 16px 12px;scrollbar-width:none}
  .ho-track::-webkit-scrollbar{display:none}
  .ho-card{flex:0 0 84%;scroll-snap-align:start;min-height:440px}
  .ho-body{padding:0 20px 20px}
}

@media (prefers-reduced-motion:reduce){
  .ho-img,.ho-stoerer,.ho-arrow{transition:none}
  .ho-card:hover .ho-img{transform:scale(1.02)}
}