/* ================================================================
   features-styles.css  -  Fruehstueck, Promo-Slider, Happy Hour,
   Notice-Bar
   ================================================================
   ABLAGEORT: /site/templates/styles/features-styles.css
   ================================================================ */

.features{
  max-width:1180px;margin:-64px auto 0;padding:0;position:relative;z-index:20;
  display:grid;grid-template-columns:1.6fr 1fr;gap:20px;
}

.feat{
  position:relative;overflow:hidden;border-radius:2px;text-align:left;width:100%;
  box-shadow:var(--shadow-1);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.feat:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);}

.feat-main{
  min-height:300px;position:relative;
  background:#3B4152;
  display:flex;flex-direction:column;justify-content:flex-end;color:#fff;
  padding:36px;
}
.feat-main .ph-flat{position:absolute;inset:0;background:#3B4152;border:none;}
.feat-main::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(41,46,58,0) 30%,rgba(41,46,58,.92) 100%);}
.feat-main .badge-circle{
  position:absolute;top:-22px;right:26px;z-index:5;
  width:118px;height:118px;border-radius:50%;
  background:#fff;color:var(--navy);
  display:flex;align-items:center;justify-content:center;text-align:center;
  box-shadow:var(--shadow-2);
  transform:rotate(-6deg);
}
.feat-main .badge-circle span{font-family:'Caveat',cursive;font-weight:600;font-size:19px;line-height:1.15;color:var(--accent-deep);}
.feat-main .inner{position:relative;z-index:4;}
.feat-main .script{font-size:24px;color:var(--accent);display:block;}
.feat-main h3{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;font-size:38px;letter-spacing:.01em;margin-top:2px;}
.feat-main p{font-size:15px;color:#D5D8DF;max-width:380px;margin:12px 0 20px;line-height:1.6;font-weight:300;}
.feat-main .times{display:flex;gap:0;margin-bottom:22px;font-size:14px;color:#C6CAD4;border-top:1px dotted rgba(255,255,255,.25);padding-top:14px;max-width:380px;}
.feat-main .times div{flex:1;}
.feat-main .times b{display:block;color:var(--accent);font-family:'Oswald',sans-serif;font-weight:600;font-size:16px;letter-spacing:.02em;margin-top:3px;}

.feat-side{display:grid;grid-template-rows:1fr 1fr;gap:20px;}
.feat-sm{
  position:relative;overflow:hidden;border-radius:2px;padding:24px;min-height:140px;
  display:flex;flex-direction:column;justify-content:flex-end;text-align:left;width:100%;
  box-shadow:var(--shadow-1);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.feat-sm:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);}
.feat-sm .ph-flat{position:absolute;inset:0;border:none;}
.feat-sm .feat-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.feat-sm.happy{height:195px;}

.promo-slider{position:relative;padding:0;overflow:hidden;}
.promo-slide{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:24px;pointer-events:none;
  transform:translateX(100%);   /* wartet rechts ausserhalb der Box */
  transition:transform .6s var(--ease);
}
.promo-slide.active{
  pointer-events:auto;
  transform:translateX(0);      /* zentriert, sichtbar */
}
/* Faehrt beim Wechsel nach links raus (gleichzeitig mit dem
   Reinfahren der naechsten Box von rechts - klassischer
   Carousel-Effekt, kein sequentielles Aus-/Einblenden mehr). */
.promo-slide.exit-left{
  transform:translateX(-100%);
}
.promo-slide .ph-flat{position:absolute;inset:0;border:none;}
.promo-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(41,46,58,0) 25%,rgba(41,46,58,.88) 100%);}
.promo-slide .arrow{position:absolute;top:20px;right:20px;z-index:3;font-size:18px;color:#fff;transition:transform .4s var(--ease);}
.promo-slide:hover .arrow{transform:translate(4px,-4px);}
.promo-slide h4{position:relative;z-index:3;font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;font-size:22px;color:#fff;}
.promo-slide .sub{position:relative;z-index:3;font-size:14px;margin-top:5px;color:#fff;display:block;}
.promo-dots{position:absolute;bottom:16px;right:20px;z-index:4;display:flex;gap:6px;}
.promo-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);transition:all .3s var(--ease);}
.promo-dots span.active{background:var(--accent);width:16px;border-radius:4px;}
.promo-slide.p1 .ph-flat{background:linear-gradient(135deg,var(--accent),var(--accent-deep));}
.promo-slide.p2 .ph-flat{background:linear-gradient(135deg,#DCB47F,var(--accent-deep));}
.promo-slide.p3 .ph-flat{background:linear-gradient(135deg,var(--accent),#C08A4E);}

.feat-sm.happy::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,36,48,.2) 0%,rgba(31,36,48,.88) 100%);}
.feat-sm h4{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;font-size:22px;position:relative;z-index:3;color:#fff;}
.feat-sm .sub{font-size:17px;position:relative;z-index:3;margin-top:5px;color:rgba(255,255,255,.8);}
.feat-sm.happy .sub{color:var(--accent);}
/* ---------- Happy-Hour-Slider ---------- */
.hh-slider{padding:0;overflow:hidden;}
.hh-slide{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease);
  padding:22px;display:flex;flex-direction:column;justify-content:flex-end;
}
.hh-slide.active{opacity:1;pointer-events:auto;}
.hh-slide .feat-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
.hh-slide::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(31,36,48,.2) 0%,rgba(31,36,48,.88) 100%);}
.hh-slide h4,.hh-slide .sub,.hh-slide .hh-preis,.hh-slide .arrow,.hh-slide .hh-badge-jetzt{position:relative;z-index:3;}
.hh-slide h4{
  font-size:17px;line-height:1.25;
  white-space:normal;overflow-wrap:break-word;
}
.hh-slide .sub{
  display:block;color:var(--accent);font-size:13px;line-height:1.5;margin-top:4px;
  white-space:normal;overflow-wrap:break-word;
}
.hh-preis{
  display:block;margin-top:6px;font-family:'Oswald',sans-serif;font-weight:600;
  font-size:12.5px;letter-spacing:.02em;color:#fff;
  white-space:normal;overflow-wrap:break-word;
}
.hh-badge-jetzt{
  position:absolute;top:20px;left:20px;
  background:#5FA867;color:#fff;font-family:'Oswald',sans-serif;font-weight:600;
  text-transform:uppercase;font-size:11px;letter-spacing:.04em;
  padding:4px 10px;border-radius:20px;
}

.hh-progress{
  position:absolute;left:14px;right:14px;top:12px;z-index:4;
  display:flex;gap:5px;
}
.hh-progress-seg{
  flex:1;height:3px;background:rgba(255,255,255,.35);border-radius:2px;overflow:hidden;
  padding:0;cursor:pointer;
}
.hh-progress-fill{display:block;height:100%;width:0;background:#fff;border-radius:2px;}

/* Details-Liste im gemeinsamen Modal (#modalBody) */
.hh-modal-text{font-size:15px;line-height:1.75;color:var(--text-muted);font-weight:300;margin:14px 0 0;}
.hh-modal-liste{margin:16px 0 0;padding-left:20px;}
.hh-modal-liste li{font-size:14.5px;line-height:1.7;color:var(--text-muted);margin-bottom:6px;}

.feat-sm .arrow{position:absolute;top:20px;right:20px;z-index:3;font-size:18px;color:#fff;transition:transform .4s var(--ease);}
.feat-sm:hover .arrow{transform:translate(4px,-4px);}

.notice-bar{
  grid-column:1 / -1;margin-top:0;
  background:var(--navy);color:#fff;
  padding:16px 26px;border-radius:2px;
  display:flex;align-items:center;gap:14px;
  font-size:14.5px;letter-spacing:.02em;box-shadow:var(--shadow-1);
}
.notice-bar b{color:var(--accent);}
.notice-icon{
  width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:0 0 auto;
}

/* Platzhalter-Zustand, wenn die Leiste ausgeschaltet ist - nur fuer
   eingeloggte Redakteure sichtbar (siehe _notice.php). Optisch
   deutlich als "inaktiv" erkennbar: gestrichelt, gedaempfte Farben. */
.notice-bar-off{
  background:transparent;
  border:1px dashed var(--line);
  color:var(--text-muted);
}
.notice-bar-off .notice-icon{
  background:transparent;border:1px dashed var(--text-muted);color:var(--text-muted);
}
.notice-bar-off b{color:var(--text);}

@media(max-width:980px){
  .features{grid-template-columns:1fr;margin-top:-40px;padding:0 30px;}
}

/* ----------------------------------------------------------------
   Separate Bearbeiten/Verwalten-Buttons - bewusst AUSSERHALB der
   eigentlichen klickbaren Flaeche (Button/Link mit eigenem
   onclick/href), damit PageFrontEdit deren Klicks nicht abfaengt.
   Siehe _fruehstueck.php / _feat-side.php fuer den Hintergrund.
   ---------------------------------------------------------------- */
/* ----------------------------------------------------------------
   Bearbeiten-Button: siehe .pwe-edit-btn in pwe-group.css
   (einheitlich fuer alle Sektionen, nicht mehr hier definiert).
   ---------------------------------------------------------------- */
.feat-main-wrap,
.feat-sm-wrap{position:relative;}

/* ---------------- Monochrom-Umschalter ----------------
   .pw-mono wird conditional per PHP gesetzt, wenn die jeweilige
   Checkbox (home_fruehstueck_monochrome, home_happyhour_monochrome,
   promo_monochrome) aktiv ist - auf ZWEI Elementen:
     1) der aeusseren Box (feat-main/feat-sm/promo-slide)
        -> dunkler Hintergrund, scheint durch das Bild durch
     2) dem Bild selbst (.feat-bg)
        -> Graustufen + 50% Transparenz
   Zusammen ergibt das ein insgesamt abgedunkeltes, entsaettigtes
   Bild statt eines ausgewaschenen, zu hellen Looks. */
.feat-main.pw-mono,
.feat-sm.pw-mono,
.promo-slide.pw-mono{
  background-color:var(--navy-deep);
}

.feat-bg.pw-mono{
  filter:grayscale(100%);
  opacity:.2;
  transition:filter .3s ease, opacity .3s ease;
}