/* ================================================================
   pwe-groups.css  -  Hover-Rahmen fuer native PageFrontEdit
   edit-Regionen
   ================================================================
   ABLAGEORT: /site/templates/styles/pwe-groups.css

   .pwe-group ist UNSERE EIGENE Klasse, die wir selbst auf die
   jeweiligen Elemente setzen (siehe _header.php, _hero.php).
   PageFrontEdit selbst aendert nur den Mauszeiger, zeichnet aber
   keinen Rahmen - das holt diese Datei nach.

   Das "edit"-Attribut wird von PageFrontEdit aus der finalen
   Ausgabe entfernt - unsere class bleibt aber erhalten.
   ================================================================ */

.pwe-group{
  position:relative;
  outline:2px dashed transparent;
  outline-offset:4px;
  border-radius:2px;
  cursor:pointer;
  /* BEWUSST KEINE transition-Eigenschaft hier! CSS "transition" ist
     nicht additiv - wuerde diese Klasse selbst eine transition
     setzen, wuerde sie bei JEDEM Element, das zusaetzlich eine
     eigene transition definiert (z.B. .hero-textbox, .feat,
     .feat-sm fuer den Hover-Lift-Effekt), deren transition
     komplett ersetzen statt ergaenzen - je nach Ladereihenfolge der
     Stylesheets. Genau das fuehrte zum Hero-Textbox-Ruckel-Bug.
     Der Rahmen erscheint dadurch beim Hover ohne eigene Animation -
     kaum wahrnehmbar, verhindert aber diese Fehlerklasse dauerhaft
     fuer alle aktuellen und kuenftigen pwe-group-Elemente. */
}

.pwe-group::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  background:rgba(77,163,255,.10);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;   /* eigenes Pseudo-Element, kein Konflikt */
}
.pwe-group:hover::before{opacity:1;}
.pwe-group:hover{outline-color:#4DA3FF;}

/* Zwei Klassen sind spezifischer als eine (.hero-textbox.pwe-group
   vs. .pwe-group) und gewinnen unabhaengig von der Ladereihenfolge
   der Stylesheets - dadurch bleibt position:absolute bei bereits
   absolut positionierten Elementen wie .hero-textbox erhalten. */
.hero-textbox.pwe-group{position:absolute;}

/* Kleines Label beim Hovern. Individueller Text ueber
   data-pwe-label="..." auf dem Element, sonst genereischer Text. */
.pwe-group::after{
  content:attr(data-pwe-label);
  position:absolute;
  top:-11px;left:0;transform:translateY(-100%);
  background:#4DA3FF;color:#fff;
  font-family:system-ui,sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.02em;
  padding:3px 8px;border-radius:3px;white-space:nowrap;
  opacity:0;pointer-events:none;z-index:20;
  transition:opacity .18s ease;
}
.pwe-group:not([data-pwe-label])::after{
  content:"Doppelklick zum Bearbeiten";
}
.pwe-group:hover::after{opacity:1;}

/* ----------------------------------------------------------------
   .pwe-edit-btn - EINHEITLICHER Bearbeiten/Verwalten-Button fuer
   ALLE Sektionen mit einem separaten Editier-Button (Hero,
   Fruehstueck, Happy Hour, Promo-Slider, Aktionskarten, ...).
   Ersetzt die bisher verstreuten Einzel-Definitionen (.feat-edit-btn,
   .aktion-manage-btn) - eine Stelle, ein Style, eine Position.

   Braucht ein Eltern-Element mit position:relative (bei den
   meisten Sektionen ohnehin schon vorhanden).
   ---------------------------------------------------------------- */
.pwe-edit-btn{
  position:absolute;
  top:15px;right:15px;z-index:10;
  background:rgba(41,46,58,.6);
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
  border-radius:20px;
  font-family:system-ui,-apple-system,'Barlow',sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.02em;
  padding:7px 14px;
  transition:background .2s ease,border-color .2s ease;
}
.pwe-edit-btn:hover{background:#4DA3FF;border-color:#4DA3FF;}

/* ----------------------------------------------------------------
   .pwe-menu-popover - kleines Options-Menue, das pwe-menu.js
   dynamisch per JS in den Body einfuegt (siehe pwe-slide-menu.js).
   Fuer Faelle, wo ein einzelner Doppelklick nicht ausreicht (z.B.
   ein Slide mit mehreren moeglichen Aktionen: Bearbeiten/Loeschen/
   Neu erstellen) - baut auf demselben simulierten Doppelklick auf
   PageFrontEdit auf, bietet aber vorher eine kleine Auswahl an.
   ---------------------------------------------------------------- */
.pwe-menu-popover{
  position:absolute;z-index:9999;
  background:#292E3A;color:#fff;
  border-radius:8px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  padding:6px;min-width:200px;
  opacity:0;transform:translateY(-6px) scale(.96);
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
  font-family:system-ui,-apple-system,'Barlow',sans-serif;
}
.pwe-menu-popover.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.pwe-menu-title{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  color:rgba(255,255,255,.55);padding:8px 10px 4px;
}
.pwe-menu-popover button{
  display:block;width:100%;text-align:left;
  background:none;border:none;color:#fff;
  font-size:13.5px;padding:9px 10px;border-radius:5px;
  cursor:pointer;transition:background .15s ease;
}
.pwe-menu-popover button:hover{background:rgba(255,255,255,.1);}
.pwe-menu-popover button[data-action="delete"]:hover{background:rgba(178,59,59,.35);}