/* =========================================================
   Herzenssache – Feedback Sterne UX (Elementor Form Enhancer)
   Ziel:
   - Sterne immer in EINER Reihe (Desktop/Tablet/Mobile)
   - Sterne: normal #fdef8d, hover/active #f7d25d
   - Active bleibt sichtbar, und alle Sterne davor auch dunkelgelb (JS setzt .is-active)
   - Kein Rahmen um Sterne
   - Textarea links (75%) + Submit rechts (25%) auf gleicher Höhe (Desktop)
   - Mobile: Button unter Textarea
   Scope: nur Formulare mit .hs-feedback-form
   ========================================================= */

/* --- Form: keine Box, volle Breite --- */
.hs-feedback-form{
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Labels: kompakt, klar */
.hs-feedback-form .elementor-field-label{
  font-weight: 600;
  margin-bottom: 6px;
}

/* =========================================================
   RADIO (Elementor) visuell verstecken, aber im DOM lassen
   => Pflichtfeld/Validation bleibt stabil
   ========================================================= */
.hs-feedback-form input[type="radio"]{
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Die sichtbare 1–5 Liste (Subgroup) komplett screenreader-only */
.hs-feedback-form .elementor-field-type-radio .elementor-field-subgroup{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* =========================================================
   Sterne-UI: IMMER 1 Reihe, responsiv kleiner
   - Bei extrem schmalen Geräten: horizontal scroll statt Umbruch
   ========================================================= */
.hs-stars{
  display: flex;
  flex-wrap: nowrap;                /* ✅ niemals umbrechen */
  justify-content: center;
  align-items: flex-start;

gap: clamp(8px, 2.2vw, 22px);		/* ✅ responsive Abstände */
  width: 100%;
  max-width: 100%;
margin: 0 auto 10px;
  padding: 0 0 6px;                 /* etwas Platz für Scrollbar */

  overflow-x: auto;                 /* ✅ fallback statt wrap */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Optional: scrollbar dezenter (Chromium/Webkit) */
.hs-stars::-webkit-scrollbar{ height: 6px; }
.hs-stars::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.12); border-radius: 6px; }
.hs-stars::-webkit-scrollbar-track{ background: transparent; }

/* Button-Reset: keine Theme-Kacheln, keine Rahmen */
.hs-star{
  appearance: none;
  -webkit-appearance: none;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;

  cursor: pointer;
  text-align: center;

  /* Sternfarbe (normal) */
  color: #fdef8d !important;
  fill:  #fdef8d !important;

  transition: transform .12s ease, color .12s ease, fill .12s ease;

  flex: 0 0 auto;                   /* ✅ bleibt in einer Reihe */
  min-width: clamp(54px, 13vw, 120px); /* ✅ genug Platz für Label */
}

/* Icon + Label */
.hs-star .hs-icon{
  display: block;
  font-size: clamp(34px, 7vw, 56px); /* ✅ responsive Stern-Größe */
  line-height: 1;
  color: inherit !important;
  fill:  inherit !important;
}

.hs-star .hs-label{
  display: block;
  margin-top: 6px;
  font-size: clamp(10px, 2.2vw, 12px);
  line-height: 1.15;
  color: #58585a;
  white-space: nowrap;              /* ✅ Labels bleiben lesbar, nicht zusammenkleben */
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Hover: NUR der Stern wird dunkler */
.hs-star:hover{
  transform: scale(1.05);
}
.hs-star:hover .hs-icon{
  color: #f7d25d !important;
  fill:  #f7d25d !important;
}

/* Active: Stern (und alle davor) bleibt dunkelgelb */
.hs-star.is-active{
  color: #f7d25d !important;
  fill:  #f7d25d !important;
}
.hs-star.is-active .hs-icon{
  color: #f7d25d !important;
  fill:  #f7d25d !important;
}

/* Keine Rahmen/Outlines um Sterne */
.hs-star:focus,
.hs-star:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* =========================================================
   Textarea + Button in 2-Spalten-Row (Desktop)
   (Wrapper wird per JS gesetzt: .hs-feedback-row)
   ========================================================= */
.hs-feedback-form .hs-feedback-row{
  display: grid;
  grid-template-columns: 3fr 1fr;   /* 75/25 */
  gap: 16px;
  align-items: end;
  margin-top: 6px;

  width: 100%;
  max-width: 100%;
}

/* Field-Groups dürfen die Grid-Breite nicht begrenzen */
.hs-feedback-form .hs-feedback-row > .elementor-field-group{
  width: 100%;
  max-width: 100%;
}

/* Textarea */
.hs-feedback-form .hs-feedback-row textarea{
  width: 100%;
  max-width: 100%;
  min-height: 40px;
  resize: vertical;
}

/* Button */
.hs-feedback-form .hs-feedback-row button[type="submit"]{
  width: 100%;
  height: 40px;
  margin: 0 !important;
  white-space: nowrap;
}

/* DSGVO kompakt */
.hs-feedback-form .elementor-field-type-acceptance{
  margin-top: 4px;
  font-size: 0.9rem;
}

/* Erfolgsmeldung: neutral */
.hs-feedback-form .elementor-message-success{
  margin-top: 10px;
  padding: 10px 12px;
  background: transparent;
  border-left: 4px solid #f7d25d;
}

/* =========================================================
   Tablet & Mobile: bessere Darstellung
   - Tablet: alle 5 Sterne sichtbar (kein horizontal scroll)
   - Tablet/Mobile: Button unter Textarea
   ========================================================= */
@media (max-width: 1024px){

  /* Textarea + Button untereinander (Tablet + Mobile) */
  .hs-feedback-form .hs-feedback-row{
    grid-template-columns: 1fr;
  }

  /* Sterne: alle 5 sichtbar ohne Scroll */
  .hs-stars{
    overflow-x: hidden;            /* statt scroll -> alles muss sichtbar sein */
    padding-bottom: 0;             /* kein scrollbar-abstand */
    justify-content: space-between;/* verteilt 5 Sterne über die Breite */
    gap: 10px;
    margin: 0 auto 10px;           /* auch hier näher an die Überschrift */
  }

  .hs-star{
    min-width: 0 !important;       /* verhindert "zu breite" Stern-Items */
  }

  .hs-star .hs-icon{
    font-size: 44px;               /* kleiner auf Tablet */
  }

  .hs-star .hs-label{
    font-size: 10px;
    letter-spacing: .03em;
  }
}

/* Mobile: noch kompakter */
@media (max-width: 640px){
  .hs-stars{
    gap: 8px;
  }
  .hs-star .hs-icon{
    font-size: 40px;
  }
  .hs-star .hs-label{
    font-size: 9px;
  }
}