/* ===== Variablen ===== */
:root{
  --icon-w: 50px;              /* Icon-Spaltenbreite + Buttonhöhe */
  --label-w: 185px;            /* Breite der Textfläche (ausfahrend) */
  --gap: 10px;
  --radius: 0px;
  --shadow: 0 8px 22px rgba(0,0,0,.28);

  --c-text: #fff;
  --c-black: #000;
  --c-dark-grad:  linear-gradient(180deg, #191919 0%, #000 100%);
  --c-primary-grad: radial-gradient(367.65% 311.1% at 6% 50%, #FFB300 11.36%, #E57A00 22.97%, #FFB300 38.75%);
  --c-accent: #FFB300;         /* Wunschfarbe beim Hover für Icon-Fläche */
}

/* ===== Container ===== */
.sidefab{
  position: fixed;
  right: 0px; 
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: end;
}
.sidefab__list{
  list-style: none; 
  margin: 0; 
  padding: 0;
 display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.sidefab__item{ position: relative; }

/* ===== Button-Grundaufbau ===== */
.fab-btn{
  width: calc(var(--icon-w) + var(--label-w));
  height: var(--icon-w);
  display: flex;
  align-items: stretch;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  color: var(--c-text);
  text-decoration: none;
  background: var(--c-dark-grad);

  /* Nur Icon sichtbar: kompletter Button nach rechts versetzt */
  transform: translateX(var(--label-w));
  transition: transform .28s ease, background .28s ease;
}

/* Desktop: beim Hover/Focus fährt der ganze Button nach links ein */
@media (min-width: 960px){
  .fab-btn:hover,
  .fab-btn:focus-visible{
    transform: translateX(0);
  }
}

/* Icon-Spalte links */
.fab-btn__icon{
  width: var(--icon-w); 
  min-width: var(--icon-w);
  height: var(--icon-w);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-dark-grad);
}

/* Textfläche rechts */
.fab-btn__label{
  width: var(--label-w);
  display: flex;
  align-items: center;
  padding-inline: 14px;
  font-family: Ubuntu;
font-size: 20px;
font-style: normal;
font-weight: 700;
  background: var(--c-dark-grad);
  color: var(--c-text);
}

/* SVGs */
.fab-icon{
  /*width: 24px; 
  height: 24px;*/
  fill: currentColor;
}

/* ——— NUR KONTAKT-BUTTON (Primary) ———
   Idle:
     - Icon: immer Verlauf + schwarze Icon-Farbe
     - Label: dunkel + weiße Schrift
   Hover/Fokus (≥960px):
     - Verlauf liegt auf GESAMTEM Button (Parent)
     - Icon & Label: Hintergrund transparent, Text/Icons schwarz
*/
.fab-btn--primary{ color: #111; }
.fab-btn--primary .fab-btn__icon{
  background: var(--c-primary-grad);  /* Verlauf dauerhaft auf dem Icon */
  color: #111;
}
.fab-btn--primary .fab-btn__label{
  background: linear-gradient(90deg,rgba(255, 179, 0, 1) 40%, rgba(229, 122, 0, 1) 77%, rgba(255, 179, 0, 1) 96%);     /* Label im Idle dunkel */
  color: #000;
}
@media (min-width: 960px){
  .fab-btn--primary:hover,
  .fab-btn--primary:focus-visible{
    background: linear-gradient(90deg,rgba(255, 179, 0, 1) 40%, rgba(229, 122, 0, 1) 77%, rgba(255, 179, 0, 1) 96%);     /* Verlauf auf GESAMTEM Button */
  }
  .fab-btn--primary:hover .fab-btn__icon,
  .fab-btn--primary:hover .fab-btn__label,
  .fab-btn--primary:focus-visible .fab-btn__icon,
  .fab-btn--primary:focus-visible .fab-btn__label{
    background: transparent;               /* Parent-Verlauf sichtbar machen */
    color: #111;                           /* Schwarz, wie gewünscht */
  }
}

/* ——— KEINE globalen Farb-/Verlauf-Änderungen für andere Buttons auf Hover ——— */
/* (Nur die Position fährt ein; keine zusätzlichen :hover-Farben definiert.) */

/* ===== Toggle (mobil) ===== */
.sidefab__toggle{
   display: none;
  width: var(--icon-w);
  height: var(--icon-w);                /* gleiche Größe wie Icon-Buttons */

  display: flex;                        /* wird erst unter 960px sichtbar */
  align-items: center;
  justify-content: center;

  border: 0; 
  border-radius: var(--radius);
  background: var(--c-dark-grad);
  color: var(--c-text);
  box-shadow: var(--shadow);
  cursor: pointer;
  visibility: hidden;                   /* per Media Query sichtbar */
  padding: 0;

}
.chevron{ transition: transform .22s ease; }

/* ===== Mobile: < 960 px ===== */
@media (max-width: 959.98px){
  .sidefab{ gap: var(--gap); }
  .sidefab__list{ gap: 0; }             /* Toggle direkt unter Kontakt */
  .sidefab__toggle{ 
    visibility: visible;
   }

  /* einklappbare Items starten komplett „zusammengefaltet“ */
  .sidefab__item--collapsible{
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height .26s ease, opacity .26s ease, transform .26s ease;
    pointer-events: none;
  }
  /* sichtbar, wenn geöffnet */
  .sidefab.is-open .sidefab__item--collapsible{
    max-height: var(--icon-w);
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    margin-top: var(--gap);
  }

  /* Mobil bleibt Icon-only (kein Hover) */
  .fab-btn{ transform: translateX(var(--label-w)); }

  /* Pfeil dreht bei „auf“ (zeigt hoch) */
  .sidefab.is-open .chevron{ transform: rotate(180deg); }
}

/* Tastatur-Fokus + Bewegungen reduzieren */
.fab-btn:focus-visible, 
.sidefab__toggle:focus-visible{
  outline: 2px solid #ffd36a; 
  outline-offset: 2px; 
  border-radius: 10px;
}
@media (prefers-reduced-motion: reduce){
  .fab-btn, 
  .sidefab__item--collapsible, 
  .chevron{ transition: none !important; }
}

/* --- Click-through für nicht sichtbare Bereiche --- */

/* Der gesamte Container lässt Ereignisse durch, außer dort,
   wo wir sie gezielt wieder aktivieren (Icon/Toggle/hoverte Buttons). */
.sidefab,
.sidefab__list{
  pointer-events: none;
}

/* Standard: der Link selbst reagiert nicht (damit seine "unsichtbare" Breite nicht blockiert) */
.fab-btn{
  pointer-events: none;
}

/* Sichtbare Icon-Spalte bleibt klickbar (löst den Link aus, da sie im <a> liegt) */
.fab-btn__icon{
  pointer-events: auto;
}

/* Mobile Toggle muss natürlich klickbar sein */
.sidefab__toggle{
  pointer-events: auto;
}

/* Ab 960px: Sobald der Button "aktiv" ist (Hover/Focus),
   darf der gesamte Button inkl. Label klicken. */
@media (min-width: 960px){
  .fab-btn:hover,
  .fab-btn:focus-within{
    pointer-events: auto;           /* nun ist der ganze <a> klickbar */
  }
  .fab-btn:hover .fab-btn__label,
  .fab-btn:focus-within .fab-btn__label{
    pointer-events: auto;           /* Label-Zone reagiert jetzt ebenfalls */
  }
}

/* Mobile (<960px):
   - Eingeklappte Items sind eh mit max-height:0 + pointer-events:none (wie zuvor)
   - Beim Ausklappen aktivieren wir per bestehender Regel pointer-events:auto */
@media (max-width: 959.98px){
  .sidefab.is-open .sidefab__item--collapsible{
    pointer-events: auto;           /* bleibt wie gehabt */
  }
}