:root{
  --arge-green:#37B54A;
  --arge-green-dark:#2e9a3d;
  --arge-grey:#C4C4C4;
  --arge-grey-dark:#777;
  --arge-grey-bg:#f5f5f5;
}

.arge-tabs{ 
  margin:24px 0px 22px 0px;
}

.arge-tabs .tabs-head{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.arge-tabs .tab{
  border:1px solid var(--arge-grey);
  background:#e9e9e9;
  color:#111;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  position:relative;
  line-height:1.2;
  transition: transform .06s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
}


/* Fokus für Tastaturbedienung */
.arge-tabs .tab:focus{
}

/* Symbol vor dem Label – Font Awesome */
.arge-tabs .tab .tab-label{
  display:inline-block;
  position:relative;
}

.arge-tabs .tab.is-active{
  background: var(--arge-green-dark);
  color:#fff;
  border-color: var(--arge-green-dark);
}

/* ---------- Inhaltspanel ---------- */

.arge-tabs .tabs-panel{
  margin-top:12px;
  background:#fff;
  border:1px solid var(--arge-grey);
  border-radius:12px;
  padding:14px;
}

.arge-tabs .tab-content p{
  margin: 0.8em 0 0.2em 0;
}
.arge-tabs .tab-content p:first-child{
  margin-top: 0.2em;
}

.arge-tabs .tab-content p:last-child{
  margin-bottom: 0;
}

/* ---------- Feinschliff (aus Basis) ---------- */

.arge-tabs div.tabs-head button{
  border-radius:12px;
  padding:10px 14px;
}

.arge-tabs div.tabs-head button{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  border-bottom:6px solid #FFFFFF;
}

.arge-tabs div.tabs-panel{
  margin-top:0;
  border-top-left-radius:0;
  border:1px solid var(--arge-green-dark);
}

/* ---------- Responsive: Mobile Darstellung (Tabs untereinander, 100%) ---------- */

@media (max-width: 782px){
  .arge-tabs .tabs-head{
    display:block;
    gap:0;
  }

  .arge-tabs .tab{
    display:block;
    width:100%;
    border-radius:0;                        /* eckig */
    background: var(--arge-grey-bg);        /* hellgrauer Hintergrund */
    border:1px solid var(--arge-grey-dark); /* dunkelgraue Umrandung */
    margin-bottom:0px;
    text-align:left;
    box-shadow:none;
    transform:none;
  }

.arge-tabs .tab .tab-label{
    padding-left:25px;
}

.arge-tabs div.tabs-panel{
  border-top-right-radius:0;
}

/* FA5/FA6 Free: Dokument-Icon \f15b; nutzt bold/solid Schnitt */
.arge-tabs .tab .tab-label::before{
  content:"\f07b";
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free",sans-serif;
  font-weight: 900;                /* Solid */
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  position:absolute;
  left:0;
  top:0;
  line-height:1.2;
  color: currentColor;
}

.arge-tabs .tab.is-active .tab-label::before{
  content:"\f07c";
}

.arge-tabs div.tabs-head button{
  border-bottom:0px;
}

  .arge-tabs .tab:hover{
    transform:none;
  }

  .arge-tabs .tab.is-active{
    background: var(--arge-green-dark);
    border-color: var(--arge-green-dark);
    color:#fff;
  }

  /* Panel sauber anschließen */
  .arge-tabs .tabs-panel{
    border-top-left-radius:0;
    margin-top:0;
  }

  .arge-tabs div.tabs-head button:not(:first-child){
  border-top-left-radius:0;
  border-top-right-radius:0;
  }


}

/* ---------- Motion-Respect ---------- */
@media (prefers-reduced-motion: reduce){
  .arge-tabs .tab{
    transition: none;
  }
}